Merge pull request #3077 from udecode/fix/orderList

fix: ordered list

.changeset/rude-laws-stare.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-indent-list": patch
+---
+
+Fix ordered list regression.

apps/www/src/registry/default/example/playground-demo.tsx

@@ -123,7 +123,7 @@ import {
   FireMarker,
 } from '@/registry/default/plate-ui/indent-fire-marker-component';
 import {
-  IndentTodoLiComponent,
+  TodoLi,
   TodoMarker,
 } from '@/registry/default/plate-ui/indent-todo-marker-component';
 import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox';
@@ -242,14 +242,10 @@ export const usePlaygroundPlugins = ({
             enabled: id === 'indentlist' || !!enabled.listStyleType,
             options: {
               listStyleTypes: {
-                ['upper-roman']: {
-                  type: 'upper-roman',
-                  isNumbered: true,
-                },
                 todo: {
                   type: 'todo',
                   markerComponent: TodoMarker,
-                  liComponent: IndentTodoLiComponent,
+                  liComponent: TodoLi,
                 },
                 fire: {
                   type: 'fire',

apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx

@@ -1,10 +1,7 @@
 import { TIndentElement } from '@udecode/plate-indent';
-import {
-  LiComponentProps,
-  MarkerComponentProps,
-} from '@udecode/plate-indent-list';
+import { LiFC, MarkerFC } from '@udecode/plate-indent-list';
 
-export const FireMarker = (props: MarkerComponentProps) => {
+export const FireMarker: MarkerFC = (props) => {
   const { element } = props;
 
   return (
@@ -16,7 +13,8 @@ export const FireMarker = (props: MarkerComponentProps) => {
   );
 };
 
-export const FireLiComponent = (props: LiComponentProps) => {
+export const FireLiComponent: LiFC = (props) => {
   const { children } = props;
+
   return <span>{children}</span>;
 };

apps/www/src/registry/default/plate-ui/indent-todo-marker-component.tsx

@@ -1,14 +1,11 @@
 import { cn } from '@udecode/cn';
-import {
-  LiComponentProps,
-  MarkerComponentProps,
-} from '@udecode/plate-indent-list';
+import { LiFC, MarkerFC } from '@udecode/plate-indent-list';
 import { setNodes } from '@udecode/slate';
 import { findNodePath } from '@udecode/slate-react';
 
 import { Checkbox } from './checkbox';
 
-export const TodoMarker = (props: MarkerComponentProps) => {
+export const TodoMarker: MarkerFC = (props) => {
   const { editor, element } = props;
 
   const onChange = (v: boolean) => {
@@ -27,8 +24,9 @@ export const TodoMarker = (props: MarkerComponentProps) => {
   );
 };
 
-export const IndentTodoLiComponent = (props: LiComponentProps) => {
+export const TodoLi: LiFC = (props) => {
   const { element, children } = props;
+
   return (
     <span
       className={cn(

packages/indent-list/src/createIndentListPlugin.ts

@@ -4,6 +4,7 @@ import {
   getPluginType,
   isHtmlBlockElement,
   KEY_DESERIALIZE_HTML,
+  PlateRenderElementProps,
   postCleanHtml,
   TElement,
   traverseHtmlElements,
@@ -12,7 +13,7 @@ import {
 import { injectIndentListComponent } from './injectIndentListComponent';
 import { onKeyDownIndentList } from './onKeyDownIndentList';
 import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList';
-import { LiComponentProps, ListStyleType, MarkerComponentProps } from './types';
+import { ListStyleType } from './types';
 import { withIndentList } from './withIndentList';
 
 export const KEY_LIST_STYLE_TYPE = 'listStyleType';
@@ -21,6 +22,9 @@ export const KEY_LIST_RESTART = 'listRestart';
 export const KEY_LIST_CHECKED = 'checked';
 export const KEY_TODO_STYLE_TYPE = 'todo';
 
+export type MarkerFC = React.FC<Omit<PlateRenderElementProps, 'children'>>;
+export type LiFC = React.FC<PlateRenderElementProps>;
+
 export interface IndentListPlugin {
   getSiblingIndentListOptions?: GetSiblingIndentListOptions<TElement>;
 
@@ -33,9 +37,9 @@ export interface IndentListPlugin {
     string,
     {
       type: string;
-      markerComponent?: React.FC<MarkerComponentProps>;
-      liComponent?: React.FC<LiComponentProps>;
-      isNumbered?: boolean;
+      markerComponent?: MarkerFC;
+      liComponent?: LiFC;
+      isOrdered?: boolean;
     }
   >;
 }

packages/indent-list/src/injectIndentListComponent.tsx

@@ -11,11 +11,12 @@ import {
   KEY_LIST_START,
   KEY_LIST_STYLE_TYPE,
 } from './createIndentListPlugin';
+import { ULIST_STYLE_TYPES } from './types';
 
 export const injectIndentListComponent = (
-  props: InjectComponentProps
+  injectProps: InjectComponentProps
 ): InjectComponentReturnType => {
-  const { element } = props;
+  const { element } = injectProps;
 
   const listStyleType = element[KEY_LIST_STYLE_TYPE] as string;
   const listStart = element[KEY_LIST_START] as number;
@@ -29,35 +30,44 @@ export const injectIndentListComponent = (
       position: 'relative',
     };
 
-    return function Ul({ editor, children }) {
+    return function Component({ children, ...props }) {
+      const { editor } = props;
+
       const { listStyleTypes = {} } = getPluginOptions<IndentListPlugin>(
         editor,
         KEY_LIST_STYLE_TYPE
       );
 
-      const targetList = listStyleTypes[listStyleType] ?? {};
-      const isNumbered = targetList ? targetList.isNumbered : false;
+      let listOptions = listStyleTypes[listStyleType];
 
-      className = isNumbered
-        ? clsx(className, 'slate-list-number')
-        : clsx(className, 'slate-list-bullet');
+      let isOrdered = true;
 
-      const {
-        markerComponent = null,
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        liComponent = ({ children }: any) => <li>{children}</li>,
-      } = targetList;
+      if (listOptions) {
+        isOrdered = !!listOptions.isOrdered;
+      } else {
+        if (ULIST_STYLE_TYPES.includes(listStyleType as any)) {
+          isOrdered = false;
+        }
+        listOptions = {} as any;
+      }
+
+      className = isOrdered
+        ? clsx(className, 'slate-ol')
+        : clsx(className, 'slate-ul');
 
-      const Wrap = isNumbered ? 'ol' : 'ul';
+      const List = isOrdered ? 'ol' : 'ul';
+
+      const {
+        markerComponent: Marker = () => null,
+        liComponent: Li = (liProps) => <li>{liProps.children}</li>,
+      } = listOptions;
 
       return (
-        <Wrap style={style} className={className} start={listStart}>
-          {markerComponent && markerComponent({ editor, element })}
-          {liComponent({
-            children,
-            element,
-          })}
-        </Wrap>
+        <List style={style} className={className} start={listStart}>
+          <Marker {...props} />
+
+          <Li {...props}>{children}</Li>
+        </List>
       );
     };
   }

packages/indent-list/src/types.ts

@@ -1,83 +1,67 @@
-import { PlateEditor, TElement, Value } from '@udecode/plate-common';
-
 export enum ListStyleType {
-  // The marker is traditional Armenian numbering
-  Armenian = 'armenian',
-
-  // The marker is a circle
-  Circle = 'circle',
-
-  // The marker is plain ideographic numbers
-  CjkIdeographic = 'cjk-ideographic',
-
-  // The marker is a number. This is default for <ol>
   Decimal = 'decimal',
-
-  // The marker is a number with leading zeros (01, 02, 03, etc.)
   DecimalLeadingZero = 'decimal-leading-zero',
-
-  // The marker is a filled circle. This is default for <ul>
-  Disc = 'disc',
-
-  // The marker is traditional Georgian numbering
+  ArabicIndic = 'arabic-indic',
+  Armenian = 'armenian',
+  UpperArmenian = 'upper-armenian',
+  LowerArmenian = 'lower-armenian',
+  Bengali = 'bengali',
+  Cambodian = 'cambodian',
+  Khmer = 'khmer',
+  CjkDecimal = 'cjk-decimal',
+  Devanagari = 'devanagari',
   Georgian = 'georgian',
-
-  // The marker is traditional Hebrew numbering
+  Gujarati = 'gujarati',
+  Gurmukhi = 'gurmukhi',
   Hebrew = 'hebrew',
-
-  // The marker is traditional Hiragana numbering
+  Kannada = 'kannada',
+  Lao = 'lao',
+  Malayalam = 'malayalam',
+  Mongolian = 'mongolian',
+  Myanmar = 'myanmar',
+  Oriya = 'oriya',
+  Persian = 'persian',
+  LowerRoman = 'lower-roman',
+  UpperRoman = 'upper-roman',
+  Tamil = 'tamil',
+  Telugu = 'telugu',
+  Thai = 'thai',
+  Tibetan = 'tibetan',
+  LowerAlpha = 'lower-alpha',
+  LowerLatin = 'lower-latin',
+  UpperAlpha = 'upper-alpha',
+  UpperLatin = 'upper-latin',
+  LowerGreek = 'lower-greek',
   Hiragana = 'hiragana',
-
-  // The marker is traditional Hiragana iroha numbering
   HiraganaIroha = 'hiragana-iroha',
-
-  // The marker is traditional Katakana numbering
   Katakana = 'katakana',
-
-  // The marker is traditional Katakana iroha numbering
   KatakanaIroha = 'katakana-iroha',
-
-  // The marker is lower-alpha (a, b, c, d, e, etc.)
-  LowerAlpha = 'lower-alpha',
-
-  // The marker is lower-greek
-  LowerGreek = 'lower-greek',
-
-  // The marker is lower-latin (a, b, c, d, e, etc.)
-  LowerLatin = 'lower-latin',
-
-  // The marker is lower-roman (i, ii, iii, iv, v, etc.)
-  LowerRoman = 'lower-roman',
-
-  // No marker is shown
+  CjkEarthlyBranch = 'cjk-earthly-branch',
+  CjkHeavenlyStem = 'cjk-heavenly-stem',
+  JapaneseInformal = 'japanese-informal',
+  JapaneseFormal = 'japanese-formal',
+  KoreanHangulFormal = 'korean-hangul-formal',
+  KoreanHanjaInformal = 'korean-hanja-informal',
+  KoreanHanjaFormal = 'korean-hanja-formal',
+  SimpChineseInformal = 'simp-chinese-informal',
+  SimpChineseFormal = 'simp-chinese-formal',
+  TradChineseInformal = 'trad-chinese-informal',
+  TradChineseFormal = 'trad-chinese-formal',
+  EthiopicNumeric = 'ethiopic-numeric',
+  DisclosureOpen = 'disclosure-open',
+  DisclosureClosed = 'disclosure-closed',
   None = 'none',
-
-  // The marker is a square
+  Circle = 'circle',
+  Disc = 'disc',
   Square = 'square',
-
-  // The marker is upper-alpha (A, B, C, D, E, etc.)
-  UpperAlpha = 'upper-alpha',
-
-  // The marker is upper-latin (A, B, C, D, E, etc.)
-  UpperLatin = 'upper-latin',
-
-  // The marker is upper-roman (I, II, III, IV, V, etc.)
-  UpperRoman = 'upper-roman',
-
-  // Sets this property to its default value. Read about initial
   Initial = 'initial',
-
-  // Inherits this property from its parent element. Read about inherit
   Inherit = 'inherit',
 }
 
-export interface LiComponentProps {
-  element: TElement;
-  children: any;
-}
-
-export interface MarkerComponentProps {
-  onChange?: (checked: boolean) => void;
-  element: TElement;
-  editor: PlateEditor<Value>;
-}
+export const ULIST_STYLE_TYPES = [
+  ListStyleType.Disc,
+  ListStyleType.Circle,
+  ListStyleType.Square,
+  ListStyleType.DisclosureOpen,
+  ListStyleType.DisclosureClosed,
+] as const;