prosekit-registry 0.0.1

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

@@ -0,0 +1,51 @@
+{
+  "name": "svelte-ui-toolbar",
+  "title": "svelte-ui-toolbar",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-ui-button.json",
+    "https://prosekit.dev/r/svelte-ui-image-upload-popover.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/ui/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/index.ts",
+      "content": "export { default as Toolbar } from './toolbar.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/ui/toolbar/toolbar.svelte",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/toolbar.svelte",
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { Uploader } from 'prosekit/extensions/file'\nimport { useEditorDerivedValue } from 'prosekit/svelte'\n\nimport { Button } from '../button'\nimport { ImageUploadPopover } from '../image-upload-popover'\n\ninterface Props {\n  uploader?: Uploader<string>\n}\n\nconst props: Props = $props()\nconst uploader = $derived(props.uploader)\n\nfunction getToolbarItems(editor: Editor<BasicExtension>) {\n  return {\n    undo: editor.commands.undo\n      ? {\n        isActive: false,\n        canExec: editor.commands.undo.canExec(),\n        command: () => editor.commands.undo(),\n      }\n      : undefined,\n    redo: editor.commands.redo\n      ? {\n        isActive: false,\n        canExec: editor.commands.redo.canExec(),\n        command: () => editor.commands.redo(),\n      }\n      : undefined,\n    bold: editor.commands.toggleBold\n      ? {\n        isActive: editor.marks.bold.isActive(),\n        canExec: editor.commands.toggleBold.canExec(),\n        command: () => editor.commands.toggleBold(),\n      }\n      : undefined,\n    italic: editor.commands.toggleItalic\n      ? {\n        isActive: editor.marks.italic.isActive(),\n        canExec: editor.commands.toggleItalic.canExec(),\n        command: () => editor.commands.toggleItalic(),\n      }\n      : undefined,\n    underline: editor.commands.toggleUnderline\n      ? {\n        isActive: editor.marks.underline.isActive(),\n        canExec: editor.commands.toggleUnderline.canExec(),\n        command: () => editor.commands.toggleUnderline(),\n      }\n      : undefined,\n    strike: editor.commands.toggleStrike\n      ? {\n        isActive: editor.marks.strike.isActive(),\n        canExec: editor.commands.toggleStrike.canExec(),\n        command: () => editor.commands.toggleStrike(),\n      }\n      : undefined,\n    code: editor.commands.toggleCode\n      ? {\n        isActive: editor.marks.code.isActive(),\n        canExec: editor.commands.toggleCode.canExec(),\n        command: () => editor.commands.toggleCode(),\n      }\n      : undefined,\n    codeBlock: editor.commands.insertCodeBlock\n      ? {\n        isActive: editor.nodes.codeBlock.isActive(),\n        canExec: editor.commands.insertCodeBlock.canExec({ language: 'javascript' }),\n        command: () => editor.commands.insertCodeBlock({ language: 'javascript' }),\n      }\n      : undefined,\n    heading1: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 1 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 1 }),\n        command: () => editor.commands.toggleHeading({ level: 1 }),\n      }\n      : undefined,\n    heading2: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 2 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 2 }),\n        command: () => editor.commands.toggleHeading({ level: 2 }),\n      }\n      : undefined,\n    heading3: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 3 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 3 }),\n        command: () => editor.commands.toggleHeading({ level: 3 }),\n      }\n      : undefined,\n    horizontalRule: editor.commands.insertHorizontalRule\n      ? {\n        isActive: editor.nodes.horizontalRule.isActive(),\n        canExec: editor.commands.insertHorizontalRule.canExec(),\n        command: () => editor.commands.insertHorizontalRule(),\n      }\n      : undefined,\n    blockquote: editor.commands.toggleBlockquote\n      ? {\n        isActive: editor.nodes.blockquote.isActive(),\n        canExec: editor.commands.toggleBlockquote.canExec(),\n        command: () => editor.commands.toggleBlockquote(),\n      }\n      : undefined,\n    bulletList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'bullet' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'bullet' }),\n        command: () => editor.commands.toggleList({ kind: 'bullet' }),\n      }\n      : undefined,\n    orderedList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'ordered' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'ordered' }),\n        command: () => editor.commands.toggleList({ kind: 'ordered' }),\n      }\n      : undefined,\n    taskList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'task' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'task' }),\n        command: () => editor.commands.toggleList({ kind: 'task' }),\n      }\n      : undefined,\n    toggleList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'toggle' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'toggle' }),\n        command: () => editor.commands.toggleList({ kind: 'toggle' }),\n      }\n      : undefined,\n    indentList: editor.commands.indentList\n      ? {\n        isActive: false,\n        canExec: editor.commands.indentList.canExec(),\n        command: () => editor.commands.indentList(),\n      }\n      : undefined,\n    dedentList: editor.commands.dedentList\n      ? {\n        isActive: false,\n        canExec: editor.commands.dedentList.canExec(),\n        command: () => editor.commands.dedentList(),\n      }\n      : undefined,\n    insertImage: editor.commands.insertImage\n      ? {\n        isActive: false,\n        canExec: editor.commands.insertImage.canExec(),\n      }\n      : undefined,\n  }\n}\n\nconst items = useEditorDerivedValue(getToolbarItems)\n</script>\n\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  {#if $items.undo}\n    <Button\n      pressed={$items.undo.isActive}\n      disabled={!$items.undo.canExec}\n      onClick={$items.undo.command}\n      tooltip=\"Undo\"\n    >\n      <div class=\"i-lucide-undo-2 size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.redo}\n    <Button\n      pressed={$items.redo.isActive}\n      disabled={!$items.redo.canExec}\n      onClick={$items.redo.command}\n      tooltip=\"Redo\"\n    >\n      <div class=\"i-lucide-redo-2 size-5 block\"></div>\n    </Button>\n  {/if}\n\n  {#if $items.bold}\n    <Button\n      pressed={$items.bold.isActive}\n      disabled={!$items.bold.canExec}\n      onClick={$items.bold.command}\n      tooltip=\"Bold\"\n    >\n      <div class=\"i-lucide-bold size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.italic}\n    <Button\n      pressed={$items.italic.isActive}\n      disabled={!$items.italic.canExec}\n      onClick={$items.italic.command}\n      tooltip=\"Italic\"\n    >\n      <div class=\"i-lucide-italic size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.underline}\n    <Button\n      pressed={$items.underline.isActive}\n      disabled={!$items.underline.canExec}\n      onClick={$items.underline.command}\n      tooltip=\"Underline\"\n    >\n      <div class=\"i-lucide-underline size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.strike}\n    <Button\n      pressed={$items.strike.isActive}\n      disabled={!$items.strike.canExec}\n      onClick={$items.strike.command}\n      tooltip=\"Strike\"\n    >\n      <div class=\"i-lucide-strikethrough size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.code}\n    <Button\n      pressed={$items.code.isActive}\n      disabled={!$items.code.canExec}\n      onClick={$items.code.command}\n      tooltip=\"Code\"\n    >\n      <div class=\"i-lucide-code size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.codeBlock}\n    <Button\n      pressed={$items.codeBlock.isActive}\n      disabled={!$items.codeBlock.canExec}\n      onClick={$items.codeBlock.command}\n      tooltip=\"Code Block\"\n    >\n      <div class=\"i-lucide-square-code size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.heading1}\n    <Button\n      pressed={$items.heading1.isActive}\n      disabled={!$items.heading1.canExec}\n      onClick={$items.heading1.command}\n      tooltip=\"Heading 1\"\n    >\n      <div class=\"i-lucide-heading-1 size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.heading2}\n    <Button\n      pressed={$items.heading2.isActive}\n      disabled={!$items.heading2.canExec}\n      onClick={$items.heading2.command}\n      tooltip=\"Heading 2\"\n    >\n      <div class=\"i-lucide-heading-2 size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.heading3}\n    <Button\n      pressed={$items.heading3.isActive}\n      disabled={!$items.heading3.canExec}\n      onClick={$items.heading3.command}\n      tooltip=\"Heading 3\"\n    >\n      <div class=\"i-lucide-heading-3 size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.horizontalRule}\n    <Button\n      pressed={$items.horizontalRule.isActive}\n      disabled={!$items.horizontalRule.canExec}\n      onClick={$items.horizontalRule.command}\n      tooltip=\"Divider\"\n    >\n      <div class=\"i-lucide-minus size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.blockquote}\n    <Button\n      pressed={$items.blockquote.isActive}\n      disabled={!$items.blockquote.canExec}\n      onClick={$items.blockquote.command}\n      tooltip=\"Blockquote\"\n    >\n      <div class=\"i-lucide-text-quote size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.bulletList}\n    <Button\n      pressed={$items.bulletList.isActive}\n      disabled={!$items.bulletList.canExec}\n      onClick={$items.bulletList.command}\n      tooltip=\"Bullet List\"\n    >\n      <div class=\"i-lucide-list size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.orderedList}\n    <Button\n      pressed={$items.orderedList.isActive}\n      disabled={!$items.orderedList.canExec}\n      onClick={$items.orderedList.command}\n      tooltip=\"Ordered List\"\n    >\n      <div class=\"i-lucide-list-ordered size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.taskList}\n    <Button\n      pressed={$items.taskList.isActive}\n      disabled={!$items.taskList.canExec}\n      onClick={$items.taskList.command}\n      tooltip=\"Task List\"\n    >\n      <div class=\"i-lucide-list-checks size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.toggleList}\n    <Button\n      pressed={$items.toggleList.isActive}\n      disabled={!$items.toggleList.canExec}\n      onClick={$items.toggleList.command}\n      tooltip=\"Toggle List\"\n    >\n      <div class=\"i-lucide-list-collapse size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.indentList}\n    <Button\n      pressed={$items.indentList.isActive}\n      disabled={!$items.indentList.canExec}\n      onClick={$items.indentList.command}\n      tooltip=\"Increase indentation\"\n    >\n      <div class=\"i-lucide-indent-increase size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if $items.dedentList}\n    <Button\n      pressed={$items.dedentList.isActive}\n      disabled={!$items.dedentList.canExec}\n      onClick={$items.dedentList.command}\n      tooltip=\"Decrease indentation\"\n    >\n      <div class=\"i-lucide-indent-decrease size-5 block\"></div>\n    </Button>\n  {/if}\n  {#if uploader && $items.insertImage}\n    <ImageUploadPopover\n      {uploader}\n      disabled={!$items.insertImage.canExec}\n      tooltip=\"Insert Image\"\n    >\n      <div class=\"i-lucide-image size-5 block\"></div>\n    </ImageUploadPopover>\n  {/if}\n</div>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts",
+      "registry/src/svelte/ui/image-upload-popover/image-upload-popover.svelte",
+      "registry/src/svelte/ui/image-upload-popover/index.ts",
+      "registry/src/svelte/ui/toolbar/index.ts",
+      "registry/src/svelte/ui/toolbar/toolbar.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-ui-button",
+      "svelte-ui-image-upload-popover"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-ui-user-menu",
+  "title": "svelte-ui-user-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/ui/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/index.ts",
+      "content": "export { default as UserMenu } from './user-menu.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/ui/user-menu/user-menu.svelte",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/user-menu.svelte",
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}\n\nconst props: Props = $props()\nconst loading = $derived(props.loading ?? false)\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleUserInsert(id: number, username: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '@' + username,\n    kind: 'user',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n</script>\n\n<AutocompleteRoot\n  {regex}\n  onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n  onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n        {loading ? 'Loading...' : 'No results'}\n      </AutocompleteEmpty>\n\n      {#each props.users as user (user.id)}\n        <AutocompleteItem\n          class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n          onSelect={() => handleUserInsert(user.id, user.name)}\n        >\n          {#if loading}\n            <span class=\"opacity-50\">\n              {user.name}\n            </span>\n          {:else}\n            <span>\n              {user.name}\n            </span>\n          {/if}\n        </AutocompleteItem>\n      {/each}\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/ui/user-menu/index.ts",
+      "registry/src/svelte/ui/user-menu/user-menu.svelte"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-ui-word-counter",
+  "title": "svelte-ui-word-counter",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/ui/word-counter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/index.ts",
+      "content": "export { default as WordCounter } from './word-counter.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/ui/word-counter/word-counter.svelte",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/word-counter.svelte",
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue } from 'prosekit/svelte'\n\nfunction getCounts(editor: Editor) {\n  const doc = editor.state.doc\n  const words = doc ? doc.textBetween(0, doc.content.size, ' ') : ''\n  const wordCount = words.split(/\\s+/).filter((word) => word).length\n  const characterCount = doc ? doc.textContent.length : 0\n  return { wordCount, characterCount }\n}\n\nconst counts = useEditorDerivedValue(getCounts)\n</script>\n\n<div class=\"p-4 text-center italic tabular-nums\">\n  Word Count: {$counts.wordCount}\n  <br />\n  Character Count: {$counts.characterCount}\n</div>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/ui/word-counter/index.ts",
+      "registry/src/svelte/ui/word-counter/word-counter.svelte"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "vanilla-example-minimal",
+  "title": "vanilla-example-minimal",
+  "type": "registry:block",
+  "description": "Minimal editor setup with basic functionality.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vanilla/examples/minimal/editor.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/minimal/editor.ts",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\n\nexport function setupVanillaEditor() {\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  return {\n    render: () => {\n      const element = document.createElement('div')\n      element.className = 'outline-solid p-4'\n      editor.mount(element)\n      return element\n    },\n    destroy: () => {\n      editor.unmount()\n    },\n  }\n}\n"
+    },
+    {
+      "path": "registry/src/vanilla/examples/minimal/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/minimal/index.ts",
+      "content": "export { setupVanillaEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "minimal",
+    "framework": "vanilla",
+    "accumulatedFiles": [
+      "registry/src/vanilla/examples/minimal/editor.ts",
+      "registry/src/vanilla/examples/minimal/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,51 @@
+{
+  "name": "vanilla-example-slash-menu",
+  "title": "vanilla-example-slash-menu",
+  "type": "registry:block",
+  "description": "Command menu triggered by typing slash (/).",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vanilla-ui-slash-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vanilla/examples/slash-menu/editor.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/editor.ts",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\n\nimport { renderSlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nexport function setupVanillaEditor() {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return {\n    render: () => {\n      const port = document.createElement('div')\n      port.className = 'box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white'\n\n      const scrolling = document.createElement('div')\n      scrolling.className = 'relative w-full flex-1 box-border overflow-y-auto'\n      port.append(scrolling)\n\n      const content = document.createElement('div')\n      content.className = 'ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500'\n      scrolling.append(content)\n\n      scrolling.append(renderSlashMenu(editor))\n\n      editor.mount(content)\n\n      return port\n    },\n    destroy: () => {\n      editor.unmount()\n    },\n  }\n}\n"
+    },
+    {
+      "path": "registry/src/vanilla/examples/slash-menu/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    definePlaceholder({ placeholder: 'Press / for commands...' }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vanilla/examples/slash-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/index.ts",
+      "content": "export { setupVanillaEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "slash-menu",
+    "framework": "vanilla",
+    "accumulatedFiles": [
+      "registry/src/vanilla/examples/slash-menu/editor.ts",
+      "registry/src/vanilla/examples/slash-menu/extension.ts",
+      "registry/src/vanilla/examples/slash-menu/index.ts",
+      "registry/src/vanilla/ui/slash-menu/index.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu-empty.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu-item.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu.ts"
+    ],
+    "internalDependencies": [
+      "vanilla-ui-slash-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/vanilla-ui-slash-menu.json

@@ -0,0 +1,50 @@
+{
+  "name": "vanilla-ui-slash-menu",
+  "title": "vanilla-ui-slash-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vanilla/ui/slash-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/index.ts",
+      "content": "export { renderSlashMenu } from './slash-menu'\n"
+    },
+    {
+      "path": "registry/src/vanilla/ui/slash-menu/slash-menu-empty.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-empty.ts",
+      "content": "import 'prosekit/web/autocomplete'\n\nimport type { AutocompleteEmptyElement } from 'prosekit/web/autocomplete'\n\nexport function renderSlashMenuEmpty() {\n  const empty = document.createElement('prosekit-autocomplete-empty') as AutocompleteEmptyElement\n  empty.className = 'relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800'\n\n  const span = document.createElement('span')\n  span.textContent = 'No results'\n  empty.append(span)\n\n  return empty\n}\n"
+    },
+    {
+      "path": "registry/src/vanilla/ui/slash-menu/slash-menu-item.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-item.ts",
+      "content": "import 'prosekit/web/autocomplete'\n\nimport type { AutocompleteItemElement } from 'prosekit/web/autocomplete'\n\nexport function renderSlashMenuItem(options: {\n  label: string\n  kbd?: string\n  onSelect: () => void\n}) {\n  const item = document.createElement('prosekit-autocomplete-item') as AutocompleteItemElement\n  item.className = 'relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800'\n  item.addEventListener('select', () => options.onSelect())\n\n  const span = document.createElement('span')\n  span.textContent = options.label\n  item.append(span)\n\n  if (options.kbd) {\n    const kbd = document.createElement('kbd')\n    kbd.className = 'text-xs font-mono text-gray-400 dark:text-gray-500'\n    kbd.textContent = options.kbd\n    item.append(kbd)\n  }\n\n  return item\n}\n"
+    },
+    {
+      "path": "registry/src/vanilla/ui/slash-menu/slash-menu.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu.ts",
+      "content": "import 'prosekit/web/autocomplete'\n\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport type { AutocompletePopupElement, AutocompletePositionerElement, AutocompleteRootElement } from 'prosekit/web/autocomplete'\n\nimport { renderSlashMenuEmpty } from './slash-menu-empty'\nimport { renderSlashMenuItem } from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\nexport function renderSlashMenu(\n  editor: Editor<BasicExtension>,\n) {\n  const root = document.createElement('prosekit-autocomplete-root') as AutocompleteRootElement\n  root.editor = editor\n  root.regex = regex\n\n  const positioner = document.createElement('prosekit-autocomplete-positioner') as AutocompletePositionerElement\n  positioner.className = 'block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100'\n\n  const popup = document.createElement('prosekit-autocomplete-popup') as AutocompletePopupElement\n  popup.className = 'box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1'\n\n  popup.append(renderSlashMenuItem({ label: 'Text', kbd: undefined, onSelect: () => editor.commands.setParagraph() }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 1', kbd: '#', onSelect: () => editor.commands.setHeading({ level: 1 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 2', kbd: '##', onSelect: () => editor.commands.setHeading({ level: 2 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 3', kbd: '###', onSelect: () => editor.commands.setHeading({ level: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Bullet list', kbd: '-', onSelect: () => editor.commands.wrapInList({ kind: 'bullet' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Ordered list', kbd: '1.', onSelect: () => editor.commands.wrapInList({ kind: 'ordered' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Task list', kbd: '[]', onSelect: () => editor.commands.wrapInList({ kind: 'task' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Toggle list', kbd: '>>', onSelect: () => editor.commands.wrapInList({ kind: 'toggle' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Quote', kbd: '>', onSelect: () => editor.commands.setBlockquote() }))\n  popup.append(renderSlashMenuItem({ label: 'Table', onSelect: () => editor.commands.insertTable({ row: 3, col: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Divider', kbd: '---', onSelect: () => editor.commands.insertHorizontalRule() }))\n  popup.append(renderSlashMenuItem({ label: 'Code', kbd: '```', onSelect: () => editor.commands.setCodeBlock() }))\n  popup.append(renderSlashMenuEmpty())\n\n  positioner.append(popup)\n  root.append(positioner)\n\n  return root\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "vanilla",
+    "accumulatedFiles": [
+      "registry/src/vanilla/ui/slash-menu/index.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu-empty.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu-item.ts",
+      "registry/src/vanilla/ui/slash-menu/slash-menu.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,60 @@
+{
+  "name": "vue-example-block-handle",
+  "title": "vue-example-block-handle",
+  "type": "registry:block",
+  "description": "A handle that appears on hover, allowing you to drag and re-order blocks.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-block-handle.json",
+    "https://prosekit.dev/r/vue-ui-block-handle.json",
+    "https://prosekit.dev/r/vue-ui-code-block-view.json",
+    "https://prosekit.dev/r/vue-ui-drop-indicator.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/block-handle/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/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-block-handle'\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"
+    },
+    {
+      "path": "registry/src/vue/examples/block-handle/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nimport { defineCodeBlockView } from '../../ui/code-block-view'\n\nexport function defineExtension() {\n  return union([defineBasicExtension(), defineCodeBlockView()])\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/block-handle/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "block-handle",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/block-handle/editor.vue",
+      "registry/src/vue/examples/block-handle/extension.ts",
+      "registry/src/vue/examples/block-handle/index.ts",
+      "registry/src/vue/sample/sample-doc-block-handle.ts",
+      "registry/src/vue/ui/block-handle/block-handle.vue",
+      "registry/src/vue/ui/block-handle/index.ts",
+      "registry/src/vue/ui/code-block-view/code-block-view.vue",
+      "registry/src/vue/ui/code-block-view/index.ts",
+      "registry/src/vue/ui/drop-indicator/drop-indicator.vue",
+      "registry/src/vue/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-block-handle",
+      "vue-ui-block-handle",
+      "vue-ui-code-block-view",
+      "vue-ui-drop-indicator"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,53 @@
+{
+  "name": "vue-example-blockquote",
+  "title": "vue-example-blockquote",
+  "type": "registry:block",
+  "description": "Example for blockquote node.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/blockquote/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/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 { 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 />\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/blockquote/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineBlockquote } from 'prosekit/extensions/blockquote'\nimport { defineDoc } from 'prosekit/extensions/doc'\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    defineBlockquote(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/blockquote/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "blockquote",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/blockquote/editor.vue",
+      "registry/src/vue/examples/blockquote/extension.ts",
+      "registry/src/vue/examples/blockquote/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-bold.json

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

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

@@ -0,0 +1,50 @@
+{
+  "name": "vue-example-change-tracking",
+  "title": "vue-example-change-tracking",
+  "type": "registry:block",
+  "description": "Track and commit document changes with version history.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/change-tracking/editor-diff.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor-diff.vue",
+      "content": "<script setup lang=\"ts\">\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/vue'\n\nconst props = defineProps<{ commit: Commit }>()\n\nconst editor = createEditor({\n  extension: union(\n    defineBasicExtension(),\n    defineReadonly(),\n    defineCommitViewer(props.commit),\n  ),\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\"></div>\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/change-tracking/editor-main.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor-main.vue",
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/vue'\n\nconst props = defineProps<{\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n}>()\n\nconst editor = createEditor({\n  extension: union(\n    defineBasicExtension(),\n    defineCommitRecorder(props.commitRecorder),\n  ),\n  defaultContent: props.initialContent,\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\"></div>\n      </div>\n    </div>\n  </ProseKit>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/change-tracking/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor.vue",
+      "content": "<script setup lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport type { NodeJSON } from 'prosekit/core'\nimport { CommitRecorder, type Commit } from 'prosekit/extensions/commit'\nimport { ref } from 'vue'\n\nimport EditorDiff from './editor-diff.vue'\nimport EditorMain from './editor-main.vue'\n\nconst commits = ref<{ id: string; date: Date; commit: Commit }[]>([])\nconst key = ref(0)\nconst initialContent = ref<NodeJSON | undefined>()\nconst commitRecorder = new CommitRecorder()\n\nfunction handleCommit() {\n  const commit = commitRecorder.commit()\n  if (!commit) return\n  const id = Math.random().toString(36).slice(2, 9)\n  commits.value = [{ id, date: new Date(), commit }, ...commits.value]\n}\n\nfunction handleRestore(id: string) {\n  const index = commits.value.findIndex((commit) => commit.id === id)\n  const commit = commits.value[index]\n  if (index === -1 || !commit) return\n  const doc = commit.commit.doc\n  initialContent.value = doc\n  commits.value = commits.value.slice(index)\n  key.value = key.value + 1\n}\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"max-h-md\">\n        <EditorMain\n          :key=\"key\"\n          :initial-content=\"initialContent\"\n          :commit-recorder=\"commitRecorder\"\n        />\n      </div>\n      <button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2\" @click=\"handleCommit\">\n        Save\n      </button>\n    </div>\n    <div class=\"flex flex-col gap-4\">\n      <div v-for=\"commit in commits\" :key=\"commit.id\">\n        <div class=\"max-h-md\">\n          <EditorDiff :commit=\"commit.commit\" />\n        </div>\n        <div class=\"w-full inline-flex justify-between p-1 text-sm\">\n          <span class=\"opacity-50\">\n            {{ commit.date.toLocaleTimeString() }}\n          </span>\n          <button\n            class=\"underline opacity-50 hover:opacity-100\"\n            @click=\"() => handleRestore(commit.id)\"\n          >\n            Restore\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/change-tracking/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "change-tracking",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/change-tracking/editor-diff.vue",
+      "registry/src/vue/examples/change-tracking/editor-main.vue",
+      "registry/src/vue/examples/change-tracking/editor.vue",
+      "registry/src/vue/examples/change-tracking/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,66 @@
+{
+  "name": "vue-example-code-block-themes",
+  "title": "vue-example-code-block-themes",
+  "type": "registry:block",
+  "description": "Code block with multiple syntax highlighting themes.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-sample-sample-doc-code-block.json",
+    "https://prosekit.dev/r/vue-ui-code-block-view.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/examples/code-block-themes/editor.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/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-code-block'\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({\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/code-block-themes/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nimport { defineCodeBlockView } from '../../ui/code-block-view'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineCodeBlockView())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/code-block-themes/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/examples/code-block-themes/theme-selector.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/theme-selector.vue",
+      "content": "<script setup lang=\"ts\">\nimport { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'\nimport { useExtension } from 'prosekit/vue'\nimport { computed, ref } from 'vue'\n\nconst theme = ref<ShikiBundledTheme>('github-dark')\nconst extension = computed(() => {\n  return defineCodeBlockShiki({ themes: [theme.value] })\n})\n\nuseExtension(extension)\n</script>\n\n<template>\n  <label for=\"code-block-theme-selector\">Theme</label>\n  <select\n    id=\"code-block-theme-selector\"\n    v-model=\"theme\"\n    class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n  >\n    <option\n      v-for=\"info in shikiBundledThemesInfo\"\n      :key=\"info.id\"\n      :value=\"info.id\"\n    >\n      {{ info.id }}\n    </option>\n  </select>\n</template>\n"
+    },
+    {
+      "path": "registry/src/vue/examples/code-block-themes/toolbar.vue",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/toolbar.vue",
+      "content": "<script setup lang=\"ts\">\nimport ThemeSelector from './theme-selector.vue'\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    <ThemeSelector />\n  </div>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "code-block-themes",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/examples/code-block-themes/editor.vue",
+      "registry/src/vue/examples/code-block-themes/extension.ts",
+      "registry/src/vue/examples/code-block-themes/index.ts",
+      "registry/src/vue/examples/code-block-themes/theme-selector.vue",
+      "registry/src/vue/examples/code-block-themes/toolbar.vue",
+      "registry/src/vue/sample/sample-doc-code-block.ts",
+      "registry/src/vue/ui/code-block-view/code-block-view.vue",
+      "registry/src/vue/ui/code-block-view/index.ts"
+    ],
+    "internalDependencies": [
+      "vue-sample-sample-doc-code-block",
+      "vue-ui-code-block-view"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}