From f95472a3ae92f88f9e8fd0a602b6eb600ab1edd8 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 14:06:46 +0800 Subject: [PATCH 1/8] add checked marker --- .../registry/default/example/playground-demo.tsx | 6 +++++- .../plate-ui/indent-todo-marker-component.tsx | 15 ++++++++++++++- .../indent-list/src/createIndentListPlugin.ts | 12 ++++++------ .../src/injectIndentListComponent.tsx | 16 +++++++++++----- packages/indent-list/src/types.ts | 12 ++++++++++++ 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index dabc6aa916..1643e3ab0e 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -118,7 +118,10 @@ import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay'; import { Editor } from '@/registry/default/plate-ui/editor'; import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar'; import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar'; -import { TodoMarker } from '@/registry/default/plate-ui/indent-todo-marker-component'; +import { + CheckedMarker, + TodoMarker, +} from '@/registry/default/plate-ui/indent-todo-marker-component'; import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox'; export const usePlaygroundPlugins = ({ @@ -235,6 +238,7 @@ export const usePlaygroundPlugins = ({ enabled: id === 'indentlist' || !!enabled.listStyleType, options: { markerComponent: TodoMarker, + markerCheckedStyle: CheckedMarker, }, }), createLineHeightPlugin({ 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 4db199d0b6..6e06435d04 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,4 +1,8 @@ -import { IMarkerComponentProps } from '@udecode/plate-indent-list'; +import { cn } from '@udecode/cn'; +import { + IMarkerCheckedStyle, + IMarkerComponentProps, +} from '@udecode/plate-indent-list'; import { Checkbox } from './checkbox'; @@ -12,3 +16,12 @@ export const TodoMarker = (props: IMarkerComponentProps) => { /> ); }; + +export const CheckedMarker = (props: IMarkerCheckedStyle) => { + const { checked, children } = props; + return ( + + {children} + + ); +}; diff --git a/packages/indent-list/src/createIndentListPlugin.ts b/packages/indent-list/src/createIndentListPlugin.ts index 0e9c823020..eda94522c1 100644 --- a/packages/indent-list/src/createIndentListPlugin.ts +++ b/packages/indent-list/src/createIndentListPlugin.ts @@ -12,7 +12,11 @@ import { import { injectIndentListComponent } from './injectIndentListComponent'; import { onKeyDownIndentList } from './onKeyDownIndentList'; import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList'; -import { ListStyleType } from './types'; +import { + IMarkerCheckedStyle, + IMarkerComponentProps, + ListStyleType, +} from './types'; import { withIndentList } from './withIndentList'; export const KEY_LIST_STYLE_TYPE = 'listStyleType'; @@ -30,11 +34,7 @@ export interface IndentListPlugin { getListStyleType?: (element: HTMLElement) => ListStyleType; markerComponent?: React.FC; -} - -export interface IMarkerComponentProps { - onChange: (checked: boolean) => void; - checked: boolean; + markerCheckedStyle?: React.FC; } export const createIndentListPlugin = createPluginFactory({ diff --git a/packages/indent-list/src/injectIndentListComponent.tsx b/packages/indent-list/src/injectIndentListComponent.tsx index ffb630f8dc..5f36027ae0 100644 --- a/packages/indent-list/src/injectIndentListComponent.tsx +++ b/packages/indent-list/src/injectIndentListComponent.tsx @@ -73,10 +73,8 @@ export const injectIndentListComponent = ( margin: 0, }; return function Ol({ children, editor }) { - const { markerComponent } = getPluginOptions( - editor, - KEY_LIST_STYLE_TYPE - ); + const { markerComponent, markerCheckedStyle } = + getPluginOptions(editor, KEY_LIST_STYLE_TYPE); return (
@@ -101,7 +99,15 @@ export const injectIndentListComponent = ( /> )}
- {children} + + {markerCheckedStyle ? ( + markerCheckedStyle({ + checked: checked, + children: children, + }) + ) : ( + {children} + )} ); }; diff --git a/packages/indent-list/src/types.ts b/packages/indent-list/src/types.ts index 64ccdb04b5..f5fb0396f3 100644 --- a/packages/indent-list/src/types.ts +++ b/packages/indent-list/src/types.ts @@ -68,3 +68,15 @@ export enum ListStyleType { // Inherits this property from its parent element. Read about inherit Inherit = 'inherit', } + +export interface IMarkerCheckedStyle { + className?: string; + style?: React.CSSProperties; + checked: boolean; + children: any; +} + +export interface IMarkerComponentProps { + onChange: (checked: boolean) => void; + checked: boolean; +} From 1ee1be196b1f37b5ab1f2284a32ea1818a2c7ea9 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 14:09:12 +0800 Subject: [PATCH 2/8] add changeset --- .changeset/khaki-kiwis-breathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-kiwis-breathe.md diff --git a/.changeset/khaki-kiwis-breathe.md b/.changeset/khaki-kiwis-breathe.md new file mode 100644 index 0000000000..40c34d2626 --- /dev/null +++ b/.changeset/khaki-kiwis-breathe.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-indent-list": patch +--- + +Add checked style marker From 85ed63196fc5d1b69b7ace82dfed917747b41bbb Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 14:12:22 +0800 Subject: [PATCH 3/8] fix typo --- packages/indent-list/src/types.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/indent-list/src/types.ts b/packages/indent-list/src/types.ts index f5fb0396f3..30fdee972f 100644 --- a/packages/indent-list/src/types.ts +++ b/packages/indent-list/src/types.ts @@ -70,8 +70,6 @@ export enum ListStyleType { } export interface IMarkerCheckedStyle { - className?: string; - style?: React.CSSProperties; checked: boolean; children: any; } From bd5b9b4bd3bbfc0112f14cc8bc2ffdc75a827177 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 19:42:33 +0800 Subject: [PATCH 4/8] listStyletypes --- .../lib/plate/demo/values/indentListValue.tsx | 17 ++- .../default/example/playground-demo.tsx | 24 ++++- .../plate-ui/indent-fire-marker-component.tsx | 24 +++++ .../plate-ui/indent-todo-marker-component.tsx | 36 ++++--- .../indent-list/src/createIndentListPlugin.ts | 13 ++- .../src/injectIndentListComponent.tsx | 101 +++++------------- packages/indent-list/src/types.ts | 11 +- 7 files changed, 123 insertions(+), 103 deletions(-) create mode 100644 apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx diff --git a/apps/www/src/lib/plate/demo/values/indentListValue.tsx b/apps/www/src/lib/plate/demo/values/indentListValue.tsx index c43616c70a..8a3fb8b5a1 100644 --- a/apps/www/src/lib/plate/demo/values/indentListValue.tsx +++ b/apps/www/src/lib/plate/demo/values/indentListValue.tsx @@ -7,13 +7,24 @@ jsx; export const indentListValue: any = ( Indent List - - Decimal 112 - + Create indented lists with multiple levels of indentation and customize the list style type for each level. + + Todo 1 + + + + Icon 1 + + + Icon 2 + + + Todo 2 + Roman 1 diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 1643e3ab0e..07b62b30dd 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -119,7 +119,11 @@ import { Editor } from '@/registry/default/plate-ui/editor'; import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar'; import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar'; import { - CheckedMarker, + FireLiComponent, + FireMarker, +} from '@/registry/default/plate-ui/indent-fire-marker-component'; +import { + IndentTodoLiComponent, TodoMarker, } from '@/registry/default/plate-ui/indent-todo-marker-component'; import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox'; @@ -237,8 +241,22 @@ export const usePlaygroundPlugins = ({ }, enabled: id === 'indentlist' || !!enabled.listStyleType, options: { - markerComponent: TodoMarker, - markerCheckedStyle: CheckedMarker, + listStyleTypes: { + ['upper-roman']: { + type: 'upper-roman', + isNumbered: true, + }, + todo: { + type: 'todo', + markerComponent: TodoMarker, + liComponent: IndentTodoLiComponent, + }, + fire: { + type: 'fire', + markerComponent: FireMarker, + liComponent: FireLiComponent, + }, + }, }, }), createLineHeightPlugin({ 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 new file mode 100644 index 0000000000..1f828b2b8c --- /dev/null +++ b/apps/www/src/registry/default/plate-ui/indent-fire-marker-component.tsx @@ -0,0 +1,24 @@ +import { cn } from '@udecode/cn'; + +export const FireMarker = (props: any) => { + const { element } = props; + + return ( +
+ + {element.indent % 2 === 0 ? '🔥' : '🚀'} + +
+ ); +}; + +export const FireLiComponent = (props: any) => { + const { element, 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 6e06435d04..9f0766237f 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,26 +1,34 @@ import { cn } from '@udecode/cn'; -import { - IMarkerCheckedStyle, - IMarkerComponentProps, -} from '@udecode/plate-indent-list'; +import { setNodes } from '@udecode/slate'; +import { findNodePath } from '@udecode/slate-react'; import { Checkbox } from './checkbox'; -export const TodoMarker = (props: IMarkerComponentProps) => { - const { onChange, checked } = props; +export const TodoMarker = (props: any) => { + const { editor, element } = props; + + const onChange = (v: boolean) => { + const path = findNodePath(editor, element); + setNodes(editor, { checked: v }, { at: path }); + }; + return ( - +
+ +
); }; -export const CheckedMarker = (props: IMarkerCheckedStyle) => { - const { checked, children } = props; +export const IndentTodoLiComponent = (props: any) => { + const { element, children } = props; return ( - + {children} ); diff --git a/packages/indent-list/src/createIndentListPlugin.ts b/packages/indent-list/src/createIndentListPlugin.ts index eda94522c1..922215e565 100644 --- a/packages/indent-list/src/createIndentListPlugin.ts +++ b/packages/indent-list/src/createIndentListPlugin.ts @@ -13,7 +13,7 @@ import { injectIndentListComponent } from './injectIndentListComponent'; import { onKeyDownIndentList } from './onKeyDownIndentList'; import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList'; import { - IMarkerCheckedStyle, + ILiComponentProps, IMarkerComponentProps, ListStyleType, } from './types'; @@ -33,8 +33,15 @@ export interface IndentListPlugin { */ getListStyleType?: (element: HTMLElement) => ListStyleType; - markerComponent?: React.FC; - markerCheckedStyle?: React.FC; + listStyleTypes?: Record< + string, + { + type: string; + markerComponent?: React.FC; + liComponent?: React.FC; + isNumbered?: boolean; + } + >; } export const createIndentListPlugin = createPluginFactory({ diff --git a/packages/indent-list/src/injectIndentListComponent.tsx b/packages/indent-list/src/injectIndentListComponent.tsx index 5f36027ae0..d84a6b8a41 100644 --- a/packages/indent-list/src/injectIndentListComponent.tsx +++ b/packages/indent-list/src/injectIndentListComponent.tsx @@ -1,21 +1,16 @@ import React from 'react'; import { - findNodePath, getPluginOptions, InjectComponentProps, InjectComponentReturnType, - setNodes, } from '@udecode/plate-common'; import { clsx } from 'clsx'; import { IndentListPlugin, - KEY_LIST_CHECKED, KEY_LIST_START, KEY_LIST_STYLE_TYPE, - KEY_TODO_STYLE_TYPE, } from './createIndentListPlugin'; -import { ListStyleType } from './types'; export const injectIndentListComponent = ( props: InjectComponentProps @@ -25,90 +20,44 @@ export const injectIndentListComponent = ( const listStyleType = element[KEY_LIST_STYLE_TYPE] as string; const listStart = element[KEY_LIST_START] as number; - const isTodo = - element.hasOwnProperty(KEY_LIST_CHECKED) && - listStyleType === KEY_TODO_STYLE_TYPE; - - if (listStyleType && !isTodo) { + if (listStyleType) { let className = clsx(`slate-${KEY_LIST_STYLE_TYPE}-${listStyleType}`); const style: React.CSSProperties = { padding: 0, margin: 0, listStyleType, + position: 'relative', }; - if ( - [ListStyleType.Disc, ListStyleType.Circle, ListStyleType.Square].includes( - listStyleType as ListStyleType - ) - ) { - className = clsx(className, 'slate-list-bullet'); + return function Ul({ editor, children }) { + const { listStyleTypes = {} } = getPluginOptions( + editor, + KEY_LIST_STYLE_TYPE + ); - return function Ul({ children }) { - return ( -
    -
  • {children}
    • -
- ); - }; - } + const targetList = listStyleTypes[listStyleType] ?? {}; + const isNumbered = targetList ? targetList.isNumbered : false; - className = clsx(className, 'slate-list-number'); + className = isNumbered + ? clsx(className, 'slate-list-number') + : clsx(className, 'slate-list-bullet'); - return function Ol({ children }) { - return ( -
    -
  1. {children}
    2. -
- ); - }; - } + const { + markerComponent = null, + // eslint-disable-next-line @typescript-eslint/no-shadow + liComponent = ({ children }: any) =>
  • {children}
    • , + } = targetList; - if (isTodo) { - const className = clsx('slate-list-todo'); - const checked = element[KEY_LIST_CHECKED] as boolean; - const style: React.CSSProperties = { - position: 'relative', - padding: 0, - margin: 0, - }; - return function Ol({ children, editor }) { - const { markerComponent, markerCheckedStyle } = - getPluginOptions(editor, KEY_LIST_STYLE_TYPE); + const Wrap = isNumbered ? 'ol' : 'ul'; return ( -
    -
    - {markerComponent ? ( - markerComponent({ - checked: checked, - onChange: (v: boolean) => { - const path = findNodePath(editor, element); - setNodes(editor, { checked: v }, { at: path }); - }, - }) - ) : ( - { - const path = findNodePath(editor, element); - setNodes(editor, { checked: v.target.checked }, { at: path }); - }} - /> - )} -
    - - {markerCheckedStyle ? ( - markerCheckedStyle({ - checked: checked, - children: children, - }) - ) : ( - {children} - )} -
    + + {markerComponent && markerComponent({ editor, element })} + {liComponent({ + children, + element, + })} + ); }; } diff --git a/packages/indent-list/src/types.ts b/packages/indent-list/src/types.ts index 30fdee972f..a2761cdcd2 100644 --- a/packages/indent-list/src/types.ts +++ b/packages/indent-list/src/types.ts @@ -1,3 +1,5 @@ +import { PlateEditor, TElement, Value } from '@udecode/plate-common'; + export enum ListStyleType { // The marker is traditional Armenian numbering Armenian = 'armenian', @@ -69,12 +71,13 @@ export enum ListStyleType { Inherit = 'inherit', } -export interface IMarkerCheckedStyle { - checked: boolean; +export interface ILiComponentProps { + element: TElement; children: any; } export interface IMarkerComponentProps { - onChange: (checked: boolean) => void; - checked: boolean; + onChange?: (checked: boolean) => void; + element: TElement; + editor: PlateEditor; } From 4fc4b2f94cb764d7ac09963000bb2842834f7168 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 19:45:30 +0800 Subject: [PATCH 5/8] add changeset --- .changeset/strong-cups-rhyme.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-cups-rhyme.md diff --git a/.changeset/strong-cups-rhyme.md b/.changeset/strong-cups-rhyme.md new file mode 100644 index 0000000000..ddeffd9123 --- /dev/null +++ b/.changeset/strong-cups-rhyme.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-indent-list": major +--- + +Add listStyleTypes option to custom indent list From c4f4688f8c4ed25b6e28211cdc2ee3680961b020 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 19:46:24 +0800 Subject: [PATCH 6/8] remove old changeset --- .changeset/khaki-kiwis-breathe.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/khaki-kiwis-breathe.md diff --git a/.changeset/khaki-kiwis-breathe.md b/.changeset/khaki-kiwis-breathe.md deleted file mode 100644 index 40c34d2626..0000000000 --- a/.changeset/khaki-kiwis-breathe.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@udecode/plate-indent-list": patch ---- - -Add checked style marker From 62b5fb5acb6f66d7fa24646e4df213d1fb4cc68a Mon Sep 17 00:00:00 2001 From: felixfeng Date: Wed, 27 Mar 2024 20:53:56 +0800 Subject: [PATCH 7/8] fix types --- .../plate-ui/indent-fire-marker-component.tsx | 22 +++++++++---------- .../plate-ui/indent-todo-marker-component.tsx | 14 ++++++++---- .../indent-list/src/createIndentListPlugin.ts | 10 +++------ packages/indent-list/src/types.ts | 4 ++-- 4 files changed, 25 insertions(+), 25 deletions(-) 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 1f828b2b8c..6924aeae9d 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,24 +1,22 @@ -import { cn } from '@udecode/cn'; +import { TIndentElement } from '@udecode/plate-indent'; +import { + LiComponentProps, + MarkerComponentProps, +} from '@udecode/plate-indent-list'; -export const FireMarker = (props: any) => { +export const FireMarker = (props: MarkerComponentProps) => { const { element } = props; return (
    - {element.indent % 2 === 0 ? '🔥' : '🚀'} + {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}
    ); }; -export const FireLiComponent = (props: any) => { - const { element, children } = props; - return ( - - {children} - - ); +export const FireLiComponent = (props: LiComponentProps) => { + 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 9f0766237f..8f233b7ad8 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,10 +1,14 @@ import { cn } from '@udecode/cn'; +import { + LiComponentProps, + MarkerComponentProps, +} from '@udecode/plate-indent-list'; import { setNodes } from '@udecode/slate'; import { findNodePath } from '@udecode/slate-react'; import { Checkbox } from './checkbox'; -export const TodoMarker = (props: any) => { +export const TodoMarker = (props: MarkerComponentProps) => { const { editor, element } = props; const onChange = (v: boolean) => { @@ -16,18 +20,20 @@ export const TodoMarker = (props: any) => {
    ); }; -export const IndentTodoLiComponent = (props: any) => { +export const IndentTodoLiComponent = (props: LiComponentProps) => { const { element, children } = props; return ( {children} diff --git a/packages/indent-list/src/createIndentListPlugin.ts b/packages/indent-list/src/createIndentListPlugin.ts index 922215e565..073bd3a4ab 100644 --- a/packages/indent-list/src/createIndentListPlugin.ts +++ b/packages/indent-list/src/createIndentListPlugin.ts @@ -12,11 +12,7 @@ import { import { injectIndentListComponent } from './injectIndentListComponent'; import { onKeyDownIndentList } from './onKeyDownIndentList'; import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList'; -import { - ILiComponentProps, - IMarkerComponentProps, - ListStyleType, -} from './types'; +import { LiComponentProps, ListStyleType, MarkerComponentProps } from './types'; import { withIndentList } from './withIndentList'; export const KEY_LIST_STYLE_TYPE = 'listStyleType'; @@ -37,8 +33,8 @@ export interface IndentListPlugin { string, { type: string; - markerComponent?: React.FC; - liComponent?: React.FC; + markerComponent?: React.FC; + liComponent?: React.FC; isNumbered?: boolean; } >; diff --git a/packages/indent-list/src/types.ts b/packages/indent-list/src/types.ts index a2761cdcd2..efcdf20253 100644 --- a/packages/indent-list/src/types.ts +++ b/packages/indent-list/src/types.ts @@ -71,12 +71,12 @@ export enum ListStyleType { Inherit = 'inherit', } -export interface ILiComponentProps { +export interface LiComponentProps { element: TElement; children: any; } -export interface IMarkerComponentProps { +export interface MarkerComponentProps { onChange?: (checked: boolean) => void; element: TElement; editor: PlateEditor; From 66de99bbf4e7138321899a50eb8c33e62fce6510 Mon Sep 17 00:00:00 2001 From: Ziad Beyens Date: Wed, 27 Mar 2024 14:14:22 +0100 Subject: [PATCH 8/8] Update strong-cups-rhyme.md --- .changeset/strong-cups-rhyme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/strong-cups-rhyme.md b/.changeset/strong-cups-rhyme.md index ddeffd9123..f1cbe424ce 100644 --- a/.changeset/strong-cups-rhyme.md +++ b/.changeset/strong-cups-rhyme.md @@ -1,5 +1,5 @@ --- -"@udecode/plate-indent-list": major +"@udecode/plate-indent-list": minor --- Add listStyleTypes option to custom indent list