prosekit-registry 0.0.21 → 0.0.22

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-sample-sample-doc-tex.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/katex/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/katex/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-tex'\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-tex'\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/katex/extension.ts",

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

@@ -7,14 +7,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/keymap/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/keymap/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'\nimport Toolbar from './toolbar.svelte'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n\nlet submissions = $state<string[]>([])\n\nfunction pushSubmission(hotkey: string) {\n  const docString = JSON.stringify(editor.getDocJSON())\n  const submission = `${new Date().toISOString()}\\t${hotkey}\\n${docString}`\n  submissions = [...submissions, submission]\n}\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 onSubmit={pushSubmission} />\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  <fieldset class=\"mt-4 box-border flex max-w-full w-full overflow-x-auto border p-4 rounded-md shadow-sm min-w-0\">\n    <legend>Submit Records</legend>\n    <ol>\n      {#each submissions as submission, index (index)}\n        <li>\n          <pre>{submission}</pre>\n        </li>\n      {/each}\n    </ol>\n    {#if submissions.length === 0}\n      <div>No submissions yet</div>\n    {/if}\n  </fieldset>\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'\nimport Toolbar from './toolbar.svelte'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n\nlet submissions = $state<string[]>([])\n\nfunction pushSubmission(hotkey: string) {\n  const docString = JSON.stringify(editor.getDocJSON())\n  const submission = `${new Date().toISOString()}\\t${hotkey}\\n${docString}`\n  submissions = [...submissions, submission]\n}\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 onSubmit={pushSubmission} />\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  <fieldset class=\"mt-4 box-border flex max-w-full w-full overflow-x-auto border p-4 rounded-md shadow-sm min-w-0\">\n    <legend>Submit Records</legend>\n    <ol>\n      {#each submissions as submission, index (index)}\n        <li>\n          <pre>{submission}</pre>\n        </li>\n      {/each}\n    </ol>\n    {#if submissions.length === 0}\n      <div>No submissions yet</div>\n    {/if}\n  </fieldset>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/keymap/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-sample-sample-doc-link-mark-view.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/link-mark-view/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/link-mark-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-link-mark-view'\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-link-mark-view'\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/link-mark-view/extension.ts",

package/dist/r/svelte-example-link.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/link/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/link/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-link'\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-link'\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/link/extension.ts",

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

@@ -8,7 +8,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -21,7 +21,7 @@
       "path": "registry/src/svelte/examples/list-custom-checkbox/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/list-custom-checkbox/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport './custom-list.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'\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\" data-custom-list-css-enabled=\"true\">\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'\nimport './custom-list.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-list-custom-checkbox'\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\" data-custom-list-css-enabled=\"true\">\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/list-custom-checkbox/extension.ts",

package/dist/r/svelte-example-list.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/list/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/list/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-list'\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-list'\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/list/extension.ts",

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

@@ -9,14 +9,14 @@
   "dependencies": [
     "loro-crdt",
     "loro-prosemirror",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/loro/editor-component.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/loro/editor-component.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/loro/style.css'\n\nimport type { CursorAwareness, LoroDocType } from 'loro-prosemirror'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface Props {\n  loro: LoroDocType\n  awareness: CursorAwareness\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(defineExtension(props.loro, props.awareness))\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    <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'\nimport 'prosekit/extensions/loro/style.css'\n\nimport type { CursorAwareness, LoroDocType } from 'loro-prosemirror'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface Props {\n  loro: LoroDocType\n  awareness: CursorAwareness\n}\n\nconst props: Props = $props()\n\nconst extension = $derived(defineExtension(props.loro, props.awareness))\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    <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/loro/editor.svelte",

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

@@ -5,14 +5,14 @@
   "description": "Input rules for automatic mark formatting.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/mark-rule/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/mark-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 { 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/mark-rule/extension.ts",

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

@@ -5,7 +5,7 @@
   "description": "Minimal editor setup with basic functionality.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

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

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

@@ -5,14 +5,14 @@
   "description": "Placeholder text displayed.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/placeholder/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/placeholder/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent)\nconst editor = createEditor({ extension, defaultContent })\n\nconst handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))\nuseDocChange(handleDocChange, { editor })\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, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent)\nconst editor = createEditor({ extension, defaultContent })\n\nconst handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))\nuseDocChange(handleDocChange, { editor })\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/placeholder/extension.ts",

package/dist/r/svelte-example-readonly.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/readonly/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/readonly/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-readonly'\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-readonly'\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/readonly/extension.ts",

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

@@ -14,14 +14,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/rtl/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/rtl/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineBasicExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div dir=\"rtl\" 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      <BlockHandle dir=\"rtl\" />\n      <TableHandle dir=\"rtl\" />\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 { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineBasicExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {editor}>\n  <div dir=\"rtl\" 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      <BlockHandle dir=\"rtl\" />\n      <TableHandle dir=\"rtl\" />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/rtl/index.ts",

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

@@ -5,14 +5,14 @@
   "description": "Save and load documents as HTML format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/save-html/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/save-html/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\n// A list of saved documents, stored as HTML strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = editor.getDocHTML()\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\n// A list of saved documents, stored as HTML strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = editor.getDocHTML()\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
     },
     {
       "path": "registry/src/svelte/examples/save-html/index.ts",

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

@@ -5,14 +5,14 @@
   "description": "Save and load documents as JSON format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/save-json/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/save-json/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\n// A list of saved documents, stored as JSON strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = JSON.stringify(editor.getDocJSON())\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(JSON.parse(record) as NodeJSON)\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\n// A list of saved documents, stored as JSON strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = JSON.stringify(editor.getDocJSON())\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(JSON.parse(record) as NodeJSON)\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
     },
     {
       "path": "registry/src/svelte/examples/save-json/index.ts",

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

@@ -5,7 +5,7 @@
   "description": "Save and load documents as Markdown format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8",
+    "prosekit@^0.20.0",
     "rehype-parse",
     "rehype-remark",
     "remark-gfm",
@@ -19,7 +19,7 @@
       "path": "registry/src/svelte/examples/save-markdown/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/save-markdown/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\n// A list of saved documents, stored as Markdown strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const html = editor.getDocHTML()\n  const record = markdownFromHTML(html)\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  const html = htmlFromMarkdown(record)\n  editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/svelte'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\n// A list of saved documents, stored as Markdown strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const html = editor.getDocHTML()\n  const record = markdownFromHTML(html)\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  const html = htmlFromMarkdown(record)\n  editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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  <button\n    disabled={!hasUnsavedChange}\n    class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\n      <li class=\"m-1 flex gap-2\">\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          onclick={() => handleLoad(record)}\n        >\n          Load\n        </button>\n        <span class=\"flex-1 overflow-x-scroll p-2\">\n          <pre>{record}</pre>\n        </span>\n      </li>\n    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\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    </ProseKit>\n  {/key}\n</div>\n"
     },
     {
       "path": "registry/src/svelte/examples/save-markdown/index.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-search.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/search/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/search/editor.svelte",
-      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/search/style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\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      <Search />\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'\nimport 'prosekit/extensions/search/style.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-search'\nimport { Search } from '../../ui/search'\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      <Search />\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/search/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-slash-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/slash-menu/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/slash-menu/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 { SlashMenu } from '../../ui/slash-menu'\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      <SlashMenu />\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 { SlashMenu } from '../../ui/slash-menu'\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      <SlashMenu />\n    </div>\n  </div>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/slash-menu/extension.ts",

package/dist/r/svelte-example-strike.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/strike/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/strike/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-strike'\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-strike'\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/strike/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/svelte-ui-table-handle.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/svelte/examples/table/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/table/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-table'\nimport { TableHandle } from '../../ui/table-handle'\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={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      <TableHandle />\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-table'\nimport { TableHandle } from '../../ui/table-handle'\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={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      <TableHandle />\n    </div>\n  </div>\n</ProseKit>\n"
     },
     {
       "path": "registry/src/svelte/examples/table/extension.ts",

package/dist/r/svelte-example-text-align.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/text-align/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/text-align/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-text-align'\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-text-align'\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/text-align/extension.ts",

package/dist/r/svelte-example-text-color.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/text-color/editor.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/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-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu.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    <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-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu.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    <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/text-color/extension.ts",
@@ -33,7 +33,7 @@
       "path": "registry/src/svelte/examples/text-color/inline-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\nimport { toStore } from 'svelte/store'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n\nlet open = $state(false)\n\nconst keymap = $derived({\n  Escape: () => {\n    if (open) {\n      open = false\n      return true\n    }\n    return false\n  },\n})\n\nuseKeymap(toStore(() => keymap))\n</script>\n\n<InlinePopoverRoot\n  {open}\n  onOpenChange={(event) => open = event.detail}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <InlinePopoverPopup 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 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Text color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $textColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Text: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <span class=\"text-base font-medium\" style:color={color.value}>\n                  A\n                </span>\n              </Button>\n            {/each}\n          </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Background color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $backgroundColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Background: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  style:background-color={color.value}\n                >\n                </div>\n              </Button>\n            {/each}\n          </div>\n        </div>\n      </div>\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\nimport { toStore } from 'svelte/store'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n\nlet open = $state(false)\n\nconst keymap = $derived({\n  Escape: () => {\n    if (open) {\n      open = false\n      return true\n    }\n    return false\n  },\n})\n\nuseKeymap(toStore(() => keymap))\n</script>\n\n<InlinePopoverRoot\n  {open}\n  onOpenChange={(event) => open = event.detail}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <InlinePopoverPopup 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 border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-lg p-1\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Text color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $textColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Text: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <span class=\"text-base font-medium\" style:color={color.value}>\n                  A\n                </span>\n              </Button>\n            {/each}\n          </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Background color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $backgroundColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Background: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  style:background-color={color.value}\n                >\n                </div>\n              </Button>\n            {/each}\n          </div>\n        </div>\n      </div>\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
     }
   ],
   "meta": {