- "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 <DemoId id={id}>\n <Plate editor={editor}>\n <EditorContainer className={cn(id && 'h-[500px]', className)}>\n <Editor\n variant=\"demo\"\n className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n spellCheck={false}\n />\n </EditorContainer>\n </Plate>\n </DemoId>\n );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n",
0 commit comments