diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json
index 894964fc15..a8d5cbe3f3 100644
--- a/apps/www/public/r/styles/default/ai-demo.json
+++ b/apps/www/public/r/styles/default/ai-demo.json
@@ -9,7 +9,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/align-demo.json b/apps/www/public/r/styles/default/align-demo.json
index 851588d93c..cdba8763c8 100644
--- a/apps/www/public/r/styles/default/align-demo.json
+++ b/apps/www/public/r/styles/default/align-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-elements-demo.json b/apps/www/public/r/styles/default/basic-elements-demo.json
index 64558f4301..a6c3ffd3c1 100644
--- a/apps/www/public/r/styles/default/basic-elements-demo.json
+++ b/apps/www/public/r/styles/default/basic-elements-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-marks-demo.json b/apps/www/public/r/styles/default/basic-marks-demo.json
index 561d79310f..207926d3f7 100644
--- a/apps/www/public/r/styles/default/basic-marks-demo.json
+++ b/apps/www/public/r/styles/default/basic-marks-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-nodes-demo.json b/apps/www/public/r/styles/default/basic-nodes-demo.json
index e6fe6d742e..a0f3490f12 100644
--- a/apps/www/public/r/styles/default/basic-nodes-demo.json
+++ b/apps/www/public/r/styles/default/basic-nodes-demo.json
@@ -8,7 +8,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-menu-demo.json b/apps/www/public/r/styles/default/block-menu-demo.json
index aaec724bff..067dd84263 100644
--- a/apps/www/public/r/styles/default/block-menu-demo.json
+++ b/apps/www/public/r/styles/default/block-menu-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-selection-demo.json b/apps/www/public/r/styles/default/block-selection-demo.json
index 119793b94d..334a0a12b0 100644
--- a/apps/www/public/r/styles/default/block-selection-demo.json
+++ b/apps/www/public/r/styles/default/block-selection-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/column-demo.json b/apps/www/public/r/styles/default/column-demo.json
index a492e8a588..b5abebd582 100644
--- a/apps/www/public/r/styles/default/column-demo.json
+++ b/apps/www/public/r/styles/default/column-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/comment-demo.json b/apps/www/public/r/styles/default/comment-demo.json
index 8185c09703..a968ae50d2 100644
--- a/apps/www/public/r/styles/default/comment-demo.json
+++ b/apps/www/public/r/styles/default/comment-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json
index 52508446f3..0b8aff0524 100644
--- a/apps/www/public/r/styles/default/copilot-demo.json
+++ b/apps/www/public/r/styles/default/copilot-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/date-demo.json b/apps/www/public/r/styles/default/date-demo.json
index 636c8ac8b8..6a0a294da7 100644
--- a/apps/www/public/r/styles/default/date-demo.json
+++ b/apps/www/public/r/styles/default/date-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/dnd-demo.json b/apps/www/public/r/styles/default/dnd-demo.json
index 726c850415..8d0dc9f8cc 100644
--- a/apps/www/public/r/styles/default/dnd-demo.json
+++ b/apps/www/public/r/styles/default/dnd-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json
index 53753c6372..87699abcef 100644
--- a/apps/www/public/r/styles/default/emoji-demo.json
+++ b/apps/www/public/r/styles/default/emoji-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/excalidraw-demo.json b/apps/www/public/r/styles/default/excalidraw-demo.json
index feb9bf2714..c95cc2312f 100644
--- a/apps/www/public/r/styles/default/excalidraw-demo.json
+++ b/apps/www/public/r/styles/default/excalidraw-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/floating-toolbar-demo.json b/apps/www/public/r/styles/default/floating-toolbar-demo.json
index 98b36d3874..803522ec21 100644
--- a/apps/www/public/r/styles/default/floating-toolbar-demo.json
+++ b/apps/www/public/r/styles/default/floating-toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/font-demo.json b/apps/www/public/r/styles/default/font-demo.json
index d1a1d5b780..28700db28d 100644
--- a/apps/www/public/r/styles/default/font-demo.json
+++ b/apps/www/public/r/styles/default/font-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/highlight-demo.json b/apps/www/public/r/styles/default/highlight-demo.json
index 43e910da69..4f1152382a 100644
--- a/apps/www/public/r/styles/default/highlight-demo.json
+++ b/apps/www/public/r/styles/default/highlight-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/hr-demo.json b/apps/www/public/r/styles/default/hr-demo.json
index d4a2774e14..3e59b3d150 100644
--- a/apps/www/public/r/styles/default/hr-demo.json
+++ b/apps/www/public/r/styles/default/hr-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json
index 9c531bb716..1abe6b9969 100644
--- a/apps/www/public/r/styles/default/indent-demo.json
+++ b/apps/www/public/r/styles/default/indent-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/kbd-demo.json b/apps/www/public/r/styles/default/kbd-demo.json
index 375f4eef26..32d062e655 100644
--- a/apps/www/public/r/styles/default/kbd-demo.json
+++ b/apps/www/public/r/styles/default/kbd-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/line-height-demo.json b/apps/www/public/r/styles/default/line-height-demo.json
index d6994b01be..a5090ab9ec 100644
--- a/apps/www/public/r/styles/default/line-height-demo.json
+++ b/apps/www/public/r/styles/default/line-height-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/link-demo.json b/apps/www/public/r/styles/default/link-demo.json
index 0775acabac..a0a7df6d85 100644
--- a/apps/www/public/r/styles/default/link-demo.json
+++ b/apps/www/public/r/styles/default/link-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/list-demo.json b/apps/www/public/r/styles/default/list-demo.json
index 337731c05e..0184f1fc15 100644
--- a/apps/www/public/r/styles/default/list-demo.json
+++ b/apps/www/public/r/styles/default/list-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/media-demo.json b/apps/www/public/r/styles/default/media-demo.json
index 63ca55a28a..11a91dbbe7 100644
--- a/apps/www/public/r/styles/default/media-demo.json
+++ b/apps/www/public/r/styles/default/media-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/mention-demo.json b/apps/www/public/r/styles/default/mention-demo.json
index fb7d0f1fcf..24c4edfa1c 100644
--- a/apps/www/public/r/styles/default/mention-demo.json
+++ b/apps/www/public/r/styles/default/mention-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/mode-demo.json b/apps/www/public/r/styles/default/mode-demo.json
index 95fd68edf3..198b38b777 100644
--- a/apps/www/public/r/styles/default/mode-demo.json
+++ b/apps/www/public/r/styles/default/mode-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/placeholder-demo.json b/apps/www/public/r/styles/default/placeholder-demo.json
index caaf030e74..69adb67a15 100644
--- a/apps/www/public/r/styles/default/placeholder-demo.json
+++ b/apps/www/public/r/styles/default/placeholder-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json
index 797f58abf3..de016eaf22 100644
--- a/apps/www/public/r/styles/default/playground-demo.json
+++ b/apps/www/public/r/styles/default/playground-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json
index 2b4164f034..c43b06c13b 100644
--- a/apps/www/public/r/styles/default/resizable-demo.json
+++ b/apps/www/public/r/styles/default/resizable-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/slash-command-demo.json b/apps/www/public/r/styles/default/slash-command-demo.json
index a9c1309724..19f61e7051 100644
--- a/apps/www/public/r/styles/default/slash-command-demo.json
+++ b/apps/www/public/r/styles/default/slash-command-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json
index dcd1ec8370..ed8eb55338 100644
--- a/apps/www/public/r/styles/default/slash-input-element.json
+++ b/apps/www/public/r/styles/default/slash-input-element.json
@@ -24,7 +24,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  Code2,\n  Columns3Icon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrdered,\n  PilcrowIcon,\n  Quote,\n  SparklesIcon,\n  Square,\n  Table,\n  TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n  insertBlock,\n  insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxGroup,\n  InlineComboboxGroupLabel,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n  group: string;\n  items: Item[];\n};\n\ninterface Item {\n  icon: React.ReactNode;\n\n  onSelect: (editor: PlateEditor, value: string) => void;\n\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n  label?: string;\n}\n\nconst groups: Group[] = [\n  {\n    group: 'AI',\n    items: [\n      {\n        focusEditor: false,\n        icon: <SparklesIcon />,\n        value: 'AI',\n        onSelect: (editor) => {\n          editor.getApi(AIChatPlugin).aiChat.show();\n        },\n      },\n    ],\n  },\n  {\n    group: 'Basic blocks',\n    items: [\n      {\n        icon: <PilcrowIcon />,\n        keywords: ['paragraph'],\n        label: 'Text',\n        value: ParagraphPlugin.key,\n      },\n      {\n        icon: <Heading1Icon />,\n        keywords: ['title', 'h1'],\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        icon: <Heading2Icon />,\n        keywords: ['subtitle', 'h2'],\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        icon: <Heading3Icon />,\n        keywords: ['subtitle', 'h3'],\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        icon: <ListIcon />,\n        keywords: ['unordered', 'ul', '-'],\n        label: 'Bulleted list',\n        value: ListStyleType.Disc,\n      },\n      {\n        icon: <ListOrdered />,\n        keywords: ['ordered', 'ol', '1'],\n        label: 'Numbered list',\n        value: ListStyleType.Decimal,\n      },\n      {\n        icon: <Square />,\n        keywords: ['checklist', 'task', 'checkbox', '[]'],\n        label: 'To-do list',\n        value: INDENT_LIST_KEYS.todo,\n      },\n      {\n        icon: <ChevronRightIcon />,\n        keywords: ['collapsible', 'expandable'],\n        label: 'Toggle',\n        value: TogglePlugin.key,\n      },\n      {\n        icon: <Code2 />,\n        keywords: ['```'],\n        label: 'Code Block',\n        value: CodeBlockPlugin.key,\n      },\n      {\n        icon: <Table />,\n        label: 'Table',\n        value: TablePlugin.key,\n      },\n      {\n        icon: <Quote />,\n        keywords: ['citation', 'blockquote', 'quote', '>'],\n        label: 'Blockquote',\n        value: BlockquotePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Advanced blocks',\n    items: [\n      {\n        icon: <TableOfContentsIcon />,\n        keywords: ['toc'],\n        value: 'Table of Contents',\n      },\n      {\n        icon: <Columns3Icon />,\n        label: '3 columns',\n        value: 'action_three_columns',\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Inline',\n    items: [\n      {\n        focusEditor: true,\n        icon: <CalendarIcon />,\n        keywords: ['time'],\n        label: 'Date',\n        value: DatePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertInlineElement(editor, value);\n      },\n    })),\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>No results</InlineComboboxEmpty>\n\n            {groups.map(({ group, items }) => (\n              <InlineComboboxGroup key={group}>\n                <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>\n\n                {items.map(\n                  ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n                    <InlineComboboxItem\n                      key={value}\n                      value={value}\n                      onClick={() => onSelect(editor, value)}\n                      label={label}\n                      focusEditor={focusEditor}\n                      group={group}\n                      keywords={keywords}\n                    >\n                      <div className=\"mr-2 text-muted-foreground\">{icon}</div>\n                      {label ?? value}\n                    </InlineComboboxItem>\n                  )\n                )}\n              </InlineComboboxGroup>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  Code2,\n  Columns3Icon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrdered,\n  PilcrowIcon,\n  Quote,\n  SparklesIcon,\n  Square,\n  Table,\n  TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n  insertBlock,\n  insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxGroup,\n  InlineComboboxGroupLabel,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n  group: string;\n  items: Item[];\n};\n\ninterface Item {\n  icon: React.ReactNode;\n\n  onSelect: (editor: PlateEditor, value: string) => void;\n\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n  label?: string;\n}\n\nconst groups: Group[] = [\n  {\n    group: 'AI',\n    items: [\n      {\n        focusEditor: false,\n        icon: <SparklesIcon />,\n        value: 'AI',\n        onSelect: (editor) => {\n          editor.getApi(AIChatPlugin).aiChat.show();\n        },\n      },\n    ],\n  },\n  {\n    group: 'Basic blocks',\n    items: [\n      {\n        icon: <PilcrowIcon />,\n        keywords: ['paragraph'],\n        label: 'Text',\n        value: ParagraphPlugin.key,\n      },\n      {\n        icon: <Heading1Icon />,\n        keywords: ['title', 'h1'],\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        icon: <Heading2Icon />,\n        keywords: ['subtitle', 'h2'],\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        icon: <Heading3Icon />,\n        keywords: ['subtitle', 'h3'],\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        icon: <ListIcon />,\n        keywords: ['unordered', 'ul', '-'],\n        label: 'Bulleted list',\n        value: ListStyleType.Disc,\n      },\n      {\n        icon: <ListOrdered />,\n        keywords: ['ordered', 'ol', '1'],\n        label: 'Numbered list',\n        value: ListStyleType.Decimal,\n      },\n      {\n        icon: <Square />,\n        keywords: ['checklist', 'task', 'checkbox', '[]'],\n        label: 'To-do list',\n        value: INDENT_LIST_KEYS.todo,\n      },\n      {\n        icon: <ChevronRightIcon />,\n        keywords: ['collapsible', 'expandable'],\n        label: 'Toggle',\n        value: TogglePlugin.key,\n      },\n      {\n        icon: <Code2 />,\n        keywords: ['```'],\n        label: 'Code Block',\n        value: CodeBlockPlugin.key,\n      },\n      {\n        icon: <Table />,\n        label: 'Table',\n        value: TablePlugin.key,\n      },\n      {\n        icon: <Quote />,\n        keywords: ['citation', 'blockquote', 'quote', '>'],\n        label: 'Blockquote',\n        value: BlockquotePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Advanced blocks',\n    items: [\n      {\n        icon: <TableOfContentsIcon />,\n        keywords: ['toc'],\n        label: 'Table of contents',\n        value: TocPlugin.key,\n      },\n      {\n        icon: <Columns3Icon />,\n        label: '3 columns',\n        value: 'action_three_columns',\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Inline',\n    items: [\n      {\n        focusEditor: true,\n        icon: <CalendarIcon />,\n        keywords: ['time'],\n        label: 'Date',\n        value: DatePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertInlineElement(editor, value);\n      },\n    })),\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>No results</InlineComboboxEmpty>\n\n            {groups.map(({ group, items }) => (\n              <InlineComboboxGroup key={group}>\n                <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>\n\n                {items.map(\n                  ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n                    <InlineComboboxItem\n                      key={value}\n                      value={value}\n                      onClick={() => onSelect(editor, value)}\n                      label={label}\n                      focusEditor={focusEditor}\n                      group={group}\n                      keywords={keywords}\n                    >\n                      <div className=\"mr-2 text-muted-foreground\">{icon}</div>\n                      {label ?? value}\n                    </InlineComboboxItem>\n                  )\n                )}\n              </InlineComboboxGroup>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/slash-input-element.tsx",
       "target": "components/plate-ui/slash-input-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json
index 67971a219d..4a704643d0 100644
--- a/apps/www/public/r/styles/default/table-demo.json
+++ b/apps/www/public/r/styles/default/table-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toc-demo.json b/apps/www/public/r/styles/default/toc-demo.json
index 18a6afb83b..2c811f7f29 100644
--- a/apps/www/public/r/styles/default/toc-demo.json
+++ b/apps/www/public/r/styles/default/toc-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json
index fa491548c7..65644be55e 100644
--- a/apps/www/public/r/styles/default/toggle-demo.json
+++ b/apps/www/public/r/styles/default/toggle-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toolbar-demo.json b/apps/www/public/r/styles/default/toolbar-demo.json
index 9bfd1de567..d956c00d27 100644
--- a/apps/www/public/r/styles/default/toolbar-demo.json
+++ b/apps/www/public/r/styles/default/toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/upload-demo.json b/apps/www/public/r/styles/default/upload-demo.json
index 23c1126234..bbf71ebbdb 100644
--- a/apps/www/public/r/styles/default/upload-demo.json
+++ b/apps/www/public/r/styles/default/upload-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n  BlockMenuPlugin,\n  BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n  CursorOverlay,\n  SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // AI\n        ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n        ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n          ? copilotPlugins\n          : []),\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ...(id === 'list' ? [ListPlugin] : []),\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        ColumnPlugin,\n        SelectionOverlayPlugin,\n\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({\n          options: autoformatOptions,\n        }),\n        BlockSelectionPlugin.configure({\n          options: {\n            areaOptions: {\n              behaviour: {\n                scrolling: {\n                  speedDivider: 1.5,\n                },\n                startThreshold: 10,\n              },\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: true,\n          },\n        }),\n        BlockMenuPlugin.configure({\n          render: { aboveEditable: BlockContextMenu },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin.configure({ options: { indentList: true } }),\n        JuicePlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(\n    id,\n    scrollSelector ?? `blockSelection-${id}`\n  );\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <CheckPlugin componentId=\"fixed-toolbar\">\n          <FixedToolbar className=\"no-scrollbar\">\n            <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n              <FixedToolbarButtons />\n            </CheckPlugin>\n          </FixedToolbar>\n        </CheckPlugin>\n\n        <div id=\"editor-playground\" className=\"flex w-full\">\n          <EditorContainer\n            id={scrollSelector ?? `blockSelection-${id}`}\n            ref={containerRef}\n            variant=\"demo\"\n            className={cn(id && 'max-h-[500px]', className)}\n          >\n            <Editor\n              {...editableProps}\n              variant=\"demo\"\n              className={cn(\n                editableProps.className,\n                // 'overflow-x-auto rounded-none',\n                !id && 'pb-[20vh] pt-4',\n                id && 'pb-8 pt-2'\n              )}\n              placeholder=\"Type...\"\n            />\n\n            <CheckPlugin componentId=\"floating-toolbar\">\n              <FloatingToolbar\n                state={{\n                  // hideToolbar: aiOpen,\n                  showWhenReadOnly: isEnabled(\n                    'comment',\n                    id,\n                    enabled[CommentsPlugin.key]\n                  ),\n                }}\n              >\n                <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                  <FloatingToolbarButtons />\n                </CheckPlugin>\n              </FloatingToolbar>\n            </CheckPlugin>\n\n            <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n              <CursorOverlay containerRef={containerRef} />\n            </CheckPlugin>\n          </EditorContainer>\n\n          <CheckPlugin\n            id=\"comment\"\n            componentId=\"comments-popover\"\n            plugin={CommentsPlugin}\n          >\n            <CommentsPopover />\n          </CheckPlugin>\n        </div>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/yarn.lock b/yarn.lock
index ff884725c7..dd482c179e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6217,7 +6217,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6234,7 +6234,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6253,7 +6253,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     "@udecode/plate-heading": "npm:39.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6269,7 +6269,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6285,7 +6285,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6301,7 +6301,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6317,7 +6317,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6334,7 +6334,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     react-textarea-autosize: "npm:^8.5.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6353,7 +6353,7 @@ __metadata:
     delay: "npm:5.0.0"
     p-defer: "npm:^4.0.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6370,7 +6370,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     prismjs: "npm:^1.29.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6386,7 +6386,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6403,7 +6403,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6413,12 +6413,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-common@npm:39.2.20, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
+"@udecode/plate-common@npm:39.2.21, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-common@workspace:packages/common"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.20"
-    "@udecode/plate-utils": "npm:39.2.20"
+    "@udecode/plate-core": "npm:39.2.21"
+    "@udecode/plate-utils": "npm:39.2.21"
     "@udecode/react-hotkeys": "npm:37.0.0"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
@@ -6435,7 +6435,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-core@npm:39.2.20, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
+"@udecode/plate-core@npm:39.2.21, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-core@workspace:packages/core"
   dependencies:
@@ -6475,7 +6475,7 @@ __metadata:
     "@udecode/plate-table": "npm:39.1.6"
     papaparse: "npm:^5.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6491,7 +6491,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6507,7 +6507,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.94.0"
@@ -6525,7 +6525,7 @@ __metadata:
     diff-match-patch-ts: "npm:^0.6.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6543,7 +6543,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     raf: "npm:^3.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dnd: ">=14.0.0"
     react-dnd-html5-backend: ">=14.0.0"
@@ -6567,7 +6567,7 @@ __metadata:
     "@udecode/plate-table": "npm:39.1.6"
     validator: "npm:^13.12.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6585,7 +6585,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6602,7 +6602,7 @@ __metadata:
     "@excalidraw/excalidraw": "npm:0.16.4"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6618,7 +6618,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6636,7 +6636,7 @@ __metadata:
     "@floating-ui/react": "npm:^0.26.23"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6653,7 +6653,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6669,7 +6669,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6685,7 +6685,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6701,7 +6701,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6719,7 +6719,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     html-entities: "npm:^2.5.2"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6738,7 +6738,7 @@ __metadata:
     "@udecode/plate-list": "npm:39.0.0"
     clsx: "npm:^2.1.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6754,7 +6754,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6771,7 +6771,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     juice: "npm:^8.1.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6787,7 +6787,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6803,7 +6803,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6819,7 +6819,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6837,7 +6837,7 @@ __metadata:
     "@udecode/plate-floating": "npm:39.1.6"
     "@udecode/plate-normalizers": "npm:39.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6855,7 +6855,7 @@ __metadata:
     "@udecode/plate-reset-node": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6874,7 +6874,7 @@ __metadata:
     remark-parse: "npm:^9.0.0"
     unified: "npm:^11.0.5"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6892,7 +6892,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     katex: "npm:0.16.11"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6909,7 +6909,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     js-video-url-parser: "npm:^0.5.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6926,7 +6926,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6943,7 +6943,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6960,7 +6960,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6977,7 +6977,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
     "@playwright/test": ">=1.42.1"
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6993,7 +6993,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7009,7 +7009,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7025,7 +7025,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7042,7 +7042,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     copy-to-clipboard: "npm:^3.3.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7059,7 +7059,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7077,7 +7077,7 @@ __metadata:
     "@udecode/plate-diff": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7094,7 +7094,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     tabbable: "npm:^6.2.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7112,7 +7112,7 @@ __metadata:
     "@udecode/plate-resizable": "npm:39.1.6"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7139,7 +7139,7 @@ __metadata:
     "@udecode/plate-node-id": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7155,7 +7155,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7165,11 +7165,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-utils@npm:39.2.20, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
+"@udecode/plate-utils@npm:39.2.21, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-utils@workspace:packages/plate-utils"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.20"
+    "@udecode/plate-core": "npm:39.2.21"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
     "@udecode/slate-react": "npm:39.2.1"
@@ -7196,7 +7196,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     yjs: "npm:^13.6.19"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.20"
+    "@udecode/plate-common": ">=39.2.21"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7219,7 +7219,7 @@ __metadata:
     "@udecode/plate-code-block": "npm:39.0.0"
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-comments": "npm:39.0.0"
-    "@udecode/plate-common": "npm:39.2.20"
+    "@udecode/plate-common": "npm:39.2.21"
     "@udecode/plate-csv": "npm:39.1.6"
     "@udecode/plate-diff": "npm:39.0.0"
     "@udecode/plate-docx": "npm:39.2.13"