From 42ee535678b31e7a0b9b26d0928711303a4f95c7 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Mon, 4 Nov 2024 14:12:17 +0800 Subject: [PATCH] wip --- apps/www/public/r/styles/default/ai-demo.json | 2 +- .../public/r/styles/default/align-demo.json | 2 +- .../r/styles/default/basic-elements-demo.json | 2 +- .../r/styles/default/basic-marks-demo.json | 2 +- .../r/styles/default/basic-nodes-demo.json | 2 +- .../r/styles/default/block-menu-demo.json | 2 +- .../r/styles/default/block-selection-demo.json | 2 +- .../public/r/styles/default/column-demo.json | 2 +- .../public/r/styles/default/comment-demo.json | 2 +- .../public/r/styles/default/copilot-demo.json | 2 +- .../www/public/r/styles/default/date-demo.json | 2 +- apps/www/public/r/styles/default/dnd-demo.json | 2 +- .../public/r/styles/default/emoji-demo.json | 2 +- .../r/styles/default/excalidraw-demo.json | 2 +- .../styles/default/floating-toolbar-demo.json | 2 +- .../www/public/r/styles/default/font-demo.json | 2 +- .../r/styles/default/highlight-demo.json | 2 +- apps/www/public/r/styles/default/hr-demo.json | 2 +- .../public/r/styles/default/image-element.json | 2 +- .../public/r/styles/default/indent-demo.json | 2 +- apps/www/public/r/styles/default/kbd-demo.json | 2 +- .../r/styles/default/line-height-demo.json | 2 +- .../www/public/r/styles/default/link-demo.json | 2 +- .../www/public/r/styles/default/list-demo.json | 2 +- .../public/r/styles/default/media-demo.json | 2 +- .../public/r/styles/default/mention-demo.json | 2 +- .../www/public/r/styles/default/mode-demo.json | 2 +- .../r/styles/default/placeholder-demo.json | 2 +- .../r/styles/default/playground-demo.json | 2 +- .../r/styles/default/resizable-demo.json | 2 +- .../r/styles/default/slash-command-demo.json | 2 +- .../public/r/styles/default/table-demo.json | 2 +- apps/www/public/r/styles/default/toc-demo.json | 2 +- .../public/r/styles/default/toggle-demo.json | 2 +- .../public/r/styles/default/toolbar-demo.json | 2 +- .../public/r/styles/default/upload-demo.json | 2 +- .../default/example/playground-demo.tsx | 6 +++--- .../default/plate-ui/image-element.tsx | 12 +++++++++++- packages/dnd/src/DndPlugin.tsx | 18 ++++++++---------- packages/dnd/src/hooks/useDropNode.ts | 5 +++-- .../media/src/lib/image/BaseImagePlugin.ts | 4 +++- .../src/lib/image/withImageEmbed.spec.tsx | 4 ++-- .../src/lib/image/withImageUpload.spec.tsx | 8 ++++---- .../media/src/lib/image/withImageUpload.ts | 2 +- 44 files changed, 71 insertions(+), 60 deletions(-) diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json index a8d5cbe3f3..72b02bfb82 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 cdba8763c8..fbbb2cf467 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 a6c3ffd3c1..2624ceceac 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 207926d3f7..a5b58cd2c0 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 a0f3490f12..191775580c 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 067dd84263..7f523b1d3e 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 334a0a12b0..ac573d5563 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 b5abebd582..645c7dd781 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 a968ae50d2..d31b981889 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 0b8aff0524..41ccfa8853 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 6a0a294da7..0d3d98040b 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 8d0dc9f8cc..a94cca653f 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 87699abcef..ab4cc9118a 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 c95cc2312f..fdc01f0220 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 803522ec21..d8ad642643 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 28700db28d..9a403575df 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 4f1152382a..2a32c44967 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 3e59b3d150..e3cbb00b88 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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/image-element.json b/apps/www/public/r/styles/default/image-element.json index 7944632052..5f56dfc54f 100644 --- a/apps/www/public/r/styles/default/image-element.json +++ b/apps/www/public/r/styles/default/image-element.json @@ -20,7 +20,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { useDraggable, useDraggableState } from '@udecode/plate-dnd';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n const state = useDraggableState({ element: props.element });\n const { isDragging } = state;\n const { handleRef } = useDraggable(state);\n\n return (\n \n \n
\n \n \n \n \n \n\n \n {\n e.preventDefault();\n }}\n placeholder=\"Write a caption...\"\n />\n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", "path": "plate-ui/image-element.tsx", "target": "components/plate-ui/image-element.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json index 1abe6b9969..456b956bcf 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 32d062e655..42fe130014 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 a5090ab9ec..01f209d824 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 a0a7df6d85..b3f619f9e8 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 0184f1fc15..d27499fc66 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 11a91dbbe7..0c13504d57 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 24c4edfa1c..4ec689b387 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 198b38b777..e71ca9f9f0 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 69adb67a15..2fe089de42 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 de016eaf22..8027bbb752 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 c43b06c13b..02c877e5ee 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 19f61e7051..09306aa04c 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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/table-demo.json b/apps/www/public/r/styles/default/table-demo.json index 4a704643d0..d761e26bf4 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 2c811f7f29..1a6bc925ed 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 65644be55e..30c8528c65 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 d956c00d27..c67da04bd8 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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 bbf71ebbdb..8f8ba398f0 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: () => },\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\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({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(ImagePlugin)\n .insertImageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\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 \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\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/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index cd71d5cc3f..8a5ca7badb 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -300,11 +300,11 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => { DndPlugin.configure({ options: { enableScroller: true, - onDropFiles: (editor, props) => { + onDropFiles: ({ dragItem, editor, target }) => { editor .getTransforms(ImagePlugin) - .insertImageFromFiles(props.dragItem.files, { - at: props.dropPath, + .insert.imageFromFiles(dragItem.files, { + at: target, nextBlock: false, }); }, diff --git a/apps/www/src/registry/default/plate-ui/image-element.tsx b/apps/www/src/registry/default/plate-ui/image-element.tsx index 48129dd57b..c052329d2d 100644 --- a/apps/www/src/registry/default/plate-ui/image-element.tsx +++ b/apps/www/src/registry/default/plate-ui/image-element.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { cn, withRef } from '@udecode/cn'; import { withHOC } from '@udecode/plate-common/react'; +import { useDraggable, useDraggableState } from '@udecode/plate-dnd'; import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; @@ -24,6 +25,10 @@ export const ImageElement = withHOC( const width = useResizableStore().get.width(); + const state = useDraggableState({ element: props.element }); + const { isDragging } = state; + const { handleRef } = useDraggable(state); + return ( { + e.preventDefault(); + }} placeholder="Write a caption..." /> diff --git a/packages/dnd/src/DndPlugin.tsx b/packages/dnd/src/DndPlugin.tsx index a2f1bb6e4a..82753138c4 100644 --- a/packages/dnd/src/DndPlugin.tsx +++ b/packages/dnd/src/DndPlugin.tsx @@ -20,16 +20,14 @@ export type DndConfig = PluginConfig< enableScroller?: boolean; isDragging?: boolean; scrollerProps?: Partial; - onDropFiles?: ( - props: { - editor: PlateEditor; - id: string; - dragItem: FileDragItemNode; - monitor: DropTargetMonitor; - nodeRef: any; - dropPath?: Path; - } - ) => void; + onDropFiles?: (props: { + id: string; + dragItem: FileDragItemNode; + editor: PlateEditor; + monitor: DropTargetMonitor; + nodeRef: any; + target?: Path; + }) => void; } >; diff --git a/packages/dnd/src/hooks/useDropNode.ts b/packages/dnd/src/hooks/useDropNode.ts index bbaeb315fe..5f88c1ab7f 100644 --- a/packages/dnd/src/hooks/useDropNode.ts +++ b/packages/dnd/src/hooks/useDropNode.ts @@ -97,12 +97,13 @@ export const useDropNode = ( if (!result || !onDropFiles) return; - return onDropFiles(editor, { + return onDropFiles({ id, dragItem: dragItem as FileDragItemNode, - dropPath: result.to, + editor, monitor, nodeRef, + target: result.to, }); } diff --git a/packages/media/src/lib/image/BaseImagePlugin.ts b/packages/media/src/lib/image/BaseImagePlugin.ts index c99c69c249..0ff9d9a4c1 100644 --- a/packages/media/src/lib/image/BaseImagePlugin.ts +++ b/packages/media/src/lib/image/BaseImagePlugin.ts @@ -45,7 +45,9 @@ export const BaseImagePlugin = createTSlatePlugin({ }, }) .extendEditorTransforms(({ editor }) => ({ - insertImageFromFiles: bindFirst(insertImageFromFiles, editor), + insert: { + imageFromFiles: bindFirst(insertImageFromFiles, editor as any), + }, })) .extend(({ plugin }) => ({ parsers: { diff --git a/packages/media/src/lib/image/withImageEmbed.spec.tsx b/packages/media/src/lib/image/withImageEmbed.spec.tsx index 94edff4ceb..11f7bda11d 100644 --- a/packages/media/src/lib/image/withImageEmbed.spec.tsx +++ b/packages/media/src/lib/image/withImageEmbed.spec.tsx @@ -4,7 +4,7 @@ import { getEditorPlugin } from '@udecode/plate-common'; import { createSlateEditor } from '@udecode/plate-common'; import { jsx } from '@udecode/plate-test-utils'; -import { BaseImagePlugin } from './BaseImagePlugin'; +import { ImagePlugin } from '../../react'; import { withImageEmbed } from './withImageEmbed'; jsx; @@ -27,7 +27,7 @@ describe('withImageEmbed', () => { it('should insert image from the text', () => { const editor = withImageEmbed( - getEditorPlugin(createSlateEditor({ editor: input }), BaseImagePlugin) + getEditorPlugin(createSlateEditor({ editor: input }), ImagePlugin as any) ); const data = { diff --git a/packages/media/src/lib/image/withImageUpload.spec.tsx b/packages/media/src/lib/image/withImageUpload.spec.tsx index 0d2eb8135e..7576bc0d33 100644 --- a/packages/media/src/lib/image/withImageUpload.spec.tsx +++ b/packages/media/src/lib/image/withImageUpload.spec.tsx @@ -2,8 +2,8 @@ import { createPlateEditor } from '@udecode/plate-common/react'; import { jsx } from '@udecode/plate-test-utils'; +import { ImagePlugin } from '../../react'; -import { BaseImagePlugin } from './BaseImagePlugin'; jsx; @@ -24,7 +24,7 @@ describe('withImageUpload', () => { it('should insert image from the file(s)', () => { const editor = createPlateEditor({ editor: input, - plugins: [BaseImagePlugin], + plugins: [ImagePlugin], }); const data = { @@ -59,7 +59,7 @@ describe('withImageUpload', () => { const editor = createPlateEditor({ editor: input, - plugins: [BaseImagePlugin], + plugins: [ImagePlugin], }); const data = { @@ -87,7 +87,7 @@ describe('withImageUpload', () => { it('should insert image from the file(s)', () => { const editor = createPlateEditor({ editor: input, - plugins: [BaseImagePlugin], + plugins: [ImagePlugin], }); const data = { diff --git a/packages/media/src/lib/image/withImageUpload.ts b/packages/media/src/lib/image/withImageUpload.ts index f8a21db241..61c46bc645 100644 --- a/packages/media/src/lib/image/withImageUpload.ts +++ b/packages/media/src/lib/image/withImageUpload.ts @@ -39,7 +39,7 @@ export const withImageUpload: ExtendEditor = ({ return insertData(dataTransfer); } - editor.getTransforms(ImagePlugin).insertImageFromFiles(files); + editor.getTransforms(ImagePlugin).insert.imageFromFiles(files); } else { return insertData(dataTransfer); }