prosekit-registry 0.0.7 → 0.0.12

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

@@ -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

@@ -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

@@ -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,13 +12,13 @@
       "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'\n\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'\n\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",
@@ -30,7 +30,7 @@
       "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

@@ -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'\n\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'\n\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

@@ -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

@@ -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

@@ -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

@@ -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-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": "'use client'\n\nexport { default as ExampleEditor } from './editor'\nexport { renderHTML } from './html'\n"
+      "content": "export { default as ExampleEditor } from './editor'\nexport { renderHTML } from './html'\n"
     }
   ],
   "meta": {

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

@@ -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

@@ -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'\n\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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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'\n\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

@@ -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'\n\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

@@ -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

@@ -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": {

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

@@ -27,7 +27,7 @@
       "path": "registry/src/react/examples/list/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/list/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-loro.json

@@ -16,7 +16,7 @@
       "path": "registry/src/react/examples/loro/editor-component.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/loro/editor-component.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/loro/style.css'\n\nimport type { CursorAwareness, LoroDocType } from 'loro-prosemirror'\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 EditorComponent(props: {\n  loro: LoroDocType\n  awareness: CursorAwareness\n}) {\n  const editor = useMemo(() => {\n    const extension = defineExtension(props.loro, props.awareness)\n    return createEditor({ extension })\n  }, [props.loro, props.awareness])\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'\nimport 'prosekit/extensions/loro/style.css'\n\nimport type { CursorAwareness, LoroDocType } from 'loro-prosemirror'\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 EditorComponent(props: {\n  loro: LoroDocType\n  awareness: CursorAwareness\n}) {\n  const editor = useMemo(() => {\n    const extension = defineExtension(props.loro, props.awareness)\n    return createEditor({ extension })\n  }, [props.loro, props.awareness])\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/loro/editor.tsx",
@@ -34,7 +34,7 @@
       "path": "registry/src/react/examples/loro/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/loro/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-mark-rule.json

@@ -24,7 +24,7 @@
       "path": "registry/src/react/examples/mark-rule/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/mark-rule/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/mark-rule/issue-link.ts",

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

@@ -18,7 +18,7 @@
       "path": "registry/src/react/examples/minimal/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/minimal/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-notion.json

@@ -26,13 +26,13 @@
       "path": "registry/src/react/examples/notion/block-handle-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/block-handle-menu.tsx",
-      "content": "import { Menu } from '@base-ui/react'\nimport type { Editor } from 'prosekit/core'\nimport { clsx } from 'prosekit/core'\nimport type { ListAttrs } from 'prosekit/extensions/list'\nimport { useEditorDerivedValue } from 'prosekit/react'\nimport { useState } from 'react'\n\nimport type { EditorExtension } from './extension'\n\nconst POPUP_CLASSNAME =\n  'origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 w-50'\n\nconst ITEM_CLASSNAME =\n  'flex items-center justify-between gap-2 cursor-default py-2 px-3 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-gray-50 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-gray-900'\n\nconst TEXT_COLOR_CLASSNAME = clsx(\n  `border rounded-sm relative after:absolute after:inset-0 after:flex after:items-center after:justify-center after:content-['A']`,\n)\n\ninterface Props {\n  children: React.ReactElement\n}\n\ninterface SubmenuInfo {\n  key: string\n  label: string\n  iconClassName?: string\n  isAvailable: boolean\n  children: ItemInfo[]\n}\n\ninterface MenuItemInfo {\n  key: string\n  label: string\n  isActive: boolean\n  isAvailable: boolean\n  iconClassName?: string\n  shortcut?: string\n  danger?: boolean\n  onClick: () => void\n  children?: never\n}\n\ntype ItemInfo = SubmenuInfo | MenuItemInfo\n\nfunction getActiveBlockType(editor: Editor<EditorExtension>) {\n  if (editor.nodes.heading.isActive({ level: 1 })) {\n    return 'h1'\n  }\n\n  if (editor.nodes.heading.isActive({ level: 2 })) {\n    return 'h2'\n  }\n\n  if (editor.nodes.heading.isActive({ level: 3 })) {\n    return 'h3'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'bullet' })) {\n    return 'bullet-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'ordered' })) {\n    return 'ordered-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'task' })) {\n    return 'task-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'toggle' })) {\n    return 'toggle-list'\n  }\n\n  if (editor.nodes.image.isActive()) {\n    return 'image'\n  }\n\n  return 'text'\n}\n\nfunction turnIntoList(editor: Editor<EditorExtension>, attrs: ListAttrs) {\n  editor.commands.setParagraph()\n  editor.commands.wrapInList(attrs)\n}\n\nfunction getMenuItems(editor: Editor<EditorExtension>): ItemInfo[] {\n  const activeBlockType = getActiveBlockType(editor)\n\n  return [\n    {\n      key: 'turn-into',\n      label: 'Turn into',\n      iconClassName: 'i-lucide-refresh-cw',\n      isAvailable: activeBlockType !== 'image',\n      children: [\n        {\n          key: 'text',\n          label: 'Text',\n          iconClassName: 'i-lucide-type',\n          isActive: activeBlockType === 'text',\n          isAvailable: editor.commands.setParagraph.canExec(),\n          onClick: () => editor.commands.setParagraph(),\n        },\n        {\n          key: 'h1',\n          label: 'Heading 1',\n          iconClassName: 'i-lucide-heading-1',\n          isActive: activeBlockType === 'h1',\n          isAvailable: editor.commands.setHeading.canExec({ level: 1 }),\n          onClick: () => editor.commands.setHeading({ level: 1 }),\n        },\n        {\n          key: 'h2',\n          label: 'Heading 2',\n          iconClassName: 'i-lucide-heading-2',\n          isActive: activeBlockType === 'h2',\n          isAvailable: editor.commands.setHeading.canExec({ level: 2 }),\n          onClick: () => editor.commands.setHeading({ level: 2 }),\n        },\n        {\n          key: 'h3',\n          label: 'Heading 3',\n          iconClassName: 'i-lucide-heading-3',\n          isActive: activeBlockType === 'h3',\n          isAvailable: editor.commands.setHeading.canExec({ level: 3 }),\n          onClick: () => editor.commands.setHeading({ level: 3 }),\n        },\n        {\n          key: 'bullet-list',\n          label: 'Bullet list',\n          iconClassName: 'i-lucide-list',\n          isActive: activeBlockType === 'bullet-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'bullet' }),\n          onClick: () => turnIntoList(editor, { kind: 'bullet' }),\n        },\n        {\n          key: 'ordered-list',\n          label: 'Ordered list',\n          iconClassName: 'i-lucide-list-ordered',\n          isActive: activeBlockType === 'ordered-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'ordered' }),\n          onClick: () => turnIntoList(editor, { kind: 'ordered' }),\n        },\n        {\n          key: 'task-list',\n          label: 'Task list',\n          iconClassName: 'i-lucide-list-checks',\n          isActive: activeBlockType === 'task-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'task' }),\n          onClick: () => turnIntoList(editor, { kind: 'task' }),\n        },\n        {\n          key: 'toggle-list',\n          label: 'Toggle list',\n          iconClassName: 'i-lucide-list-collapse',\n          isActive: activeBlockType === 'toggle-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'toggle' }),\n          onClick: () => turnIntoList(editor, { kind: 'toggle' }),\n        },\n      ],\n    },\n    {\n      key: 'color',\n      label: 'Color',\n      iconClassName: 'i-lucide-paint-roller',\n      isAvailable: activeBlockType !== 'image',\n      children: [\n        {\n          key: 'default',\n          label: 'Default Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-current text-current'),\n          isActive: !editor.marks.textColor.isActive(),\n          isAvailable: editor.commands.removeTextColor.canExec(),\n          onClick: () => editor.commands.removeTextColor(),\n        },\n        {\n          key: 'gray',\n          label: 'Gray Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-gray-300 text-gray-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'gray' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'gray' }),\n          onClick: () => editor.commands.addTextColor({ color: 'gray' }),\n        },\n        {\n          key: 'orange',\n          label: 'Orange Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-orange-300 text-orange-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'orange' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'orange' }),\n          onClick: () => editor.commands.addTextColor({ color: 'orange' }),\n        },\n        {\n          key: 'yellow',\n          label: 'Yellow Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-yellow-300 text-yellow-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'yellow' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'yellow' }),\n          onClick: () => editor.commands.addTextColor({ color: 'yellow' }),\n        },\n        {\n          key: 'green',\n          label: 'Green Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-green-300 text-green-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'green' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'green' }),\n          onClick: () => editor.commands.addTextColor({ color: 'green' }),\n        },\n        {\n          key: 'blue',\n          label: 'Blue Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-blue-300 text-blue-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'blue' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'blue' }),\n          onClick: () => editor.commands.addTextColor({ color: 'blue' }),\n        },\n        {\n          key: 'purple',\n          label: 'Purple Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-purple-300 text-purple-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'purple' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'purple' }),\n          onClick: () => editor.commands.addTextColor({ color: 'purple' }),\n        },\n        {\n          key: 'pink',\n          label: 'Pink Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-pink-300 text-pink-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'pink' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'pink' }),\n          onClick: () => editor.commands.addTextColor({ color: 'pink' }),\n        },\n        {\n          key: 'red',\n          label: 'Red Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-red-300 text-red-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'red' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'red' }),\n          onClick: () => editor.commands.addTextColor({ color: 'red' }),\n        },\n      ],\n    },\n    {\n      key: 'delete',\n      label: 'Delete',\n      iconClassName: 'i-lucide-trash-2',\n      shortcut: 'Del',\n      danger: true,\n      isActive: false,\n      isAvailable: true,\n      onClick: () => editor.view.dispatch(editor.view.state.tr.deleteSelection()),\n    },\n  ]\n}\n\nfunction BlockHandleItem(props: { item: ItemInfo }) {\n  if (!props.item.isAvailable) {\n    return null\n  } else if (props.item.children) {\n    return (\n      <Menu.SubmenuRoot>\n        <Menu.SubmenuTrigger className={ITEM_CLASSNAME}>\n          {props.item.iconClassName && <span className={clsx('inline-block size-4', props.item.iconClassName)} />}\n          <span className=\"flex-1\">{props.item.label}</span>\n          <span className=\"inline-block size-4 i-lucide-chevron-right opacity-50\">\n          </span>\n        </Menu.SubmenuTrigger>\n        <Menu.Portal>\n          <Menu.Positioner align=\"center\">\n            <Menu.Popup className={POPUP_CLASSNAME}>\n              {props.item.children.map(item => <BlockHandleItem key={item.key} item={item} />)}\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </Menu.SubmenuRoot>\n    )\n  } else {\n    return (\n      <Menu.Item\n        className={clsx(ITEM_CLASSNAME, 'group')}\n        onClick={props.item.onClick}\n      >\n        {props.item.iconClassName && <span className={clsx('inline-block size-5', props.item.iconClassName)} />}\n        <span className={clsx('flex-1', props.item.danger && 'group-data-highlighted:text-red-500')}>{props.item.label}</span>\n        {props.item.isActive && <span className=\"inline-block size-4 i-lucide-check\"></span>}\n        {!props.item.isActive && props.item.shortcut && <span className=\"opacity-50\">{props.item.shortcut}</span>}\n      </Menu.Item>\n    )\n  }\n}\n\nexport default function BlockHandleMenu(props: Props) {\n  const [open, setOpen] = useState(false)\n\n  const items = useEditorDerivedValue(getMenuItems)\n\n  return (\n    <Menu.Root\n      open={open}\n      onOpenChange={(open, details) => {\n        // ignore the event to open the menu because by default Menu is opened\n        // by a `mousedown` event but we only want to open the menu by a `click`\n        // event.\n        if (open && details.reason === 'trigger-press') {\n          return\n        }\n        setOpen(open)\n      }}\n    >\n      <Menu.Trigger\n        render={props.children}\n        nativeButton={false}\n        onClick={(event) => {\n          event.preventDefault()\n          setOpen(open => !open)\n        }}\n      >\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Backdrop className=\"size-dvw flex fixed inset-0 opacity-0\" />\n        <Menu.Positioner className=\"outline-none\" side=\"right\" align=\"center\">\n          <Menu.Popup className={POPUP_CLASSNAME}>\n            {items.map(item => <BlockHandleItem key={item.key} item={item} />)}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  )\n}\n"
+      "content": "'use client'\n\nimport { Menu } from '@base-ui/react'\nimport type { Editor } from 'prosekit/core'\nimport { clsx } from 'prosekit/core'\nimport type { ListAttrs } from 'prosekit/extensions/list'\nimport { useEditorDerivedValue } from 'prosekit/react'\nimport { useState } from 'react'\n\nimport type { EditorExtension } from './extension'\n\nconst POPUP_CLASSNAME =\n  'origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 w-50'\n\nconst ITEM_CLASSNAME =\n  'flex items-center justify-between gap-2 cursor-default py-2 px-3 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-gray-50 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-gray-900'\n\nconst TEXT_COLOR_CLASSNAME = clsx(\n  `border rounded-sm relative after:absolute after:inset-0 after:flex after:items-center after:justify-center after:content-['A']`,\n)\n\ninterface Props {\n  children: React.ReactElement\n}\n\ninterface SubmenuInfo {\n  key: string\n  label: string\n  iconClassName?: string\n  isAvailable: boolean\n  children: ItemInfo[]\n}\n\ninterface MenuItemInfo {\n  key: string\n  label: string\n  isActive: boolean\n  isAvailable: boolean\n  iconClassName?: string\n  shortcut?: string\n  danger?: boolean\n  onClick: () => void\n  children?: never\n}\n\ntype ItemInfo = SubmenuInfo | MenuItemInfo\n\nfunction getActiveBlockType(editor: Editor<EditorExtension>) {\n  if (editor.nodes.heading.isActive({ level: 1 })) {\n    return 'h1'\n  }\n\n  if (editor.nodes.heading.isActive({ level: 2 })) {\n    return 'h2'\n  }\n\n  if (editor.nodes.heading.isActive({ level: 3 })) {\n    return 'h3'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'bullet' })) {\n    return 'bullet-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'ordered' })) {\n    return 'ordered-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'task' })) {\n    return 'task-list'\n  }\n\n  if (editor.nodes.list.isActive({ kind: 'toggle' })) {\n    return 'toggle-list'\n  }\n\n  if (editor.nodes.image.isActive()) {\n    return 'image'\n  }\n\n  return 'text'\n}\n\nfunction turnIntoList(editor: Editor<EditorExtension>, attrs: ListAttrs) {\n  editor.commands.setParagraph()\n  editor.commands.wrapInList(attrs)\n}\n\nfunction getMenuItems(editor: Editor<EditorExtension>): ItemInfo[] {\n  const activeBlockType = getActiveBlockType(editor)\n\n  return [\n    {\n      key: 'turn-into',\n      label: 'Turn into',\n      iconClassName: 'i-lucide-refresh-cw',\n      isAvailable: activeBlockType !== 'image',\n      children: [\n        {\n          key: 'text',\n          label: 'Text',\n          iconClassName: 'i-lucide-type',\n          isActive: activeBlockType === 'text',\n          isAvailable: editor.commands.setParagraph.canExec(),\n          onClick: () => editor.commands.setParagraph(),\n        },\n        {\n          key: 'h1',\n          label: 'Heading 1',\n          iconClassName: 'i-lucide-heading-1',\n          isActive: activeBlockType === 'h1',\n          isAvailable: editor.commands.setHeading.canExec({ level: 1 }),\n          onClick: () => editor.commands.setHeading({ level: 1 }),\n        },\n        {\n          key: 'h2',\n          label: 'Heading 2',\n          iconClassName: 'i-lucide-heading-2',\n          isActive: activeBlockType === 'h2',\n          isAvailable: editor.commands.setHeading.canExec({ level: 2 }),\n          onClick: () => editor.commands.setHeading({ level: 2 }),\n        },\n        {\n          key: 'h3',\n          label: 'Heading 3',\n          iconClassName: 'i-lucide-heading-3',\n          isActive: activeBlockType === 'h3',\n          isAvailable: editor.commands.setHeading.canExec({ level: 3 }),\n          onClick: () => editor.commands.setHeading({ level: 3 }),\n        },\n        {\n          key: 'bullet-list',\n          label: 'Bullet list',\n          iconClassName: 'i-lucide-list',\n          isActive: activeBlockType === 'bullet-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'bullet' }),\n          onClick: () => turnIntoList(editor, { kind: 'bullet' }),\n        },\n        {\n          key: 'ordered-list',\n          label: 'Ordered list',\n          iconClassName: 'i-lucide-list-ordered',\n          isActive: activeBlockType === 'ordered-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'ordered' }),\n          onClick: () => turnIntoList(editor, { kind: 'ordered' }),\n        },\n        {\n          key: 'task-list',\n          label: 'Task list',\n          iconClassName: 'i-lucide-list-checks',\n          isActive: activeBlockType === 'task-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'task' }),\n          onClick: () => turnIntoList(editor, { kind: 'task' }),\n        },\n        {\n          key: 'toggle-list',\n          label: 'Toggle list',\n          iconClassName: 'i-lucide-list-collapse',\n          isActive: activeBlockType === 'toggle-list',\n          isAvailable: editor.commands.wrapInList.canExec({ kind: 'toggle' }),\n          onClick: () => turnIntoList(editor, { kind: 'toggle' }),\n        },\n      ],\n    },\n    {\n      key: 'color',\n      label: 'Color',\n      iconClassName: 'i-lucide-paint-roller',\n      isAvailable: activeBlockType !== 'image',\n      children: [\n        {\n          key: 'default',\n          label: 'Default Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-current text-current'),\n          isActive: !editor.marks.textColor.isActive(),\n          isAvailable: editor.commands.removeTextColor.canExec(),\n          onClick: () => editor.commands.removeTextColor(),\n        },\n        {\n          key: 'gray',\n          label: 'Gray Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-gray-300 text-gray-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'gray' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'gray' }),\n          onClick: () => editor.commands.addTextColor({ color: 'gray' }),\n        },\n        {\n          key: 'orange',\n          label: 'Orange Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-orange-300 text-orange-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'orange' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'orange' }),\n          onClick: () => editor.commands.addTextColor({ color: 'orange' }),\n        },\n        {\n          key: 'yellow',\n          label: 'Yellow Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-yellow-300 text-yellow-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'yellow' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'yellow' }),\n          onClick: () => editor.commands.addTextColor({ color: 'yellow' }),\n        },\n        {\n          key: 'green',\n          label: 'Green Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-green-300 text-green-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'green' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'green' }),\n          onClick: () => editor.commands.addTextColor({ color: 'green' }),\n        },\n        {\n          key: 'blue',\n          label: 'Blue Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-blue-300 text-blue-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'blue' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'blue' }),\n          onClick: () => editor.commands.addTextColor({ color: 'blue' }),\n        },\n        {\n          key: 'purple',\n          label: 'Purple Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-purple-300 text-purple-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'purple' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'purple' }),\n          onClick: () => editor.commands.addTextColor({ color: 'purple' }),\n        },\n        {\n          key: 'pink',\n          label: 'Pink Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-pink-300 text-pink-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'pink' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'pink' }),\n          onClick: () => editor.commands.addTextColor({ color: 'pink' }),\n        },\n        {\n          key: 'red',\n          label: 'Red Text',\n          iconClassName: clsx(TEXT_COLOR_CLASSNAME, 'border-red-300 text-red-500'),\n          isActive: editor.marks.textColor.isActive({ color: 'red' }),\n          isAvailable: editor.commands.addTextColor.canExec({ color: 'red' }),\n          onClick: () => editor.commands.addTextColor({ color: 'red' }),\n        },\n      ],\n    },\n    {\n      key: 'delete',\n      label: 'Delete',\n      iconClassName: 'i-lucide-trash-2',\n      shortcut: 'Del',\n      danger: true,\n      isActive: false,\n      isAvailable: true,\n      onClick: () => editor.view.dispatch(editor.view.state.tr.deleteSelection()),\n    },\n  ]\n}\n\nfunction BlockHandleItem(props: { item: ItemInfo }) {\n  if (!props.item.isAvailable) {\n    return null\n  } else if (props.item.children) {\n    return (\n      <Menu.SubmenuRoot>\n        <Menu.SubmenuTrigger className={ITEM_CLASSNAME}>\n          {props.item.iconClassName && <span className={clsx('inline-block size-4', props.item.iconClassName)} />}\n          <span className=\"flex-1\">{props.item.label}</span>\n          <span className=\"inline-block size-4 i-lucide-chevron-right opacity-50\">\n          </span>\n        </Menu.SubmenuTrigger>\n        <Menu.Portal>\n          <Menu.Positioner align=\"center\">\n            <Menu.Popup className={POPUP_CLASSNAME}>\n              {props.item.children.map(item => <BlockHandleItem key={item.key} item={item} />)}\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </Menu.SubmenuRoot>\n    )\n  } else {\n    return (\n      <Menu.Item\n        className={clsx(ITEM_CLASSNAME, 'group')}\n        onClick={props.item.onClick}\n      >\n        {props.item.iconClassName && <span className={clsx('inline-block size-5', props.item.iconClassName)} />}\n        <span className={clsx('flex-1', props.item.danger && 'group-data-highlighted:text-red-500')}>{props.item.label}</span>\n        {props.item.isActive && <span className=\"inline-block size-4 i-lucide-check\"></span>}\n        {!props.item.isActive && props.item.shortcut && <span className=\"opacity-50\">{props.item.shortcut}</span>}\n      </Menu.Item>\n    )\n  }\n}\n\nexport default function BlockHandleMenu(props: Props) {\n  const [open, setOpen] = useState(false)\n\n  const items = useEditorDerivedValue(getMenuItems)\n\n  return (\n    <Menu.Root\n      open={open}\n      onOpenChange={(open, details) => {\n        // ignore the event to open the menu because by default Menu is opened\n        // by a `mousedown` event but we only want to open the menu by a `click`\n        // event.\n        if (open && details.reason === 'trigger-press') {\n          return\n        }\n        setOpen(open)\n      }}\n    >\n      <Menu.Trigger\n        render={props.children}\n        nativeButton={false}\n        onClick={(event) => {\n          event.preventDefault()\n          setOpen(open => !open)\n        }}\n      >\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Backdrop className=\"size-dvw flex fixed inset-0 opacity-0\" />\n        <Menu.Positioner className=\"outline-none\" side=\"right\" align=\"center\">\n          <Menu.Popup className={POPUP_CLASSNAME}>\n            {items.map(item => <BlockHandleItem key={item.key} item={item} />)}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/block-handle.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/block-handle.tsx",
-      "content": "import { Tooltip } from '@base-ui/react/tooltip'\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/react/block-handle'\n\nimport BlockHandleMenu from './block-handle-menu'\n\ninterface Props {\n  enabled: boolean\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function BlockHandle(props: Props) {\n  if (!props.enabled) {\n    return null\n  }\n\n  return (\n    <Tooltip.Provider>\n      <BlockHandleRoot>\n        <BlockHandlePositioner\n          placement={props.dir === 'rtl' ? 'right' : 'left'}\n          className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n        >\n          <BlockHandlePopup className=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n            <Tooltip.Root>\n              <Tooltip.Trigger className=\"m-0 p-0\">\n                <BlockHandleAdd className=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n                  <div className=\"i-lucide-plus size-5 block\" />\n                </BlockHandleAdd>\n              </Tooltip.Trigger>\n              <Tooltip.Portal>\n                <Tooltip.Positioner sideOffset={10} side=\"bottom\">\n                  <Tooltip.Popup className=\"\n                      flex flex-col justify-center items-center\n                      px-2 py-1\n                      rounded-md\n                      bg-[canvas]\n                      text-sm\n                      z-100\n                      origin-(--transform-origin)\n                      shadow-lg shadow-gray-200 outline-1 outline-gray-200\n                      transition-[transform,scale,opacity]\n                      data-ending-style:opacity-0 data-ending-style:scale-90\n                      data-instant:transition-none\n                      data-starting-style:opacity-0 data-starting-style:scale-90\n                      dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1\">\n                    <span>\n                      <span>Click{' '}</span>\n                      <span className=\"opacity-50\">to add below</span>\n                    </span>\n                    <span>\n                      <span>Option-click{' '}</span>\n                      <span className=\"opacity-50\">to add above</span>\n                    </span>\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n            <Tooltip.Root>\n              <Tooltip.Trigger className=\"m-0 p-0\">\n                <BlockHandleMenu>\n                  <BlockHandleDraggable className=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n                    <div className=\"i-lucide-grip-vertical size-5 block\" />\n                  </BlockHandleDraggable>\n                </BlockHandleMenu>\n              </Tooltip.Trigger>\n              <Tooltip.Portal>\n                <Tooltip.Positioner sideOffset={10} side=\"bottom\">\n                  <Tooltip.Popup className=\"\n                      flex flex-col justify-center items-center\n                      px-2 py-1\n                      rounded-md\n                      bg-[canvas]\n                      text-sm\n                      z-100\n                      origin-(--transform-origin)\n                      shadow-lg shadow-gray-200 outline-1 outline-gray-200\n                      transition-[transform,scale,opacity]\n                      data-ending-style:opacity-0 data-ending-style:scale-90\n                      data-instant:transition-none\n                      data-starting-style:opacity-0 data-starting-style:scale-90\n                      dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1\">\n                    <span>\n                      <span>Drag{' '}</span>\n                      <span className=\"opacity-50\">to move</span>\n                    </span>\n                    <span>\n                      <span>Click{' '}</span>\n                      <span className=\"opacity-50\">to open menu</span>\n                    </span>\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </BlockHandlePopup>\n        </BlockHandlePositioner>\n      </BlockHandleRoot>\n    </Tooltip.Provider>\n  )\n}\n"
+      "content": "'use client'\n\nimport { Tooltip } from '@base-ui/react/tooltip'\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/react/block-handle'\n\nimport BlockHandleMenu from './block-handle-menu'\n\ninterface Props {\n  enabled: boolean\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function BlockHandle(props: Props) {\n  if (!props.enabled) {\n    return null\n  }\n\n  return (\n    <Tooltip.Provider>\n      <BlockHandleRoot>\n        <BlockHandlePositioner\n          placement={props.dir === 'rtl' ? 'right' : 'left'}\n          className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n        >\n          <BlockHandlePopup className=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n            <Tooltip.Root>\n              <Tooltip.Trigger className=\"m-0 p-0\">\n                <BlockHandleAdd className=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n                  <div className=\"i-lucide-plus size-5 block\" />\n                </BlockHandleAdd>\n              </Tooltip.Trigger>\n              <Tooltip.Portal>\n                <Tooltip.Positioner sideOffset={10} side=\"bottom\">\n                  <Tooltip.Popup className=\"\n                      flex flex-col justify-center items-center\n                      px-2 py-1\n                      rounded-md\n                      bg-[canvas]\n                      text-sm\n                      z-100\n                      origin-(--transform-origin)\n                      shadow-lg shadow-gray-200 outline-1 outline-gray-200\n                      transition-[transform,scale,opacity]\n                      data-ending-style:opacity-0 data-ending-style:scale-90\n                      data-instant:transition-none\n                      data-starting-style:opacity-0 data-starting-style:scale-90\n                      dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1\">\n                    <span>\n                      <span>Click{' '}</span>\n                      <span className=\"opacity-50\">to add below</span>\n                    </span>\n                    <span>\n                      <span>Option-click{' '}</span>\n                      <span className=\"opacity-50\">to add above</span>\n                    </span>\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n            <Tooltip.Root>\n              <Tooltip.Trigger className=\"m-0 p-0\">\n                <BlockHandleMenu>\n                  <BlockHandleDraggable className=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n                    <div className=\"i-lucide-grip-vertical size-5 block\" />\n                  </BlockHandleDraggable>\n                </BlockHandleMenu>\n              </Tooltip.Trigger>\n              <Tooltip.Portal>\n                <Tooltip.Positioner sideOffset={10} side=\"bottom\">\n                  <Tooltip.Popup className=\"\n                      flex flex-col justify-center items-center\n                      px-2 py-1\n                      rounded-md\n                      bg-[canvas]\n                      text-sm\n                      z-100\n                      origin-(--transform-origin)\n                      shadow-lg shadow-gray-200 outline-1 outline-gray-200\n                      transition-[transform,scale,opacity]\n                      data-ending-style:opacity-0 data-ending-style:scale-90\n                      data-instant:transition-none\n                      data-starting-style:opacity-0 data-starting-style:scale-90\n                      dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1\">\n                    <span>\n                      <span>Drag{' '}</span>\n                      <span className=\"opacity-50\">to move</span>\n                    </span>\n                    <span>\n                      <span>Click{' '}</span>\n                      <span className=\"opacity-50\">to open menu</span>\n                    </span>\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </BlockHandlePopup>\n        </BlockHandlePositioner>\n      </BlockHandleRoot>\n    </Tooltip.Provider>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/editor.tsx",
@@ -50,55 +50,55 @@
       "path": "registry/src/react/examples/notion/image-view/image-view-content.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/image-view/image-view-content.tsx",
-      "content": "import { UploadTask } from 'prosekit/extensions/file'\nimport type { ImageAttrs } from 'prosekit/extensions/image'\nimport type { ReactNodeViewProps } from 'prosekit/react'\nimport { ResizableHandle, ResizableRoot } from 'prosekit/react/resizable'\nimport { useEffect, useState, type SyntheticEvent } from 'react'\n\nexport default function ImageViewContent(props: ReactNodeViewProps) {\n  const attrs = props.node.attrs as ImageAttrs\n  const url = attrs.src || ''\n  const uploading = url.startsWith('blob:')\n\n  const [aspectRatio, setAspectRatio] = useState<number | undefined>()\n  const [error, setError] = useState<string | undefined>()\n  const [progress, setProgress] = useState(0)\n\n  useEffect(() => {\n    if (!uploading) return\n\n    const uploadTask = UploadTask.get<string>(url)\n    if (!uploadTask) return\n\n    let canceled = false\n\n    uploadTask.finished.catch((error) => {\n      if (canceled) return\n      setError(String(error))\n    })\n    const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {\n      if (canceled) return\n      setProgress(total ? loaded / total : 0)\n    })\n\n    return () => {\n      canceled = true\n      unsubscribeProgress()\n    }\n  }, [url, uploading])\n\n  const handleImageLoad = (event: SyntheticEvent) => {\n    const img = event.target as HTMLImageElement\n    const { naturalWidth, naturalHeight } = img\n    const ratio = naturalWidth / naturalHeight\n    if (ratio && Number.isFinite(ratio)) {\n      setAspectRatio(ratio)\n    }\n    if (naturalWidth && naturalHeight && (!attrs.width || !attrs.height)) {\n      props.setAttrs({ width: naturalWidth, height: naturalHeight })\n    }\n  }\n\n  return (\n    <ResizableRoot\n      width={attrs.width ?? undefined}\n      height={attrs.height ?? undefined}\n      aspectRatio={aspectRatio}\n      onResizeEnd={(event) => props.setAttrs(event.detail)}\n      data-selected={props.selected ? '' : undefined}\n      className=\"relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-150 max-w-full min-h-16 min-w-16 outline-2 outline-transparent data-selected:outline-blue-500 outline-solid\"\n    >\n      {url && !error && (\n        <img\n          src={url}\n          onLoad={handleImageLoad}\n          alt=\"upload preview\"\n          className=\"h-full w-full max-w-full max-h-full object-contain\"\n        />\n      )}\n      {uploading && !error && (\n        <div className=\"absolute bottom-0 left-0 m-1 flex content-center items-center gap-2 rounded-sm bg-gray-800/60 p-1.5 text-xs text-white/80 transition\">\n          <div className=\"i-lucide-loader-circle size-4 animate-spin block\"></div>\n          <div>{Math.round(progress * 100)}%</div>\n        </div>\n      )}\n      {error && (\n        <div className=\"absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-4 bg-gray-200 p-2 text-sm dark:bg-gray-800 @container\">\n          <div className=\"i-lucide-image-off size-8 block\"></div>\n          <div className=\"hidden opacity-80 @xs:block\">\n            Failed to upload image\n          </div>\n        </div>\n      )}\n      <ResizableHandle\n        className=\"absolute bottom-0 right-0 rounded-sm m-1.5 p-1 transition bg-gray-900/30 active:bg-gray-800/60 hover:bg-gray-800/60 text-white/50 active:text-white/80 active:translate-x-0.5 active:translate-y-0.5 opacity-0 hover:opacity-100 group-hover:opacity-100 group-data-resizing:opacity-100\"\n        position=\"bottom-right\"\n      >\n        <div className=\"i-lucide-arrow-down-right size-4 block\"></div>\n      </ResizableHandle>\n    </ResizableRoot>\n  )\n}\n"
+      "content": "'use client'\n\nimport { UploadTask } from 'prosekit/extensions/file'\nimport type { ImageAttrs } from 'prosekit/extensions/image'\nimport type { ReactNodeViewProps } from 'prosekit/react'\nimport { ResizableHandle, ResizableRoot } from 'prosekit/react/resizable'\nimport { useEffect, useState, type SyntheticEvent } from 'react'\n\nexport default function ImageViewContent(props: ReactNodeViewProps) {\n  const attrs = props.node.attrs as ImageAttrs\n  const url = attrs.src || ''\n  const uploading = url.startsWith('blob:')\n\n  const [aspectRatio, setAspectRatio] = useState<number | undefined>()\n  const [error, setError] = useState<string | undefined>()\n  const [progress, setProgress] = useState(0)\n\n  useEffect(() => {\n    if (!uploading) return\n\n    const uploadTask = UploadTask.get<string>(url)\n    if (!uploadTask) return\n\n    let canceled = false\n\n    uploadTask.finished.catch((error) => {\n      if (canceled) return\n      setError(String(error))\n    })\n    const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {\n      if (canceled) return\n      setProgress(total ? loaded / total : 0)\n    })\n\n    return () => {\n      canceled = true\n      unsubscribeProgress()\n    }\n  }, [url, uploading])\n\n  const handleImageLoad = (event: SyntheticEvent) => {\n    const img = event.target as HTMLImageElement\n    const { naturalWidth, naturalHeight } = img\n    const ratio = naturalWidth / naturalHeight\n    if (ratio && Number.isFinite(ratio)) {\n      setAspectRatio(ratio)\n    }\n    if (naturalWidth && naturalHeight && (!attrs.width || !attrs.height)) {\n      props.setAttrs({ width: naturalWidth, height: naturalHeight })\n    }\n  }\n\n  return (\n    <ResizableRoot\n      width={attrs.width ?? undefined}\n      height={attrs.height ?? undefined}\n      aspectRatio={aspectRatio}\n      onResizeEnd={(event) => props.setAttrs(event.detail)}\n      data-selected={props.selected ? '' : undefined}\n      className=\"relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-150 max-w-full min-h-16 min-w-16 outline-2 outline-transparent data-selected:outline-blue-500 outline-solid\"\n    >\n      {url && !error && (\n        <img\n          src={url}\n          onLoad={handleImageLoad}\n          alt=\"upload preview\"\n          className=\"h-full w-full max-w-full max-h-full object-contain\"\n        />\n      )}\n      {uploading && !error && (\n        <div className=\"absolute bottom-0 left-0 m-1 flex content-center items-center gap-2 rounded-sm bg-gray-800/60 p-1.5 text-xs text-white/80 transition\">\n          <div className=\"i-lucide-loader-circle size-4 animate-spin block\"></div>\n          <div>{Math.round(progress * 100)}%</div>\n        </div>\n      )}\n      {error && (\n        <div className=\"absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-4 bg-gray-200 p-2 text-sm dark:bg-gray-800 @container\">\n          <div className=\"i-lucide-image-off size-8 block\"></div>\n          <div className=\"hidden opacity-80 @xs:block\">\n            Failed to upload image\n          </div>\n        </div>\n      )}\n      <ResizableHandle\n        className=\"absolute bottom-0 right-0 rounded-sm m-1.5 p-1 transition bg-gray-900/30 active:bg-gray-800/60 hover:bg-gray-800/60 text-white/50 active:text-white/80 active:translate-x-0.5 active:translate-y-0.5 opacity-0 hover:opacity-100 group-hover:opacity-100 group-data-resizing:opacity-100\"\n        position=\"bottom-right\"\n      >\n        <div className=\"i-lucide-arrow-down-right size-4 block\"></div>\n      </ResizableHandle>\n    </ResizableRoot>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/image-view/image-view-placeholder.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/image-view/image-view-placeholder.tsx",
-      "content": "import { useEditor } from 'prosekit/react'\n\nimport { sampleUploader } from '../../../sample/sample-uploader'\nimport type { EditorExtension } from '../extension'\n\ninterface Props {\n  getPos: () => number | undefined\n  selected: boolean\n}\n\nexport default function ImageViewPlaceholder(props: Props) {\n  const editor = useEditor<EditorExtension>()\n\n  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const file = event.target.files?.[0]\n    if (!file) return\n\n    const pos = props.getPos()\n    if (typeof pos !== 'number') return\n\n    editor.commands.uploadImage({ file, uploader: sampleUploader, pos, replace: true })\n\n    // Reset input so the same file can be selected again\n    event.target.value = ''\n  }\n\n  return (\n    <label\n      className=\"flex w-full cursor-pointer items-center rounded-lg gap-3 px-4 py-3 transition-colors data-selected:outline-blue-500 outline-1 outline-transparent bg-gray-500/10 text-current/40 hover:bg-gray-500/20 hover:text-current/60\"\n      aria-label=\"Add an image\"\n      data-selected={props.selected ? '' : undefined}\n    >\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        className=\"hidden\"\n        onChange={handleFileChange}\n      />\n      <span className=\"block i-lucide-image size-4\" />\n      <span className=\"text-sm font-medium\">Add an image</span>\n    </label>\n  )\n}\n"
+      "content": "'use client'\n\nimport { useEditor } from 'prosekit/react'\n\nimport { sampleUploader } from '../../../sample/sample-uploader'\nimport type { EditorExtension } from '../extension'\n\ninterface Props {\n  getPos: () => number | undefined\n  selected: boolean\n}\n\nexport default function ImageViewPlaceholder(props: Props) {\n  const editor = useEditor<EditorExtension>()\n\n  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const file = event.target.files?.[0]\n    if (!file) return\n\n    const pos = props.getPos()\n    if (typeof pos !== 'number') return\n\n    editor.commands.uploadImage({ file, uploader: sampleUploader, pos, replace: true })\n\n    // Reset input so the same file can be selected again\n    event.target.value = ''\n  }\n\n  return (\n    <label\n      className=\"flex w-full cursor-pointer items-center rounded-lg gap-3 px-4 py-3 transition-colors data-selected:outline-blue-500 outline-1 outline-transparent bg-gray-500/10 text-current/40 hover:bg-gray-500/20 hover:text-current/60\"\n      aria-label=\"Add an image\"\n      data-selected={props.selected ? '' : undefined}\n    >\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        className=\"hidden\"\n        onChange={handleFileChange}\n      />\n      <span className=\"block i-lucide-image size-4\" />\n      <span className=\"text-sm font-medium\">Add an image</span>\n    </label>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/image-view/image-view.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/image-view/image-view.tsx",
-      "content": "import type { ImageAttrs } from 'prosekit/extensions/image'\nimport type { ReactNodeViewProps } from 'prosekit/react'\n\nimport ImageViewContent from './image-view-content'\nimport ImageViewPlaceholder from './image-view-placeholder'\n\nexport default function ImageView(props: ReactNodeViewProps) {\n  const attrs = props.node.attrs as ImageAttrs\n  const url = attrs.src || ''\n\n  if (url) {\n    return <ImageViewContent {...props} />\n  } else {\n    return <ImageViewPlaceholder getPos={props.getPos} selected={props.selected} />\n  }\n}\n"
+      "content": "'use client'\n\nimport type { ImageAttrs } from 'prosekit/extensions/image'\nimport type { ReactNodeViewProps } from 'prosekit/react'\n\nimport ImageViewContent from './image-view-content'\nimport ImageViewPlaceholder from './image-view-placeholder'\n\nexport default function ImageView(props: ReactNodeViewProps) {\n  const attrs = props.node.attrs as ImageAttrs\n  const url = attrs.src || ''\n\n  if (url) {\n    return <ImageViewContent {...props} />\n  } else {\n    return <ImageViewPlaceholder getPos={props.getPos} selected={props.selected} />\n  }\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/image-view/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/notion/image-view/index.ts",
-      "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"
+      "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"
     },
     {
       "path": "registry/src/react/examples/notion/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/notion/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/notion/slash-menu/index.ts",
       "type": "registry:component",
       "target": "components/editor/examples/notion/slash-menu/index.ts",
-      "content": "'use client'\n\nexport { default as SlashMenu } from './slash-menu'\n"
+      "content": "export { default as SlashMenu } from './slash-menu'\n"
     },
     {
       "path": "registry/src/react/examples/notion/slash-menu/slash-menu-empty.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/slash-menu/slash-menu-empty.tsx",
-      "content": "import { AutocompleteEmpty } from 'prosekit/react/autocomplete'\n\nexport default function SlashMenuEmpty() {\n  return (\n    <AutocompleteEmpty className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>No results</span>\n    </AutocompleteEmpty>\n  )\n}\n"
+      "content": "'use client'\n\nimport { AutocompleteEmpty } from 'prosekit/react/autocomplete'\n\nexport default function SlashMenuEmpty() {\n  return (\n    <AutocompleteEmpty className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>No results</span>\n    </AutocompleteEmpty>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/slash-menu/slash-menu-item.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/slash-menu/slash-menu-item.tsx",
-      "content": "import { AutocompleteItem } from 'prosekit/react/autocomplete'\n\nexport default function SlashMenuItem(props: {\n  label: string\n  kbd?: string\n  onSelect: () => void\n}) {\n  return (\n    <AutocompleteItem onSelect={props.onSelect} className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>{props.label}</span>\n      {props.kbd && <kbd className=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{props.kbd}</kbd>}\n    </AutocompleteItem>\n  )\n}\n"
+      "content": "'use client'\n\nimport { AutocompleteItem } from 'prosekit/react/autocomplete'\n\nexport default function SlashMenuItem(props: {\n  label: string\n  kbd?: string\n  onSelect: () => void\n}) {\n  return (\n    <AutocompleteItem onSelect={props.onSelect} className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>{props.label}</span>\n      {props.kbd && <kbd className=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{props.kbd}</kbd>}\n    </AutocompleteItem>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/slash-menu/slash-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/slash-menu/slash-menu.tsx",
-      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/react'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/react/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty'\nimport SlashMenuItem from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\ninterface Props {\n  onOpenChange: (open: boolean) => void\n}\n\nexport default function SlashMenu(props: Props) {\n  const editor = useEditor<BasicExtension>()\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onOpenChange={(event) => {\n        props.onOpenChange(event.detail)\n      }}\n    >\n      <AutocompletePositioner className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <AutocompletePopup className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <SlashMenuItem\n            label=\"Text\"\n            onSelect={() => editor.commands.setParagraph()}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 1\"\n            kbd=\"#\"\n            onSelect={() => editor.commands.setHeading({ level: 1 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 2\"\n            kbd=\"##\"\n            onSelect={() => editor.commands.setHeading({ level: 2 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 3\"\n            kbd=\"###\"\n            onSelect={() => editor.commands.setHeading({ level: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Bullet list\"\n            kbd=\"-\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'bullet' })}\n          />\n\n          <SlashMenuItem\n            label=\"Ordered list\"\n            kbd=\"1.\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'ordered' })}\n          />\n\n          <SlashMenuItem\n            label=\"Task list\"\n            kbd=\"[]\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'task' })}\n          />\n\n          <SlashMenuItem\n            label=\"Toggle list\"\n            kbd=\">>\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'toggle' })}\n          />\n\n          <SlashMenuItem\n            label=\"Quote\"\n            kbd=\">\"\n            onSelect={() => editor.commands.setBlockquote()}\n          />\n\n          <SlashMenuItem\n            label=\"Table\"\n            onSelect={() => editor.commands.insertTable({ row: 3, col: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Divider\"\n            kbd=\"---\"\n            onSelect={() => editor.commands.insertHorizontalRule()}\n          />\n\n          <SlashMenuItem\n            label=\"Code\"\n            kbd=\"```\"\n            onSelect={() => editor.commands.setCodeBlock()}\n          />\n\n          <SlashMenuItem\n            label=\"Image\"\n            onSelect={() => editor.commands.insertImage({ src: '' })}\n          />\n\n          <SlashMenuEmpty />\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+      "content": "'use client'\n\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/react'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/react/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty'\nimport SlashMenuItem from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\ninterface Props {\n  onOpenChange: (open: boolean) => void\n}\n\nexport default function SlashMenu(props: Props) {\n  const editor = useEditor<BasicExtension>()\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onOpenChange={(event) => {\n        props.onOpenChange(event.detail)\n      }}\n    >\n      <AutocompletePositioner className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <AutocompletePopup className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <SlashMenuItem\n            label=\"Text\"\n            onSelect={() => editor.commands.setParagraph()}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 1\"\n            kbd=\"#\"\n            onSelect={() => editor.commands.setHeading({ level: 1 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 2\"\n            kbd=\"##\"\n            onSelect={() => editor.commands.setHeading({ level: 2 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 3\"\n            kbd=\"###\"\n            onSelect={() => editor.commands.setHeading({ level: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Bullet list\"\n            kbd=\"-\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'bullet' })}\n          />\n\n          <SlashMenuItem\n            label=\"Ordered list\"\n            kbd=\"1.\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'ordered' })}\n          />\n\n          <SlashMenuItem\n            label=\"Task list\"\n            kbd=\"[]\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'task' })}\n          />\n\n          <SlashMenuItem\n            label=\"Toggle list\"\n            kbd=\">>\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'toggle' })}\n          />\n\n          <SlashMenuItem\n            label=\"Quote\"\n            kbd=\">\"\n            onSelect={() => editor.commands.setBlockquote()}\n          />\n\n          <SlashMenuItem\n            label=\"Table\"\n            onSelect={() => editor.commands.insertTable({ row: 3, col: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Divider\"\n            kbd=\"---\"\n            onSelect={() => editor.commands.insertHorizontalRule()}\n          />\n\n          <SlashMenuItem\n            label=\"Code\"\n            kbd=\"```\"\n            onSelect={() => editor.commands.setCodeBlock()}\n          />\n\n          <SlashMenuItem\n            label=\"Image\"\n            onSelect={() => editor.commands.insertImage({ src: '' })}\n          />\n\n          <SlashMenuEmpty />\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/style.css",