diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 20bb216b71..c02c508c18 100644
--- a/apps/www/public/r/index.json
+++ b/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"
     ],
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 e530abc640..85d81989dd 100644
--- a/apps/www/public/r/styles/default/basic-nodes-demo.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json
index 4c9bc6b850..9b1dcbe1bc 100644
--- a/apps/www/public/r/styles/default/copilot-demo.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/editable-voids-demo.json b/apps/www/public/r/styles/default/editable-voids-demo.json
index 248520c9cc..d4ba243bc8 100644
--- a/apps/www/public/r/styles/default/editable-voids-demo.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/editor-select.json b/apps/www/public/r/styles/default/editor-select.json
index a6a737697a..d10bd5709f 100644
--- a/apps/www/public/r/styles/default/editor-select.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/excalidraw-demo.json b/apps/www/public/r/styles/default/excalidraw-demo.json
index 9b125ef983..b88b72a29f 100644
--- a/apps/www/public/r/styles/default/excalidraw-demo.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/find-replace-demo.json b/apps/www/public/r/styles/default/find-replace-demo.json
index 48de47711a..15067e4b1d 100644
--- a/apps/www/public/r/styles/default/find-replace-demo.json
+++ b/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"
diff --git a/apps/www/public/r/styles/default/form.json b/apps/www/public/r/styles/default/form.json
index 6e45630f15..34514e1a4b 100644
--- a/apps/www/public/r/styles/default/form.json
+++ b/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"
   ],
diff --git a/apps/www/public/r/styles/default/hundreds-blocks-demo.json b/apps/www/public/r/styles/default/hundreds-blocks-demo.json
index 72a1e10409..fe4f44b28b 100644
--- a/apps/www/public/r/styles/default/hundreds-blocks-demo.json
+++ b/apps/www/public/r/styles/default/hundreds-blocks-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport type { TElement, Value } from '@udecode/plate-common';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate } from '@udecode/plate-common/react';\nimport { createEditor } from 'slate';\nimport {\n  type ReactEditor,\n  type RenderElementProps,\n  Editable,\n  Slate,\n  withReact,\n} from 'slate-react';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { createHugeDocumentValue } from '@/registry/default/example/values/huge-document-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst value = createHugeDocumentValue();\n\nfunction WithPlate() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor spellCheck={false} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\nfunction Element({ attributes, children, element }: RenderElementProps) {\n  switch ((element as TElement).type) {\n    case 'h1': {\n      return <h1 {...attributes}>{children}</h1>;\n    }\n    default: {\n      return <p {...attributes}>{children}</p>;\n    }\n  }\n}\n\nfunction WithoutPlate() {\n  const [initialValue, setValue] = useState(value);\n  const renderElement = useCallback((p: any) => <Element {...p} />, []);\n  const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n  const onChange = useCallback((newValue: Value) => setValue(newValue), []);\n\n  return (\n    <Slate\n      onChange={onChange as any}\n      editor={editor}\n      initialValue={initialValue}\n    >\n      <Editable renderElement={renderElement} spellCheck={false} />\n    </Slate>\n  );\n}\n\nexport default function HundredsBlocksDemo() {\n  return (\n    <div className=\"flex\">\n      <div className=\"w-1/2 p-4\">\n        <div className=\"mb-4 text-lg font-bold\">Plate</div>\n        <WithPlate />\n      </div>\n      <div className=\"w-1/2 p-4\">\n        <div className=\"mb-4 text-lg font-bold\">Slate</div>\n        <WithoutPlate />\n      </div>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport type { TElement, Value } from '@udecode/plate-common';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate } from '@udecode/plate-common/react';\nimport { createEditor } from 'slate';\nimport {\n  type ReactEditor,\n  type RenderElementProps,\n  Editable,\n  Slate,\n  withReact,\n} from 'slate-react';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { createHugeDocumentValue } from '@/components/values/huge-document-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst value = createHugeDocumentValue();\n\nfunction WithPlate() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor spellCheck={false} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\nfunction Element({ attributes, children, element }: RenderElementProps) {\n  switch ((element as TElement).type) {\n    case 'h1': {\n      return <h1 {...attributes}>{children}</h1>;\n    }\n    default: {\n      return <p {...attributes}>{children}</p>;\n    }\n  }\n}\n\nfunction WithoutPlate() {\n  const [initialValue, setValue] = useState(value);\n  const renderElement = useCallback((p: any) => <Element {...p} />, []);\n  const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n  const onChange = useCallback((newValue: Value) => setValue(newValue), []);\n\n  return (\n    <Slate\n      onChange={onChange as any}\n      editor={editor}\n      initialValue={initialValue}\n    >\n      <Editable renderElement={renderElement} spellCheck={false} />\n    </Slate>\n  );\n}\n\nexport default function HundredsBlocksDemo() {\n  return (\n    <div className=\"flex\">\n      <div className=\"w-1/2 p-4\">\n        <div className=\"mb-4 text-lg font-bold\">Plate</div>\n        <WithPlate />\n      </div>\n      <div className=\"w-1/2 p-4\">\n        <div className=\"mb-4 text-lg font-bold\">Slate</div>\n        <WithoutPlate />\n      </div>\n    </div>\n  );\n}\n",
       "path": "example/hundreds-blocks-demo.tsx",
       "target": "components/hundreds-blocks-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/hundreds-editors-demo.json b/apps/www/public/r/styles/default/hundreds-editors-demo.json
index bda4178529..90c174d618 100644
--- a/apps/www/public/r/styles/default/hundreds-editors-demo.json
+++ b/apps/www/public/r/styles/default/hundreds-editors-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { createMultiEditorsValue } from '@/registry/default/example/values/multi-editors-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst values = createMultiEditorsValue();\n\nfunction WithPlate({ id, value }: any) {\n  const editor = usePlateEditor({\n    id,\n    // override: { components: PlateUI },\n    // plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor spellCheck={false} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\n// function Element({ attributes, children, element }: any) {\n//   switch (element.type) {\n//     case 'h1':\n//       return <h1 {...attributes}>{children}</h1>;\n//     default:\n//       return <p {...attributes}>{children}</p>;\n//   }\n// }\n\n// function WithoutPlate({ initialValue }: any) {\n//   const [value, setValue] = useState(initialValue);\n//   const renderElement = useCallback((p) => <Element {...p} />, []);\n//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n//\n//   return (\n//     <Slate\n//       editor={editor}\n//       value={value}\n//       onChange={useCallback((v) => setValue(v), [])}\n//     >\n//       <Editable renderElement={renderElement} />\n//     </Slate>\n//   );\n// }\n\nexport default function HundredsEditorsDemo() {\n  return (\n    <div className=\"flex flex-col\">\n      {values.map((value, idx) => {\n        return (\n          <div key={idx} className=\"p-10\">\n            <h3 className=\"mb-2 font-semibold\">#{idx + 1}</h3>\n            <WithPlate id={idx + 1} value={value} />\n            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { createMultiEditorsValue } from '@/components/values/multi-editors-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst values = createMultiEditorsValue();\n\nfunction WithPlate({ id, value }: any) {\n  const editor = usePlateEditor({\n    id,\n    // override: { components: PlateUI },\n    // plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor spellCheck={false} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\n// function Element({ attributes, children, element }: any) {\n//   switch (element.type) {\n//     case 'h1':\n//       return <h1 {...attributes}>{children}</h1>;\n//     default:\n//       return <p {...attributes}>{children}</p>;\n//   }\n// }\n\n// function WithoutPlate({ initialValue }: any) {\n//   const [value, setValue] = useState(initialValue);\n//   const renderElement = useCallback((p) => <Element {...p} />, []);\n//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n//\n//   return (\n//     <Slate\n//       editor={editor}\n//       value={value}\n//       onChange={useCallback((v) => setValue(v), [])}\n//     >\n//       <Editable renderElement={renderElement} />\n//     </Slate>\n//   );\n// }\n\nexport default function HundredsEditorsDemo() {\n  return (\n    <div className=\"flex flex-col\">\n      {values.map((value, idx) => {\n        return (\n          <div key={idx} className=\"p-10\">\n            <h3 className=\"mb-2 font-semibold\">#{idx + 1}</h3>\n            <WithPlate id={idx + 1} value={value} />\n            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
       "path": "example/hundreds-editors-demo.tsx",
       "target": "components/hundreds-editors-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/iframe-demo.json b/apps/www/public/r/styles/default/iframe-demo.json
index 9f2e1fec10..f3c73cd36b 100644
--- a/apps/www/public/r/styles/default/iframe-demo.json
+++ b/apps/www/public/r/styles/default/iframe-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\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 { iframeValue } from '@/registry/default/example/values/iframe-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { EditableVoidPlugin } from './editable-voids-demo';\n\nexport function IFrame({ children, ...props }: any) {\n  const [contentRef, setContentRef] = useState<any>(null);\n  const mountNode = contentRef?.contentWindow?.document.body;\n\n  return (\n    <iframe {...props} ref={setContentRef}>\n      {mountNode && createPortal(React.Children.only(children), mountNode)}\n    </iframe>\n  );\n}\n\nexport default function IframeDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, EditableVoidPlugin],\n    value: iframeValue,\n  });\n\n  return (\n    <IFrame className=\"size-full h-[500px]\">\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor />\n        </EditorContainer>\n      </Plate>\n    </IFrame>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\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 { iframeValue } from '@/components/values/iframe-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { EditableVoidPlugin } from './editable-voids-demo';\n\nexport function IFrame({ children, ...props }: any) {\n  const [contentRef, setContentRef] = useState<any>(null);\n  const mountNode = contentRef?.contentWindow?.document.body;\n\n  return (\n    <iframe {...props} ref={setContentRef}>\n      {mountNode && createPortal(React.Children.only(children), mountNode)}\n    </iframe>\n  );\n}\n\nexport default function IframeDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, EditableVoidPlugin],\n    value: iframeValue,\n  });\n\n  return (\n    <IFrame className=\"size-full h-[500px]\">\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor />\n        </EditorContainer>\n      </Plate>\n    </IFrame>\n  );\n}\n",
       "path": "example/iframe-demo.tsx",
       "target": "components/iframe-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/list-demo.json b/apps/www/public/r/styles/default/list-demo.json
index 54c60db483..64abab6de5 100644
--- a/apps/www/public/r/styles/default/list-demo.json
+++ b/apps/www/public/r/styles/default/list-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { Plate, PlateElement } from '@udecode/plate-common/react';\nimport {\n  BulletedListPlugin,\n  ListItemPlugin,\n  ListPlugin,\n  NumberedListPlugin,\n  TodoListPlugin,\n} from '@udecode/plate-list/react';\n\nimport { autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { listValue } from '@/registry/default/example/values/list-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { ListElement } from '@/components/plate-ui/list-element';\nimport { TodoListElement } from '@/components/plate-ui/todo-list-element';\n\nexport default function ListDemo() {\n  const editor = useCreateEditor({\n    components: {\n      [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),\n      [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }),\n      [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),\n      [TodoListPlugin.key]: TodoListElement,\n    },\n    plugins: [\n      ...editorPlugins,\n      ListPlugin,\n      TodoListPlugin,\n      FixedToolbarListPlugin,\n      autoformatListPlugin,\n    ],\n    value: listValue,\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 { withProps } from '@udecode/cn';\nimport { Plate, PlateElement } from '@udecode/plate-common/react';\nimport {\n  BulletedListPlugin,\n  ListItemPlugin,\n  ListPlugin,\n  NumberedListPlugin,\n  TodoListPlugin,\n} from '@udecode/plate-list/react';\n\nimport { autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { listValue } from '@/components/values/list-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { ListElement } from '@/components/plate-ui/list-element';\nimport { TodoListElement } from '@/components/plate-ui/todo-list-element';\n\nexport default function ListDemo() {\n  const editor = useCreateEditor({\n    components: {\n      [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),\n      [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }),\n      [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),\n      [TodoListPlugin.key]: TodoListElement,\n    },\n    plugins: [\n      ...editorPlugins,\n      ListPlugin,\n      TodoListPlugin,\n      FixedToolbarListPlugin,\n      autoformatListPlugin,\n    ],\n    value: listValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/list-demo.tsx",
       "target": "components/list-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/multiple-editors-demo.json b/apps/www/public/r/styles/default/multiple-editors-demo.json
index 7cfbeba3fd..e3337a3c45 100644
--- a/apps/www/public/r/styles/default/multiple-editors-demo.json
+++ b/apps/www/public/r/styles/default/multiple-editors-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate } from '@udecode/plate-common/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\n\nimport { deletePlugins } from '@/components/editor/plugins/delete-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { basicElementsValue } from '@/registry/default/example/values/basic-elements-value';\nimport { basicMarksValue } from '@/registry/default/example/values/basic-marks-value';\nimport { imageValue } from '@/registry/default/example/values/media-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Separator } from '@/components/plate-ui/separator';\nimport { TurnIntoDropdownMenu } from '@/components/plate-ui/turn-into-dropdown-menu';\n\nexport default function MultipleEditorsDemo() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicElementsValue,\n  });\n\n  const editorMarks = useCreateEditor({\n    id: 'marks',\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicMarksValue,\n  });\n\n  const editorImage = useCreateEditor({\n    id: 'marks',\n    plugins: [\n      BasicElementsPlugin,\n      BasicMarksPlugin,\n      ImagePlugin,\n      ...deletePlugins,\n    ],\n    value: imageValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Plate editor={editorMarks}>\n        <Plate editor={editorImage}>\n          <FixedToolbar>\n            <TurnIntoDropdownMenu />\n          </FixedToolbar>\n\n          <div>\n            <EditorContainer>\n              <Editor />\n            </EditorContainer>\n            <Separator />\n            <EditorContainer>\n              <Editor id=\"marks\" />\n            </EditorContainer>\n            <Separator />\n            <EditorContainer>\n              <Editor id=\"image\" />\n            </EditorContainer>\n          </div>\n        </Plate>\n      </Plate>\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate } from '@udecode/plate-common/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\n\nimport { deletePlugins } from '@/components/editor/plugins/delete-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { basicElementsValue } from '@/components/values/basic-elements-value';\nimport { basicMarksValue } from '@/components/values/basic-marks-value';\nimport { imageValue } from '@/components/values/media-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Separator } from '@/components/plate-ui/separator';\nimport { TurnIntoDropdownMenu } from '@/components/plate-ui/turn-into-dropdown-menu';\n\nexport default function MultipleEditorsDemo() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicElementsValue,\n  });\n\n  const editorMarks = useCreateEditor({\n    id: 'marks',\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicMarksValue,\n  });\n\n  const editorImage = useCreateEditor({\n    id: 'marks',\n    plugins: [\n      BasicElementsPlugin,\n      BasicMarksPlugin,\n      ImagePlugin,\n      ...deletePlugins,\n    ],\n    value: imageValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Plate editor={editorMarks}>\n        <Plate editor={editorImage}>\n          <FixedToolbar>\n            <TurnIntoDropdownMenu />\n          </FixedToolbar>\n\n          <div>\n            <EditorContainer>\n              <Editor />\n            </EditorContainer>\n            <Separator />\n            <EditorContainer>\n              <Editor id=\"marks\" />\n            </EditorContainer>\n            <Separator />\n            <EditorContainer>\n              <Editor id=\"image\" />\n            </EditorContainer>\n          </div>\n        </Plate>\n      </Plate>\n    </Plate>\n  );\n}\n",
       "path": "example/multiple-editors-demo.tsx",
       "target": "components/multiple-editors-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/preview-markdown-demo.json b/apps/www/public/r/styles/default/preview-markdown-demo.json
index 5d6a6cf712..ea08375c4d 100644
--- a/apps/www/public/r/styles/default/preview-markdown-demo.json
+++ b/apps/www/public/r/styles/default/preview-markdown-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\n/* eslint-disable prettier/prettier */\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BasicElementsPlugin } from \"@udecode/plate-basic-elements/react\";\nimport { BasicMarksPlugin } from \"@udecode/plate-basic-marks/react\";\nimport {\n  type Decorate,\n  type TText, createSlatePlugin, isText\n} from \"@udecode/plate-common\";\nimport { type TRenderLeafProps, Plate  } from \"@udecode/plate-common/react\";\nimport Prism from 'prismjs';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { previewMdValue } from '@/registry/default/example/values/preview-md-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/**\n * Decorate texts with markdown preview.\n */\nconst decoratePreview: Decorate =\n  ({entry: [node, path]}) => {\n    const ranges: any[] = [];\n\n    if (!isText(node)) {\n      return ranges;\n    }\n\n    const getLength = (token: any) => {\n      if (typeof token === 'string') {\n        return token.length;\n      }\n      if (typeof token.content === 'string') {\n        return token.content.length;\n      }\n\n      return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n    };\n\n    const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n    let start = 0;\n\n    for (const token of tokens) {\n      const length = getLength(token);\n      const end = start + length;\n\n      if (typeof token !== 'string') {\n        ranges.push({\n          anchor: { offset: start, path },\n          focus: { offset: end, path },\n          [token.type]: true,\n        });\n      }\n\n      start = end;\n    }\n\n    return ranges;\n  };\n\nfunction PreviewLeaf({\n  attributes,\n  children,\n  leaf,\n}: TRenderLeafProps<\n  {\n    blockquote?: boolean;\n    bold?: boolean;\n    code?: boolean;\n    hr?: boolean;\n    italic?: boolean;\n    list?: boolean;\n    title?: boolean;\n  } & TText\n>) {\n  const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n  return (\n    <span\n      {...attributes}\n      className={cn(\n        bold && 'font-bold',\n        italic && 'italic',\n        title && 'mx-0 mb-2.5 mt-5 inline-block text-[20px] font-bold',\n        list && 'pl-2.5 text-[20px] leading-[10px]',\n        hr && 'block border-b-2 border-[#ddd] text-center',\n        blockquote &&\n          'inline-block border-l-2 border-[#ddd] pl-2.5 italic text-[#aaa]',\n        code && 'bg-[#eee] p-[3px] font-mono'\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\n\nexport default function PreviewMdDemo() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin, createSlatePlugin({\n      key: 'preview-markdown',\n      decorate: decoratePreview,\n    })],\n    value: previewMdValue,\n  })\n  \n  return (\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor renderLeaf={PreviewLeaf} />\n        </EditorContainer>\n      </Plate>\n  );\n}\n",
+      "content": "'use client';\n\n/* eslint-disable prettier/prettier */\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BasicElementsPlugin } from \"@udecode/plate-basic-elements/react\";\nimport { BasicMarksPlugin } from \"@udecode/plate-basic-marks/react\";\nimport {\n  type Decorate,\n  type TText, createSlatePlugin, isText\n} from \"@udecode/plate-common\";\nimport { type TRenderLeafProps, Plate  } from \"@udecode/plate-common/react\";\nimport Prism from 'prismjs';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { previewMdValue } from '@/components/values/preview-md-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/**\n * Decorate texts with markdown preview.\n */\nconst decoratePreview: Decorate =\n  ({entry: [node, path]}) => {\n    const ranges: any[] = [];\n\n    if (!isText(node)) {\n      return ranges;\n    }\n\n    const getLength = (token: any) => {\n      if (typeof token === 'string') {\n        return token.length;\n      }\n      if (typeof token.content === 'string') {\n        return token.content.length;\n      }\n\n      return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n    };\n\n    const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n    let start = 0;\n\n    for (const token of tokens) {\n      const length = getLength(token);\n      const end = start + length;\n\n      if (typeof token !== 'string') {\n        ranges.push({\n          anchor: { offset: start, path },\n          focus: { offset: end, path },\n          [token.type]: true,\n        });\n      }\n\n      start = end;\n    }\n\n    return ranges;\n  };\n\nfunction PreviewLeaf({\n  attributes,\n  children,\n  leaf,\n}: TRenderLeafProps<\n  {\n    blockquote?: boolean;\n    bold?: boolean;\n    code?: boolean;\n    hr?: boolean;\n    italic?: boolean;\n    list?: boolean;\n    title?: boolean;\n  } & TText\n>) {\n  const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n  return (\n    <span\n      {...attributes}\n      className={cn(\n        bold && 'font-bold',\n        italic && 'italic',\n        title && 'mx-0 mb-2.5 mt-5 inline-block text-[20px] font-bold',\n        list && 'pl-2.5 text-[20px] leading-[10px]',\n        hr && 'block border-b-2 border-[#ddd] text-center',\n        blockquote &&\n          'inline-block border-l-2 border-[#ddd] pl-2.5 italic text-[#aaa]',\n        code && 'bg-[#eee] p-[3px] font-mono'\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\n\nexport default function PreviewMdDemo() {\n  const editor = useCreateEditor({\n    plugins: [BasicElementsPlugin, BasicMarksPlugin, createSlatePlugin({\n      key: 'preview-markdown',\n      decorate: decoratePreview,\n    })],\n    value: previewMdValue,\n  })\n  \n  return (\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor renderLeaf={PreviewLeaf} />\n        </EditorContainer>\n      </Plate>\n  );\n}\n",
       "path": "example/preview-markdown-demo.tsx",
       "target": "components/preview-markdown-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/single-line-demo.json b/apps/www/public/r/styles/default/single-line-demo.json
index dbddf869d5..f5f22a6468 100644
--- a/apps/www/public/r/styles/default/single-line-demo.json
+++ b/apps/www/public/r/styles/default/single-line-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\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 { singleLineValue } from '@/registry/default/example/values/single-line-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function SingleLineDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, SingleLinePlugin],\n    value: singleLineValue,\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 { SingleLinePlugin } from '@udecode/plate-break/react';\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 { singleLineValue } from '@/components/values/single-line-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function SingleLineDemo() {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins, SingleLinePlugin],\n    value: singleLineValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/single-line-demo.tsx",
       "target": "components/single-line-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/tabbable-demo.json b/apps/www/public/r/styles/default/tabbable-demo.json
index 760f7d5b85..eb57249324 100644
--- a/apps/www/public/r/styles/default/tabbable-demo.json
+++ b/apps/www/public/r/styles/default/tabbable-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport { Plate } from '@udecode/plate-common/react';\nimport { TabbablePlugin } from '@udecode/plate-tabbable/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { tabbableValue } from '@/registry/default/example/values/tabbable-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { PlateElement } from '@/components/plate-ui/plate-element';\n\nexport default function TabbableDemo() {\n  const editor = useCreateEditor({\n    plugins: [\n      ...editorPlugins,\n      TabbablePlugin.configure({\n        node: { component: TabbableElement, isElement: true, isVoid: true },\n      }),\n    ],\n    value: tabbableValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\nexport function TabbableElement({ children, ...props }: PlateElementProps) {\n  const selected = useSelected();\n  const focused = useFocused();\n\n  return (\n    <PlateElement {...props}>\n      <div\n        className={cn(\n          'mb-2 p-2',\n          selected && focused\n            ? 'border-2 border-blue-500'\n            : 'border border-gray-200'\n        )}\n        contentEditable={false}\n      >\n        <p>This is a void element.</p>\n        <button type=\"button\">Button 1</button>{' '}\n        <button type=\"button\">Button 2</button>\n      </div>\n      {children}\n    </PlateElement>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport { Plate } from '@udecode/plate-common/react';\nimport { TabbablePlugin } from '@udecode/plate-tabbable/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { tabbableValue } from '@/components/values/tabbable-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { PlateElement } from '@/components/plate-ui/plate-element';\n\nexport default function TabbableDemo() {\n  const editor = useCreateEditor({\n    plugins: [\n      ...editorPlugins,\n      TabbablePlugin.configure({\n        node: { component: TabbableElement, isElement: true, isVoid: true },\n      }),\n    ],\n    value: tabbableValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\nexport function TabbableElement({ children, ...props }: PlateElementProps) {\n  const selected = useSelected();\n  const focused = useFocused();\n\n  return (\n    <PlateElement {...props}>\n      <div\n        className={cn(\n          'mb-2 p-2',\n          selected && focused\n            ? 'border-2 border-blue-500'\n            : 'border border-gray-200'\n        )}\n        contentEditable={false}\n      >\n        <p>This is a void element.</p>\n        <button type=\"button\">Button 1</button>{' '}\n        <button type=\"button\">Button 2</button>\n      </div>\n      {children}\n    </PlateElement>\n  );\n}\n",
       "path": "example/tabbable-demo.tsx",
       "target": "components/tabbable-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/table-nomerge-demo.json b/apps/www/public/r/styles/default/table-nomerge-demo.json
index 24457a1b52..f3199b99eb 100644
--- a/apps/www/public/r/styles/default/table-nomerge-demo.json
+++ b/apps/www/public/r/styles/default/table-nomerge-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { tableValue } from '@/registry/default/example/values/table-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function TableMergeDemo() {\n  const editor = useCreateEditor({\n    plugins: [\n      ...editorPlugins,\n      TablePlugin.configure({\n        options: {\n          enableMerging: false,\n        },\n      }),\n    ],\n    value: tableValue,\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 { TablePlugin } from '@udecode/plate-table/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { tableValue } from '@/components/values/table-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function TableMergeDemo() {\n  const editor = useCreateEditor({\n    plugins: [\n      ...editorPlugins,\n      TablePlugin.configure({\n        options: {\n          enableMerging: false,\n        },\n      }),\n    ],\n    value: tableValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/table-nomerge-demo.tsx",
       "target": "components/table-nomerge-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts
index 976faf2778..f87672c924 100644
--- a/apps/www/scripts/fix-import.mts
+++ b/apps/www/scripts/fix-import.mts
@@ -1,5 +1,5 @@
 export function fixImport(content: string) {
-  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib|app))\/([\w-]+)/g
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib|app|example))\/([\w-]+)/g
 
   const replacement = (
     match: string,
@@ -7,7 +7,7 @@ export function fixImport(content: string) {
     type: string,
     component: string
   ) => {
-    if (type.endsWith("components")) {
+    if (type.endsWith("components") || type.endsWith("example")) {
       return `@/components/${component}`
     } else if (type.endsWith("plate-ui")) {
       return `@/components/plate-ui/${component}`
diff --git a/apps/www/src/lib/registry.ts b/apps/www/src/lib/registry.ts
index 0ba311eec6..c3ab9e5ed9 100644
--- a/apps/www/src/lib/registry.ts
+++ b/apps/www/src/lib/registry.ts
@@ -132,11 +132,13 @@ async function getFileContent(filePath: string) {
   removeVariable(sourceFile, 'iframeHeight');
   removeVariable(sourceFile, 'containerClassName');
   removeVariable(sourceFile, 'description');
+  removeVariable(sourceFile, 'descriptionSrc');
 
   let code = sourceFile.getFullText();
 
+  // FORK: not useful?
   // Format the code.
-  code = code.replaceAll('export default', 'export');
+  // code = code.replaceAll('export default', 'export');
 
   // Fix imports.
   code = fixImport(code);
diff --git a/apps/www/src/lib/rehype-utils.ts b/apps/www/src/lib/rehype-utils.ts
index 4dc6604e5d..04bc119925 100644
--- a/apps/www/src/lib/rehype-utils.ts
+++ b/apps/www/src/lib/rehype-utils.ts
@@ -15,7 +15,7 @@ export function fixImport(content: string) {
     type: string,
     component: string
   ) => {
-    if (type.endsWith('components')) {
+    if (type.endsWith('components') || type.endsWith('example')) {
       return `@/components/${component}`;
     } else if (type.endsWith('plate-ui')) {
       return `@/components/plate-ui/${component}`;
@@ -23,8 +23,6 @@ export function fixImport(content: string) {
       return `@/hooks/${component}`;
     } else if (type.endsWith('lib')) {
       return `@/lib/${component}`;
-    } else if (type.endsWith('example')) {
-      return `@/example/${component}`;
     }
 
     return match;
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
index a15fe21652..0493161d8e 100644
--- a/apps/www/src/registry/registry-ui.ts
+++ b/apps/www/src/registry/registry-ui.ts
@@ -1620,7 +1620,8 @@ export const uiPrimitives: Registry = [
   {
     dependencies: [
       'react-hook-form',
-      '@hookform/resolvers/zod',
+      'zod',
+      '@hookform/resolvers',
       '@radix-ui/react-label',
       '@radix-ui/react-slot',
     ],