prosekit-registry 0.0.21 → 0.0.22

package/dist/r/vue-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/vue/examples/save-html/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/save-html/editor.vue",
-      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\n// A list of saved documents, stored as HTML strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = editor.getDocHTML()\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
+      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\n// A list of saved documents, stored as HTML strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = editor.getDocHTML()\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/save-html/index.ts",

package/dist/r/vue-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/vue/examples/save-json/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/save-json/editor.vue",
-      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\n// A list of saved documents, stored as JSON strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = JSON.stringify(editor.getDocJSON())\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(JSON.parse(record) as NodeJSON)\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
+      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\n// A list of saved documents, stored as JSON strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = JSON.stringify(editor.getDocJSON())\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(JSON.parse(record) as NodeJSON)\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/save-json/index.ts",

package/dist/r/vue-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/vue/examples/save-markdown/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/save-markdown/editor.vue",
-      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\n// A list of saved documents, stored as Markdown strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const html = editor.getDocHTML()\n  const record = markdownFromHTML(html)\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  const html = htmlFromMarkdown(record)\n  editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
+      "content": "<script setup 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/vue'\nimport { ref } from 'vue'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\n// A list of saved documents, stored as Markdown strings\nconst records = ref<string[]>([])\n// Whether there are unsaved changes\nconst hasUnsavedChange = ref(false)\n// A key to force a re-render of the editor\nconst key = ref(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange.value = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const html = editor.getDocHTML()\n  const record = markdownFromHTML(html)\n  records.value = [...records.value, record]\n  hasUnsavedChange.value = false\n}\n\nfunction handleLoad(record: string) {\n  const html = htmlFromMarkdown(record)\n  editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n  hasUnsavedChange.value = false\n  key.value += 1\n}\n</script>\n\n<template>\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      @click=\"handleSave\"\n    >\n      {{ hasUnsavedChange ? 'Save' : 'No changes to save' }}\n    </button>\n    <ul class=\"border-b border-t border-solid text-sm\">\n      <li\n        v-for=\"(record, index) in records\"\n        :key=\"index\"\n        class=\"m-1 flex gap-2\"\n      >\n        <button\n          class=\"border border-solid bg-white px-2 py-1 text-black\"\n          @click=\"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    </ul>\n    <ProseKit :key=\"key\" :editor=\"editor\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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  </div>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/save-markdown/index.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-search.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/search/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/search/editor.vue",
-      "content": "<script setup 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/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({\n  extension,\n  defaultContent,\n})\n</script>\n\n<template>\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        <Search />\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup 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/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({\n  extension,\n  defaultContent,\n})\n</script>\n\n<template>\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        <Search />\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/search/extension.ts",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-slash-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/slash-menu/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/slash-menu/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <SlashMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <SlashMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/slash-menu/extension.ts",

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

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

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-table-handle.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/table/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/table/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <TableHandle />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <TableHandle />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/table/extension.ts",

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

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

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/text-color/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu.vue'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <InlineMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu.vue'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <InlineMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/text-color/extension.ts",
@@ -33,7 +33,7 @@
       "path": "registry/src/vue/examples/text-color/inline-menu.vue",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\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)\nconst open = ref(false)\n\nuseKeymap({\n  Escape: () => {\n    if (open.value) {\n      open.value = false\n      return true\n    }\n    return false\n  },\n})\n</script>\n\n<template>\n  <InlinePopoverRoot\n    :open=\"open\"\n    @open-change=\"(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\">\n              Text color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in textColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Text: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <span\n                  class=\"text-base font-medium\"\n                  :style=\"{ color: color.value }\"\n                >\n                  A\n                </span>\n              </Button>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Background color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in backgroundColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Background: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  :style=\"{ backgroundColor: color.value }\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\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)\nconst open = ref(false)\n\nuseKeymap({\n  Escape: () => {\n    if (open.value) {\n      open.value = false\n      return true\n    }\n    return false\n  },\n})\n</script>\n\n<template>\n  <InlinePopoverRoot\n    :open=\"open\"\n    @open-change=\"(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\">\n              Text color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in textColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Text: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <span\n                  class=\"text-base font-medium\"\n                  :style=\"{ color: color.value }\"\n                >\n                  A\n                </span>\n              </Button>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Background color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in backgroundColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Background: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  :style=\"{ backgroundColor: color.value }\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
     }
   ],
   "meta": {

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

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

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

@@ -7,7 +7,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-sample-sample-doc-tweet.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8",
+    "prosekit@^0.20.0",
     "vue-tweet"
   ],
   "files": [
@@ -15,7 +15,7 @@
       "path": "registry/src/vue/examples/tweet/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/tweet/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { defineVueNodeView, ProseKit, useExtension, type VueNodeViewComponent } from 'prosekit/vue'\nimport { computed, ref } from 'vue'\n\nimport { sampleContent } from '../../sample/sample-doc-tweet'\n\nimport { defineExtension } from './extension'\nimport MethodSelect from './method-select.vue'\nimport TweetView from './tweet-view.vue'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension: defineExtension(), defaultContent })\n\nconst method = ref<'basic' | 'advanced'>('basic')\n\nconst vueTweetView = computed(() => {\n  if (method.value === 'basic') {\n    return null\n  }\n  return defineVueNodeView({\n    name: 'tweet',\n    component: TweetView as VueNodeViewComponent,\n  })\n})\n\nuseExtension(vueTweetView, { editor })\n</script>\n\n<template>\n  <ProseKit :editor=\"editor\">\n    <MethodSelect :value=\"method\" :on-change=\"(newMethod) => (method = newMethod)\" />\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { defineVueNodeView, ProseKit, useExtension, type VueNodeViewComponent } from 'prosekit/vue'\nimport { computed, ref } from 'vue'\n\nimport { sampleContent } from '../../sample/sample-doc-tweet'\n\nimport { defineExtension } from './extension'\nimport MethodSelect from './method-select.vue'\nimport TweetView from './tweet-view.vue'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension: defineExtension(), defaultContent })\n\nconst method = ref<'basic' | 'advanced'>('basic')\n\nconst vueTweetView = computed(() => {\n  if (method.value === 'basic') {\n    return null\n  }\n  return defineVueNodeView({\n    name: 'tweet',\n    component: TweetView as VueNodeViewComponent,\n  })\n})\n\nuseExtension(vueTweetView, { editor })\n</script>\n\n<template>\n  <ProseKit :editor=\"editor\">\n    <MethodSelect :value=\"method\" :on-change=\"(newMethod) => (method = newMethod)\" />\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/tweet/extension.ts",

package/dist/r/vue-example-typography.json

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-drop-indicator.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/typography/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/typography/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <BlockHandle />\n        <DropIndicator />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <BlockHandle />\n        <DropIndicator />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/typography/extension.ts",

package/dist/r/vue-example-underline.json

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

package/dist/r/vue-example-unmount.json

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-inline-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/unmount/editor-component.vue",
       "type": "registry:component",
       "target": "components/editor/examples/unmount/editor-component.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport ExtensionComponent from './extension-component.vue'\n\nconst props = defineProps<{\n  placeholder: string\n}>()\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <InlineMenu />\n      </div>\n    </div>\n    <ExtensionComponent :placeholder=\"props.placeholder\" />\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport ExtensionComponent from './extension-component.vue'\n\nconst props = defineProps<{\n  placeholder: string\n}>()\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <InlineMenu />\n      </div>\n    </div>\n    <ExtensionComponent :placeholder=\"props.placeholder\" />\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/unmount/editor.vue",

package/dist/r/vue-example-user-menu-dynamic.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-user-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/user-menu-dynamic/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu-dynamic/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic.vue'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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        <UserMenuDynamic />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic.vue'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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        <UserMenuDynamic />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/user-menu-dynamic/extension.ts",

package/dist/r/vue-example-user-menu.json

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-user-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/user-menu/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <UserMenu :users=\"users\" />\n        <TagMenu :tags=\"tags\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <UserMenu :users=\"users\" />\n        <TagMenu :tags=\"tags\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/user-menu/extension.ts",

package/dist/r/vue-example-view-adapter.json

@@ -8,7 +8,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-sample-sample-doc-view-adapter.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -21,7 +21,7 @@
       "path": "registry/src/vue/examples/view-adapter/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/view-adapter/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/view-adapter/extension.ts",

package/dist/r/vue-example-word-counter.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-word-counter.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/examples/word-counter/editor.vue",
       "type": "registry:component",
       "target": "components/editor/examples/word-counter/editor.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({\n  extension,\n  defaultContent,\n})\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <WordCounter />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  initialContent?: NodeJSON\n}>()\n\nconst extension = defineExtension()\nconst defaultContent = props.initialContent ?? sampleContent\nconst editor = createEditor({\n  extension,\n  defaultContent,\n})\n</script>\n\n<template>\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 :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n        <WordCounter />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/word-counter/extension.ts",

package/dist/r/vue-example-yjs.json

@@ -7,7 +7,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8",
+    "prosekit@^0.20.0",
     "y-websocket",
     "yjs"
   ],
@@ -16,7 +16,7 @@
       "path": "registry/src/vue/examples/yjs/editor-component.vue",
       "type": "registry:component",
       "target": "components/editor/examples/yjs/editor-component.vue",
-      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/yjs/style.css'\n\nimport { createEditor } from 'prosekit/core'\nimport type { Awareness } from 'prosekit/extensions/yjs'\nimport { ProseKit } from 'prosekit/vue'\nimport type * as Y from 'yjs'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  doc: Y.Doc\n  awareness: Awareness\n}>()\n\nconst extension = defineExtension(props.doc, props.awareness)\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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      <Toolbar />\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/yjs/style.css'\n\nimport { createEditor } from 'prosekit/core'\nimport type { Awareness } from 'prosekit/extensions/yjs'\nimport { ProseKit } from 'prosekit/vue'\nimport type * as Y from 'yjs'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  doc: Y.Doc\n  awareness: Awareness\n}>()\n\nconst extension = defineExtension(props.doc, props.awareness)\nconst editor = createEditor({ extension })\n</script>\n\n<template>\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      <Toolbar />\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div :ref=\"(el) => editor.mount(el as HTMLElement | null)\" 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\" />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
     },
     {
       "path": "registry/src/vue/examples/yjs/editor.vue",

package/dist/r/vue-sample-define-atom-block.json

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

package/dist/r/vue-sample-sample-doc-block-handle.json

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

package/dist/r/vue-sample-sample-doc-bold.json

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

package/dist/r/vue-sample-sample-doc-code-block.json

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

package/dist/r/vue-sample-sample-doc-code.json

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

package/dist/r/vue-sample-sample-doc-drop-cursor.json

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

package/dist/r/vue-sample-sample-doc-full.json

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

package/dist/r/vue-sample-sample-doc-gap-cursor.json

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