prosekit-registry 0.0.21 → 0.0.22

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

@@ -7,7 +7,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -20,7 +20,7 @@
       "path": "registry/src/solid/ui/table-handle/table-handle.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/table-handle/table-handle.tsx",
-      "content": "import type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/solid'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/solid/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/solid/table-handle'\nimport { Show, type JSX } from 'solid-js'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function TableHandle(props: Props): JSX.Element {\n  const state = useEditorDerivedValue(getTableHandleState)\n\n  return (\n    <TableHandleRoot>\n      <TableHandleDragPreview />\n      <TableHandleDropIndicator />\n      <TableHandleColumnPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <TableHandleColumnPopup class=\"translate-y-[50%] 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          <TableHandleColumnMenuRoot>\n            <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleColumnMenuTrigger>\n            <MenuPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <MenuPopup class=\"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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableColumnBefore.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnBefore.command()}\n                  >\n                    <span>Insert Left</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableColumnAfter.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnAfter.command()}\n                  >\n                    <span>Insert Right</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableColumn.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableColumn.command()}\n                  >\n                    <span>Delete Column</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleColumnMenuRoot>\n        </TableHandleColumnPopup>\n      </TableHandleColumnPositioner>\n      <TableHandleRowPositioner\n        placement={props.dir === 'rtl' ? 'right' : 'left'}\n        class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] 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          <TableHandleRowMenuRoot>\n            <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleRowMenuTrigger>\n            <MenuPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <MenuPopup class=\"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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableRowAbove.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowAbove.command()}\n                  >\n                    <span>Insert Above</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableRowBelow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowBelow.command()}\n                  >\n                    <span>Insert Below</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableRow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableRow.command()}\n                  >\n                    <span>Delete Row</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleRowMenuRoot>\n        </TableHandleRowPopup>\n      </TableHandleRowPositioner>\n    </TableHandleRoot>\n  )\n}\n"
+      "content": "import type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/solid'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/solid/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/solid/table-handle'\nimport { Show, type JSX } from 'solid-js'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function TableHandle(props: Props): JSX.Element {\n  const state = useEditorDerivedValue(getTableHandleState)\n\n  return (\n    <TableHandleRoot>\n      <TableHandleDragPreview />\n      <TableHandleDropIndicator />\n      <TableHandleColumnPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <TableHandleColumnPopup class=\"translate-y-[50%] 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          <TableHandleColumnMenuRoot>\n            <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-[canvas] hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleColumnMenuTrigger>\n            <MenuPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <MenuPopup class=\"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] relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableColumnBefore.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnBefore.command()}\n                  >\n                    <span>Insert Left</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableColumnAfter.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnAfter.command()}\n                  >\n                    <span>Insert Right</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableColumn.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableColumn.command()}\n                  >\n                    <span>Delete Column</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleColumnMenuRoot>\n        </TableHandleColumnPopup>\n      </TableHandleColumnPositioner>\n      <TableHandleRowPositioner\n        placement={props.dir === 'rtl' ? 'right' : 'left'}\n        class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] 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          <TableHandleRowMenuRoot>\n            <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-[canvas] hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleRowMenuTrigger>\n            <MenuPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <MenuPopup class=\"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] relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableRowAbove.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowAbove.command()}\n                  >\n                    <span>Insert Above</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableRowBelow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowBelow.command()}\n                  >\n                    <span>Insert Below</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableRow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableRow.command()}\n                  >\n                    <span>Delete Row</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleRowMenuRoot>\n        </TableHandleRowPopup>\n      </TableHandleRowPositioner>\n    </TableHandleRoot>\n  )\n}\n"
     }
   ],
   "meta": {

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

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -18,7 +18,7 @@
       "path": "registry/src/solid/ui/tag-menu/tag-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/tag-menu/tag-menu.tsx",
-      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\nconst regex = /#[\\da-z]*$/i\n\nexport default function TagMenu(props: { tags: { id: number; label: string }[] }): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleTagInsert = (id: number, label: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '#' + label,\n      kind: 'tag',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot regex={regex}>\n      <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"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          <AutocompleteEmpty class=\"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            No results\n          </AutocompleteEmpty>\n\n          <For each={props.tags}>\n            {(tag) => (\n              <AutocompleteItem\n                class=\"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                onSelect={() => handleTagInsert(tag.id, tag.label)}\n              >\n                #{tag.label}\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\nconst regex = /#[\\da-z]*$/i\n\nexport default function TagMenu(props: { tags: { id: number; label: string }[] }): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleTagInsert = (id: number, label: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '#' + label,\n      kind: 'tag',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot regex={regex}>\n      <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"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 class=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\n            <AutocompleteEmpty class=\"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              No results\n            </AutocompleteEmpty>\n\n            <For each={props.tags}>\n              {(tag) => (\n                <AutocompleteItem\n                  class=\"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                  onSelect={() => handleTagInsert(tag.id, tag.label)}\n                >\n                  #{tag.label}\n                </AutocompleteItem>\n              )}\n            </For>\n          </div>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     }
   ],
   "meta": {

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

@@ -10,7 +10,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -18,7 +18,7 @@
       "path": "registry/src/solid/ui/user-menu/user-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/user-menu/user-menu.tsx",
-      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n\nexport default function UserMenu(props: {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleUserInsert = (id: number, username: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '@' + username,\n      kind: 'user',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n      onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n    >\n      <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"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          <AutocompleteEmpty class=\"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            {props.loading ? 'Loading...' : 'No results'}\n          </AutocompleteEmpty>\n\n          <For each={props.users}>\n            {(user) => (\n              <AutocompleteItem\n                class=\"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                onSelect={() => handleUserInsert(user.id, user.name)}\n              >\n                <span class={props.loading ? 'opacity-50' : undefined}>\n                  {user.name}\n                </span>\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n\nexport default function UserMenu(props: {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleUserInsert = (id: number, username: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '@' + username,\n      kind: 'user',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n      onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n    >\n      <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"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 class=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\n            <AutocompleteEmpty class=\"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              {props.loading ? 'Loading...' : 'No results'}\n            </AutocompleteEmpty>\n\n            <For each={props.users}>\n              {(user) => (\n                <AutocompleteItem\n                  class=\"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                  onSelect={() => handleUserInsert(user.id, user.name)}\n                >\n                  <span class={props.loading ? 'opacity-50' : undefined}>\n                    {user.name}\n                  </span>\n                </AutocompleteItem>\n              )}\n            </For>\n          </div>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     }
   ],
   "meta": {

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

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-drop-indicator.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/block-handle/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/block-handle/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n      <BlockHandle />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n      <BlockHandle />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/block-handle/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/blockquote/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/blockquote/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/blockquote/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/bold/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/bold/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-bold'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-bold'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/bold/extension.ts",

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

@@ -5,20 +5,20 @@
   "description": "Track and commit document changes with version history.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/change-tracking/editor-diff.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/editor-diff.svelte",
-      "content": "<script lang=\"ts\">\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/svelte'\n\ninterface Props {\n  commit: Commit\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(union(\n  defineBasicExtension(),\n  defineReadonly(),\n  defineCommitViewer(props.commit),\n))\nconst editor = $derived(createEditor({ extension }))\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/svelte'\n\ninterface Props {\n  commit: Commit\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(union(\n  defineBasicExtension(),\n  defineReadonly(),\n  defineCommitViewer(props.commit),\n))\nconst editor = $derived(createEditor({ extension }))\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/change-tracking/editor-main.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/change-tracking/editor-main.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/svelte'\n\ninterface Props {\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n  key?: number\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(union(\n  defineBasicExtension(),\n  defineCommitRecorder(props.commitRecorder),\n))\nconst defaultContent = $derived(props.initialContent)\nconst editor = $derived(createEditor({ extension, defaultContent }))\n</script>\n\n{#key props.key}\n  <ProseKit {editor}>\n    <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div {@attach editor.mount} class=\"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{/key}\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/svelte'\n\ninterface Props {\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n  key?: number\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(union(\n  defineBasicExtension(),\n  defineCommitRecorder(props.commitRecorder),\n))\nconst defaultContent = $derived(props.initialContent)\nconst editor = $derived(createEditor({ extension, defaultContent }))\n</script>\n\n{#key props.key}\n  <ProseKit {editor}>\n    <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div {@attach editor.mount} class=\"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{/key}\n"
     },
     {
       "path": "registry/src/svelte/examples/change-tracking/editor.svelte",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-code-block-view.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/code-block-themes/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/code-block-themes/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/code-block-themes/extension.ts",

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

@@ -9,14 +9,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/code-block/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/code-block/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/code-block/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/code/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/code/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-code'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/code/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-sample-sample-doc-drop-cursor.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/drop-cursor/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/drop-cursor/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-drop-cursor'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-drop-cursor'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/drop-cursor/extension.ts",

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

@@ -5,14 +5,14 @@
   "description": "Auto-convert text shortcuts to emojis using input rules.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/emoji-rules/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/emoji-rules/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/emoji-rules/emoji.ts",

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

@@ -21,14 +21,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-user-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/full/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/full/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-full'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\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 { TagMenu } from '../../ui/tag-menu'\nimport { Toolbar } from '../../ui/toolbar'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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      <UserMenu users={users} />\n      <TagMenu tags={tags} />\n      <BlockHandle />\n      <TableHandle />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-full'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\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 { TagMenu } from '../../ui/tag-menu'\nimport { Toolbar } from '../../ui/toolbar'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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      <UserMenu users={users} />\n      <TagMenu tags={tags} />\n      <BlockHandle />\n      <TableHandle />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/full/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-sample-sample-doc-gap-cursor.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/gap-cursor/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/gap-cursor/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-gap-cursor'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-gap-cursor'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/gap-cursor/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/hard-break/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/hard-break/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-hard-break'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-hard-break'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/hard-break/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/heading/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/heading/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-heading'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-heading'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/heading/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/horizontal-rule/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/horizontal-rule/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/horizontal-rule/extension.ts",

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

@@ -9,14 +9,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-image-view.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/image-view/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/image-view/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-image'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-image'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/image-view/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-inline-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/inline-menu/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/inline-menu/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-inline-menu'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-inline-menu'\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/inline-menu/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/italic/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/italic/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-italic'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-italic'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n      <div {@attach editor.mount} class=\"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"
     },
     {
       "path": "registry/src/svelte/examples/italic/extension.ts",