prosekit-registry 0.0.1

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

@@ -0,0 +1,54 @@
+{
+  "name": "vue-example-inline-menu",
+  "title": "vue-example-inline-menu",
+  "type": "registry:block",
+  "description": "Inline formatting menu that appears on text selection.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-inline-menu.json",
+    "https://prosekit.dev/r/vue-ui-inline-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/inline-menu/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/inline-menu/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-inline-menu'\nimport { InlineMenu } from '../../ui/inline-menu'\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        <InlineMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/inline-menu/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/inline-menu/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\n\nexport function defineExtension() {\n  return defineBasicExtension()\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/inline-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/inline-menu/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "inline-menu",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/inline-menu/editor.vue",
+      "registry/src/vue/examples/inline-menu/extension.ts",
+      "registry/src/vue/examples/inline-menu/index.ts",
+      "registry/src/vue/sample/sample-doc-inline-menu.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/inline-menu/index.ts",
+      "registry/src/vue/ui/inline-menu/inline-menu.vue"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-inline-menu",
+      "vue-ui-inline-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "vue-example-italic",
+  "title": "vue-example-italic",
+  "type": "registry:block",
+  "description": "Example for italic mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-italic.json",
+    "https://prosekit.dev/r/vue-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/italic/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/italic/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-italic'\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"
+    },
+    {
+      "path": "registry/src/vue/examples/italic/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/italic/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineItalic } from 'prosekit/extensions/italic'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineItalic(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/italic/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/italic/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "italic",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/italic/editor.vue",
+      "registry/src/vue/examples/italic/extension.ts",
+      "registry/src/vue/examples/italic/index.ts",
+      "registry/src/vue/sample/sample-doc-italic.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
+      "registry/src/vue/ui/image-upload-popover/index.ts",
+      "registry/src/vue/ui/toolbar/index.ts",
+      "registry/src/vue/ui/toolbar/toolbar.vue"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-italic",
+      "vue-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,51 @@
+{
+  "name": "vue-example-katex",
+  "title": "vue-example-katex",
+  "type": "registry:block",
+  "description": "Math equation rendering using the KaTeX library.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-katex.json",
+    "https://prosekit.dev/r/vue-sample-sample-doc-tex.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/katex/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/katex/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-tex'\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"
+    },
+    {
+      "path": "registry/src/vue/examples/katex/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/katex/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineMath } from 'prosekit/extensions/math'\n\nimport { renderKaTeXMathBlock, renderKaTeXMathInline } from '../../sample/katex'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineMath({ renderMathBlock: renderKaTeXMathBlock, renderMathInline: renderKaTeXMathInline }))\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/katex/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/katex/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "katex",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/katex/editor.vue",
+      "registry/src/vue/examples/katex/extension.ts",
+      "registry/src/vue/examples/katex/index.ts",
+      "registry/src/vue/sample/katex.ts",
+      "registry/src/vue/sample/sample-doc-tex.ts"
+    ],
+    "internalDependencies": [
+      "vue-sample-katex",
+      "vue-sample-sample-doc-tex"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,63 @@
+{
+  "name": "vue-example-keymap",
+  "title": "vue-example-keymap",
+  "type": "registry:block",
+  "description": "Custom keyboard shortcuts and key bindings.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/keymap/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/keymap/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'\nimport { ref } from 'vue'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.vue'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n\nconst submissions = ref<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.value = [...submissions.value, submission]\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      <Toolbar @submit=\"pushSubmission\" />\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    <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        <li v-for=\"(submission, index) in submissions\" :key=\"index\">\n          <pre>{{ submission }}</pre>\n        </li>\n      </ol>\n      <div v-if=\"submissions.length === 0\">No submissions yet</div>\n    </fieldset>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/keymap/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/keymap/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nexport function defineExtension() {\n  return union(defineBasicExtension())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/keymap/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/keymap/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/examples/keymap/toolbar.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/keymap/toolbar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport { Button } from '../../ui/button'\n\nimport { useSubmitKeymap } from './use-submit-keymap'\n\nconst props = defineProps<{\n  onSubmit: (hotkey: string) => void\n}>()\n\nconst hotkey = ref<'Shift-Enter' | 'Enter'>('Shift-Enter')\n\nuseSubmitKeymap(hotkey, props.onSubmit)\n\nfunction setHotkey(value: 'Shift-Enter' | 'Enter') {\n  hotkey.value = value\n}\n</script>\n\n<template>\n  <div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n    <Button\n      :pressed=\"hotkey === 'Shift-Enter'\"\n      @click=\"setHotkey('Shift-Enter')\"\n    >\n      <span class=\"mr-1\">Submit with</span>\n      <kbd>Shift + Enter</kbd>\n    </Button>\n\n    <Button\n      :pressed=\"hotkey === 'Enter'\"\n      @click=\"setHotkey('Enter')\"\n    >\n      <span class=\"mr-1\">Submit with</span>\n      <kbd>Enter</kbd>\n    </Button>\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/keymap/use-submit-keymap.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/keymap/use-submit-keymap.ts",
+      "content": "import type { Keymap } from 'prosekit/core'\nimport { useKeymap } from 'prosekit/vue'\nimport { computed, type Ref } from 'vue'\n\nexport function useSubmitKeymap(\n  hotkey: Ref<'Shift-Enter' | 'Enter'>,\n  onSubmit: (hotkey: string) => void,\n) {\n  const keymap = computed<Keymap>(() => {\n    return {\n      [hotkey.value]: () => {\n        onSubmit(hotkey.value)\n        return true\n      },\n    }\n  })\n\n  useKeymap(keymap)\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "keymap",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/keymap/editor.vue",
+      "registry/src/vue/examples/keymap/extension.ts",
+      "registry/src/vue/examples/keymap/index.ts",
+      "registry/src/vue/examples/keymap/toolbar.vue",
+      "registry/src/vue/examples/keymap/use-submit-keymap.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "vue-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,55 @@
+{
+  "name": "vue-example-link-mark-view",
+  "title": "vue-example-link-mark-view",
+  "type": "registry:block",
+  "description": "An example showing how to render a mark as a custom component.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-link-mark-view.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/link-mark-view/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/link-mark-view/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-link-mark-view'\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"
+    },
+    {
+      "path": "registry/src/vue/examples/link-mark-view/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/link-mark-view/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineVueMarkView, type VueMarkViewComponent } from 'prosekit/vue'\n\nimport LinkView from './link-view.vue'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    defineVueMarkView({\n      name: 'link',\n      component: LinkView as VueMarkViewComponent,\n    }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/link-mark-view/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/link-mark-view/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/examples/link-mark-view/link-view.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/link-mark-view/link-view.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VueMarkViewProps } from 'prosekit/vue'\nimport { onBeforeUnmount, ref } from 'vue'\n\nconst props = defineProps<VueMarkViewProps>()\n\nconst colors = [\n  '#f06292',\n  '#ba68c8',\n  '#9575cd',\n  '#7986cb',\n  '#64b5f6',\n  '#4fc3f7',\n  '#4dd0e1',\n  '#4db6ac',\n  '#81c784',\n  '#aed581',\n  '#ffb74d',\n  '#ffa726',\n  '#ff8a65',\n  '#d4e157',\n  '#ffd54f',\n  '#ffecb3',\n]\n\nfunction pickRandomColor() {\n  return colors[Math.floor(Math.random() * colors.length)]\n}\n\nconst color = ref(colors[0])\nconst href = props.mark.value.attrs.href as string\n\nconst interval = setInterval(() => {\n  color.value = pickRandomColor()\n}, 1000)\n\nonBeforeUnmount(() => {\n  clearInterval(interval)\n})\n</script>\n\n<template>\n  <a\n    :ref=\"props.contentRef\"\n    :href=\"href\"\n    :style=\"{ color: color, transition: 'color 1s ease-in-out' }\"\n  >\n  </a>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "link-mark-view",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/link-mark-view/editor.vue",
+      "registry/src/vue/examples/link-mark-view/extension.ts",
+      "registry/src/vue/examples/link-mark-view/index.ts",
+      "registry/src/vue/examples/link-mark-view/link-view.vue",
+      "registry/src/vue/sample/sample-doc-link-mark-view.ts"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-link-mark-view"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,54 @@
+{
+  "name": "vue-example-link",
+  "title": "vue-example-link",
+  "type": "registry:block",
+  "description": "Example for link mark with URL input.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-link.json",
+    "https://prosekit.dev/r/vue-ui-inline-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/link/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/link/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-link'\nimport { InlineMenu } from '../../ui/inline-menu'\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        <InlineMenu />\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/link/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/link/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineLink } from 'prosekit/extensions/link'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineLink(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/link/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/link/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "link",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/link/editor.vue",
+      "registry/src/vue/examples/link/extension.ts",
+      "registry/src/vue/examples/link/index.ts",
+      "registry/src/vue/sample/sample-doc-link.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/inline-menu/index.ts",
+      "registry/src/vue/ui/inline-menu/inline-menu.vue"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-link",
+      "vue-ui-inline-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,63 @@
+{
+  "name": "vue-example-list-custom-checkbox",
+  "title": "vue-example-list-custom-checkbox",
+  "type": "registry:block",
+  "description": "Custom checkbox styling for task lists.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-list-custom-checkbox.json",
+    "https://prosekit.dev/r/vue-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/list-custom-checkbox/custom-list.css",
+      "type": "registry:component",
+      "target": "components/editor/examples/list-custom-checkbox/custom-list.css",
+      "content": "div[data-custom-list-css-enabled] .ProseMirror .prosemirror-flat-list[data-list-kind=\"task\"] {\n  & > .list-marker label {\n    box-sizing: border-box;\n    display: flex;\n    position: relative;\n    left: calc(var(--spacing) * -0.5);\n    align-items: center;\n    cursor: pointer;\n    transition: transform 0.15s ease-in-out;\n\n    &:hover {\n      transform: scale(1.1);\n    }\n\n    &::after {\n      position: absolute;\n      width: calc(var(--spacing) * 5);\n      height: calc(var(--spacing) * 5);\n      content: \"\";\n      color: var(--color-white);\n      opacity: 0;\n    }\n\n    /* https://api.iconify.design/lucide.css?icons=check */\n    &::after {\n      display: inline-block;\n      background-color: currentColor;\n      -webkit-mask-image: var(--svg);\n      mask-image: var(--svg);\n      -webkit-mask-repeat: no-repeat;\n      mask-repeat: no-repeat;\n      -webkit-mask-size: 100% 100%;\n      mask-size: 100% 100%;\n      --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\");\n    }\n\n    & input {\n      box-sizing: border-box;\n      appearance: none;\n      width: calc(var(--spacing) * 5);\n      height: calc(var(--spacing) * 5);\n      margin: 0;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: var(--radius-md);\n      border-color: color-mix(in srgb, var(--color-gray-300) 50%, transparent);\n      box-shadow: var(--shadow-sm);\n      cursor: pointer;\n      transition: all 0.15s ease-in-out;\n\n      &:hover {\n        box-shadow: var(--shadow-md);\n      }\n\n      &:checked {\n        border-color: var(--color-red-500);\n        background-color: var(--color-red-500);\n      }\n    }\n  }\n\n  &[data-list-checked] > .list-marker label {\n    &::after {\n      opacity: 1;\n    }\n  }\n\n  &[data-list-checked] {\n    color: var(--color-gray-400);\n    text-decoration: line-through;\n    text-decoration-color: var(--color-gray-400);\n  }\n}\n"
+    },
+    {
+      "path": "registry/src/vue/examples/list-custom-checkbox/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/list-custom-checkbox/editor.vue",
+      "content": "<script setup 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/vue'\n\nimport { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'\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({\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\" data-custom-list-css-enabled=\"true\">\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/list-custom-checkbox/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/list-custom-checkbox/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nexport function defineExtension() {\n  return union(defineBasicExtension())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/list-custom-checkbox/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/list-custom-checkbox/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "list-custom-checkbox",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/list-custom-checkbox/custom-list.css",
+      "registry/src/vue/examples/list-custom-checkbox/editor.vue",
+      "registry/src/vue/examples/list-custom-checkbox/extension.ts",
+      "registry/src/vue/examples/list-custom-checkbox/index.ts",
+      "registry/src/vue/sample/sample-doc-list-custom-checkbox.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
+      "registry/src/vue/ui/image-upload-popover/index.ts",
+      "registry/src/vue/ui/toolbar/index.ts",
+      "registry/src/vue/ui/toolbar/toolbar.vue"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-list-custom-checkbox",
+      "vue-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "vue-example-list",
+  "title": "vue-example-list",
+  "type": "registry:block",
+  "description": "Example for list node.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-list.json",
+    "https://prosekit.dev/r/vue-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/list/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/list/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-list'\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({\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      <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/list/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/list/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineList } from 'prosekit/extensions/list'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineList(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/list/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/list/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "list",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/list/editor.vue",
+      "registry/src/vue/examples/list/extension.ts",
+      "registry/src/vue/examples/list/index.ts",
+      "registry/src/vue/sample/sample-doc-list.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
+      "registry/src/vue/ui/image-upload-popover/index.ts",
+      "registry/src/vue/ui/toolbar/index.ts",
+      "registry/src/vue/ui/toolbar/toolbar.vue"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-list",
+      "vue-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,62 @@
+{
+  "name": "vue-example-loro",
+  "title": "vue-example-loro",
+  "type": "registry:block",
+  "description": "Real-time collaboration using Loro CRDT library.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "loro-crdt",
+    "loro-prosemirror",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/loro/editor-component.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/loro/editor-component.vue",
+      "content": "<script setup 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/vue'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nconst props = defineProps<{\n  loro: LoroDocType\n  awareness: CursorAwareness\n}>()\n\nconst extension = defineExtension(props.loro, 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"
+    },
+    {
+      "path": "registry/src/vue/examples/loro/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/loro/editor.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LoroDoc, type AwarenessListener } from 'loro-crdt'\nimport { CursorAwareness, type LoroDocType } from 'loro-prosemirror'\nimport { onBeforeUnmount } from 'vue'\n\nimport EditorComponent from './editor-component.vue'\n\nconst loroA: LoroDocType = new LoroDoc()\nconst loroB: LoroDocType = new LoroDoc()\n\nconst idA = loroA.peerIdStr\nconst idB = loroB.peerIdStr\n\nconst awarenessA = new CursorAwareness(idA)\nconst awarenessB = new CursorAwareness(idB)\n\nloroA.import(loroB.export({ mode: 'update' }))\nloroB.import(loroA.export({ mode: 'update' }))\n\nconst unsubscribeA = loroA.subscribeLocalUpdates((updates) => {\n  loroB.import(updates)\n})\n\nconst unsubscribeB = loroB.subscribeLocalUpdates((updates) => {\n  loroA.import(updates)\n})\n\nconst awarenessAListener: AwarenessListener = (_, origin) => {\n  if (origin === 'local') {\n    awarenessB.apply(awarenessA.encode([idA]))\n  }\n}\n\nconst awarenessBListener: AwarenessListener = (_, origin) => {\n  if (origin === 'local') {\n    awarenessA.apply(awarenessB.encode([idB]))\n  }\n}\n\nawarenessA.addListener(awarenessAListener)\nawarenessB.addListener(awarenessBListener)\n\nonBeforeUnmount(() => {\n  awarenessA.removeListener(awarenessAListener)\n  awarenessB.removeListener(awarenessBListener)\n  unsubscribeA()\n  unsubscribeB()\n})\n</script>\n\n<template>\n  <div class=\"h-full flex flex-col gap-2\">\n    <EditorComponent :loro=\"loroA\" :awareness=\"awarenessA\" />\n    <EditorComponent :loro=\"loroB\" :awareness=\"awarenessB\" />\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/loro/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/loro/extension.ts",
+      "content": "import type { CursorAwareness, LoroDocType } from 'loro-prosemirror'\nimport { defineBaseCommands, defineBaseKeymap, union } from 'prosekit/core'\nimport { defineBlockquote } from 'prosekit/extensions/blockquote'\nimport { defineBold } from 'prosekit/extensions/bold'\nimport { defineCode } from 'prosekit/extensions/code'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineDropCursor } from 'prosekit/extensions/drop-cursor'\nimport { defineHeading } from 'prosekit/extensions/heading'\nimport { defineImage } from 'prosekit/extensions/image'\nimport { defineItalic } from 'prosekit/extensions/italic'\nimport { defineLink } from 'prosekit/extensions/link'\nimport { defineList } from 'prosekit/extensions/list'\nimport { defineLoro } from 'prosekit/extensions/loro'\nimport { defineModClickPrevention } from 'prosekit/extensions/mod-click-prevention'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineStrike } from 'prosekit/extensions/strike'\nimport { defineTable } from 'prosekit/extensions/table'\nimport { defineText } from 'prosekit/extensions/text'\nimport { defineUnderline } from 'prosekit/extensions/underline'\nimport { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'\n\nexport function defineExtension(doc: LoroDocType, awareness: CursorAwareness) {\n  return union([\n    defineDoc(),\n    defineText(),\n    defineHeading(),\n    defineList(),\n    defineBlockquote(),\n    defineBaseKeymap(),\n    defineBaseCommands(),\n    defineItalic(),\n    defineBold(),\n    defineUnderline(),\n    defineStrike(),\n    defineCode(),\n    defineLink(),\n    defineImage(),\n    defineParagraph(),\n    defineDropCursor(),\n    defineVirtualSelection(),\n    defineModClickPrevention(),\n    defineTable(),\n    defineLoro({ doc, awareness }),\n  ])\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/loro/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/loro/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "loro",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/loro/editor-component.vue",
+      "registry/src/vue/examples/loro/editor.vue",
+      "registry/src/vue/examples/loro/extension.ts",
+      "registry/src/vue/examples/loro/index.ts",
+      "registry/src/vue/ui/button/button.vue",
+      "registry/src/vue/ui/button/index.ts",
+      "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
+      "registry/src/vue/ui/image-upload-popover/index.ts",
+      "registry/src/vue/ui/toolbar/index.ts",
+      "registry/src/vue/ui/toolbar/toolbar.vue"
+    ],
+    "internalDependencies": [
+      "vue-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,50 @@
+{
+  "name": "vue-example-mark-rule",
+  "title": "vue-example-mark-rule",
+  "type": "registry:block",
+  "description": "Input rules for automatic mark formatting.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/mark-rule/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/mark-rule/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'\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      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/mark-rule/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/mark-rule/extension.ts",
+      "content": "import { defineBaseCommands, defineBaseKeymap, defineHistory, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineLinkMarkRule, defineLinkSpec } from 'prosekit/extensions/link'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\nimport { defineText } from 'prosekit/extensions/text'\nimport { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'\n\nimport { defineIssueLink } from './issue-link'\n\nexport function defineExtension() {\n  return union(\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineHistory(),\n    defineBaseKeymap(),\n    defineBaseCommands(),\n    defineVirtualSelection(),\n    defineLinkSpec(),\n    defineLinkMarkRule(),\n    definePlaceholder({ placeholder: 'Try typing #123' }),\n    defineIssueLink(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/mark-rule/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/mark-rule/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/examples/mark-rule/issue-link.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/mark-rule/issue-link.ts",
+      "content": "import { defineMarkSpec, union } from 'prosekit/core'\nimport { defineMarkRule } from 'prosekit/extensions/mark-rule'\n\nexport function defineIssueLink() {\n  return union(\n    defineMarkSpec({\n      name: 'issueLink',\n      inclusive: false,\n      attrs: {\n        issueNumber: {},\n      },\n      toDOM(node) {\n        const issueNumber = node.attrs.issueNumber as number\n        return [\n          'a',\n          {\n            href: `https://example.com/issues/${issueNumber}`,\n            title: `Issue #${issueNumber}`,\n          },\n          0,\n        ]\n      },\n    }),\n    defineMarkRule({\n      regex: /#(\\d+)/g,\n      type: 'issueLink',\n      attrs: (match) => {\n        return { issueNumber: Number.parseInt(match[1] || '0') }\n      },\n    }),\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "mark-rule",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/mark-rule/editor.vue",
+      "registry/src/vue/examples/mark-rule/extension.ts",
+      "registry/src/vue/examples/mark-rule/index.ts",
+      "registry/src/vue/examples/mark-rule/issue-link.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}