snapshot of https://github.com/ueberdosis/tiptap.git (main, 2026-09-15; blobs > 131072B omitted)

packages/extension-drag-handle-vue/README.md

@@ -0,0 +1,18 @@
+# @tiptap/extension-drag-handle-vue
+
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-drag-handle-vue.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-drag-handle-vue)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-drag-handle-vue.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-drag-handle-vue.svg)](https://www.npmjs.com/package/@tiptap/extension-drag-handle-vue)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
+
+## Official Documentation
+
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

packages/extension-drag-handle-vue/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tiptap/extension-drag-handle-vue",
+  "version": "3.30.3",
+  "description": "drag handle extension for tiptap with vue",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "homepage": "https://tiptap.dev",
+  "bugs": {
+    "url": "https://github.com/ueberdosis/tiptap/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-drag-handle-vue"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vp pack"
+  },
+  "devDependencies": {
+    "@tiptap/extension-drag-handle": "workspace:^",
+    "@tiptap/pm": "workspace:^",
+    "@tiptap/vue": "workspace:^",
+    "vue": "^3.0.0"
+  },
+  "peerDependencies": {
+    "@tiptap/extension-drag-handle": "workspace:*",
+    "@tiptap/pm": "workspace:*",
+    "@tiptap/vue": "workspace:*",
+    "vue": "^3.0.0"
+  }
+}

packages/extension-drag-handle-vue/src/DragHandle.ts

@@ -0,0 +1,174 @@
+import type { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle'
+import {
+  defaultComputePositionConfig,
+  DragHandlePlugin,
+  dragHandlePluginDefaultKey,
+  normalizeNestedOptions,
+} from '@tiptap/extension-drag-handle'
+import type { Node as PMNode } from '@tiptap/pm/model'
+import type { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/vue'
+import type { PropType } from 'vue'
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type DragHandleProps = Omit<
+  Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>,
+  'element'
+> & {
+  class?: string
+  onNodeChange?: (data: { node: PMNode | null; editor: Editor; pos: number }) => void
+  /**
+   * Enable drag handles for nested content (list items, blockquotes, etc.).
+   *
+   * When enabled, the drag handle will appear for nested blocks, not just
+   * top-level blocks. A rule-based scoring system determines which node
+   * to target based on cursor position and configured rules.
+   *
+   * @default false
+   */
+  nested?: boolean | NestedOptions
+}
+
+export const DragHandle = defineComponent({
+  name: 'DragHandleVue',
+
+  props: {
+    pluginKey: {
+      type: [String, Object] as PropType<PluginKey | string>,
+      default: dragHandlePluginDefaultKey,
+    },
+
+    editor: {
+      type: Object as PropType<DragHandleProps['editor']>,
+      required: true,
+    },
+
+    computePositionConfig: {
+      type: Object as PropType<DragHandleProps['computePositionConfig']>,
+      default: () => ({}),
+    },
+
+    onNodeChange: {
+      type: Function as PropType<DragHandleProps['onNodeChange']>,
+      default: null,
+    },
+
+    onElementDragStart: {
+      type: Function as PropType<DragHandleProps['onElementDragStart']>,
+      default: null,
+    },
+
+    onElementDragEnd: {
+      type: Function as PropType<DragHandleProps['onElementDragEnd']>,
+      default: null,
+    },
+
+    class: {
+      type: String as PropType<DragHandleProps['class']>,
+      default: 'drag-handle',
+    },
+
+    nested: {
+      type: [Boolean, Object] as PropType<DragHandleProps['nested']>,
+      default: false,
+    },
+  },
+
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)
+
+    const initPlugin = () => {
+      const {
+        editor,
+        pluginKey,
+        onNodeChange,
+        onElementDragEnd,
+        onElementDragStart,
+        computePositionConfig,
+        nested,
+      } = props
+
+      if (!root.value) {
+        return
+      }
+      if (!props.editor || props.editor.isDestroyed) {
+        return
+      }
+
+      // Set initial visibility to hidden (let the plugin control it from here)
+      root.value.style.visibility = 'hidden'
+
+      const nestedOptions = normalizeNestedOptions(nested)
+
+      const init = DragHandlePlugin({
+        editor,
+        element: root.value,
+        pluginKey,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange,
+        onElementDragStart,
+        onElementDragEnd,
+        nestedOptions,
+      })
+
+      pluginHandle.value = init
+      props.editor.registerPlugin(init.plugin)
+    }
+
+    const destroyPlugin = () => {
+      if (!pluginHandle.value) {
+        return
+      }
+
+      if (props.editor && !props.editor.isDestroyed) {
+        props.editor.unregisterPlugin(props.pluginKey)
+      }
+
+      pluginHandle.value.unbind?.()
+      pluginHandle.value = null
+    }
+
+    onMounted(async () => {
+      await nextTick()
+      initPlugin()
+    })
+
+    // Reinitialize plugin when nested option changes
+    watch(
+      () => props.nested,
+      () => {
+        destroyPlugin()
+        initPlugin()
+      },
+      { deep: true },
+    )
+
+    onBeforeUnmount(() => {
+      destroyPlugin()
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          class: props.class,
+          style: { position: 'absolute' },
+          'data-dragging': 'false',
+        },
+        slots.default?.(),
+      )
+  },
+})

packages/extension-drag-handle-vue/src/index.ts

@@ -0,0 +1,5 @@
+import { DragHandle } from './DragHandle.js'
+
+export * from './DragHandle.js'
+
+export default DragHandle

packages/extension-drag-handle-vue/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite-plus'
+import { basePackConfig } from '../../pack.config.mjs'
+
+export default defineConfig({
+  pack: {
+    entry: ['src/index.ts'],
+    ...basePackConfig(),
+  },
+})