prosekit-registry 0.0.5 → 0.0.7

package/dist/r/react-example-block-handle.json

@@ -17,7 +17,7 @@
       "path": "registry/src/react/examples/block-handle/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/block-handle/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/block-handle/extension.ts",

package/dist/r/react-example-blockquote.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/blockquote/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/blockquote/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/blockquote/extension.ts",

package/dist/r/react-example-bold.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/bold/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/bold/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-bold'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-bold'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/bold/extension.ts",

package/dist/r/react-example-change-tracking.json

@@ -24,7 +24,7 @@
       "path": "registry/src/react/examples/change-tracking/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport type { NodeJSON } from 'prosekit/core'\nimport { CommitRecorder, type Commit } from 'prosekit/extensions/commit'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport EditorDiff from './editor-diff'\nimport EditorMain from './editor-main'\n\nexport default function Editor() {\n  const [commits, setCommits] = useState<\n    { id: string; date: Date; commit: Commit }[]\n  >([])\n  const [key, setKey] = useState(0)\n  const [initialContent, setInitialContent] = useState<NodeJSON | undefined>()\n  const commitRecorder = useMemo(() => new CommitRecorder(), [])\n\n  const handleCommit = useCallback(() => {\n    const commit = commitRecorder.commit()\n    if (!commit) return\n    const id = Math.random().toString(36).slice(2, 9)\n    setCommits((commits) => [{ id, date: new Date(), commit }, ...commits])\n  }, [commitRecorder])\n\n  const handleRestore = useCallback(\n    (id: string) => {\n      const index = commits.findIndex((commit) => commit.id === id)\n      const commit = commits[index]\n      if (index === -1 || !commit) return\n      const doc = commit.commit.doc\n      setInitialContent(doc)\n      setCommits((commits) => commits.slice(index))\n      setKey((key) => key + 1)\n    },\n    [commits],\n  )\n\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"max-h-md\">\n          <EditorMain\n            key={key}\n            initialContent={initialContent}\n            commitRecorder={commitRecorder}\n          />\n        </div>\n        <button onClick={handleCommit} className=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2\">\n          Save\n        </button>\n      </div>\n      <div className=\"flex flex-col gap-4\">\n        {commits.map((commit) => (\n          <div key={commit.id}>\n            <div className=\"max-h-md\">\n              <EditorDiff commit={commit.commit} />\n            </div>\n            <div className=\"w-full inline-flex justify-between p-1 text-sm\">\n              <span className=\"opacity-50\">\n                {commit.date.toLocaleTimeString()}\n              </span>\n              <button\n                className=\"underline opacity-50 hover:opacity-100\"\n                onClick={() => handleRestore(commit.id)}\n              >\n                Restore\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport type { NodeJSON } from 'prosekit/core'\nimport { CommitRecorder, type Commit } from 'prosekit/extensions/commit'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport EditorDiff from './editor-diff'\nimport EditorMain from './editor-main'\n\nexport default function Editor() {\n  const [commits, setCommits] = useState<\n    { id: string; date: Date; commit: Commit }[]\n  >([])\n  const [key, setKey] = useState(0)\n  const [initialContent, setInitialContent] = useState<NodeJSON | undefined>()\n  const commitRecorder = useMemo(() => new CommitRecorder(), [])\n\n  const handleCommit = useCallback(() => {\n    const commit = commitRecorder.commit()\n    if (!commit) return\n    const id = Math.random().toString(36).slice(2, 9)\n    setCommits((commits) => [{ id, date: new Date(), commit }, ...commits])\n  }, [commitRecorder])\n\n  const handleRestore = useCallback(\n    (id: string) => {\n      const index = commits.findIndex((commit) => commit.id === id)\n      const commit = commits[index]\n      if (index === -1 || !commit) return\n      const doc = commit.commit.doc\n      setInitialContent(doc)\n      setCommits((commits) => commits.slice(index))\n      setKey((key) => key + 1)\n    },\n    [commits],\n  )\n\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"max-h-md\">\n          <EditorMain\n            key={key}\n            initialContent={initialContent}\n            commitRecorder={commitRecorder}\n          />\n        </div>\n        <button onClick={handleCommit} className=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2\">\n          Save\n        </button>\n      </div>\n      <div className=\"flex flex-col gap-4\">\n        {commits.map((commit) => (\n          <div key={commit.id}>\n            <div className=\"max-h-md\">\n              <EditorDiff commit={commit.commit} />\n            </div>\n            <div className=\"w-full inline-flex justify-between p-1 text-sm\">\n              <span className=\"opacity-50\">\n                {commit.date.toLocaleTimeString()}\n              </span>\n              <button\n                className=\"underline opacity-50 hover:opacity-100\"\n                onClick={() => handleRestore(commit.id)}\n              >\n                Restore\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/change-tracking/index.ts",

package/dist/r/react-example-code-block-themes.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/code-block-themes/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code-block-themes/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/code-block-themes/extension.ts",

package/dist/r/react-example-code-block.json

@@ -16,7 +16,7 @@
       "path": "registry/src/react/examples/code-block/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code-block/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/code-block/extension.ts",

package/dist/r/react-example-code.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/code/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-code'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/code/extension.ts",

package/dist/r/react-example-drop-cursor.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/drop-cursor/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/drop-cursor/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-drop-cursor'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-drop-cursor'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/drop-cursor/extension.ts",

package/dist/r/react-example-emoji-rules.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/emoji-rules/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/emoji-rules/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/emoji-rules/emoji.ts",

package/dist/r/react-example-full.json

@@ -46,7 +46,7 @@
       "path": "registry/src/react/examples/full/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/full/index.ts",
-      "content": "export { default as ExampleEditor } from './editor'\nexport { renderHTML } from './html'\n"
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\nexport { renderHTML } from './html'\n"
     }
   ],
   "meta": {

package/dist/r/react-example-gap-cursor.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/gap-cursor/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/gap-cursor/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-gap-cursor'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-gap-cursor'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/gap-cursor/extension.ts",

package/dist/r/react-example-hard-break.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/hard-break/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/hard-break/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-hard-break'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-hard-break'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/hard-break/extension.ts",

package/dist/r/react-example-heading.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/heading/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/heading/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-heading'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-heading'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/heading/extension.ts",

package/dist/r/react-example-horizontal-rule.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/horizontal-rule/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/horizontal-rule/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/horizontal-rule/extension.ts",

package/dist/r/react-example-image-view.json

@@ -16,7 +16,7 @@
       "path": "registry/src/react/examples/image-view/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/image-view/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-image'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-image'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/image-view/extension.ts",

package/dist/r/react-example-inline-menu.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/inline-menu/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/inline-menu/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-inline-menu'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div\n            ref={editor.mount}\n            className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"\n          >\n          </div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-inline-menu'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div\n            ref={editor.mount}\n            className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"\n          >\n          </div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/inline-menu/extension.ts",

package/dist/r/react-example-italic.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/italic/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/italic/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-italic'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-italic'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/italic/extension.ts",

package/dist/r/react-example-keymap.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/keymap/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/keymap/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const [submissions, setSubmissions] = useState<string[]>([])\n\n  const pushSubmission = useCallback(\n    (hotkey: string) => {\n      const docString = JSON.stringify(editor.getDocJSON())\n      const submission = `${new Date().toISOString()}\\t${hotkey}\\n${docString}`\n      setSubmissions((prev) => [...prev, submission])\n    },\n    [editor],\n  )\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar onSubmit={pushSubmission} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n      <fieldset className=\"mt-4 box-border flex max-w-full w-full overflow-x-auto border p-4 rounded-md shadow-sm min-w-0\">\n        <legend>Submit Records</legend>\n        <ol>\n          {submissions.map((submission, index) => (\n            <li key={index}>\n              <pre>{submission}</pre>\n            </li>\n          ))}\n        </ol>\n        {submissions.length === 0 && <div>No submissions yet</div>}\n      </fieldset>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const [submissions, setSubmissions] = useState<string[]>([])\n\n  const pushSubmission = useCallback(\n    (hotkey: string) => {\n      const docString = JSON.stringify(editor.getDocJSON())\n      const submission = `${new Date().toISOString()}\\t${hotkey}\\n${docString}`\n      setSubmissions((prev) => [...prev, submission])\n    },\n    [editor],\n  )\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar onSubmit={pushSubmission} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n      <fieldset className=\"mt-4 box-border flex max-w-full w-full overflow-x-auto border p-4 rounded-md shadow-sm min-w-0\">\n        <legend>Submit Records</legend>\n        <ol>\n          {submissions.map((submission, index) => (\n            <li key={index}>\n              <pre>{submission}</pre>\n            </li>\n          ))}\n        </ol>\n        {submissions.length === 0 && <div>No submissions yet</div>}\n      </fieldset>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/keymap/extension.ts",

package/dist/r/react-example-link-mark-view.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/link-mark-view/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/link-mark-view/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-link-mark-view'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-link-mark-view'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/link-mark-view/extension.ts",

package/dist/r/react-example-link.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/link/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/link/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-link'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-link'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/link/extension.ts",

package/dist/r/react-example-list-custom-checkbox.json

@@ -21,7 +21,7 @@
       "path": "registry/src/react/examples/list-custom-checkbox/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/list-custom-checkbox/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './custom-list.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\" data-custom-list-css-enabled>\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './custom-list.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\" data-custom-list-css-enabled>\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/list-custom-checkbox/extension.ts",

package/dist/r/react-example-list.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/list/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/list/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-list'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-list'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/list/extension.ts",

package/dist/r/react-example-loro.json

@@ -22,7 +22,7 @@
       "path": "registry/src/react/examples/loro/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/loro/editor.tsx",
-      "content": "import { LoroDoc, type AwarenessListener } from 'loro-crdt'\nimport { CursorAwareness, type LoroDocType } from 'loro-prosemirror'\nimport { useEffect, useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nexport default function Page() {\n  const { loroA, awarenessA, loroB, awarenessB } = useLoroDocs()\n\n  return (\n    <div className=\"h-full flex flex-col gap-2\">\n      <EditorComponent loro={loroA} awareness={awarenessA} />\n      <EditorComponent loro={loroB} awareness={awarenessB} />\n    </div>\n  )\n}\n\nfunction useLoroDocs() {\n  const [loroState] = useState(() => {\n    const loroA: LoroDocType = new LoroDoc()\n    const loroB: LoroDocType = new LoroDoc()\n\n    const idA = loroA.peerIdStr\n    const idB = loroB.peerIdStr\n\n    const awarenessA = new CursorAwareness(idA)\n    const awarenessB = new CursorAwareness(idB)\n\n    return { loroA, loroB, idA, idB, awarenessA, awarenessB }\n  })\n\n  useEffect(() => {\n    const { loroA, loroB, idA, idB, awarenessA, awarenessB } = loroState\n    loroA.import(loroB.export({ mode: 'update' }))\n    loroB.import(loroA.export({ mode: 'update' }))\n    const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {\n      loroB.import(updates)\n    })\n    const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {\n      loroA.import(updates)\n    })\n    const awarenessAListener: AwarenessListener = (_, origin) => {\n      if (origin === 'local') {\n        awarenessB.apply(awarenessA.encode([idA]))\n      }\n    }\n    const awarenessBListener: AwarenessListener = (_, origin) => {\n      if (origin === 'local') {\n        awarenessA.apply(awarenessB.encode([idB]))\n      }\n    }\n    awarenessA.addListener(awarenessAListener)\n    awarenessB.addListener(awarenessBListener)\n    return () => {\n      awarenessA.removeListener(awarenessAListener)\n      awarenessB.removeListener(awarenessBListener)\n      unsubscribeA()\n      unsubscribeB()\n    }\n  }, [loroState])\n\n  return loroState\n}\n"
+      "content": "'use client'\n\nimport { LoroDoc, type AwarenessListener } from 'loro-crdt'\nimport { CursorAwareness, type LoroDocType } from 'loro-prosemirror'\nimport { useEffect, useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nexport default function Page() {\n  const { loroA, awarenessA, loroB, awarenessB } = useLoroDocs()\n\n  return (\n    <div className=\"h-full flex flex-col gap-2\">\n      <EditorComponent loro={loroA} awareness={awarenessA} />\n      <EditorComponent loro={loroB} awareness={awarenessB} />\n    </div>\n  )\n}\n\nfunction useLoroDocs() {\n  const [loroState] = useState(() => {\n    const loroA: LoroDocType = new LoroDoc()\n    const loroB: LoroDocType = new LoroDoc()\n\n    const idA = loroA.peerIdStr\n    const idB = loroB.peerIdStr\n\n    const awarenessA = new CursorAwareness(idA)\n    const awarenessB = new CursorAwareness(idB)\n\n    return { loroA, loroB, idA, idB, awarenessA, awarenessB }\n  })\n\n  useEffect(() => {\n    const { loroA, loroB, idA, idB, awarenessA, awarenessB } = loroState\n    loroA.import(loroB.export({ mode: 'update' }))\n    loroB.import(loroA.export({ mode: 'update' }))\n    const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {\n      loroB.import(updates)\n    })\n    const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {\n      loroA.import(updates)\n    })\n    const awarenessAListener: AwarenessListener = (_, origin) => {\n      if (origin === 'local') {\n        awarenessB.apply(awarenessA.encode([idA]))\n      }\n    }\n    const awarenessBListener: AwarenessListener = (_, origin) => {\n      if (origin === 'local') {\n        awarenessA.apply(awarenessB.encode([idB]))\n      }\n    }\n    awarenessA.addListener(awarenessAListener)\n    awarenessB.addListener(awarenessBListener)\n    return () => {\n      awarenessA.removeListener(awarenessAListener)\n      awarenessB.removeListener(awarenessBListener)\n      unsubscribeA()\n      unsubscribeB()\n    }\n  }, [loroState])\n\n  return loroState\n}\n"
     },
     {
       "path": "registry/src/react/examples/loro/extension.ts",

package/dist/r/react-example-mark-rule.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/mark-rule/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/mark-rule/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/mark-rule/extension.ts",

package/dist/r/react-example-minimal.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/minimal/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/minimal/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div ref={editor.mount} className=\"outline-solid p-4\"></div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div ref={editor.mount} className=\"outline-solid p-4\"></div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/minimal/index.ts",

package/dist/r/react-example-notion.json

@@ -38,7 +38,7 @@
       "path": "registry/src/react/examples/notion/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-notion'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport BlockHandle from './block-handle'\nimport { defineExtension } from './extension'\nimport { SlashMenu } from './slash-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  const [slashMenuOpen, setSlashMenuOpen] = useState(false)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\" data-prosekit-example=\"notion\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu onOpenChange={setSlashMenuOpen} />\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n          <BlockHandle enabled={!slashMenuOpen} />\n          <TableHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-notion'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport BlockHandle from './block-handle'\nimport { defineExtension } from './extension'\nimport { SlashMenu } from './slash-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  const [slashMenuOpen, setSlashMenuOpen] = useState(false)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\" data-prosekit-example=\"notion\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu onOpenChange={setSlashMenuOpen} />\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n          <BlockHandle enabled={!slashMenuOpen} />\n          <TableHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/extension.ts",
@@ -68,7 +68,7 @@
       "path": "registry/src/react/examples/notion/image-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/notion/image-view/index.ts",
-      "content": "import type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport ImageView from './image-view'\n\nexport function defineImageView(): Extension {\n  return defineReactNodeView({\n    name: 'image',\n    component: ImageView satisfies ReactNodeViewComponent,\n  })\n}\n"
+      "content": "'use client'\n\nimport type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport ImageView from './image-view'\n\nexport function defineImageView(): Extension {\n  return defineReactNodeView({\n    name: 'image',\n    component: ImageView satisfies ReactNodeViewComponent,\n  })\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/index.ts",
@@ -80,7 +80,7 @@
       "path": "registry/src/react/examples/notion/slash-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/notion/slash-menu/index.ts",
-      "content": "export { default as SlashMenu } from './slash-menu'\n"
+      "content": "'use client'\n\nexport { default as SlashMenu } from './slash-menu'\n"
     },
     {
       "path": "registry/src/react/examples/notion/slash-menu/slash-menu-empty.tsx",

package/dist/r/react-example-page.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/page/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/page/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/page/style.css'\nimport './zoom.css'\n\nimport { clsx, createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-page'\n\nimport { defineExtension } from './extension'\nimport PaperController from './paper-controller'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  const [zoom, setZoom] = useState(50)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"relative w-max min-w-full flex flex-col flex-1 box-border overflow-auto\">\n        <PaperController zoom={zoom} setZoom={setZoom} />\n        <div\n          data-editor-zoom=\"true\"\n          style={{ '--zoom': zoom / 100 } as React.CSSProperties}\n          ref={editor.mount}\n          className={clsx('ProseMirror', 'self-center box-border min-h-full m-0 p-10 print:p-0 outline-hidden')}\n        />\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/page/style.css'\nimport './zoom.css'\n\nimport { clsx, createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-page'\n\nimport { defineExtension } from './extension'\nimport PaperController from './paper-controller'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  const [zoom, setZoom] = useState(50)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"relative w-max min-w-full flex flex-col flex-1 box-border overflow-auto\">\n        <PaperController zoom={zoom} setZoom={setZoom} />\n        <div\n          data-editor-zoom=\"true\"\n          style={{ '--zoom': zoom / 100 } as React.CSSProperties}\n          ref={editor.mount}\n          className={clsx('ProseMirror', 'self-center box-border min-h-full m-0 p-10 print:p-0 outline-hidden')}\n        />\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/page/extension.ts",

package/dist/r/react-example-placeholder.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/placeholder/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/placeholder/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n}) {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent: props.initialContent })\n  }, [props.initialContent])\n\n  const { onDocUpdate } = props\n  const handleDocChange = useCallback(\n    (doc: ProseMirrorNode) => onDocUpdate?.(jsonFromNode(doc)),\n    [onDocUpdate],\n  )\n  useDocChange(handleDocChange, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo } from 'react'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n}) {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent: props.initialContent })\n  }, [props.initialContent])\n\n  const { onDocUpdate } = props\n  const handleDocChange = useCallback(\n    (doc: ProseMirrorNode) => onDocUpdate?.(jsonFromNode(doc)),\n    [onDocUpdate],\n  )\n  useDocChange(handleDocChange, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/placeholder/extension.ts",

package/dist/r/react-example-readonly.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/readonly/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/readonly/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-readonly'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-readonly'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/readonly/extension.ts",

package/dist/r/react-example-rtl.json

@@ -21,7 +21,7 @@
       "path": "registry/src/react/examples/rtl/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/rtl/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div dir=\"rtl\" className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu />\n          <BlockHandle dir=\"rtl\" />\n          <TableHandle dir=\"rtl\" />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div dir=\"rtl\" className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu />\n          <BlockHandle dir=\"rtl\" />\n          <TableHandle dir=\"rtl\" />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/rtl/index.ts",

package/dist/r/react-example-save-html.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/save-html/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-html/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport default function Editor() {\n  // A list of saved documents, stored as HTML strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const record = editor.getDocHTML()\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback(\n    (record: string) => {\n      editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n      setHasUnsavedChange(false)\n      setKey((prev) => prev + 1)\n    },\n    [editor],\n  )\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport default function Editor() {\n  // A list of saved documents, stored as HTML strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const record = editor.getDocHTML()\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback(\n    (record: string) => {\n      editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n      setHasUnsavedChange(false)\n      setKey((prev) => prev + 1)\n    },\n    [editor],\n  )\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/save-html/index.ts",

package/dist/r/react-example-save-json.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/examples/save-json/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-json/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport default function Editor() {\n  // A list of saved documents, stored as JSON strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const record = JSON.stringify(editor.getDocJSON())\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback((record: string) => {\n    editor.setContent(JSON.parse(record) as NodeJSON)\n    setHasUnsavedChange(false)\n    setKey((prev) => prev + 1)\n  }, [editor])\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport default function Editor() {\n  // A list of saved documents, stored as JSON strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const record = JSON.stringify(editor.getDocJSON())\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback((record: string) => {\n    editor.setContent(JSON.parse(record) as NodeJSON)\n    setHasUnsavedChange(false)\n    setKey((prev) => prev + 1)\n  }, [editor])\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/save-json/index.ts",

package/dist/r/react-example-save-markdown.json

@@ -19,7 +19,7 @@
       "path": "registry/src/react/examples/save-markdown/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-markdown/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\nexport default function Editor() {\n  // A list of saved documents, stored as Markdown strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const html = editor.getDocHTML()\n    const record = markdownFromHTML(html)\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback(\n    (record: string) => {\n      const html = htmlFromMarkdown(record)\n      editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n      setHasUnsavedChange(false)\n      setKey((prev) => prev + 1)\n    },\n    [editor],\n  )\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\nexport default function Editor() {\n  // A list of saved documents, stored as Markdown strings\n  const [records, setRecords] = useState<string[]>([])\n  // Whether there are unsaved changes\n  const [hasUnsavedChange, setHasUnsavedChange] = useState(false)\n  // A key to force a re-render of the editor\n  const [key, setKey] = useState(1)\n\n  const editor = useMemo(() => {\n    const extension = defineBasicExtension()\n    return createEditor({ extension })\n  }, [])\n\n  const handleDocChange = useCallback(() => setHasUnsavedChange(true), [])\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = useCallback(() => {\n    const html = editor.getDocHTML()\n    const record = markdownFromHTML(html)\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }, [editor])\n\n  const handleLoad = useCallback(\n    (record: string) => {\n      const html = htmlFromMarkdown(record)\n      editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n      setHasUnsavedChange(false)\n      setKey((prev) => prev + 1)\n    },\n    [editor],\n  )\n\n  return (\n    <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange}\n        className=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange ? 'Save' : 'No changes to save'}\n      </button>\n      <ul className=\"border-b border-t border-solid text-sm\">\n        {records.map((record, index) => (\n          <li key={index} className=\"m-1 flex gap-2\">\n            <button\n              className=\"border border-solid bg-white px-2 py-1 text-black\"\n              onClick={() => handleLoad(record)}\n            >\n              Load\n            </button>\n            <span className=\"flex-1 overflow-x-scroll p-2\">\n              <pre>{record}</pre>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <ProseKit editor={editor} key={key}>\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/save-markdown/index.ts",

package/dist/r/react-example-search.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/search/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/search/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/search/style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <Search />\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/search/style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <Search />\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/search/extension.ts",

package/dist/r/react-example-slash-menu.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/examples/slash-menu/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/slash-menu/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <SlashMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <SlashMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/slash-menu/extension.ts",

package/dist/r/react-example-strike.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/strike/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/strike/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-strike'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-strike'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/strike/extension.ts",

package/dist/r/react-example-table.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/table/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/table/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <TableHandle />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <TableHandle />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/table/extension.ts",

package/dist/r/react-example-temml.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/temml/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/temml/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-tex'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-tex'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/temml/extension.ts",

package/dist/r/react-example-text-align.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/text-align/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-align/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-align'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-align'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/text-align/extension.ts",

package/dist/r/react-example-text-color.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/text-color/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/text-color/extension.ts",

package/dist/r/react-example-toolbar.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/toolbar/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/toolbar/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/toolbar/extension.ts",

package/dist/r/react-example-tweet.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/tweet/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/tweet/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type Extension, type NodeJSON } from 'prosekit/core'\nimport { defineReactNodeView, ProseKit, useExtension } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-tweet'\n\nimport { defineExtension } from './extension'\nimport { MethodSelect } from './method-select'\nimport { TweetView } from './tweet-view'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  const [method, setMethod] = useState<'basic' | 'advanced'>('basic')\n\n  const reactTweetView: Extension | null = useMemo(() => {\n    if (method === 'basic') {\n      return null\n    }\n    return defineReactNodeView({\n      name: 'tweet',\n      component: TweetView,\n    })\n  }, [method])\n\n  useExtension(reactTweetView, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <MethodSelect value={method} onChange={setMethod} />\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type Extension, type NodeJSON } from 'prosekit/core'\nimport { defineReactNodeView, ProseKit, useExtension } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-tweet'\n\nimport { defineExtension } from './extension'\nimport { MethodSelect } from './method-select'\nimport { TweetView } from './tweet-view'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  const [method, setMethod] = useState<'basic' | 'advanced'>('basic')\n\n  const reactTweetView: Extension | null = useMemo(() => {\n    if (method === 'basic') {\n      return null\n    }\n    return defineReactNodeView({\n      name: 'tweet',\n      component: TweetView,\n    })\n  }, [method])\n\n  useExtension(reactTweetView, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <MethodSelect value={method} onChange={setMethod} />\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/tweet/extension.ts",

package/dist/r/react-example-typography.json

@@ -17,7 +17,7 @@
       "path": "registry/src/react/examples/typography/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/typography/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/typography/extension.ts",

package/dist/r/react-example-underline.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/underline/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/underline/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-underline'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-underline'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/underline/extension.ts",

package/dist/r/react-example-unmount.json

@@ -20,7 +20,7 @@
       "path": "registry/src/react/examples/unmount/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/unmount/editor.tsx",
-      "content": "import { useCallback, useRef, useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nfunction EditorGroup() {\n  const nextKeyRef = useRef(1)\n  const [editorKeys, setEditorKeys] = useState<number[]>([])\n\n  const addEditor = useCallback(() => {\n    const key = nextKeyRef.current\n    nextKeyRef.current += 1\n    setEditorKeys((keys) => [...keys, key])\n  }, [])\n\n  const removeEditor = useCallback((key: number) => {\n    setEditorKeys((keys) => keys.filter((k) => k !== key))\n  }, [])\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex gap-2\">\n        <button onClick={addEditor} className=\"border p-2\">\n          Add editor\n        </button>\n        {editorKeys.map((key) => (\n          <button\n            key={key}\n            onClick={() => removeEditor(key)}\n            className=\"border p-2\"\n          >\n            Unmount No.{key}\n          </button>\n        ))}\n      </div>\n      {editorKeys.map((key) => (\n        <div key={key}>\n          <EditorComponent\n            placeholder={`Editor No.${key}`}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default EditorGroup\n"
+      "content": "'use client'\n\nimport { useCallback, useRef, useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nfunction EditorGroup() {\n  const nextKeyRef = useRef(1)\n  const [editorKeys, setEditorKeys] = useState<number[]>([])\n\n  const addEditor = useCallback(() => {\n    const key = nextKeyRef.current\n    nextKeyRef.current += 1\n    setEditorKeys((keys) => [...keys, key])\n  }, [])\n\n  const removeEditor = useCallback((key: number) => {\n    setEditorKeys((keys) => keys.filter((k) => k !== key))\n  }, [])\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex gap-2\">\n        <button onClick={addEditor} className=\"border p-2\">\n          Add editor\n        </button>\n        {editorKeys.map((key) => (\n          <button\n            key={key}\n            onClick={() => removeEditor(key)}\n            className=\"border p-2\"\n          >\n            Unmount No.{key}\n          </button>\n        ))}\n      </div>\n      {editorKeys.map((key) => (\n        <div key={key}>\n          <EditorComponent\n            placeholder={`Editor No.${key}`}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default EditorGroup\n"
     },
     {
       "path": "registry/src/react/examples/unmount/extension-component.tsx",

package/dist/r/react-example-user-menu-dynamic.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/user-menu-dynamic/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu-dynamic/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <UserMenuDynamic />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <UserMenuDynamic />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/user-menu-dynamic/extension.ts",

package/dist/r/react-example-user-menu.json

@@ -17,7 +17,7 @@
       "path": "registry/src/react/examples/user-menu/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/user-menu/extension.ts",

package/dist/r/react-example-view-adapter.json

@@ -21,7 +21,7 @@
       "path": "registry/src/react/examples/view-adapter/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/view-adapter/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/view-adapter/extension.ts",

package/dist/r/react-example-word-counter.json

@@ -15,7 +15,7 @@
       "path": "registry/src/react/examples/word-counter/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/word-counter/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <WordCounter />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <WordCounter />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/word-counter/extension.ts",

package/dist/r/react-example-yjs.json

@@ -22,7 +22,7 @@
       "path": "registry/src/react/examples/yjs/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/yjs/editor.tsx",
-      "content": "import { useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nexport default function Page() {\n  const [room] = useState(() => {\n    return Math.random().toString(36).substring(2, 15)\n  })\n\n  return (\n    <div className=\"h-full flex flex-col gap-2\">\n      <EditorComponent room={room} />\n      <EditorComponent room={room} />\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nexport default function Page() {\n  const [room] = useState(() => {\n    return Math.random().toString(36).substring(2, 15)\n  })\n\n  return (\n    <div className=\"h-full flex flex-col gap-2\">\n      <EditorComponent room={room} />\n      <EditorComponent room={room} />\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/yjs/extension.ts",

package/dist/r/react-ui-block-handle.json

@@ -20,7 +20,7 @@
       "path": "registry/src/react/ui/block-handle/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/block-handle/index.ts",
-      "content": "export { default as BlockHandle } from './block-handle'\n"
+      "content": "'use client'\n\nexport { default as BlockHandle } from './block-handle'\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-button.json

@@ -18,7 +18,7 @@
       "path": "registry/src/react/ui/button/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/button/index.ts",
-      "content": "export { default as Button } from './button'\n"
+      "content": "'use client'\n\nexport { default as Button } from './button'\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-code-block-view.json

@@ -18,7 +18,7 @@
       "path": "registry/src/react/ui/code-block-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/code-block-view/index.ts",
-      "content": "import type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport CodeBlockView from './code-block-view'\n\nexport function defineCodeBlockView(): Extension {\n  return defineReactNodeView({\n    name: 'codeBlock',\n    contentAs: 'code',\n    component: CodeBlockView satisfies ReactNodeViewComponent,\n  })\n}\n"
+      "content": "'use client'\n\nimport type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport CodeBlockView from './code-block-view'\n\nexport function defineCodeBlockView(): Extension {\n  return defineReactNodeView({\n    name: 'codeBlock',\n    contentAs: 'code',\n    component: CodeBlockView satisfies ReactNodeViewComponent,\n  })\n}\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-drop-indicator.json

@@ -18,7 +18,7 @@
       "path": "registry/src/react/ui/drop-indicator/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/drop-indicator/index.ts",
-      "content": "export { default as DropIndicator } from './drop-indicator'\n"
+      "content": "'use client'\n\nexport { default as DropIndicator } from './drop-indicator'\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-image-upload-popover.json

@@ -20,7 +20,7 @@
       "path": "registry/src/react/ui/image-upload-popover/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/image-upload-popover/index.ts",
-      "content": "export { default as ImageUploadPopover } from './image-upload-popover'\n"
+      "content": "'use client'\n\nexport { default as ImageUploadPopover } from './image-upload-popover'\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-image-view.json

@@ -20,7 +20,7 @@
       "path": "registry/src/react/ui/image-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/image-view/index.ts",
-      "content": "import type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport ImageView from './image-view'\n\nexport function defineImageView(): Extension {\n  return defineReactNodeView({\n    name: 'image',\n    component: ImageView satisfies ReactNodeViewComponent,\n  })\n}\n"
+      "content": "'use client'\n\nimport type { Extension } from 'prosekit/core'\nimport { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'\n\nimport ImageView from './image-view'\n\nexport function defineImageView(): Extension {\n  return defineReactNodeView({\n    name: 'image',\n    component: ImageView satisfies ReactNodeViewComponent,\n  })\n}\n"
     }
   ],
   "meta": {

package/dist/r/react-ui-inline-menu.json

@@ -16,7 +16,7 @@
       "path": "registry/src/react/ui/inline-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/inline-menu/index.ts",
-      "content": "export { default as InlineMenu } from './inline-menu'\n"
+      "content": "'use client'\n\nexport { default as InlineMenu } from './inline-menu'\n"
     },
     {
       "path": "registry/src/react/ui/inline-menu/inline-menu.tsx",

package/dist/r/react-ui-search.json

@@ -16,7 +16,7 @@
       "path": "registry/src/react/ui/search/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/search/index.ts",
-      "content": "export { default as Search } from './search'\n"
+      "content": "'use client'\n\nexport { default as Search } from './search'\n"
     },
     {
       "path": "registry/src/react/ui/search/search.tsx",

package/dist/r/react-ui-slash-menu.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/ui/slash-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/index.ts",
-      "content": "export { default as SlashMenu } from './slash-menu'\n"
+      "content": "'use client'\n\nexport { default as SlashMenu } from './slash-menu'\n"
     },
     {
       "path": "registry/src/react/ui/slash-menu/slash-menu-empty.tsx",

package/dist/r/react-ui-table-handle.json

@@ -14,7 +14,7 @@
       "path": "registry/src/react/ui/table-handle/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/table-handle/index.ts",
-      "content": "export { default as TableHandle } from './table-handle'\n"
+      "content": "'use client'\n\nexport { default as TableHandle } from './table-handle'\n"
     },
     {
       "path": "registry/src/react/ui/table-handle/table-handle.tsx",

package/dist/r/react-ui-tag-menu.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/ui/tag-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/tag-menu/index.ts",
-      "content": "export { default as TagMenu } from './tag-menu'\n"
+      "content": "'use client'\n\nexport { default as TagMenu } from './tag-menu'\n"
     },
     {
       "path": "registry/src/react/ui/tag-menu/tag-menu.tsx",

package/dist/r/react-ui-toolbar.json

@@ -17,7 +17,7 @@
       "path": "registry/src/react/ui/toolbar/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/toolbar/index.ts",
-      "content": "export { default as Toolbar } from './toolbar'\n"
+      "content": "'use client'\n\nexport { default as Toolbar } from './toolbar'\n"
     },
     {
       "path": "registry/src/react/ui/toolbar/toolbar.tsx",

package/dist/r/react-ui-user-menu.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/ui/user-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/user-menu/index.ts",
-      "content": "export { default as UserMenu } from './user-menu'\n"
+      "content": "'use client'\n\nexport { default as UserMenu } from './user-menu'\n"
     },
     {
       "path": "registry/src/react/ui/user-menu/user-menu.tsx",

package/dist/r/react-ui-word-counter.json

@@ -12,7 +12,7 @@
       "path": "registry/src/react/ui/word-counter/index.ts",
       "type": "registry:component",
       "target": "components/editor/ui/word-counter/index.ts",
-      "content": "export { default as WordCounter } from './word-counter'\n"
+      "content": "'use client'\n\nexport { default as WordCounter } from './word-counter'\n"
     },
     {
       "path": "registry/src/react/ui/word-counter/word-counter.tsx",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosekit-registry",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "private": false,
   "description": "The registry of ProseKit examples",
   "license": "MIT",