prosekit-registry 0.0.21 → 0.0.22

package/dist/r/vue-sample-sample-doc-hard-break.json

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

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

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

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

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

package/dist/r/vue-sample-sample-doc-inline-menu.json

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

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

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

package/dist/r/vue-sample-sample-doc-link-mark-view.json

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

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

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

package/dist/r/vue-sample-sample-doc-list-custom-checkbox.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/r/vue-sample-sample-doc-text-align.json

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

package/dist/r/vue-sample-sample-doc-text-color.json

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

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

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

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

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

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

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

package/dist/r/vue-sample-sample-doc-view-adapter.json

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

package/dist/r/vue-sample-sample-doc-word-counter.json

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

package/dist/r/vue-sample-sample-uploader.json

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

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

@@ -7,14 +7,14 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/ui/block-handle/block-handle.vue",
       "type": "registry:component",
       "target": "components/editor/ui/block-handle/block-handle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/vue/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <BlockHandleRoot>\n    <BlockHandlePositioner :placement=\"props.dir === 'rtl' ? 'right' : 'left'\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <BlockHandlePopup class=\"flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\n        <BlockHandleAdd class=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n          <div class=\"i-lucide-plus size-5 block\" />\n        </BlockHandleAdd>\n        <BlockHandleDraggable class=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n          <div class=\"i-lucide-grip-vertical size-5 block\" />\n        </BlockHandleDraggable>\n      </BlockHandlePopup>\n    </BlockHandlePositioner>\n  </BlockHandleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/vue/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <BlockHandleRoot>\n    <BlockHandlePositioner :placement=\"props.dir === 'rtl' ? 'right' : 'left'\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <BlockHandlePopup class=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\n        <BlockHandleAdd class=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n          <div class=\"i-lucide-plus size-5 block\" />\n        </BlockHandleAdd>\n        <BlockHandleDraggable class=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n          <div class=\"i-lucide-grip-vertical size-5 block\" />\n        </BlockHandleDraggable>\n      </BlockHandlePopup>\n    </BlockHandlePositioner>\n  </BlockHandleRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/block-handle/index.ts",

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

@@ -5,14 +5,14 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/ui/button/button.vue",
       "type": "registry:component",
       "target": "components/editor/ui/button/button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/vue/tooltip'\n\nconst props = defineProps<{\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n}>()\n</script>\n\n<template>\n  <TooltipRoot>\n    <TooltipTrigger class=\"block\">\n      <button\n        :data-state=\"props.pressed ? 'on' : 'off'\"\n        :disabled=\"props.disabled\"\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        @click=\"props.onClick\"\n        @mousedown.prevent\n      >\n        <slot />\n        <span v-if=\"props.tooltip\" class=\"sr-only\">{{ props.tooltip }}</span>\n      </button>\n    </TooltipTrigger>\n    <TooltipPositioner v-if=\"props.tooltip\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TooltipPopup class=\"flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {{ props.tooltip }}\n      </TooltipPopup>\n    </TooltipPositioner>\n  </TooltipRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/vue/tooltip'\n\nconst props = defineProps<{\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n}>()\n</script>\n\n<template>\n  <TooltipRoot>\n    <TooltipTrigger class=\"block\">\n      <button\n        :data-state=\"props.pressed ? 'on' : 'off'\"\n        :disabled=\"props.disabled\"\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        @click=\"props.onClick\"\n        @mousedown.prevent\n      >\n        <slot />\n        <span v-if=\"props.tooltip\" class=\"sr-only\">{{ props.tooltip }}</span>\n      </button>\n    </TooltipTrigger>\n    <TooltipPositioner v-if=\"props.tooltip\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TooltipPopup class=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {{ props.tooltip }}\n      </TooltipPopup>\n    </TooltipPositioner>\n  </TooltipRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/button/index.ts",

package/dist/r/vue-ui-code-block-view.json

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

package/dist/r/vue-ui-drop-indicator.json

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

package/dist/r/vue-ui-image-upload-popover.json

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/vue-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
       "type": "registry:component",
       "target": "components/editor/ui/image-upload-popover/image-upload-popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/vue'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/vue/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\nimport { ref, useId } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n}>()\n\nconst open = ref(false)\nconst url = ref('')\nconst file = ref<File | null>(null)\nconst ariaId = useId()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file.value = selectedFile\n    url.value = ''\n  } else {\n    file.value = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url.value = inputUrl\n    file.value = null\n  } else {\n    url.value = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url.value = ''\n    file.value = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url.value) {\n    editor.value.commands.insertImage({ src: url.value })\n  } else if (file.value) {\n    editor.value.commands.uploadImage({ file: file.value, uploader: props.uploader })\n  }\n  open.value = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open.value = event.detail\n}\n</script>\n\n<template>\n  <PopoverRoot :open=\"open\" @open-change=\"handleOpenChange\">\n    <PopoverTrigger>\n      <Button :pressed=\"open\" :disabled=\"props.disabled\" :tooltip=\"props.tooltip\">\n        <slot />\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverPositioner\n      placement=\"bottom\"\n      class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n    ><PopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none flex flex-col gap-y-4 p-6 text-sm w-sm\">\n        <label v-if=\"!file\" :for=\"`id-link-${ariaId}`\">Embed Link</label>\n        <input\n          v-if=\"!file\"\n          :id=\"`id-link-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          :value=\"url\"\n          @input=\"handleUrlChange\"\n        />\n\n        <label v-if=\"!url\" :for=\"`id-upload-${ariaId}`\">Upload</label>\n        <input\n          v-if=\"!url\"\n          :id=\"`id-upload-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          @change=\"handleFileChange\"\n        />\n\n        <button v-if=\"url\" 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 w-full\" @click=\"handleSubmit\">\n          Insert Image\n        </button>\n\n        <button v-if=\"file\" 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 w-full\" @click=\"handleSubmit\">\n          Upload Image\n        </button>\n      </PopoverPopup></PopoverPositioner>\n  </PopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/vue'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/vue/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\nimport { ref, useId } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n}>()\n\nconst open = ref(false)\nconst url = ref('')\nconst file = ref<File | null>(null)\nconst ariaId = useId()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file.value = selectedFile\n    url.value = ''\n  } else {\n    file.value = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url.value = inputUrl\n    file.value = null\n  } else {\n    url.value = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url.value = ''\n    file.value = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url.value) {\n    editor.value.commands.insertImage({ src: url.value })\n  } else if (file.value) {\n    editor.value.commands.uploadImage({ file: file.value, uploader: props.uploader })\n  }\n  open.value = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open.value = event.detail\n}\n</script>\n\n<template>\n  <PopoverRoot :open=\"open\" @open-change=\"handleOpenChange\">\n    <PopoverTrigger>\n      <Button :pressed=\"open\" :disabled=\"props.disabled\" :tooltip=\"props.tooltip\">\n        <slot />\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverPositioner\n      placement=\"bottom\"\n      class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n    ><PopoverPopup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col gap-y-4 p-6 text-sm w-sm\">\n        <label v-if=\"!file\" :for=\"`id-link-${ariaId}`\">Embed Link</label>\n        <input\n          v-if=\"!file\"\n          :id=\"`id-link-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          :value=\"url\"\n          @input=\"handleUrlChange\"\n        />\n\n        <label v-if=\"!url\" :for=\"`id-upload-${ariaId}`\">Upload</label>\n        <input\n          v-if=\"!url\"\n          :id=\"`id-upload-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          @change=\"handleFileChange\"\n        />\n\n        <button v-if=\"url\" 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 w-full\" @click=\"handleSubmit\">\n          Insert Image\n        </button>\n\n        <button v-if=\"file\" 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 w-full\" @click=\"handleSubmit\">\n          Upload Image\n        </button>\n      </PopoverPopup></PopoverPositioner>\n  </PopoverRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/image-upload-popover/index.ts",

package/dist/r/vue-ui-image-view.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -9,7 +9,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -22,7 +22,7 @@
       "path": "registry/src/vue/ui/inline-menu/inline-menu.vue",
       "type": "registry:component",
       "target": "components/editor/ui/inline-menu/inline-menu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { LinkAttrs } from 'prosekit/extensions/link'\nimport type { EditorState } from 'prosekit/pm/state'\nimport { useEditor, useEditorDerivedValue } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\n\nimport { Button } from '../button'\n\nfunction getInlineMenuItems(editor: Editor<BasicExtension>) {\n  return {\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    link: editor.commands.addLink\n      ? {\n        isActive: editor.marks.link.isActive(),\n        canExec: editor.commands.addLink.canExec({ href: '' }),\n        command: () => editor.commands.expandLink(),\n        currentLink: getCurrentLink(editor.state) || '',\n      }\n      : undefined,\n  }\n}\n\nfunction getCurrentLink(state: EditorState): string | undefined {\n  const { $from } = state.selection\n  const marks = $from.marksAcross($from)\n  if (!marks) {\n    return\n  }\n  for (const mark of marks) {\n    if (mark.type.name === 'link') {\n      return (mark.attrs as LinkAttrs).href\n    }\n  }\n}\n\nconst editor = useEditor<BasicExtension>()\nconst items = useEditorDerivedValue(getInlineMenuItems)\n\nconst linkMenuOpen = ref(false)\nfunction toggleLinkMenuOpen() {\n  linkMenuOpen.value = !linkMenuOpen.value\n}\n\nfunction handleLinkUpdate(href?: string) {\n  if (href) {\n    editor.value.commands.addLink({ href })\n  } else {\n    editor.value.commands.removeLink()\n  }\n\n  linkMenuOpen.value = false\n  editor.value.focus()\n}\n</script>\n\n<template>\n  <InlinePopoverRoot\n    @open-change=\"(event) => {\n      if (!event.detail) linkMenuOpen = false\n    }\"\n  >\n    <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <InlinePopoverPopup\n        data-testid=\"inline-menu-main\"\n        class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\"\n      >\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\"></div>\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\"></div>\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\"></div>\n        </Button>\n        <Button\n          v-if=\"items.strike\"\n          :pressed=\"items.strike.isActive\"\n          :disabled=\"!items.strike.canExec\"\n          tooltip=\"Strikethrough\"\n          @click=\"items.strike.command\"\n        >\n          <div class=\"i-lucide-strikethrough size-5 block\"></div>\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\"></div>\n        </Button>\n        <Button\n          v-if=\"items.link?.canExec && items.link\"\n          :pressed=\"items.link.isActive\"\n          tooltip=\"Link\"\n          @click=\"() => {\n            items.link!.command()\n            toggleLinkMenuOpen()\n          }\"\n        >\n          <div class=\"i-lucide-link size-5 block\"></div>\n        </Button>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n\n  <InlinePopoverRoot\n    v-if=\"items.link\"\n    :default-open=\"false\"\n    :open=\"linkMenuOpen\"\n    @open-change=\"(event) => {\n      linkMenuOpen = event.detail\n    }\"\n  >\n    <InlinePopoverPositioner placement=\"bottom\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <InlinePopoverPopup\n        data-testid=\"inline-menu-link\"\n        class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch\"\n      >\n        <form\n          v-if=\"linkMenuOpen\"\n          @submit.prevent=\"(event) => {\n            const target = event.target as HTMLFormElement | null\n            const href = target?.querySelector('input')?.value?.trim()\n            handleLinkUpdate(href)\n          }\"\n        >\n          <input\n            placeholder=\"Paste the link...\"\n            :value=\"items.link.currentLink || ''\"\n            class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          >\n        </form>\n        <button\n          v-if=\"items.link.isActive\"\n          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-9 px-3\"\n          @click=\"() => handleLinkUpdate()\"\n          @mousedown.prevent\n        >\n          Remove link\n        </button>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { LinkAttrs } from 'prosekit/extensions/link'\nimport type { EditorState } from 'prosekit/pm/state'\nimport { useEditor, useEditorDerivedValue } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\n\nimport { Button } from '../button'\n\nfunction getInlineMenuItems(editor: Editor<BasicExtension>) {\n  return {\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    link: editor.commands.addLink\n      ? {\n        isActive: editor.marks.link.isActive(),\n        canExec: editor.commands.addLink.canExec({ href: '' }),\n        command: () => editor.commands.expandLink(),\n        currentLink: getCurrentLink(editor.state) || '',\n      }\n      : undefined,\n  }\n}\n\nfunction getCurrentLink(state: EditorState): string | undefined {\n  const { $from } = state.selection\n  const marks = $from.marksAcross($from)\n  if (!marks) {\n    return\n  }\n  for (const mark of marks) {\n    if (mark.type.name === 'link') {\n      return (mark.attrs as LinkAttrs).href\n    }\n  }\n}\n\nconst editor = useEditor<BasicExtension>()\nconst items = useEditorDerivedValue(getInlineMenuItems)\n\nconst linkMenuOpen = ref(false)\nfunction toggleLinkMenuOpen() {\n  linkMenuOpen.value = !linkMenuOpen.value\n}\n\nfunction handleLinkUpdate(href?: string) {\n  if (href) {\n    editor.value.commands.addLink({ href })\n  } else {\n    editor.value.commands.removeLink()\n  }\n\n  linkMenuOpen.value = false\n  editor.value.focus()\n}\n</script>\n\n<template>\n  <InlinePopoverRoot\n    @open-change=\"(event) => {\n      if (!event.detail) linkMenuOpen = false\n    }\"\n  >\n    <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <InlinePopoverPopup\n        data-testid=\"inline-menu-main\"\n        class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-lg p-1\"\n      >\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\"></div>\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\"></div>\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\"></div>\n        </Button>\n        <Button\n          v-if=\"items.strike\"\n          :pressed=\"items.strike.isActive\"\n          :disabled=\"!items.strike.canExec\"\n          tooltip=\"Strikethrough\"\n          @click=\"items.strike.command\"\n        >\n          <div class=\"i-lucide-strikethrough size-5 block\"></div>\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\"></div>\n        </Button>\n        <Button\n          v-if=\"items.link?.canExec && items.link\"\n          :pressed=\"items.link.isActive\"\n          tooltip=\"Link\"\n          @click=\"() => {\n            items.link!.command()\n            toggleLinkMenuOpen()\n          }\"\n        >\n          <div class=\"i-lucide-link size-5 block\"></div>\n        </Button>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n\n  <InlinePopoverRoot\n    v-if=\"items.link\"\n    :default-open=\"false\"\n    :open=\"linkMenuOpen\"\n    @open-change=\"(event) => {\n      linkMenuOpen = event.detail\n    }\"\n  >\n    <InlinePopoverPositioner placement=\"bottom\" class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <InlinePopoverPopup\n        data-testid=\"inline-menu-link\"\n        class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch\"\n      >\n        <form\n          v-if=\"linkMenuOpen\"\n          @submit.prevent=\"(event) => {\n            const target = event.target as HTMLFormElement | null\n            const href = target?.querySelector('input')?.value?.trim()\n            handleLinkUpdate(href)\n          }\"\n        >\n          <input\n            placeholder=\"Paste the link...\"\n            :value=\"items.link.currentLink || ''\"\n            class=\"flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          >\n        </form>\n        <button\n          v-if=\"items.link.isActive\"\n          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-9 px-3\"\n          @click=\"() => handleLinkUpdate()\"\n          @mousedown.prevent\n        >\n          Remove link\n        </button>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
     }
   ],
   "meta": {

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

@@ -9,7 +9,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -22,7 +22,7 @@
       "path": "registry/src/vue/ui/search/search.vue",
       "type": "registry:component",
       "target": "components/editor/ui/search/search.vue",
-      "content": "<script setup lang=\"ts\">\nimport { defineSearchQuery, type SearchCommandsExtension } from 'prosekit/extensions/search'\nimport { useEditor, useExtension } from 'prosekit/vue'\nimport { computed, ref } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{ onClose?: () => void }>()\n\nconst showReplace = ref(false)\nconst searchText = ref('')\nconst replaceText = ref('')\n\nconst editor = useEditor<SearchCommandsExtension>()\n\nconst extension = computed(() => {\n  if (!searchText.value) {\n    return null\n  }\n  return defineSearchQuery({\n    search: searchText.value,\n    replace: replaceText.value,\n  })\n})\n\nuseExtension(extension)\n\nfunction toggleReplace() {\n  showReplace.value = !showReplace.value\n}\n\nfunction isPlainEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && !event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n\nfunction isShiftEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n\nfunction handleSearchKeyDown(event: KeyboardEvent) {\n  if (isPlainEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.findNext()\n  } else if (isShiftEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.findPrev()\n  }\n}\n\nfunction handleReplaceKeyDown(event: KeyboardEvent) {\n  if (isPlainEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.replaceNext()\n  } else if (isShiftEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.replaceAll()\n  }\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 grid grid-cols-[min-content_1fr_min-content] gap-2 p-2\">\n    <Button tooltip=\"Toggle Replace\" @click=\"toggleReplace\">\n      <span\n        :data-rotate=\"showReplace ? '' : undefined\"\n        class=\"i-lucide-chevron-right size-5 block transition-transform data-rotate:rotate-90\"\n      />\n    </Button>\n    <input\n      v-model=\"searchText\"\n      placeholder=\"Search\"\n      type=\"text\"\n      class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n      @keydown=\"handleSearchKeyDown\"\n    >\n    <div class=\"flex items-center justify-between gap-1\">\n      <Button\n        tooltip=\"Previous (Shift Enter)\"\n        @click=\"editor.commands.findPrev\"\n      >\n        <span class=\"i-lucide-arrow-left size-5 block\" />\n      </Button>\n      <Button\n        tooltip=\"Next (Enter)\"\n        @click=\"editor.commands.findNext\"\n      >\n        <span class=\"i-lucide-arrow-right size-5 block\" />\n      </Button>\n      <Button tooltip=\"Close\" @click=\"props.onClose\">\n        <span class=\"i-lucide-x size-5 block\" />\n      </Button>\n    </div>\n    <template v-if=\"showReplace\">\n      <input\n        v-model=\"replaceText\"\n        placeholder=\"Replace\"\n        type=\"text\"\n        class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n        @keydown=\"handleReplaceKeyDown\"\n      >\n      <div class=\"flex items-center justify-between gap-1\">\n        <Button\n          tooltip=\"Replace (Enter)\"\n          @click=\"editor.commands.replaceNext\"\n        >\n          Replace\n        </Button>\n        <Button\n          tooltip=\"Replace All (Shift Enter)\"\n          @click=\"editor.commands.replaceAll\"\n        >\n          All\n        </Button>\n      </div>\n    </template>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { defineSearchQuery, type SearchCommandsExtension } from 'prosekit/extensions/search'\nimport { useEditor, useExtension } from 'prosekit/vue'\nimport { computed, ref } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{ onClose?: () => void }>()\n\nconst showReplace = ref(false)\nconst searchText = ref('')\nconst replaceText = ref('')\n\nconst editor = useEditor<SearchCommandsExtension>()\n\nconst extension = computed(() => {\n  if (!searchText.value) {\n    return null\n  }\n  return defineSearchQuery({\n    search: searchText.value,\n    replace: replaceText.value,\n  })\n})\n\nuseExtension(extension)\n\nfunction toggleReplace() {\n  showReplace.value = !showReplace.value\n}\n\nfunction isPlainEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && !event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n\nfunction isShiftEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n\nfunction handleSearchKeyDown(event: KeyboardEvent) {\n  if (isPlainEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.findNext()\n  } else if (isShiftEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.findPrev()\n  }\n}\n\nfunction handleReplaceKeyDown(event: KeyboardEvent) {\n  if (isPlainEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.replaceNext()\n  } else if (isShiftEnter(event)) {\n    event.preventDefault()\n    editor.value.commands.replaceAll()\n  }\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 grid grid-cols-[min-content_1fr_min-content] gap-2 p-2\">\n    <Button tooltip=\"Toggle Replace\" @click=\"toggleReplace\">\n      <span\n        :data-rotate=\"showReplace ? '' : undefined\"\n        class=\"i-lucide-chevron-right size-5 block transition-transform data-rotate:rotate-90\"\n      />\n    </Button>\n    <input\n      v-model=\"searchText\"\n      placeholder=\"Search\"\n      type=\"text\"\n      class=\"flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n      @keydown=\"handleSearchKeyDown\"\n    >\n    <div class=\"flex items-center justify-between gap-1\">\n      <Button\n        tooltip=\"Previous (Shift Enter)\"\n        @click=\"editor.commands.findPrev\"\n      >\n        <span class=\"i-lucide-arrow-left size-5 block\" />\n      </Button>\n      <Button\n        tooltip=\"Next (Enter)\"\n        @click=\"editor.commands.findNext\"\n      >\n        <span class=\"i-lucide-arrow-right size-5 block\" />\n      </Button>\n      <Button tooltip=\"Close\" @click=\"props.onClose\">\n        <span class=\"i-lucide-x size-5 block\" />\n      </Button>\n    </div>\n    <template v-if=\"showReplace\">\n      <input\n        v-model=\"replaceText\"\n        placeholder=\"Replace\"\n        type=\"text\"\n        class=\"flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n        @keydown=\"handleReplaceKeyDown\"\n      >\n      <div class=\"flex items-center justify-between gap-1\">\n        <Button\n          tooltip=\"Replace (Enter)\"\n          @click=\"editor.commands.replaceNext\"\n        >\n          Replace\n        </Button>\n        <Button\n          tooltip=\"Replace All (Shift Enter)\"\n          @click=\"editor.commands.replaceAll\"\n        >\n          All\n        </Button>\n      </div>\n    </template>\n  </div>\n</template>\n"
     }
   ],
   "meta": {

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

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -18,19 +18,19 @@
       "path": "registry/src/vue/ui/slash-menu/slash-menu-empty.vue",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/slash-menu-empty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AutocompleteEmpty } from 'prosekit/vue/autocomplete'\n</script>\n\n<template>\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    <span>No results</span>\n  </AutocompleteEmpty>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AutocompleteEmpty } from 'prosekit/vue/autocomplete'\n</script>\n\n<template>\n  <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-md px-3 py-1.5 text-sm box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n    <span>No results</span>\n  </AutocompleteEmpty>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/slash-menu/slash-menu-item.vue",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/slash-menu-item.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AutocompleteItem } from 'prosekit/vue/autocomplete'\n\nconst props = defineProps<{\n  label: string\n  kbd?: string\n  onSelect: () => void\n}>()\n</script>\n\n<template>\n  <AutocompleteItem 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\" @select=\"props.onSelect\">\n    <span>{{ props.label }}</span>\n    <kbd v-if=\"props.kbd\" class=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{{ props.kbd }}</kbd>\n  </AutocompleteItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AutocompleteItem } from 'prosekit/vue/autocomplete'\n\nconst props = defineProps<{\n  label: string\n  kbd?: string\n  onSelect: () => void\n}>()\n</script>\n\n<template>\n  <AutocompleteItem class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-md px-3 py-1.5 text-sm box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\" @select=\"props.onSelect\">\n    <span>{{ props.label }}</span>\n    <kbd v-if=\"props.kbd\" class=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{{ props.kbd }}</kbd>\n  </AutocompleteItem>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/slash-menu/slash-menu.vue",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/slash-menu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/vue'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/vue/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty.vue'\nimport SlashMenuItem from './slash-menu-item.vue'\n\nconst editor = useEditor<BasicExtension>()\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n</script>\n\n<template>\n  <AutocompleteRoot :regex=\"regex\">\n    <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n        <SlashMenuItem\n          label=\"Text\"\n          @select=\"() => editor.commands.setParagraph()\"\n        />\n\n        <SlashMenuItem\n          label=\"Heading 1\"\n          kbd=\"#\"\n          @select=\"() => editor.commands.setHeading({ level: 1 })\"\n        />\n\n        <SlashMenuItem\n          label=\"Heading 2\"\n          kbd=\"##\"\n          @select=\"() => editor.commands.setHeading({ level: 2 })\"\n        />\n\n        <SlashMenuItem\n          label=\"Heading 3\"\n          kbd=\"###\"\n          @select=\"() => editor.commands.setHeading({ level: 3 })\"\n        />\n\n        <SlashMenuItem\n          label=\"Bullet list\"\n          kbd=\"-\"\n          @select=\"() => editor.commands.wrapInList({ kind: 'bullet' })\"\n        />\n\n        <SlashMenuItem\n          label=\"Ordered list\"\n          kbd=\"1.\"\n          @select=\"() => editor.commands.wrapInList({ kind: 'ordered' })\"\n        />\n\n        <SlashMenuItem\n          label=\"Task list\"\n          kbd=\"[]\"\n          @select=\"() => editor.commands.wrapInList({ kind: 'task' })\"\n        />\n\n        <SlashMenuItem\n          label=\"Toggle list\"\n          kbd=\">>\"\n          @select=\"() => editor.commands.wrapInList({ kind: 'toggle' })\"\n        />\n\n        <SlashMenuItem\n          label=\"Quote\"\n          kbd=\">\"\n          @select=\"() => editor.commands.setBlockquote()\"\n        />\n\n        <SlashMenuItem\n          label=\"Table\"\n          @select=\"() => editor.commands.insertTable({ row: 3, col: 3 })\"\n        />\n\n        <SlashMenuItem\n          label=\"Divider\"\n          kbd=\"---\"\n          @select=\"() => editor.commands.insertHorizontalRule()\"\n        />\n\n        <SlashMenuItem\n          label=\"Code\"\n          kbd=\"```\"\n          @select=\"() => editor.commands.setCodeBlock()\"\n        />\n\n        <SlashMenuEmpty />\n      </AutocompletePopup>\n    </AutocompletePositioner>\n  </AutocompleteRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/vue'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/vue/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty.vue'\nimport SlashMenuItem from './slash-menu-item.vue'\n\nconst editor = useEditor<BasicExtension>()\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n</script>\n\n<template>\n  <AutocompleteRoot :regex=\"regex\">\n    <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <AutocompletePopup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col relative max-h-100 min-h-0 min-w-60 select-none overflow-hidden whitespace-nowrap\">\n        <div class=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\n          <SlashMenuItem\n            label=\"Text\"\n            @select=\"() => editor.commands.setParagraph()\"\n          />\n\n          <SlashMenuItem\n            label=\"Heading 1\"\n            kbd=\"#\"\n            @select=\"() => editor.commands.setHeading({ level: 1 })\"\n          />\n\n          <SlashMenuItem\n            label=\"Heading 2\"\n            kbd=\"##\"\n            @select=\"() => editor.commands.setHeading({ level: 2 })\"\n          />\n\n          <SlashMenuItem\n            label=\"Heading 3\"\n            kbd=\"###\"\n            @select=\"() => editor.commands.setHeading({ level: 3 })\"\n          />\n\n          <SlashMenuItem\n            label=\"Bullet list\"\n            kbd=\"-\"\n            @select=\"() => editor.commands.wrapInList({ kind: 'bullet' })\"\n          />\n\n          <SlashMenuItem\n            label=\"Ordered list\"\n            kbd=\"1.\"\n            @select=\"() => editor.commands.wrapInList({ kind: 'ordered' })\"\n          />\n\n          <SlashMenuItem\n            label=\"Task list\"\n            kbd=\"[]\"\n            @select=\"() => editor.commands.wrapInList({ kind: 'task' })\"\n          />\n\n          <SlashMenuItem\n            label=\"Toggle list\"\n            kbd=\">>\"\n            @select=\"() => editor.commands.wrapInList({ kind: 'toggle' })\"\n          />\n\n          <SlashMenuItem\n            label=\"Quote\"\n            kbd=\">\"\n            @select=\"() => editor.commands.setBlockquote()\"\n          />\n\n          <SlashMenuItem\n            label=\"Table\"\n            @select=\"() => editor.commands.insertTable({ row: 3, col: 3 })\"\n          />\n\n          <SlashMenuItem\n            label=\"Divider\"\n            kbd=\"---\"\n            @select=\"() => editor.commands.insertHorizontalRule()\"\n          />\n\n          <SlashMenuItem\n            label=\"Code\"\n            kbd=\"```\"\n            @select=\"() => editor.commands.setCodeBlock()\"\n          />\n\n          <SlashMenuEmpty />\n        </div>\n      </AutocompletePopup>\n    </AutocompletePositioner>\n  </AutocompleteRoot>\n</template>\n"
     }
   ],
   "meta": {

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

@@ -7,7 +7,7 @@
   "dependencies": [
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -20,7 +20,7 @@
       "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n            <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n    >\n      <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n            <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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"
+      "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\n        <TableHandleColumnMenuRoot>\n          <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-[canvas] 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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n            <MenuPopup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n    >\n      <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\n        <TableHandleRowMenuRoot>\n          <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-[canvas] 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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n            <MenuPopup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] 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": {