@tiptap/extension-drag-handle-vue-3 3.16.0 → 3.17.0

package/dist/index.cjs

@@ -58,20 +58,24 @@ var DragHandle = (0, import_vue.defineComponent)({
     class: {
       type: String,
       default: "drag-handle"
+    },
+    nested: {
+      type: [Boolean, Object],
+      default: false
     }
   },
   setup(props, { slots }) {
     const root = (0, import_vue.ref)(null);
     const pluginHandle = (0, import_vue.shallowRef)(null);
-    (0, import_vue.onMounted)(async () => {
-      await (0, import_vue.nextTick)();
-      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props;
+    const initPlugin = () => {
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig, nested } = props;
       if (!root.value) {
         return;
       }
       if (!props.editor || props.editor.isDestroyed) {
         return;
       }
+      const nestedOptions = (0, import_extension_drag_handle.normalizeNestedOptions)(nested);
       const init = (0, import_extension_drag_handle.DragHandlePlugin)({
         editor,
         element: root.value,
@@ -79,12 +83,13 @@ var DragHandle = (0, import_vue.defineComponent)({
         computePositionConfig: { ...import_extension_drag_handle.defaultComputePositionConfig, ...computePositionConfig },
         onNodeChange,
         onElementDragStart,
-        onElementDragEnd
+        onElementDragEnd,
+        nestedOptions
       });
       pluginHandle.value = init;
       props.editor.registerPlugin(init.plugin);
-    });
-    (0, import_vue.onBeforeUnmount)(() => {
+    };
+    const destroyPlugin = () => {
       var _a, _b;
       if (!pluginHandle.value) {
         return;
@@ -94,6 +99,21 @@ var DragHandle = (0, import_vue.defineComponent)({
       }
       (_b = (_a = pluginHandle.value).unbind) == null ? void 0 : _b.call(_a);
       pluginHandle.value = null;
+    };
+    (0, import_vue.onMounted)(async () => {
+      await (0, import_vue.nextTick)();
+      initPlugin();
+    });
+    (0, import_vue.watch)(
+      () => props.nested,
+      () => {
+        destroyPlugin();
+        initPlugin();
+      },
+      { deep: true }
+    );
+    (0, import_vue.onBeforeUnmount)(() => {
+      destroyPlugin();
     });
     return () => {
       var _a;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/DragHandle.ts"],"sourcesContent":["import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n","import type { DragHandlePluginProps } from '@tiptap/extension-drag-handle'\nimport {\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  class?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n}\n\nexport const DragHandle = defineComponent({\n  name: 'DragHandleVue',\n\n  props: {\n    pluginKey: {\n      type: [String, Object] as PropType<PluginKey | string>,\n      default: dragHandlePluginDefaultKey,\n    },\n\n    editor: {\n      type: Object as PropType<DragHandleProps['editor']>,\n      required: true,\n    },\n\n    computePositionConfig: {\n      type: Object as PropType<DragHandleProps['computePositionConfig']>,\n      default: () => ({}),\n    },\n\n    onNodeChange: {\n      type: Function as PropType<DragHandleProps['onNodeChange']>,\n      default: null,\n    },\n\n    onElementDragStart: {\n      type: Function as PropType<DragHandleProps['onElementDragStart']>,\n      default: null,\n    },\n\n    onElementDragEnd: {\n      type: Function as PropType<DragHandleProps['onElementDragEnd']>,\n      default: null,\n    },\n\n    class: {\n      type: String as PropType<DragHandleProps['class']>,\n      default: 'drag-handle',\n    },\n  },\n\n  setup(props, { slots }) {\n    const root = ref<HTMLElement | null>(null)\n    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)\n\n    onMounted(async () => {\n      await nextTick()\n\n      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props\n\n      if (!root.value) {\n        return\n      }\n      if (!props.editor || props.editor.isDestroyed) {\n        return\n      }\n\n      const init = DragHandlePlugin({\n        editor,\n        element: root.value,\n        pluginKey,\n        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n        onNodeChange,\n        onElementDragStart,\n        onElementDragEnd,\n      })\n\n      pluginHandle.value = init\n      props.editor.registerPlugin(init.plugin)\n    })\n\n    onBeforeUnmount(() => {\n      if (!pluginHandle.value) {\n        return\n      }\n\n      if (props.editor && !props.editor.isDestroyed) {\n        props.editor.unregisterPlugin(props.pluginKey)\n      }\n\n      pluginHandle.value.unbind?.()\n      pluginHandle.value = null\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n          'data-dragging': 'false',\n        },\n        slots.default?.(),\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mCAIO;AAKP,iBAA0F;AASnF,IAAM,iBAAa,4BAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,WAAO,gBAAwB,IAAI;AACzC,UAAM,mBAAe,uBAA0D,IAAI;AAEnF,8BAAU,YAAY;AACpB,gBAAM,qBAAS;AAEf,YAAM,EAAE,QAAQ,WAAW,cAAc,kBAAkB,oBAAoB,sBAAsB,IAAI;AAEzG,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AACA,UAAI,CAAC,MAAM,UAAU,MAAM,OAAO,aAAa;AAC7C;AAAA,MACF;AAEA,YAAM,WAAO,+CAAiB;AAAA,QAC5B;AAAA,QACA,SAAS,KAAK;AAAA,QACd;AAAA,QACA,uBAAuB,EAAE,GAAG,2DAA8B,GAAG,sBAAsB;AAAA,QACnF;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,mBAAa,QAAQ;AACrB,YAAM,OAAO,eAAe,KAAK,MAAM;AAAA,IACzC,CAAC;AAED,oCAAgB,MAAM;AAzF1B;AA0FM,UAAI,CAAC,aAAa,OAAO;AACvB;AAAA,MACF;AAEA,UAAI,MAAM,UAAU,CAAC,MAAM,OAAO,aAAa;AAC7C,cAAM,OAAO,iBAAiB,MAAM,SAAS;AAAA,MAC/C;AAEA,+BAAa,OAAM,WAAnB;AACA,mBAAa,QAAQ;AAAA,IACvB,CAAC;AAED,WAAO,MAAG;AAtGd;AAuGM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,UACpD,iBAAiB;AAAA,QACnB;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AD9GD,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/DragHandle.ts"],"sourcesContent":["import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n","import type { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle'\nimport {\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>, 'element'> & {\n  class?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n  /**\n   * Enable drag handles for nested content (list items, blockquotes, etc.).\n   *\n   * When enabled, the drag handle will appear for nested blocks, not just\n   * top-level blocks. A rule-based scoring system determines which node\n   * to target based on cursor position and configured rules.\n   *\n   * @default false\n   */\n  nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = defineComponent({\n  name: 'DragHandleVue',\n\n  props: {\n    pluginKey: {\n      type: [String, Object] as PropType<PluginKey | string>,\n      default: dragHandlePluginDefaultKey,\n    },\n\n    editor: {\n      type: Object as PropType<DragHandleProps['editor']>,\n      required: true,\n    },\n\n    computePositionConfig: {\n      type: Object as PropType<DragHandleProps['computePositionConfig']>,\n      default: () => ({}),\n    },\n\n    onNodeChange: {\n      type: Function as PropType<DragHandleProps['onNodeChange']>,\n      default: null,\n    },\n\n    onElementDragStart: {\n      type: Function as PropType<DragHandleProps['onElementDragStart']>,\n      default: null,\n    },\n\n    onElementDragEnd: {\n      type: Function as PropType<DragHandleProps['onElementDragEnd']>,\n      default: null,\n    },\n\n    class: {\n      type: String as PropType<DragHandleProps['class']>,\n      default: 'drag-handle',\n    },\n\n    nested: {\n      type: [Boolean, Object] as PropType<DragHandleProps['nested']>,\n      default: false,\n    },\n  },\n\n  setup(props, { slots }) {\n    const root = ref<HTMLElement | null>(null)\n    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)\n\n    const initPlugin = () => {\n      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig, nested } =\n        props\n\n      if (!root.value) {\n        return\n      }\n      if (!props.editor || props.editor.isDestroyed) {\n        return\n      }\n\n      const nestedOptions = normalizeNestedOptions(nested)\n\n      const init = DragHandlePlugin({\n        editor,\n        element: root.value,\n        pluginKey,\n        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n        onNodeChange,\n        onElementDragStart,\n        onElementDragEnd,\n        nestedOptions,\n      })\n\n      pluginHandle.value = init\n      props.editor.registerPlugin(init.plugin)\n    }\n\n    const destroyPlugin = () => {\n      if (!pluginHandle.value) {\n        return\n      }\n\n      if (props.editor && !props.editor.isDestroyed) {\n        props.editor.unregisterPlugin(props.pluginKey)\n      }\n\n      pluginHandle.value.unbind?.()\n      pluginHandle.value = null\n    }\n\n    onMounted(async () => {\n      await nextTick()\n      initPlugin()\n    })\n\n    // Reinitialize plugin when nested option changes\n    watch(\n      () => props.nested,\n      () => {\n        destroyPlugin()\n        initPlugin()\n      },\n      { deep: true },\n    )\n\n    onBeforeUnmount(() => {\n      destroyPlugin()\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n          'data-dragging': 'false',\n        },\n        slots.default?.(),\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mCAKO;AAKP,iBAAiG;AAmB1F,IAAM,iBAAa,4BAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,WAAO,gBAAwB,IAAI;AACzC,UAAM,mBAAe,uBAA0D,IAAI;AAEnF,UAAM,aAAa,MAAM;AACvB,YAAM,EAAE,QAAQ,WAAW,cAAc,kBAAkB,oBAAoB,uBAAuB,OAAO,IAC3G;AAEF,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AACA,UAAI,CAAC,MAAM,UAAU,MAAM,OAAO,aAAa;AAC7C;AAAA,MACF;AAEA,YAAM,oBAAgB,qDAAuB,MAAM;AAEnD,YAAM,WAAO,+CAAiB;AAAA,QAC5B;AAAA,QACA,SAAS,KAAK;AAAA,QACd;AAAA,QACA,uBAAuB,EAAE,GAAG,2DAA8B,GAAG,sBAAsB;AAAA,QACnF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,mBAAa,QAAQ;AACrB,YAAM,OAAO,eAAe,KAAK,MAAM;AAAA,IACzC;AAEA,UAAM,gBAAgB,MAAM;AA3GhC;AA4GM,UAAI,CAAC,aAAa,OAAO;AACvB;AAAA,MACF;AAEA,UAAI,MAAM,UAAU,CAAC,MAAM,OAAO,aAAa;AAC7C,cAAM,OAAO,iBAAiB,MAAM,SAAS;AAAA,MAC/C;AAEA,+BAAa,OAAM,WAAnB;AACA,mBAAa,QAAQ;AAAA,IACvB;AAEA,8BAAU,YAAY;AACpB,gBAAM,qBAAS;AACf,iBAAW;AAAA,IACb,CAAC;AAGD;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,MAAM;AACJ,sBAAc;AACd,mBAAW;AAAA,MACb;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,oCAAgB,MAAM;AACpB,oBAAc;AAAA,IAChB,CAAC;AAED,WAAO,MAAG;AA3Id;AA4IM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,UACpD,iBAAiB;AAAA,QACnB;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;ADnJD,IAAO,gBAAQ;","names":[]}

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import { NodeViewConstructor, NodeView, MarkViewConstructor, MarkView, EditorPro
 import { Transform, MapResult } from '@tiptap/pm/transform';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+import { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle';
 import { Editor as Editor$1 } from '@tiptap/vue-3';
 
 type StringKeyOf<T> = Extract<keyof T, string>;
@@ -2925,13 +2925,23 @@ interface Storage {
 }
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>, 'element'> & {
     class?: string;
     onNodeChange?: (data: {
         node: Node$1 | null;
         editor: Editor$1;
         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;
 };
 declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     pluginKey: {
@@ -2962,6 +2972,10 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
+    nested: {
+        type: PropType<DragHandleProps["nested"]>;
+        default: boolean;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -2993,6 +3007,10 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
+    nested: {
+        type: PropType<DragHandleProps["nested"]>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     pluginKey: string | PluginKey<any>;
     onNodeChange: (((data: {
@@ -3013,6 +3031,7 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         platform?: _floating_ui_dom.Platform | undefined;
     } | undefined;
     class: string | undefined;
+    nested: boolean | NestedOptions | undefined;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { NodeViewConstructor, NodeView, MarkViewConstructor, MarkView, EditorPro
 import { Transform, MapResult } from '@tiptap/pm/transform';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+import { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle';
 import { Editor as Editor$1 } from '@tiptap/vue-3';
 
 type StringKeyOf<T> = Extract<keyof T, string>;
@@ -2925,13 +2925,23 @@ interface Storage {
 }
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>, 'element'> & {
     class?: string;
     onNodeChange?: (data: {
         node: Node$1 | null;
         editor: Editor$1;
         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;
 };
 declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     pluginKey: {
@@ -2962,6 +2972,10 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
+    nested: {
+        type: PropType<DragHandleProps["nested"]>;
+        default: boolean;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -2993,6 +3007,10 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
+    nested: {
+        type: PropType<DragHandleProps["nested"]>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     pluginKey: string | PluginKey<any>;
     onNodeChange: (((data: {
@@ -3013,6 +3031,7 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         platform?: _floating_ui_dom.Platform | undefined;
     } | undefined;
     class: string | undefined;
+    nested: boolean | NestedOptions | undefined;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.js

@@ -2,9 +2,10 @@
 import {
   defaultComputePositionConfig,
   DragHandlePlugin,
-  dragHandlePluginDefaultKey
+  dragHandlePluginDefaultKey,
+  normalizeNestedOptions
 } from "@tiptap/extension-drag-handle";
-import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
 var DragHandle = defineComponent({
   name: "DragHandleVue",
   props: {
@@ -35,20 +36,24 @@ var DragHandle = defineComponent({
     class: {
       type: String,
       default: "drag-handle"
+    },
+    nested: {
+      type: [Boolean, Object],
+      default: false
     }
   },
   setup(props, { slots }) {
     const root = ref(null);
     const pluginHandle = shallowRef(null);
-    onMounted(async () => {
-      await nextTick();
-      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props;
+    const initPlugin = () => {
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig, nested } = props;
       if (!root.value) {
         return;
       }
       if (!props.editor || props.editor.isDestroyed) {
         return;
       }
+      const nestedOptions = normalizeNestedOptions(nested);
       const init = DragHandlePlugin({
         editor,
         element: root.value,
@@ -56,12 +61,13 @@ var DragHandle = defineComponent({
         computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
         onNodeChange,
         onElementDragStart,
-        onElementDragEnd
+        onElementDragEnd,
+        nestedOptions
       });
       pluginHandle.value = init;
       props.editor.registerPlugin(init.plugin);
-    });
-    onBeforeUnmount(() => {
+    };
+    const destroyPlugin = () => {
       var _a, _b;
       if (!pluginHandle.value) {
         return;
@@ -71,6 +77,21 @@ var DragHandle = defineComponent({
       }
       (_b = (_a = pluginHandle.value).unbind) == null ? void 0 : _b.call(_a);
       pluginHandle.value = null;
+    };
+    onMounted(async () => {
+      await nextTick();
+      initPlugin();
+    });
+    watch(
+      () => props.nested,
+      () => {
+        destroyPlugin();
+        initPlugin();
+      },
+      { deep: true }
+    );
+    onBeforeUnmount(() => {
+      destroyPlugin();
     });
     return () => {
       var _a;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DragHandle.ts","../src/index.ts"],"sourcesContent":["import type { DragHandlePluginProps } from '@tiptap/extension-drag-handle'\nimport {\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  class?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n}\n\nexport const DragHandle = defineComponent({\n  name: 'DragHandleVue',\n\n  props: {\n    pluginKey: {\n      type: [String, Object] as PropType<PluginKey | string>,\n      default: dragHandlePluginDefaultKey,\n    },\n\n    editor: {\n      type: Object as PropType<DragHandleProps['editor']>,\n      required: true,\n    },\n\n    computePositionConfig: {\n      type: Object as PropType<DragHandleProps['computePositionConfig']>,\n      default: () => ({}),\n    },\n\n    onNodeChange: {\n      type: Function as PropType<DragHandleProps['onNodeChange']>,\n      default: null,\n    },\n\n    onElementDragStart: {\n      type: Function as PropType<DragHandleProps['onElementDragStart']>,\n      default: null,\n    },\n\n    onElementDragEnd: {\n      type: Function as PropType<DragHandleProps['onElementDragEnd']>,\n      default: null,\n    },\n\n    class: {\n      type: String as PropType<DragHandleProps['class']>,\n      default: 'drag-handle',\n    },\n  },\n\n  setup(props, { slots }) {\n    const root = ref<HTMLElement | null>(null)\n    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)\n\n    onMounted(async () => {\n      await nextTick()\n\n      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props\n\n      if (!root.value) {\n        return\n      }\n      if (!props.editor || props.editor.isDestroyed) {\n        return\n      }\n\n      const init = DragHandlePlugin({\n        editor,\n        element: root.value,\n        pluginKey,\n        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n        onNodeChange,\n        onElementDragStart,\n        onElementDragEnd,\n      })\n\n      pluginHandle.value = init\n      props.editor.registerPlugin(init.plugin)\n    })\n\n    onBeforeUnmount(() => {\n      if (!pluginHandle.value) {\n        return\n      }\n\n      if (props.editor && !props.editor.isDestroyed) {\n        props.editor.unregisterPlugin(props.pluginKey)\n      }\n\n      pluginHandle.value.unbind?.()\n      pluginHandle.value = null\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n          'data-dragging': 'false',\n        },\n        slots.default?.(),\n      )\n  },\n})\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,iBAAiB,GAAG,UAAU,iBAAiB,WAAW,KAAK,kBAAkB;AASnF,IAAM,aAAa,gBAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,OAAO,IAAwB,IAAI;AACzC,UAAM,eAAe,WAA0D,IAAI;AAEnF,cAAU,YAAY;AACpB,YAAM,SAAS;AAEf,YAAM,EAAE,QAAQ,WAAW,cAAc,kBAAkB,oBAAoB,sBAAsB,IAAI;AAEzG,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AACA,UAAI,CAAC,MAAM,UAAU,MAAM,OAAO,aAAa;AAC7C;AAAA,MACF;AAEA,YAAM,OAAO,iBAAiB;AAAA,QAC5B;AAAA,QACA,SAAS,KAAK;AAAA,QACd;AAAA,QACA,uBAAuB,EAAE,GAAG,8BAA8B,GAAG,sBAAsB;AAAA,QACnF;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,mBAAa,QAAQ;AACrB,YAAM,OAAO,eAAe,KAAK,MAAM;AAAA,IACzC,CAAC;AAED,oBAAgB,MAAM;AAzF1B;AA0FM,UAAI,CAAC,aAAa,OAAO;AACvB;AAAA,MACF;AAEA,UAAI,MAAM,UAAU,CAAC,MAAM,OAAO,aAAa;AAC7C,cAAM,OAAO,iBAAiB,MAAM,SAAS;AAAA,MAC/C;AAEA,+BAAa,OAAM,WAAnB;AACA,mBAAa,QAAQ;AAAA,IACvB,CAAC;AAED,WAAO,MAAG;AAtGd;AAuGM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,UACpD,iBAAiB;AAAA,QACnB;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AC9GD,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../src/DragHandle.ts","../src/index.ts"],"sourcesContent":["import type { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle'\nimport {\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>, 'element'> & {\n  class?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n  /**\n   * Enable drag handles for nested content (list items, blockquotes, etc.).\n   *\n   * When enabled, the drag handle will appear for nested blocks, not just\n   * top-level blocks. A rule-based scoring system determines which node\n   * to target based on cursor position and configured rules.\n   *\n   * @default false\n   */\n  nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = defineComponent({\n  name: 'DragHandleVue',\n\n  props: {\n    pluginKey: {\n      type: [String, Object] as PropType<PluginKey | string>,\n      default: dragHandlePluginDefaultKey,\n    },\n\n    editor: {\n      type: Object as PropType<DragHandleProps['editor']>,\n      required: true,\n    },\n\n    computePositionConfig: {\n      type: Object as PropType<DragHandleProps['computePositionConfig']>,\n      default: () => ({}),\n    },\n\n    onNodeChange: {\n      type: Function as PropType<DragHandleProps['onNodeChange']>,\n      default: null,\n    },\n\n    onElementDragStart: {\n      type: Function as PropType<DragHandleProps['onElementDragStart']>,\n      default: null,\n    },\n\n    onElementDragEnd: {\n      type: Function as PropType<DragHandleProps['onElementDragEnd']>,\n      default: null,\n    },\n\n    class: {\n      type: String as PropType<DragHandleProps['class']>,\n      default: 'drag-handle',\n    },\n\n    nested: {\n      type: [Boolean, Object] as PropType<DragHandleProps['nested']>,\n      default: false,\n    },\n  },\n\n  setup(props, { slots }) {\n    const root = ref<HTMLElement | null>(null)\n    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)\n\n    const initPlugin = () => {\n      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig, nested } =\n        props\n\n      if (!root.value) {\n        return\n      }\n      if (!props.editor || props.editor.isDestroyed) {\n        return\n      }\n\n      const nestedOptions = normalizeNestedOptions(nested)\n\n      const init = DragHandlePlugin({\n        editor,\n        element: root.value,\n        pluginKey,\n        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n        onNodeChange,\n        onElementDragStart,\n        onElementDragEnd,\n        nestedOptions,\n      })\n\n      pluginHandle.value = init\n      props.editor.registerPlugin(init.plugin)\n    }\n\n    const destroyPlugin = () => {\n      if (!pluginHandle.value) {\n        return\n      }\n\n      if (props.editor && !props.editor.isDestroyed) {\n        props.editor.unregisterPlugin(props.pluginKey)\n      }\n\n      pluginHandle.value.unbind?.()\n      pluginHandle.value = null\n    }\n\n    onMounted(async () => {\n      await nextTick()\n      initPlugin()\n    })\n\n    // Reinitialize plugin when nested option changes\n    watch(\n      () => props.nested,\n      () => {\n        destroyPlugin()\n        initPlugin()\n      },\n      { deep: true },\n    )\n\n    onBeforeUnmount(() => {\n      destroyPlugin()\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n          'data-dragging': 'false',\n        },\n        slots.default?.(),\n      )\n  },\n})\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,iBAAiB,GAAG,UAAU,iBAAiB,WAAW,KAAK,YAAY,aAAa;AAmB1F,IAAM,aAAa,gBAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,OAAO,IAAwB,IAAI;AACzC,UAAM,eAAe,WAA0D,IAAI;AAEnF,UAAM,aAAa,MAAM;AACvB,YAAM,EAAE,QAAQ,WAAW,cAAc,kBAAkB,oBAAoB,uBAAuB,OAAO,IAC3G;AAEF,UAAI,CAAC,KAAK,OAAO;AACf;AAAA,MACF;AACA,UAAI,CAAC,MAAM,UAAU,MAAM,OAAO,aAAa;AAC7C;AAAA,MACF;AAEA,YAAM,gBAAgB,uBAAuB,MAAM;AAEnD,YAAM,OAAO,iBAAiB;AAAA,QAC5B;AAAA,QACA,SAAS,KAAK;AAAA,QACd;AAAA,QACA,uBAAuB,EAAE,GAAG,8BAA8B,GAAG,sBAAsB;AAAA,QACnF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,mBAAa,QAAQ;AACrB,YAAM,OAAO,eAAe,KAAK,MAAM;AAAA,IACzC;AAEA,UAAM,gBAAgB,MAAM;AA3GhC;AA4GM,UAAI,CAAC,aAAa,OAAO;AACvB;AAAA,MACF;AAEA,UAAI,MAAM,UAAU,CAAC,MAAM,OAAO,aAAa;AAC7C,cAAM,OAAO,iBAAiB,MAAM,SAAS;AAAA,MAC/C;AAEA,+BAAa,OAAM,WAAnB;AACA,mBAAa,QAAQ;AAAA,IACvB;AAEA,cAAU,YAAY;AACpB,YAAM,SAAS;AACf,iBAAW;AAAA,IACb,CAAC;AAGD;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,MAAM;AACJ,sBAAc;AACd,mBAAW;AAAA,MACb;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,oBAAgB,MAAM;AACpB,oBAAc;AAAA,IAChB,CAAC;AAED,WAAO,MAAG;AA3Id;AA4IM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,UACpD,iBAAiB;AAAA,QACnB;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;ACnJD,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-drag-handle-vue-3",
   "description": "drag handle extension for tiptap with vue 3",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -37,15 +37,15 @@
   ],
   "peerDependencies": {
     "vue": "^3.0.0",
-    "@tiptap/pm": "^3.16.0",
-    "@tiptap/extension-drag-handle": "^3.16.0",
-    "@tiptap/vue-3": "^3.16.0"
+    "@tiptap/extension-drag-handle": "^3.17.0",
+    "@tiptap/pm": "^3.17.0",
+    "@tiptap/vue-3": "^3.17.0"
   },
   "devDependencies": {
     "vue": "^3.0.0",
-    "@tiptap/extension-drag-handle": "^3.16.0",
-    "@tiptap/pm": "^3.16.0",
-    "@tiptap/vue-3": "^3.16.0"
+    "@tiptap/extension-drag-handle": "^3.17.0",
+    "@tiptap/pm": "^3.17.0",
+    "@tiptap/vue-3": "^3.17.0"
   },
   "scripts": {
     "build": "tsup",

package/src/DragHandle.ts

@@ -1,20 +1,31 @@
-import type { DragHandlePluginProps } from '@tiptap/extension-drag-handle'
+import type { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle'
 import {
   defaultComputePositionConfig,
   DragHandlePlugin,
   dragHandlePluginDefaultKey,
+  normalizeNestedOptions,
 } from '@tiptap/extension-drag-handle'
 import type { Node } from '@tiptap/pm/model'
 import type { Plugin, PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/vue-3'
 import type { PropType } from 'vue'
-import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } 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'>, 'element'> & {
+export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey' | 'nestedOptions'>, 'element'> & {
   class?: string
   onNodeChange?: (data: { node: Node | 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({
@@ -55,16 +66,20 @@ export const DragHandle = defineComponent({
       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)
 
-    onMounted(async () => {
-      await nextTick()
-
-      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props
+    const initPlugin = () => {
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig, nested } =
+        props
 
       if (!root.value) {
         return
@@ -73,6 +88,8 @@ export const DragHandle = defineComponent({
         return
       }
 
+      const nestedOptions = normalizeNestedOptions(nested)
+
       const init = DragHandlePlugin({
         editor,
         element: root.value,
@@ -81,13 +98,14 @@ export const DragHandle = defineComponent({
         onNodeChange,
         onElementDragStart,
         onElementDragEnd,
+        nestedOptions,
       })
 
       pluginHandle.value = init
       props.editor.registerPlugin(init.plugin)
-    })
+    }
 
-    onBeforeUnmount(() => {
+    const destroyPlugin = () => {
       if (!pluginHandle.value) {
         return
       }
@@ -98,6 +116,25 @@ export const DragHandle = defineComponent({
 
       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 () =>