prosekit-registry 0.0.21 → 0.0.22

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

@@ -19,7 +19,7 @@
     "@base-ui/react",
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -32,13 +32,13 @@
       "path": "registry/src/react/examples/notion/block-handle.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/notion/block-handle.tsx",
-      "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n        >\n          <BlockHandlePopup className=\"flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n        >\n          <BlockHandlePopup className=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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",
       "type": "registry:component",
       "target": "components/editor/examples/notion/editor.tsx",
-      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-notion'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport BlockHandle from './block-handle'\nimport { defineExtension } from './extension'\nimport { SlashMenu } from './slash-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  const [slashMenuOpen, setSlashMenuOpen] = useState(false)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\" data-prosekit-example=\"notion\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu onOpenChange={setSlashMenuOpen} />\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n          <BlockHandle enabled={!slashMenuOpen} />\n          <TableHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-notion'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport BlockHandle from './block-handle'\nimport { defineExtension } from './extension'\nimport { SlashMenu } from './slash-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  const [slashMenuOpen, setSlashMenuOpen] = useState(false)\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white\" data-prosekit-example=\"notion\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n          <SlashMenu onOpenChange={setSlashMenuOpen} />\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n          <BlockHandle enabled={!slashMenuOpen} />\n          <TableHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/extension.ts",
@@ -86,19 +86,19 @@
       "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": "'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"
+      "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-md px-3 py-1.5 text-sm 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": "'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"
+      "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-md px-3 py-1.5 text-sm 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": "'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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup className=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup className=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col relative max-h-100 min-h-0 min-w-60 select-none overflow-hidden whitespace-nowrap\">\n          <div className=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\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          </div>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/notion/style.css",

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

@@ -7,7 +7,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/react-sample-sample-doc-page.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -32,7 +32,7 @@
       "path": "registry/src/react/examples/page/paper-controller.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/page/paper-controller.tsx",
-      "content": "'use client'\n\nimport { definePageRendering, type PageRenderingOptions } from 'prosekit/extensions/page'\nimport { useExtension } from 'prosekit/react'\nimport { useEffect, useId, useMemo, useState } from 'react'\n\n// Paper sizes in pixels at 96 DPI\nconst PAPER_SIZES = {\n  A3: { short: 1123, long: 1587 },\n  A4: { short: 794, long: 1123 },\n  A5: { short: 559, long: 794 },\n  B4: { short: 945, long: 1334 },\n  B5: { short: 665, long: 945 },\n  letter: { short: 816, long: 1056 },\n} as const\n\ntype PaperSize = keyof typeof PAPER_SIZES\ntype Orientation = 'portrait' | 'landscape'\n\nexport default function PaperController({\n  zoom,\n  setZoom,\n}: {\n  zoom: number\n  setZoom: (zoom: number) => void\n}) {\n  const id = useId()\n  const [paperSize, setPaperSize] = useState<PaperSize>('A4')\n  const [orientation, setOrientation] = useState<Orientation>('portrait')\n  const [margin, setMargin] = useState(70)\n  const [enablePageLayout, setEnablePageLayout] = useState(true)\n\n  const pageRenderingOptions: PageRenderingOptions = useMemo(() => {\n    const { short, long } = PAPER_SIZES[paperSize]\n    const pageWidth = orientation === 'portrait' ? short : long\n    const pageHeight = orientation === 'portrait' ? long : short\n\n    return {\n      pageWidth,\n      pageHeight,\n      marginTop: margin,\n      marginRight: margin,\n      marginBottom: margin,\n      marginLeft: margin,\n    }\n  }, [paperSize, orientation, margin])\n\n  useEffect(() => {\n    const styleId = 'print-page-style'\n    let style = document.getElementById(styleId) as HTMLStyleElement | null\n    if (!style) {\n      style = document.createElement('style')\n      style.id = styleId\n      document.head.appendChild(style)\n    }\n    style.textContent = `@page { size: ${paperSize} ${orientation}; margin: 0; }`\n\n    return () => {\n      style.textContent = ''\n    }\n  }, [paperSize, orientation])\n\n  const extension = useMemo(() => {\n    return enablePageLayout ? definePageRendering(pageRenderingOptions) : null\n  }, [pageRenderingOptions, enablePageLayout])\n\n  useExtension(extension)\n\n  return (\n    <div\n      data-paper-controller={paperSize}\n      className=\"grid grid-cols-[auto_1fr] gap-2 w-min border p-2 bg-[Canvas] sticky top-2 left-2 z-10 print:hidden text-xs\"\n    >\n      <label htmlFor={`${id}-page`}>Page</label>\n      <select\n        id={`${id}-page`}\n        value={enablePageLayout ? 'Enabled' : 'Disabled'}\n        onChange={(e) => setEnablePageLayout(e.target.value === 'Enabled')}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"Enabled\">Enabled</option>\n        <option value=\"Disabled\">Disabled</option>\n      </select>\n      <label htmlFor={`${id}-paper`}>Paper Size</label>\n      <select\n        id={`${id}-paper`}\n        value={paperSize}\n        onChange={(e) => setPaperSize(e.target.value as PaperSize)}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"A3\">A3</option>\n        <option value=\"A4\">A4</option>\n        <option value=\"A5\">A5</option>\n        <option value=\"B4\">B4</option>\n        <option value=\"B5\">B5</option>\n        <option value=\"letter\">Letter</option>\n      </select>\n      <label htmlFor={`${id}-orientation`}>Orientation</label>\n      <select\n        id={`${id}-orientation`}\n        value={orientation}\n        onChange={(e) => setOrientation(e.target.value as Orientation)}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"portrait\">Portrait</option>\n        <option value=\"landscape\">Landscape</option>\n      </select>\n      <label htmlFor={`${id}-margin`}>Margin</label>\n      <select\n        id={`${id}-margin`}\n        value={String(margin)}\n        onChange={(e) => setMargin(Number.parseInt(e.target.value, 10))}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"30\">Narrow</option>\n        <option value=\"70\">Normal</option>\n        <option value=\"120\">Wide</option>\n      </select>\n      <label htmlFor={`${id}-zoom`}>Zoom</label>\n      <select\n        id={`${id}-zoom`}\n        value={String(zoom)}\n        onChange={(e) => setZoom(Number.parseInt(e.target.value, 10))}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"25\">25%</option>\n        <option value=\"50\">50%</option>\n        <option value=\"75\">75%</option>\n        <option value=\"100\">100%</option>\n        <option value=\"125\">125%</option>\n        <option value=\"150\">150%</option>\n        <option value=\"200\">200%</option>\n      </select>\n    </div>\n  )\n}\n"
+      "content": "'use client'\n\nimport { definePageRendering, type PageRenderingOptions } from 'prosekit/extensions/page'\nimport { useExtension } from 'prosekit/react'\nimport { useEffect, useId, useMemo, useState } from 'react'\n\n// Paper sizes in pixels at 96 DPI\nconst PAPER_SIZES = {\n  A3: { short: 1123, long: 1587 },\n  A4: { short: 794, long: 1123 },\n  A5: { short: 559, long: 794 },\n  B4: { short: 945, long: 1334 },\n  B5: { short: 665, long: 945 },\n  letter: { short: 816, long: 1056 },\n} as const\n\ntype PaperSize = keyof typeof PAPER_SIZES\ntype Orientation = 'portrait' | 'landscape'\n\nexport default function PaperController({\n  zoom,\n  setZoom,\n}: {\n  zoom: number\n  setZoom: (zoom: number) => void\n}) {\n  const id = useId()\n  const [paperSize, setPaperSize] = useState<PaperSize>('A4')\n  const [orientation, setOrientation] = useState<Orientation>('portrait')\n  const [margin, setMargin] = useState(70)\n  const [enablePageLayout, setEnablePageLayout] = useState(true)\n\n  const pageRenderingOptions: PageRenderingOptions = useMemo(() => {\n    const { short, long } = PAPER_SIZES[paperSize]\n    const pageWidth = orientation === 'portrait' ? short : long\n    const pageHeight = orientation === 'portrait' ? long : short\n\n    return {\n      pageWidth,\n      pageHeight,\n      marginTop: margin,\n      marginRight: margin,\n      marginBottom: margin,\n      marginLeft: margin,\n    }\n  }, [paperSize, orientation, margin])\n\n  useEffect(() => {\n    const styleId = 'print-page-style'\n    let style = document.getElementById(styleId) as HTMLStyleElement | null\n    if (!style) {\n      style = document.createElement('style')\n      style.id = styleId\n      document.head.appendChild(style)\n    }\n    style.textContent = `@page { size: ${paperSize} ${orientation}; margin: 0; }`\n\n    return () => {\n      style.textContent = ''\n    }\n  }, [paperSize, orientation])\n\n  const extension = useMemo(() => {\n    return enablePageLayout ? definePageRendering(pageRenderingOptions) : null\n  }, [pageRenderingOptions, enablePageLayout])\n\n  useExtension(extension)\n\n  return (\n    <div\n      data-paper-controller={paperSize}\n      className=\"grid grid-cols-[auto_1fr] gap-2 w-min border p-2 bg-[canvas] sticky top-2 left-2 z-10 print:hidden text-xs\"\n    >\n      <label htmlFor={`${id}-page`}>Page</label>\n      <select\n        id={`${id}-page`}\n        value={enablePageLayout ? 'Enabled' : 'Disabled'}\n        onChange={(e) => setEnablePageLayout(e.target.value === 'Enabled')}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"Enabled\">Enabled</option>\n        <option value=\"Disabled\">Disabled</option>\n      </select>\n      <label htmlFor={`${id}-paper`}>Paper Size</label>\n      <select\n        id={`${id}-paper`}\n        value={paperSize}\n        onChange={(e) => setPaperSize(e.target.value as PaperSize)}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"A3\">A3</option>\n        <option value=\"A4\">A4</option>\n        <option value=\"A5\">A5</option>\n        <option value=\"B4\">B4</option>\n        <option value=\"B5\">B5</option>\n        <option value=\"letter\">Letter</option>\n      </select>\n      <label htmlFor={`${id}-orientation`}>Orientation</label>\n      <select\n        id={`${id}-orientation`}\n        value={orientation}\n        onChange={(e) => setOrientation(e.target.value as Orientation)}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"portrait\">Portrait</option>\n        <option value=\"landscape\">Landscape</option>\n      </select>\n      <label htmlFor={`${id}-margin`}>Margin</label>\n      <select\n        id={`${id}-margin`}\n        value={String(margin)}\n        onChange={(e) => setMargin(Number.parseInt(e.target.value, 10))}\n        disabled={!enablePageLayout}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"30\">Narrow</option>\n        <option value=\"70\">Normal</option>\n        <option value=\"120\">Wide</option>\n      </select>\n      <label htmlFor={`${id}-zoom`}>Zoom</label>\n      <select\n        id={`${id}-zoom`}\n        value={String(zoom)}\n        onChange={(e) => setZoom(Number.parseInt(e.target.value, 10))}\n        className=\"rounded border disabled:opacity-50\"\n      >\n        <option value=\"25\">25%</option>\n        <option value=\"50\">50%</option>\n        <option value=\"75\">75%</option>\n        <option value=\"100\">100%</option>\n        <option value=\"125\">125%</option>\n        <option value=\"150\">150%</option>\n        <option value=\"200\">200%</option>\n      </select>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/page/zoom.css",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/react-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/react/examples/text-color/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/editor.tsx",
-      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/react/examples/text-color/extension.ts",
@@ -33,7 +33,7 @@
       "path": "registry/src/react/examples/text-color/inline-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.tsx",
-      "content": "'use client'\n\nimport type { Editor, Keymap } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/react'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/react/inline-popover'\nimport { useMemo, useState } from 'react'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nexport default function InlineMenu() {\n  const textColorState = useEditorDerivedValue(getTextColorState)\n  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n  const [open, setOpen] = useState(false)\n\n  const keymap: Keymap = useMemo(() => ({\n    Escape: () => {\n      if (open) {\n        setOpen(false)\n        return true\n      }\n      return false\n    },\n  }), [open])\n\n  useKeymap(keymap)\n\n  return (\n    <InlinePopoverRoot\n      open={open}\n      onOpenChange={(event) => setOpen(event.detail)}\n    >\n      <InlinePopoverPositioner className=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <InlinePopoverPopup className=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n          <div className=\"flex flex-col gap-4 p-4\">\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Text color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {textColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Text: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <span\n                      className=\"text-base font-medium\"\n                      style={{ color: color.value }}\n                    >\n                      A\n                    </span>\n                  </Button>\n                ))}\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Background color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {backgroundColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Background: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <div\n                      className=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                      style={{ backgroundColor: color.value }}\n                    />\n                  </Button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </InlinePopoverPopup>\n      </InlinePopoverPositioner>\n    </InlinePopoverRoot>\n  )\n}\n"
+      "content": "'use client'\n\nimport type { Editor, Keymap } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/react'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/react/inline-popover'\nimport { useMemo, useState } from 'react'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nexport default function InlineMenu() {\n  const textColorState = useEditorDerivedValue(getTextColorState)\n  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n  const [open, setOpen] = useState(false)\n\n  const keymap: Keymap = useMemo(() => ({\n    Escape: () => {\n      if (open) {\n        setOpen(false)\n        return true\n      }\n      return false\n    },\n  }), [open])\n\n  useKeymap(keymap)\n\n  return (\n    <InlinePopoverRoot\n      open={open}\n      onOpenChange={(event) => setOpen(event.detail)}\n    >\n      <InlinePopoverPositioner className=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <InlinePopoverPopup className=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-lg p-1\">\n          <div className=\"flex flex-col gap-4 p-4\">\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Text color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {textColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Text: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <span\n                      className=\"text-base font-medium\"\n                      style={{ color: color.value }}\n                    >\n                      A\n                    </span>\n                  </Button>\n                ))}\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Background color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {backgroundColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Background: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <div\n                      className=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                      style={{ backgroundColor: color.value }}\n                    />\n                  </Button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </InlinePopoverPopup>\n      </InlinePopoverPositioner>\n    </InlinePopoverRoot>\n  )\n}\n"
     }
   ],
   "meta": {

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

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

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

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