docs

apps/www/public/r/index.json

@@ -1321,7 +1321,8 @@
   {
     "dependencies": [
       "react-hook-form",
-      "@hookform/resolvers/zod",
+      "zod",
+      "@hookform/resolvers",
       "@radix-ui/react-label",
       "@radix-ui/react-slot"
     ],

apps/www/public/r/styles/default/basic-nodes-demo.json

@@ -20,7 +20,7 @@
       "type": "registry:example"
     },
     {
-      "content": "import { basicElementsValue } from '@/registry/default/example/values/basic-elements-value';\nimport { basicMarksValue } from '@/registry/default/example/values/basic-marks-value';\n\nexport const basicNodesValue = [...basicElementsValue, ...basicMarksValue];\n",
+      "content": "import { basicElementsValue } from '@/components/values/basic-elements-value';\nimport { basicMarksValue } from '@/components/values/basic-marks-value';\n\nexport const basicNodesValue = [...basicElementsValue, ...basicMarksValue];\n",
       "path": "example/values/basic-nodes-value.tsx",
       "target": "components/basic-nodes-value.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/copilot-demo.json

@@ -14,7 +14,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { copilotValue } from '@/registry/default/example/values/copilot-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { copilotPlugins } from '../components/editor/plugins/copilot-plugins';\n\nexport default function CopilotDemo() {\n  const editor = useCreateEditor({\n    plugins: [...copilotPlugins, ...editorPlugins],\n    value: copilotValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { copilotValue } from '@/components/values/copilot-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { copilotPlugins } from '../components/editor/plugins/copilot-plugins';\n\nexport default function CopilotDemo() {\n  const editor = useCreateEditor({\n    plugins: [...copilotPlugins, ...editorPlugins],\n    value: copilotValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/copilot-demo.tsx",
       "target": "components/copilot-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/editable-voids-demo.json

@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { Plate, createPlatePlugin } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/plate-ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { editableVoidsValue } from '@/registry/default/example/values/editable-voids-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { Input } from '@/components/plate-ui/input';\n\nexport const EditableVoidPlugin = createPlatePlugin({\n  key: 'editable-void',\n  node: {\n    component: EditableVoidElement,\n    isElement: true,\n    isVoid: true,\n  },\n});\n\nexport function EditableVoidElement({\n  attributes,\n  children,\n}: PlateRenderElementProps) {\n  const [inputValue, setInputValue] = useState('');\n\n  const editor = useCreateEditor({\n    plugins: editorPlugins,\n  });\n\n  return (\n    // Need contentEditable=false or Firefox has issues with certain input types.\n    <div {...attributes} contentEditable={false}>\n      <div className=\"mt-2 grid gap-6 rounded-md border p-6 shadow\">\n        <Input\n          id=\"name\"\n          className=\"my-2\"\n          value={inputValue}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n          }}\n          placeholder=\"Name\"\n          type=\"text\"\n        />\n\n        <div className=\"grid w-full max-w-sm items-center gap-2\">\n          <Label htmlFor=\"handed\">Left or right handed:</Label>\n\n          <RadioGroup id=\"handed\" defaultValue=\"r1\">\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r1\" value=\"r1\" />\n              <Label htmlFor=\"r1\">Left</Label>\n            </div>\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r2\" value=\"r2\" />\n              <Label htmlFor=\"r2\">Right</Label>\n            </div>\n          </RadioGroup>\n        </div>\n\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"editable-void-basic-elements\">\n            Tell us about yourself:\n          </Label>\n\n          <Plate\n            editor={editor}\n            // initialValue={basicElementsValue}\n          >\n            <EditorContainer>\n              <Editor />\n            </EditorContainer>\n          </Plate>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n\nexport default function EditableVoidsDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, EditableVoidPlugin],\n    value: editableVoidsValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { Plate, createPlatePlugin } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/plate-ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { editableVoidsValue } from '@/components/values/editable-voids-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { Input } from '@/components/plate-ui/input';\n\nexport const EditableVoidPlugin = createPlatePlugin({\n  key: 'editable-void',\n  node: {\n    component: EditableVoidElement,\n    isElement: true,\n    isVoid: true,\n  },\n});\n\nexport function EditableVoidElement({\n  attributes,\n  children,\n}: PlateRenderElementProps) {\n  const [inputValue, setInputValue] = useState('');\n\n  const editor = useCreateEditor({\n    plugins: editorPlugins,\n  });\n\n  return (\n    // Need contentEditable=false or Firefox has issues with certain input types.\n    <div {...attributes} contentEditable={false}>\n      <div className=\"mt-2 grid gap-6 rounded-md border p-6 shadow\">\n        <Input\n          id=\"name\"\n          className=\"my-2\"\n          value={inputValue}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n          }}\n          placeholder=\"Name\"\n          type=\"text\"\n        />\n\n        <div className=\"grid w-full max-w-sm items-center gap-2\">\n          <Label htmlFor=\"handed\">Left or right handed:</Label>\n\n          <RadioGroup id=\"handed\" defaultValue=\"r1\">\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r1\" value=\"r1\" />\n              <Label htmlFor=\"r1\">Left</Label>\n            </div>\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r2\" value=\"r2\" />\n              <Label htmlFor=\"r2\">Right</Label>\n            </div>\n          </RadioGroup>\n        </div>\n\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"editable-void-basic-elements\">\n            Tell us about yourself:\n          </Label>\n\n          <Plate\n            editor={editor}\n            // initialValue={basicElementsValue}\n          >\n            <EditorContainer>\n              <Editor />\n            </EditorContainer>\n          </Plate>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n\nexport default function EditableVoidsDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, EditableVoidPlugin],\n    value: editableVoidsValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/editable-voids-demo.tsx",
       "target": "components/editable-voids-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/editor-select.json

@@ -2,7 +2,7 @@
   "description": "A select editor",
   "files": [
     {
-      "content": "import EditorSelectForm from '@/registry/default/example/select-editor-demo';\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full justify-center\" data-registry=\"plate\">\n      <EditorSelectForm />\n    </div>\n  );\n}\n",
+      "content": "import EditorSelectForm from '@/components/select-editor-demo';\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full justify-center\" data-registry=\"plate\">\n      <EditorSelectForm />\n    </div>\n  );\n}\n",
       "path": "block/editor-select/page.tsx",
       "target": "app/editor/page.tsx",
       "type": "registry:page"

apps/www/public/r/styles/default/excalidraw-demo.json

@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { excalidrawValue } from '@/registry/default/example/values/excalidraw-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';\n\nexport default function ExcalidrawDemo() {\n  const editor = useCreateEditor({\n    components: {\n      [ExcalidrawPlugin.key]: ExcalidrawElement,\n    },\n    plugins: [...editorPlugins, ExcalidrawPlugin],\n    value: excalidrawValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { excalidrawValue } from '@/components/values/excalidraw-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';\n\nexport default function ExcalidrawDemo() {\n  const editor = useCreateEditor({\n    components: {\n      [ExcalidrawPlugin.key]: ExcalidrawElement,\n    },\n    plugins: [...editorPlugins, ExcalidrawPlugin],\n    value: excalidrawValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/excalidraw-demo.tsx",
       "target": "components/excalidraw-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/find-replace-demo.json

@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, useEditorPlugin } from '@udecode/plate-common/react';\nimport { FindReplacePlugin } from '@udecode/plate-find-replace';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { findReplaceValue } from '@/registry/default/example/values/find-replace-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Input } from '@/components/plate-ui/input';\nimport { SearchHighlightLeaf } from '@/components/plate-ui/search-highlight-leaf';\n\nexport function FindToolbar() {\n  const { editor, setOption, useOption } = useEditorPlugin(FindReplacePlugin);\n  const search = useOption('search');\n\n  return (\n    <FixedToolbar className=\"border-none py-3\">\n      <Input\n        data-testid=\"ToolbarSearchHighlightInput\"\n        className=\"mx-2\"\n        value={search}\n        onChange={(e) => {\n          setOption('search', e.target.value);\n          editor.api.redecorate();\n        }}\n        placeholder=\"Search the text...\"\n        type=\"search\"\n      />\n    </FixedToolbar>\n  );\n}\n\nexport default function FindReplaceDemo() {\n  const editor = useCreateEditor(\n    {\n      components: {\n        [FindReplacePlugin.key]: SearchHighlightLeaf,\n      },\n      plugins: [\n        ...editorPlugins,\n        FindReplacePlugin.configure({ options: { search: 'text' } }),\n      ],\n      value: findReplaceValue,\n    },\n    []\n  );\n\n  return (\n    <Plate editor={editor}>\n      <FindToolbar />\n\n      <EditorContainer variant=\"demo\" className=\"border-t\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, useEditorPlugin } from '@udecode/plate-common/react';\nimport { FindReplacePlugin } from '@udecode/plate-find-replace';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { findReplaceValue } from '@/components/values/find-replace-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Input } from '@/components/plate-ui/input';\nimport { SearchHighlightLeaf } from '@/components/plate-ui/search-highlight-leaf';\n\nexport function FindToolbar() {\n  const { editor, setOption, useOption } = useEditorPlugin(FindReplacePlugin);\n  const search = useOption('search');\n\n  return (\n    <FixedToolbar className=\"border-none py-3\">\n      <Input\n        data-testid=\"ToolbarSearchHighlightInput\"\n        className=\"mx-2\"\n        value={search}\n        onChange={(e) => {\n          setOption('search', e.target.value);\n          editor.api.redecorate();\n        }}\n        placeholder=\"Search the text...\"\n        type=\"search\"\n      />\n    </FixedToolbar>\n  );\n}\n\nexport default function FindReplaceDemo() {\n  const editor = useCreateEditor(\n    {\n      components: {\n        [FindReplacePlugin.key]: SearchHighlightLeaf,\n      },\n      plugins: [\n        ...editorPlugins,\n        FindReplacePlugin.configure({ options: { search: 'text' } }),\n      ],\n      value: findReplaceValue,\n    },\n    []\n  );\n\n  return (\n    <Plate editor={editor}>\n      <FindToolbar />\n\n      <EditorContainer variant=\"demo\" className=\"border-t\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/find-replace-demo.tsx",
       "target": "components/find-replace-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/form.json

@@ -1,7 +1,8 @@
 {
   "dependencies": [
     "react-hook-form",
-    "@hookform/resolvers/zod",
+    "zod",
+    "@hookform/resolvers",
     "@radix-ui/react-label",
     "@radix-ui/react-slot"
   ],