Add todo to playground template

apps/www/src/registry/default/plate-ui/indent-todo-toolbar-button.tsx

@@ -1,8 +1,8 @@
+import { withRef } from '@udecode/cn';
 import {
   useIndentTodoToolBarButton,
   useIndentTodoToolBarButtonState,
 } from '@udecode/plate-indent-list/react';
-import { withRef } from '@udecode/react-utils';
 
 import { Icons } from '@/components/icons';
 

templates/plate-playground-template/src/components/icons.tsx

@@ -52,6 +52,7 @@ import {
   Search,
   Settings,
   Smile,
+  Square,
   Strikethrough,
   Subscript,
   SunMedium,
@@ -162,6 +163,7 @@ const borderTop = (props: LucideProps) => (
 
 export const Icons = {
   add: Plus,
+  todo: Square,
   chevronDown: ChevronDown,
   alignCenter: AlignCenter,
   alignJustify: AlignJustify,

templates/plate-playground-template/src/components/plate-editor.tsx

@@ -101,6 +101,10 @@ import { HeadingElement } from '@/components/plate-ui/heading-element';
 import { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';
 import { HrElement } from '@/components/plate-ui/hr-element';
 import { ImageElement } from '@/components/plate-ui/image-element';
+import {
+  TodoLi,
+  TodoMarker,
+} from '@/components/plate-ui/indent-todo-marker-component';
 import { KbdLeaf } from '@/components/plate-ui/kbd-leaf';
 import { LinkElement } from '@/components/plate-ui/link-element';
 import { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';
@@ -225,6 +229,15 @@ export const useMyEditor = () => {
             ...HEADING_LEVELS,
           ],
         },
+        options: {
+          listStyleTypes: {
+            todo: {
+              liComponent: TodoLi,
+              markerComponent: TodoMarker,
+              type: 'todo',
+            },
+          },
+        },
       }),
       LineHeightPlugin.configure({
         inject: {

templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx

@@ -28,6 +28,7 @@ import { OutdentToolbarButton } from '@/components/plate-ui/outdent-toolbar-butt
 import { TableDropdownMenu } from '@/components/plate-ui/table-dropdown-menu';
 
 import { ColorDropdownMenu } from './color-dropdown-menu';
+import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
 import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { MarkToolbarButton } from './mark-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
@@ -102,6 +103,7 @@ export function FixedToolbarButtons() {
 
               <IndentListToolbarButton nodeType={ListStyleType.Disc} />
               <IndentListToolbarButton nodeType={ListStyleType.Decimal} />
+              <IndentTodoToolbarButton />
 
               <OutdentToolbarButton />
               <IndentToolbarButton />

templates/plate-playground-template/src/components/plate-ui/indent-todo-marker-component.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@udecode/cn';
+import {
+  useIndentTodoListElement,
+  useIndentTodoListElementState,
+} from '@udecode/plate-indent-list/react';
+
+import { Checkbox } from './checkbox';
+
+import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+
+export const TodoMarker = ({
+  element,
+}: Omit<PlateRenderElementProps, 'children'>) => {
+  const state = useIndentTodoListElementState({ element });
+  const { checkboxProps } = useIndentTodoListElement(state);
+
+  return (
+    <div contentEditable={false}>
+      <Checkbox
+        style={{ left: -24, position: 'absolute', top: 4 }}
+        {...checkboxProps}
+      />
+    </div>
+  );
+};
+
+export const TodoLi = (props: PlateRenderElementProps) => {
+  const { children, element } = props;
+
+  return (
+    <span
+      className={cn(
+        (element.checked as boolean) && 'text-muted-foreground line-through'
+      )}
+    >
+      {children}
+    </span>
+  );
+};

templates/plate-playground-template/src/components/plate-ui/indent-todo-toolbar-button.tsx

@@ -0,0 +1,22 @@
+import {
+  useIndentTodoToolBarButton,
+  useIndentTodoToolBarButtonState,
+} from '@udecode/plate-indent-list/react';
+import { withRef } from '@udecode/cn';
+
+import { Icons } from '@/components/icons';
+
+import { ToolbarButton } from './toolbar';
+
+export const IndentTodoToolbarButton = withRef<typeof ToolbarButton>(
+  (rest, ref) => {
+    const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });
+    const { props } = useIndentTodoToolBarButton(state);
+
+    return (
+      <ToolbarButton ref={ref} tooltip="Todo" {...props} {...rest}>
+        <Icons.todo />
+      </ToolbarButton>
+    );
+  }
+);