From 864d1b26f89f7b6cd0ded2ddab16015b9425dd8f Mon Sep 17 00:00:00 2001 From: felixfeng Date: Thu, 28 Mar 2024 10:31:18 +0800 Subject: [PATCH 1/4] fix: ordered list --- .changeset/rude-laws-stare.md | 5 +++++ apps/www/src/registry/default/example/playground-demo.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/rude-laws-stare.md diff --git a/.changeset/rude-laws-stare.md b/.changeset/rude-laws-stare.md new file mode 100644 index 0000000000..89d8542ddd --- /dev/null +++ b/.changeset/rude-laws-stare.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-indent-list": patch +--- + +Fix the order error in the ordered list. diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 07b62b30dd..d10902d862 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -246,6 +246,10 @@ export const usePlaygroundPlugins = ({ type: 'upper-roman', isNumbered: true, }, + ['decimal']: { + type: 'decimal', + isNumbered: true, + }, todo: { type: 'todo', markerComponent: TodoMarker, From dfdaf84b4cd24bc5fd4277b9cbb5659ec198bc97 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Thu, 28 Mar 2024 07:25:23 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../default/example/playground-demo.tsx | 12 +- .../plate-ui/indent-fire-marker-component.tsx | 10 +- .../plate-ui/indent-todo-marker-component.tsx | 10 +- .../indent-list/src/createIndentListPlugin.ts | 12 +- .../src/injectIndentListComponent.tsx | 51 +++++--- packages/indent-list/src/types.ts | 120 ++++++++---------- yarn.lock | 22 ++-- 7 files changed, 111 insertions(+), 126 deletions(-) diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index d10902d862..a71390a8d7 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/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,18 +242,10 @@ export const usePlaygroundPlugins = ({ enabled: id === 'indentlist' || !!enabled.listStyleType, options: { listStyleTypes: { - ['upper-roman']: { - type: 'upper-roman', - isNumbered: true, - }, - ['decimal']: { - type: 'decimal', - isNumbered: true, - }, todo: { type: 'todo', markerComponent: TodoMarker, - liComponent: IndentTodoLiComponent, + liComponent: TodoLi, }, fire: { type: 'fire', diff --git a/apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx b/apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx index 6924aeae9d..18fd65c6e4 100644 --- a/apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx +++ b/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 {children}; }; diff --git a/apps/www/src/registry/default/plate-ui/indent-todo-marker-component.tsx b/apps/www/src/registry/default/plate-ui/indent-todo-marker-component.tsx index 8f233b7ad8..242ce5bd3d 100644 --- a/apps/www/src/registry/default/plate-ui/indent-todo-marker-component.tsx +++ b/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 ( >; +export type LiFC = React.FC; + export interface IndentListPlugin { getSiblingIndentListOptions?: GetSiblingIndentListOptions; @@ -33,9 +37,9 @@ export interface IndentListPlugin { string, { type: string; - markerComponent?: React.FC; - liComponent?: React.FC; - isNumbered?: boolean; + markerComponent?: MarkerFC; + liComponent?: LiFC; + isOrdered?: boolean; } >; } diff --git a/packages/indent-list/src/injectIndentListComponent.tsx b/packages/indent-list/src/injectIndentListComponent.tsx index d84a6b8a41..352cb52b36 100644 --- a/packages/indent-list/src/injectIndentListComponent.tsx +++ b/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,43 @@ export const injectIndentListComponent = ( position: 'relative', }; - return function Ul({ editor, children }) { + return function Component({ children, ...props }) { + const { editor } = props; + const { listStyleTypes = {} } = getPluginOptions( editor, KEY_LIST_STYLE_TYPE ); - const targetList = listStyleTypes[listStyleType] ?? {}; - const isNumbered = targetList ? targetList.isNumbered : false; + const 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) =>
  • {children}
    • , - } = targetList; + if (listOptions) { + isOrdered = !!listOptions.isOrdered; + } else { + if (ULIST_STYLE_TYPES.includes(listStyleType as any)) { + isOrdered = false; + } + } + + 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) =>
  • {liProps.children}
    • , + } = listOptions; return ( - - {markerComponent && markerComponent({ editor, element })} - {liComponent({ - children, - element, - })} - + + + +
  • {children}
    • +     ); }; } diff --git a/packages/indent-list/src/types.ts b/packages/indent-list/src/types.ts index efcdf20253..50a183a966 100644 --- a/packages/indent-list/src/types.ts +++ b/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
      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
        - 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; -} +export const ULIST_STYLE_TYPES = [ + ListStyleType.Disc, + ListStyleType.Circle, + ListStyleType.Square, + ListStyleType.DisclosureOpen, + ListStyleType.DisclosureClosed, +] as const; diff --git a/yarn.lock b/yarn.lock index 76708b902c..de71c6c4de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6672,13 +6672,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-indent-list@npm:31.1.0, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list": +"@udecode/plate-indent-list@npm:31.1.3, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list": version: 0.0.0-use.local resolution: "@udecode/plate-indent-list@workspace:packages/indent-list" dependencies: "@udecode/plate-common": "workspace:^" "@udecode/plate-indent": "npm:31.1.0" - "@udecode/plate-list": "npm:31.0.0" + "@udecode/plate-list": "npm:31.1.3" clsx: "npm:^1.2.1" peerDependencies: "@udecode/plate-common": ">=31.0.0" @@ -6774,7 +6774,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-list@npm:31.0.0, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list": +"@udecode/plate-list@npm:31.1.3, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list": version: 0.0.0-use.local resolution: "@udecode/plate-list@workspace:packages/list" dependencies: @@ -6961,14 +6961,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-serializer-docx@npm:31.1.0, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx": +"@udecode/plate-serializer-docx@npm:31.1.3, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx": version: 0.0.0-use.local resolution: "@udecode/plate-serializer-docx@workspace:packages/serializer-docx" dependencies: "@udecode/plate-common": "workspace:^" "@udecode/plate-heading": "npm:31.0.0" "@udecode/plate-indent": "npm:31.1.0" - "@udecode/plate-indent-list": "npm:31.1.0" + "@udecode/plate-indent-list": "npm:31.1.3" "@udecode/plate-media": "npm:31.0.0" "@udecode/plate-paragraph": "npm:31.0.0" "@udecode/plate-table": "npm:31.0.0" @@ -7002,7 +7002,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-serializer-md@npm:31.0.0, @udecode/plate-serializer-md@workspace:^, @udecode/plate-serializer-md@workspace:packages/serializer-md": +"@udecode/plate-serializer-md@npm:31.1.3, @udecode/plate-serializer-md@workspace:^, @udecode/plate-serializer-md@workspace:packages/serializer-md": version: 0.0.0-use.local resolution: "@udecode/plate-serializer-md@workspace:packages/serializer-md" dependencies: @@ -7013,7 +7013,7 @@ __metadata: "@udecode/plate-heading": "npm:31.0.0" "@udecode/plate-horizontal-rule": "npm:31.0.0" "@udecode/plate-link": "npm:31.0.0" - "@udecode/plate-list": "npm:31.0.0" + "@udecode/plate-list": "npm:31.1.3" "@udecode/plate-media": "npm:31.0.0" "@udecode/plate-paragraph": "npm:31.0.0" remark-parse: "npm:^9.0.0" @@ -7219,11 +7219,11 @@ __metadata: "@udecode/plate-highlight": "npm:31.0.0" "@udecode/plate-horizontal-rule": "npm:31.0.0" "@udecode/plate-indent": "npm:31.1.0" - "@udecode/plate-indent-list": "npm:31.1.0" + "@udecode/plate-indent-list": "npm:31.1.3" "@udecode/plate-kbd": "npm:31.0.0" "@udecode/plate-line-height": "npm:31.0.0" "@udecode/plate-link": "npm:31.0.0" - "@udecode/plate-list": "npm:31.0.0" + "@udecode/plate-list": "npm:31.1.3" "@udecode/plate-media": "npm:31.0.0" "@udecode/plate-mention": "npm:31.0.0" "@udecode/plate-node-id": "npm:31.0.0" @@ -7233,9 +7233,9 @@ __metadata: "@udecode/plate-resizable": "npm:31.0.0" "@udecode/plate-select": "npm:31.0.0" "@udecode/plate-serializer-csv": "npm:31.0.0" - "@udecode/plate-serializer-docx": "npm:31.1.0" + "@udecode/plate-serializer-docx": "npm:31.1.3" "@udecode/plate-serializer-html": "npm:31.1.0" - "@udecode/plate-serializer-md": "npm:31.0.0" + "@udecode/plate-serializer-md": "npm:31.1.3" "@udecode/plate-suggestion": "npm:31.0.0" "@udecode/plate-tabbable": "npm:31.0.0" "@udecode/plate-table": "npm:31.0.0" From 85555ffff902fbe57ad654d31d6c88e037823cf3 Mon Sep 17 00:00:00 2001 From: Ziad Beyens Date: Thu, 28 Mar 2024 07:25:46 +0100 Subject: [PATCH 3/4] Update rude-laws-stare.md --- .changeset/rude-laws-stare.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rude-laws-stare.md b/.changeset/rude-laws-stare.md index 89d8542ddd..2162eb745e 100644 --- a/.changeset/rude-laws-stare.md +++ b/.changeset/rude-laws-stare.md @@ -2,4 +2,4 @@ "@udecode/plate-indent-list": patch --- -Fix the order error in the ordered list. +Fix ordered list regression. From 4f30b58fb68754b09ee1a2bdee41d9e564172a39 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Thu, 28 Mar 2024 08:17:19 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/indent-list/src/injectIndentListComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/indent-list/src/injectIndentListComponent.tsx b/packages/indent-list/src/injectIndentListComponent.tsx index 352cb52b36..3531ecd047 100644 --- a/packages/indent-list/src/injectIndentListComponent.tsx +++ b/packages/indent-list/src/injectIndentListComponent.tsx @@ -38,7 +38,7 @@ export const injectIndentListComponent = ( KEY_LIST_STYLE_TYPE ); - const listOptions = listStyleTypes[listStyleType]; + let listOptions = listStyleTypes[listStyleType]; let isOrdered = true; @@ -48,6 +48,7 @@ export const injectIndentListComponent = ( if (ULIST_STYLE_TYPES.includes(listStyleType as any)) { isOrdered = false; } + listOptions = {} as any; } className = isOrdered