prosekit-registry 0.0.1

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

@@ -0,0 +1,41 @@
+{
+  "name": "vue-ui-table-handle",
+  "title": "vue-ui-table-handle",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/ui/table-handle/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/table-handle/index.ts",
+      "content": "export { default as TableHandle } from './table-handle.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/ui/table-handle/table-handle.vue",
+      "type": "registry:component",
+      "target": "components/editor/ui/table-handle/table-handle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/vue'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/vue/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/vue/table-handle'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props = defineProps<Props>()\n\nconst state = useEditorDerivedValue(getTableHandleState)\n</script>\n\n<template>\n  <TableHandleRoot>\n    <TableHandleDragPreview />\n    <TableHandleDropIndicator />\n    <TableHandleColumnPositioner 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      <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border motion-safe:duration-100 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\">\n        <TableHandleColumnMenuRoot>\n          <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n            <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n          </TableHandleColumnMenuTrigger>\n          <MenuPositioner class=\"overflow-visible bg-transparent\">\n            <MenuPopup 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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n              <MenuItem\n                v-if=\"state.addTableColumnBefore.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.addTableColumnBefore.command\"\n              >\n                <span>Insert Left</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.addTableColumnAfter.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.addTableColumnAfter.command\"\n              >\n                <span>Insert Right</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteCellSelection.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.deleteCellSelection.command\"\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteTableColumn.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.deleteTableColumn.command\"\n              >\n                <span>Delete Column</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteTable.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger\n                @select=\"state.deleteTable.command\"\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            </MenuPopup>\n          </MenuPositioner>\n        </TableHandleColumnMenuRoot>\n      </TableHandleColumnPopup>\n    </TableHandleColumnPositioner>\n    <TableHandleRowPositioner\n      :placement=\"props.dir === 'rtl' ? 'right' : 'left'\"\n      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    >\n      <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border motion-safe:duration-100 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\">\n        <TableHandleRowMenuRoot>\n          <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n            <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n          </TableHandleRowMenuTrigger>\n          <MenuPositioner class=\"overflow-visible bg-transparent\">\n            <MenuPopup 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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n              <MenuItem\n                v-if=\"state.addTableRowAbove.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.addTableRowAbove.command\"\n              >\n                <span>Insert Above</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.addTableRowBelow.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.addTableRowBelow.command\"\n              >\n                <span>Insert Below</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteCellSelection.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.deleteCellSelection.command\"\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteTableRow.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                @select=\"state.deleteTableRow.command\"\n              >\n                <span>Delete Row</span>\n              </MenuItem>\n              <MenuItem\n                v-if=\"state.deleteTable.canExec\"\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger\n                @select=\"state.deleteTable.command\"\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            </MenuPopup>\n          </MenuPositioner>\n        </TableHandleRowMenuRoot>\n      </TableHandleRowPopup>\n    </TableHandleRowPositioner>\n  </TableHandleRoot>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/ui/table-handle/index.ts",
+      "registry/src/vue/ui/table-handle/table-handle.vue"
+    ],
+    "internalDependencies": []
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "vue-ui-tag-menu",
+  "title": "vue-ui-tag-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/ui/tag-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/tag-menu/index.ts",
+      "content": "export { default as TagMenu } from './tag-menu.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/ui/tag-menu/tag-menu.vue",
+      "type": "registry:component",
+      "target": "components/editor/ui/tag-menu/tag-menu.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/vue'\nimport { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/vue/autocomplete'\n\nconst props = defineProps<{ tags: { id: number; label: string }[] }>()\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleTagInsert(id: number, label: string) {\n  editor.value.commands.insertMention({\n    id: id.toString(),\n    value: '#' + label,\n    kind: 'tag',\n  })\n  editor.value.commands.insertText({ text: ' ' })\n}\n\nconst regex = /#[\\da-z]*$/i\n</script>\n\n<template>\n  <AutocompleteRoot :regex=\"regex\">\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          No results\n        </AutocompleteEmpty>\n\n        <AutocompleteItem\n          v-for=\"tag in props.tags\"\n          :key=\"tag.id\"\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          @select=\"() => handleTagInsert(tag.id, tag.label)\"\n        >\n          #{{ tag.label }}\n        </AutocompleteItem>\n      </AutocompletePopup>\n    </AutocompletePositioner>\n  </AutocompleteRoot>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/ui/tag-menu/index.ts",
+      "registry/src/vue/ui/tag-menu/tag-menu.vue"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,51 @@
+{
+  "name": "vue-ui-toolbar",
+  "title": "vue-ui-toolbar",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/vue-ui-button.json",
+    "https://prosekit.dev/r/vue-ui-image-upload-popover.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/ui/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/index.ts",
+      "content": "export { default as Toolbar } from './toolbar.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/ui/toolbar/toolbar.vue",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/toolbar.vue",
+      "content": "<script setup 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/vue'\n\nimport { Button } from '../button'\nimport { ImageUploadPopover } from '../image-upload-popover'\n\nconst props = defineProps<{ uploader?: Uploader<string> }>()\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<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      v-if=\"items.undo\"\n      :pressed=\"items.undo.isActive\"\n      :disabled=\"!items.undo.canExec\"\n      tooltip=\"Undo\"\n      @click=\"items.undo.command\"\n    >\n      <div class=\"i-lucide-undo-2 size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.redo\"\n      :pressed=\"items.redo.isActive\"\n      :disabled=\"!items.redo.canExec\"\n      tooltip=\"Redo\"\n      @click=\"items.redo.command\"\n    >\n      <div class=\"i-lucide-redo-2 size-5 block\" />\n    </Button>\n\n    <Button\n      v-if=\"items.bold\"\n      :pressed=\"items.bold.isActive\"\n      :disabled=\"!items.bold.canExec\"\n      tooltip=\"Bold\"\n      @click=\"items.bold.command\"\n    >\n      <div class=\"i-lucide-bold size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.italic\"\n      :pressed=\"items.italic.isActive\"\n      :disabled=\"!items.italic.canExec\"\n      tooltip=\"Italic\"\n      @click=\"items.italic.command\"\n    >\n      <div class=\"i-lucide-italic size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.underline\"\n      :pressed=\"items.underline.isActive\"\n      :disabled=\"!items.underline.canExec\"\n      tooltip=\"Underline\"\n      @click=\"items.underline.command\"\n    >\n      <div class=\"i-lucide-underline size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.strike\"\n      :pressed=\"items.strike.isActive\"\n      :disabled=\"!items.strike.canExec\"\n      tooltip=\"Strike\"\n      @click=\"items.strike.command\"\n    >\n      <div class=\"i-lucide-strikethrough size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.code\"\n      :pressed=\"items.code.isActive\"\n      :disabled=\"!items.code.canExec\"\n      tooltip=\"Code\"\n      @click=\"items.code.command\"\n    >\n      <div class=\"i-lucide-code size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.codeBlock\"\n      :pressed=\"items.codeBlock.isActive\"\n      :disabled=\"!items.codeBlock.canExec\"\n      tooltip=\"Code Block\"\n      @click=\"items.codeBlock.command\"\n    >\n      <div class=\"i-lucide-square-code size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.heading1\"\n      :pressed=\"items.heading1.isActive\"\n      :disabled=\"!items.heading1.canExec\"\n      tooltip=\"Heading 1\"\n      @click=\"items.heading1.command\"\n    >\n      <div class=\"i-lucide-heading-1 size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.heading2\"\n      :pressed=\"items.heading2.isActive\"\n      :disabled=\"!items.heading2.canExec\"\n      tooltip=\"Heading 2\"\n      @click=\"items.heading2.command\"\n    >\n      <div class=\"i-lucide-heading-2 size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.heading3\"\n      :pressed=\"items.heading3.isActive\"\n      :disabled=\"!items.heading3.canExec\"\n      tooltip=\"Heading 3\"\n      @click=\"items.heading3.command\"\n    >\n      <div class=\"i-lucide-heading-3 size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.horizontalRule\"\n      :pressed=\"items.horizontalRule.isActive\"\n      :disabled=\"!items.horizontalRule.canExec\"\n      tooltip=\"Divider\"\n      @click=\"items.horizontalRule.command\"\n    >\n      <div class=\"i-lucide-minus size-5 block\"></div>\n    </Button>\n    <Button\n      v-if=\"items.blockquote\"\n      :pressed=\"items.blockquote.isActive\"\n      :disabled=\"!items.blockquote.canExec\"\n      tooltip=\"Blockquote\"\n      @click=\"items.blockquote.command\"\n    >\n      <div class=\"i-lucide-text-quote size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.bulletList\"\n      :pressed=\"items.bulletList.isActive\"\n      :disabled=\"!items.bulletList.canExec\"\n      tooltip=\"Bullet List\"\n      @click=\"items.bulletList.command\"\n    >\n      <div class=\"i-lucide-list size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.orderedList\"\n      :pressed=\"items.orderedList.isActive\"\n      :disabled=\"!items.orderedList.canExec\"\n      tooltip=\"Ordered List\"\n      @click=\"items.orderedList.command\"\n    >\n      <div class=\"i-lucide-list-ordered size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.taskList\"\n      :pressed=\"items.taskList.isActive\"\n      :disabled=\"!items.taskList.canExec\"\n      tooltip=\"Task List\"\n      @click=\"items.taskList.command\"\n    >\n      <div class=\"i-lucide-list-checks size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.toggleList\"\n      :pressed=\"items.toggleList.isActive\"\n      :disabled=\"!items.toggleList.canExec\"\n      tooltip=\"Toggle List\"\n      @click=\"items.toggleList.command\"\n    >\n      <div class=\"i-lucide-list-collapse size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.indentList\"\n      :pressed=\"items.indentList.isActive\"\n      :disabled=\"!items.indentList.canExec\"\n      tooltip=\"Increase indentation\"\n      @click=\"items.indentList.command\"\n    >\n      <div class=\"i-lucide-indent-increase size-5 block\" />\n    </Button>\n    <Button\n      v-if=\"items.dedentList\"\n      :pressed=\"items.dedentList.isActive\"\n      :disabled=\"!items.dedentList.canExec\"\n      tooltip=\"Decrease indentation\"\n      @click=\"items.dedentList.command\"\n    >\n      <div class=\"i-lucide-indent-decrease size-5 block\" />\n    </Button>\n    <ImageUploadPopover\n      v-if=\"props.uploader && items.insertImage\"\n      :uploader=\"props.uploader\"\n      :disabled=\"!items.insertImage.canExec\"\n      tooltip=\"Insert Image\"\n    >\n      <div class=\"i-lucide-image size-5 block\" />\n    </ImageUploadPopover>\n  </div>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "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-button",
+      "vue-ui-image-upload-popover"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "vue-ui-user-menu",
+  "title": "vue-ui-user-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/ui/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/index.ts",
+      "content": "export { default as UserMenu } from './user-menu.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/ui/user-menu/user-menu.vue",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/user-menu.vue",
+      "content": "<script setup 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/vue'\nimport { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/vue/autocomplete'\n\nconst props = defineProps<{\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}>()\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleUserInsert(id: number, username: string) {\n  editor.value.commands.insertMention({\n    id: id.toString(),\n    value: '@' + username,\n    kind: 'user',\n  })\n  editor.value.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<template>\n  <AutocompleteRoot\n    :regex=\"regex\"\n    @query-change=\"(event) => props.onQueryChange?.(event.detail)\"\n    @open-change=\"(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          {{ props.loading ? 'Loading...' : 'No results' }}\n        </AutocompleteEmpty>\n\n        <AutocompleteItem\n          v-for=\"user in props.users\"\n          :key=\"user.id\"\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          @select=\"() => handleUserInsert(user.id, user.name)\"\n        >\n          <span v-if=\"props.loading\" class=\"opacity-50\">\n            {{ user.name }}\n          </span>\n          <span v-else>\n            {{ user.name }}\n          </span>\n        </AutocompleteItem>\n      </AutocompletePopup>\n    </AutocompletePositioner>\n  </AutocompleteRoot>\n</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/ui/user-menu/index.ts",
+      "registry/src/vue/ui/user-menu/user-menu.vue"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "vue-ui-word-counter",
+  "title": "vue-ui-word-counter",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/vue/ui/word-counter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/index.ts",
+      "content": "export { default as WordCounter } from './word-counter.vue'\n"
+    },
+    {
+      "path": "registry/src/vue/ui/word-counter/word-counter.vue",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/word-counter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue } from 'prosekit/vue'\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((s) => s).length\n  const characterCount = doc ? doc.textContent.length : 0\n  return { wordCount, characterCount }\n}\n\nconst counts = useEditorDerivedValue(getCounts)\n</script>\n\n<template>\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</template>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "vue",
+    "accumulatedFiles": [
+      "registry/src/vue/ui/word-counter/index.ts",
+      "registry/src/vue/ui/word-counter/word-counter.vue"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}