prosekit-registry 0.0.5 → 0.0.9

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",
@@ -29,7 +29,7 @@
       "path": "registry/src/react/examples/block-handle/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/block-handle/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -26,7 +26,7 @@
       "path": "registry/src/react/examples/blockquote/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/blockquote/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/bold/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/bold/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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

@@ -12,25 +12,25 @@
       "path": "registry/src/react/examples/change-tracking/editor-diff.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/editor-diff.tsx",
-      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function EditorDiff(props: { commit: Commit }) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineReadonly(),\n      defineCommitViewer(props.commit),\n    )\n    return createEditor({ extension })\n  }, [props.commit])\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'\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function EditorDiff(props: { commit: Commit }) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineReadonly(),\n      defineCommitViewer(props.commit),\n    )\n    return createEditor({ extension })\n  }, [props.commit])\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/change-tracking/editor-main.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/editor-main.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function EditorMain(props: {\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n}) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineCommitRecorder(props.commitRecorder),\n    )\n    return createEditor({ extension, defaultContent: props.initialContent })\n  }, [props.commitRecorder, props.initialContent])\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'\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nexport default function EditorMain(props: {\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n}) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineCommitRecorder(props.commitRecorder),\n    )\n    return createEditor({ extension, defaultContent: props.initialContent })\n  }, [props.commitRecorder, props.initialContent])\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/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",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,19 +27,19 @@
       "path": "registry/src/react/examples/code-block-themes/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/code-block-themes/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     },
     {
       "path": "registry/src/react/examples/code-block-themes/theme-selector.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code-block-themes/theme-selector.tsx",
-      "content": "import { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'\nimport { useExtension } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nexport function ThemeSelector() {\n  const [theme, setTheme] = useState('github-dark')\n  const extension = useMemo(() => {\n    return defineCodeBlockShiki({ themes: [theme as ShikiBundledTheme] })\n  }, [theme])\n  useExtension(extension)\n\n  return (\n    <>\n      <label htmlFor=\"code-block-theme-selector\">Theme</label>\n      <select\n        id=\"code-block-theme-selector\"\n        value={theme}\n        onChange={(event) => setTheme(event.target.value)}\n        className=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n      >\n        {shikiBundledThemesInfo.map((info) => (\n          <option key={info.id} value={info.id}>\n            {info.id}\n          </option>\n        ))}\n      </select>\n    </>\n  )\n}\n"
+      "content": "'use client'\nimport { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'\nimport { useExtension } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nexport function ThemeSelector() {\n  const [theme, setTheme] = useState('github-dark')\n  const extension = useMemo(() => {\n    return defineCodeBlockShiki({ themes: [theme as ShikiBundledTheme] })\n  }, [theme])\n  useExtension(extension)\n\n  return (\n    <>\n      <label htmlFor=\"code-block-theme-selector\">Theme</label>\n      <select\n        id=\"code-block-theme-selector\"\n        value={theme}\n        onChange={(event) => setTheme(event.target.value)}\n        className=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n      >\n        {shikiBundledThemesInfo.map((info) => (\n          <option key={info.id} value={info.id}>\n            {info.id}\n          </option>\n        ))}\n      </select>\n    </>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/code-block-themes/toolbar.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code-block-themes/toolbar.tsx",
-      "content": "import { ThemeSelector } from './theme-selector'\n\nexport default function Toolbar() {\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <ThemeSelector />\n    </div>\n  )\n}\n"
+      "content": "'use client'\nimport { ThemeSelector } from './theme-selector'\n\nexport default function Toolbar() {\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <ThemeSelector />\n    </div>\n  )\n}\n"
     }
   ],
   "meta": {

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",
@@ -28,7 +28,7 @@
       "path": "registry/src/react/examples/code-block/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/code-block/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/code/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/code/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -26,7 +26,7 @@
       "path": "registry/src/react/examples/drop-cursor/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/drop-cursor/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -30,7 +30,7 @@
       "path": "registry/src/react/examples/emoji-rules/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/emoji-rules/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\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",
@@ -26,7 +26,7 @@
       "path": "registry/src/react/examples/gap-cursor/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/gap-cursor/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,13 +27,13 @@
       "path": "registry/src/react/examples/hard-break/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/hard-break/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     },
     {
       "path": "registry/src/react/examples/hard-break/toolbar.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/hard-break/toolbar.tsx",
-      "content": "import { useEditor } from 'prosekit/react'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nexport default function Toolbar() {\n  const editor = useEditor<EditorExtension>({ update: true })\n\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <Button\n        pressed={false}\n        disabled={!editor.commands.insertHardBreak.canExec()}\n        onClick={() => editor.commands.insertHardBreak()}\n      >\n        Insert Hard Break\n      </Button>\n    </div>\n  )\n}\n"
+      "content": "'use client'\nimport { useEditor } from 'prosekit/react'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nexport default function Toolbar() {\n  const editor = useEditor<EditorExtension>({ update: true })\n\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <Button\n        pressed={false}\n        disabled={!editor.commands.insertHardBreak.canExec()}\n        onClick={() => editor.commands.insertHardBreak()}\n      >\n        Insert Hard Break\n      </Button>\n    </div>\n  )\n}\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/heading/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/heading/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -26,7 +26,7 @@
       "path": "registry/src/react/examples/horizontal-rule/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/horizontal-rule/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -28,7 +28,7 @@
       "path": "registry/src/react/examples/image-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/image-view/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/inline-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/inline-menu/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/italic/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/italic/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -26,13 +26,13 @@
       "path": "registry/src/react/examples/keymap/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/keymap/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     },
     {
       "path": "registry/src/react/examples/keymap/toolbar.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/keymap/toolbar.tsx",
-      "content": "import { useState } from 'react'\n\nimport { Button } from '../../ui/button'\n\nimport { useSubmitKeymap } from './use-submit-keymap'\n\nexport default function Toolbar(props: {\n  onSubmit: (hotkey: string) => void\n}) {\n  const [hotkey, setHotkey] = useState<'Shift-Enter' | 'Enter'>('Shift-Enter')\n  useSubmitKeymap(hotkey, props.onSubmit)\n\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <Button\n        pressed={hotkey === 'Shift-Enter'}\n        onClick={() => setHotkey('Shift-Enter')}\n      >\n        <span className=\"mr-1\">Submit with</span>\n        <kbd>Shift + Enter</kbd>\n      </Button>\n\n      <Button pressed={hotkey === 'Enter'} onClick={() => setHotkey('Enter')}>\n        <span className=\"mr-1\">Submit with</span>\n        <kbd>Enter</kbd>\n      </Button>\n    </div>\n  )\n}\n"
+      "content": "'use client'\nimport { useState } from 'react'\n\nimport { Button } from '../../ui/button'\n\nimport { useSubmitKeymap } from './use-submit-keymap'\n\nexport default function Toolbar(props: {\n  onSubmit: (hotkey: string) => void\n}) {\n  const [hotkey, setHotkey] = useState<'Shift-Enter' | 'Enter'>('Shift-Enter')\n  useSubmitKeymap(hotkey, props.onSubmit)\n\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <Button\n        pressed={hotkey === 'Shift-Enter'}\n        onClick={() => setHotkey('Shift-Enter')}\n      >\n        <span className=\"mr-1\">Submit with</span>\n        <kbd>Shift + Enter</kbd>\n      </Button>\n\n      <Button pressed={hotkey === 'Enter'} onClick={() => setHotkey('Enter')}>\n        <span className=\"mr-1\">Submit with</span>\n        <kbd>Enter</kbd>\n      </Button>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/keymap/use-submit-keymap.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",
@@ -26,13 +26,13 @@
       "path": "registry/src/react/examples/link-mark-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/link-mark-view/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     },
     {
       "path": "registry/src/react/examples/link-mark-view/link-view.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/link-mark-view/link-view.tsx",
-      "content": "import type { ReactMarkViewProps } from 'prosekit/react'\nimport { useEffect, useState } from 'react'\n\nconst colors = [\n  '#f06292',\n  '#ba68c8',\n  '#9575cd',\n  '#7986cb',\n  '#64b5f6',\n  '#4fc3f7',\n  '#4dd0e1',\n  '#4db6ac',\n  '#81c784',\n  '#aed581',\n  '#ffb74d',\n  '#ffa726',\n  '#ff8a65',\n  '#d4e157',\n  '#ffd54f',\n  '#ffecb3',\n]\n\nfunction pickRandomColor() {\n  return colors[Math.floor(Math.random() * colors.length)]\n}\n\nexport default function Link(props: ReactMarkViewProps) {\n  const [color, setColor] = useState(colors[0])\n  const href = props.mark.attrs.href as string\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setColor(pickRandomColor())\n    }, 1000)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <a\n      href={href}\n      ref={props.contentRef}\n      style={{ color, transition: 'color 1s ease-in-out' }}\n    >\n    </a>\n  )\n}\n"
+      "content": "'use client'\nimport type { ReactMarkViewProps } from 'prosekit/react'\nimport { useEffect, useState } from 'react'\n\nconst colors = [\n  '#f06292',\n  '#ba68c8',\n  '#9575cd',\n  '#7986cb',\n  '#64b5f6',\n  '#4fc3f7',\n  '#4dd0e1',\n  '#4db6ac',\n  '#81c784',\n  '#aed581',\n  '#ffb74d',\n  '#ffa726',\n  '#ff8a65',\n  '#d4e157',\n  '#ffd54f',\n  '#ffecb3',\n]\n\nfunction pickRandomColor() {\n  return colors[Math.floor(Math.random() * colors.length)]\n}\n\nexport default function Link(props: ReactMarkViewProps) {\n  const [color, setColor] = useState(colors[0])\n  const href = props.mark.attrs.href as string\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setColor(pickRandomColor())\n    }, 1000)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <a\n      href={href}\n      ref={props.contentRef}\n      style={{ color, transition: 'color 1s ease-in-out' }}\n    >\n    </a>\n  )\n}\n"
     }
   ],
   "meta": {

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",
@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/link/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/link/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {

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",
@@ -33,7 +33,7 @@
       "path": "registry/src/react/examples/list-custom-checkbox/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/list-custom-checkbox/index.ts",
-      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+      "content": "export { default as ExampleEditor } from './editor'\n"
     }
   ],
   "meta": {