From 7e50c1b43572dd231eca111ef98db82851ab6443 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Tue, 12 Nov 2024 00:24:15 +0100 Subject: [PATCH] feat --- 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 +- .../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 +- .../public/r/styles/default/date-demo.json | 2 +- .../www/public/r/styles/default/dnd-demo.json | 2 +- apps/www/public/r/styles/default/editor.json | 2 +- .../public/r/styles/default/emoji-demo.json | 2 +- .../r/styles/default/excalidraw-demo.json | 2 +- .../styles/default/floating-toolbar-demo.json | 2 +- .../public/r/styles/default/font-demo.json | 2 +- .../public/r/styles/default/ghost-text.json | 2 +- .../r/styles/default/highlight-demo.json | 2 +- apps/www/public/r/styles/default/hr-demo.json | 2 +- .../public/r/styles/default/indent-demo.json | 2 +- apps/www/public/r/styles/default/index.json | 10 +- .../www/public/r/styles/default/kbd-demo.json | 2 +- .../r/styles/default/line-height-demo.json | 2 +- .../public/r/styles/default/link-demo.json | 2 +- .../public/r/styles/default/list-demo.json | 2 +- .../public/r/styles/default/media-demo.json | 2 +- .../public/r/styles/default/mention-demo.json | 2 +- .../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 +- .../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 +- .../plate-playground-template/components.json | 2 +- .../plate-playground-template/package.json | 106 +- .../plate-playground-template/pnpm-lock.yaml | 1834 ++++++++++++----- .../src/components/editor/plate-editor.tsx | 28 +- .../components/editor/plugins/ai-plugins.tsx | 3 - .../editor/plugins/block-menu-plugins.ts | 3 +- .../editor/plugins/block-selection-plugins.ts | 10 +- .../editor/plugins/editor-plugins.tsx | 8 +- .../editor/plugins/fixed-toolbar-plugin.tsx | 17 + .../plugins/floating-toolbar-plugin.tsx | 17 + .../editor/plugins/media-plugins.tsx | 1 + .../editor/plugins/tabbable-plugin.ts | 34 - .../components/editor/plugins/toc-plugin.ts | 1 - .../src/components/editor/transforms.ts | 27 +- .../components/editor/use-create-editor.tsx | 11 +- .../src/components/plate-ui/ai-menu-items.tsx | 5 +- .../src/components/plate-ui/ai-menu.tsx | 1 + .../components/plate-ui/ai-toolbar-button.tsx | 3 + .../plate-ui/block-context-menu.tsx | 20 +- .../components/plate-ui/block-selection.tsx | 15 +- .../components/plate-ui/column-element.tsx | 2 +- .../components/plate-ui/cursor-overlay.tsx | 137 +- .../src/components/plate-ui/date-element.tsx | 1 + .../src/components/plate-ui/draggable.tsx | 5 +- .../src/components/plate-ui/editor.tsx | 39 +- .../plate-ui/emoji-picker-content.tsx | 9 +- .../src/components/plate-ui/fixed-toolbar.tsx | 2 +- .../components/plate-ui/floating-toolbar.tsx | 2 +- .../src/components/plate-ui/ghost-text.tsx | 5 +- .../src/components/plate-ui/hr-element.tsx | 5 +- .../plate-ui/link-floating-toolbar.tsx | 2 + .../plate-ui/link-toolbar-button.tsx | 8 +- .../components/plate-ui/mention-element.tsx | 1 + .../src/components/plate-ui/plate-element.tsx | 5 +- .../plate-ui/table-cell-element.tsx | 11 + .../src/components/plate-ui/table-element.tsx | 19 +- .../components/plate-ui/table-row-element.tsx | 3 +- .../src/hooks/use-is-touch-device.ts | 26 + .../tailwind.config.ts | 11 +- templates/plate-template/components.json | 2 +- templates/plate-template/package.json | 20 +- templates/plate-template/pnpm-lock.yaml | 466 +++-- .../src/components/editor/plate-editor.tsx | 2 +- .../src/components/plate-ui/editor.tsx | 39 +- templates/plate-template/tailwind.config.ts | 133 +- 83 files changed, 1992 insertions(+), 1193 deletions(-) create mode 100644 templates/plate-playground-template/src/components/editor/plugins/fixed-toolbar-plugin.tsx create mode 100644 templates/plate-playground-template/src/components/editor/plugins/floating-toolbar-plugin.tsx delete mode 100644 templates/plate-playground-template/src/components/editor/plugins/tabbable-plugin.ts create mode 100644 templates/plate-playground-template/src/hooks/use-is-touch-device.ts diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json index 0d5f517223..ecff6d9e43 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 437cc78ee8..c5b322ef98 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 d1c83fec32..c54d260ca4 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 648a4bca8f..65af5ecb00 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 909f6211eb..28e91fbc43 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 b70dacb109..27ede9fd07 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 eb2a315733..78272559ff 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 b9865da54a..15e295e1b0 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 b29dc6b4c1..9fed06d4cd 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 5c9aa5ceae..f7bb7756a5 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 a6eef59da8..19b18901f4 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 cf7dc7c07d..ab4c35c74b 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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/editor.json b/apps/www/public/r/styles/default/editor.json index 09326d0ba3..de927dbb03 100644 --- a/apps/www/public/r/styles/default/editor.json +++ b/apps/www/public/r/styles/default/editor.json @@ -16,7 +16,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n PlateContent,\n useEditorContainerRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n 'relative flex w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'h-full',\n demo: 'h-[650px]',\n },\n },\n }\n);\n\nexport const EditorContainer = ({\n className,\n variant,\n ...props\n}: React.HTMLAttributes &\n VariantProps) => {\n const editor = useEditorRef();\n const containerRef = useEditorContainerRef();\n\n return (\n \n );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n cn(\n 'group/editor',\n 'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n 'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n variant: {\n ai: 'w-full px-0 text-sm',\n aiChat:\n 'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n default:\n 'min-h-full w-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n demo: 'min-h-full w-full px-16 pb-72 pt-14 text-base sm:px-[max(64px,calc(50%-350px))]',\n fullWidth: 'min-h-full w-full px-16 pb-72 pt-4 text-base sm:px-24',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nexport const Editor = React.forwardRef(\n ({ className, disabled, focused, variant, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nEditor.displayName = 'Editor';\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n PlateContent,\n useEditorContainerRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n 'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'h-full',\n demo: 'h-[650px]',\n },\n },\n }\n);\n\nexport const EditorContainer = ({\n className,\n variant,\n ...props\n}: React.HTMLAttributes &\n VariantProps) => {\n const editor = useEditorRef();\n const containerRef = useEditorContainerRef();\n\n return (\n \n );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n cn(\n 'group/editor',\n 'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n 'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n variant: {\n ai: 'w-full px-0 text-sm',\n aiChat:\n 'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n default:\n 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nexport const Editor = React.forwardRef(\n ({ className, disabled, focused, variant, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nEditor.displayName = 'Editor';\n", "path": "plate-ui/editor.tsx", "target": "components/plate-ui/editor.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json index 6bd6f8350d..40fa5b2d06 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 59a7b18156..a4016950d6 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 139728e4ab..452a175f86 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 13eebd6aa4..d906eae49f 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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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 from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n const overridePlugins = usePlaygroundEnabled(id);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n const plugins: any[] = [\n ...copilotPlugins,\n ...editorPlugins,\n id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n FloatingToolbarPlugin,\n\n id === 'list' ? autoformatListPlugin : autoformatPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ListPlugin,\n TodoListPlugin,\n ExcalidrawPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n SingleLinePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ];\n\n if (id === 'tabbable') {\n plugins.push(tabbablePlugin);\n }\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 value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const editor = usePlaygroundEditor(id);\n\n return (\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/ghost-text.json b/apps/www/public/r/styles/default/ghost-text.json index 9bd773bf37..ec7609fc8a 100644 --- a/apps/www/public/r/styles/default/ghost-text.json +++ b/apps/www/public/r/styles/default/ghost-text.json @@ -21,7 +21,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { CopilotPluginConfig } from '@udecode/plate-ai/react';\n\nimport { useEditorPlugin, useElement } from '@udecode/plate-common/react';\n\nexport const GhostText = () => {\n const { useOption } = useEditorPlugin({\n key: 'copilot',\n });\n const element = useElement();\n\n const isSuggested = useOption('isSuggested', element.id as string);\n\n if (!isSuggested) return null;\n\n return ;\n};\n\nexport function GhostTextContent() {\n const { useOption } = useEditorPlugin({\n key: 'copilot',\n });\n\n const suggestionText = useOption('suggestionText');\n\n return (\n