@tiptap/extension-drag-handle-vue-3 3.8.0 → 3.9.0

package/dist/index.cjs

@@ -47,6 +47,14 @@ var DragHandle = (0, import_vue.defineComponent)({
       type: Function,
       default: null
     },
+    onElementDragStart: {
+      type: Function,
+      default: null
+    },
+    onElementDragEnd: {
+      type: Function,
+      default: null
+    },
     class: {
       type: String,
       default: "drag-handle"
@@ -54,21 +62,38 @@ var DragHandle = (0, import_vue.defineComponent)({
   },
   setup(props, { slots }) {
     const root = (0, import_vue.ref)(null);
-    (0, import_vue.onMounted)(() => {
-      const { editor, pluginKey, onNodeChange, computePositionConfig } = props;
-      editor.registerPlugin(
-        (0, import_extension_drag_handle.DragHandlePlugin)({
-          editor,
-          element: root.value,
-          pluginKey,
-          computePositionConfig: { ...import_extension_drag_handle.defaultComputePositionConfig, ...computePositionConfig },
-          onNodeChange
-        }).plugin
-      );
+    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;
+      if (!root.value) {
+        return;
+      }
+      if (!props.editor || props.editor.isDestroyed) {
+        return;
+      }
+      const init = (0, import_extension_drag_handle.DragHandlePlugin)({
+        editor,
+        element: root.value,
+        pluginKey,
+        computePositionConfig: { ...import_extension_drag_handle.defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange,
+        onElementDragStart,
+        onElementDragEnd
+      });
+      pluginHandle.value = init;
+      props.editor.registerPlugin(init.plugin);
     });
     (0, import_vue.onBeforeUnmount)(() => {
-      const { pluginKey, editor } = props;
-      editor.unregisterPlugin(pluginKey);
+      var _a, _b;
+      if (!pluginHandle.value) {
+        return;
+      }
+      if (props.editor && !props.editor.isDestroyed) {
+        props.editor.unregisterPlugin(props.pluginKey);
+      }
+      (_b = (_a = pluginHandle.value).unbind) == null ? void 0 : _b.call(_a);
+      pluginHandle.value = null;
     });
     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 { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref } 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<DragHandleProps['pluginKey']>,\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    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\n    onMounted(() => {\n      const { editor, pluginKey, onNodeChange, computePositionConfig } = props\n\n      editor.registerPlugin(\n        DragHandlePlugin({\n          editor,\n          element: root.value as HTMLElement,\n          pluginKey,\n          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n          onNodeChange,\n        }).plugin,\n      )\n    })\n\n    onBeforeUnmount(() => {\n      const { pluginKey, editor } = props\n\n      editor.unregisterPlugin(pluginKey as string)\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\n        },\n        slots.default?.(),\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mCAIO;AAGP,iBAAoE;AAS7D,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,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,WAAO,gBAAwB,IAAI;AAEzC,8BAAU,MAAM;AACd,YAAM,EAAE,QAAQ,WAAW,cAAc,sBAAsB,IAAI;AAEnE,aAAO;AAAA,YACL,+CAAiB;AAAA,UACf;AAAA,UACA,SAAS,KAAK;AAAA,UACd;AAAA,UACA,uBAAuB,EAAE,GAAG,2DAA8B,GAAG,sBAAsB;AAAA,UACnF;AAAA,QACF,CAAC,EAAE;AAAA,MACL;AAAA,IACF,CAAC;AAED,oCAAgB,MAAM;AACpB,YAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,aAAO,iBAAiB,SAAmB;AAAA,IAC7C,CAAC;AAED,WAAO,MAAG;AAtEd;AAuEM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,QACtD;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AD7ED,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 } 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        },\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,QACtD;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AD7GD,IAAO,gBAAQ;","names":[]}

package/dist/index.d.cts

@@ -1,12 +1,10 @@
 import * as _floating_ui_dom from '@floating-ui/dom';
-import { Node as Node$3 } from 'prosemirror-model';
 import { Plugin, PluginKey, Transaction, EditorState } from '@tiptap/pm/state';
-import { NodeType as NodeType$1, MarkType as MarkType$1, Node as Node$2, Fragment, ParseOptions, Schema, Slice, Mark as Mark$1, ResolvedPos, MarkSpec, DOMOutputSpec, NodeSpec } from '@tiptap/pm/model';
+import { NodeType as NodeType$1, MarkType as MarkType$1, Node as Node$1, Fragment, ParseOptions, Schema, Slice, Mark as Mark$1, ResolvedPos, MarkSpec, DOMOutputSpec, NodeSpec } from '@tiptap/pm/model';
 import { EditorView, EditorProps, NodeViewConstructor, MarkViewConstructor, NodeView, MarkView } from '@tiptap/pm/view';
 import { Transform } from '@tiptap/pm/transform';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { PluginKey as PluginKey$1 } from 'prosemirror-state';
 import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
 import { Editor as Editor$1 } from '@tiptap/vue-3';
 
@@ -425,7 +423,7 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
         parent: ParentConfig<NodeConfig<Options, Storage>>['renderHTML'];
         editor?: Editor;
     }, props: {
-        node: Node$2;
+        node: Node$1;
         HTMLAttributes: Record<string, any>;
     }) => DOMOutputSpec) | null;
     /**
@@ -439,9 +437,9 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
         parent: ParentConfig<NodeConfig<Options, Storage>>['renderText'];
         editor?: Editor;
     }, props: {
-        node: Node$2;
+        node: Node$1;
         pos: number;
-        parent: Node$2;
+        parent: Node$1;
         index: number;
     }) => string) | null;
     /**
@@ -460,21 +458,21 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
  * The Node class is used to create custom node extensions.
  * @see https://tiptap.dev/api/extensions#create-a-new-extension
  */
-declare class Node$1<Options = any, Storage = any> extends Extendable<Options, Storage, NodeConfig<Options, Storage>> {
+declare class Node<Options = any, Storage = any> extends Extendable<Options, Storage, NodeConfig<Options, Storage>> {
     type: string;
     /**
      * Create a new Node instance
      * @param config - Node configuration object or a function that returns a configuration object
      */
-    static create<O = any, S = any>(config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)): Node$1<O, S>;
-    configure(options?: Partial<Options>): Node$1<Options, Storage>;
+    static create<O = any, S = any>(config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)): Node<O, S>;
+    configure(options?: Partial<Options>): Node<Options, Storage>;
     extend<ExtendedOptions = Options, ExtendedStorage = Storage, ExtendedConfig = NodeConfig<ExtendedOptions, ExtendedStorage>>(extendedConfig?: (() => Partial<ExtendedConfig>) | (Partial<ExtendedConfig> & ThisType<{
         name: string;
         options: ExtendedOptions;
         storage: ExtendedStorage;
         editor: Editor;
         type: NodeType$1;
-    }>)): Node$1<ExtendedOptions, ExtendedStorage>;
+    }>)): Node<ExtendedOptions, ExtendedStorage>;
 }
 
 type PasteRuleMatch = {
@@ -589,7 +587,7 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         name: string;
         options: Options;
         storage: Storage;
-        extensions: (Node$1 | Mark)[];
+        extensions: (Node | Mark)[];
         parent: ParentConfig<Config>['addGlobalAttributes'];
     }) => GlobalAttributes;
     /**
@@ -755,7 +753,7 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         options: Options;
         storage: Storage;
         parent: ParentConfig<Config>['extendNodeSchema'];
-    }, extension: Node$1) => Record<string, any>) | null;
+    }, extension: Node) => Record<string, any>) | null;
     /**
      * This function extends the schema of the mark.
      * @example
@@ -1073,7 +1071,7 @@ interface EditorEvents {
          * The node which the deletion occurred in
          * @note This can be a parent node of the deleted content
          */
-        node: Node$2;
+        node: Node$1;
         /**
          * The new start position of the node in the document (after the deletion)
          */
@@ -1387,7 +1385,7 @@ interface NodeViewRendererProps {
     /**
      * The extension that is responsible for the node.
      */
-    extension: Node$1;
+    extension: Node;
     /**
      * The HTML attributes that should be added to the node's DOM element.
      */
@@ -1443,9 +1441,9 @@ type Range = {
     to: number;
 };
 type TextSerializer = (props: {
-    node: Node$2;
+    node: Node$1;
     pos: number;
-    parent: Node$2;
+    parent: Node$1;
     index: number;
     range: Range;
 }) => string;
@@ -1628,9 +1626,9 @@ declare class NodePos {
     private isBlock;
     private editor;
     private get name();
-    constructor(pos: ResolvedPos, editor: Editor, isBlock?: boolean, node?: Node$2 | null);
+    constructor(pos: ResolvedPos, editor: Editor, isBlock?: boolean, node?: Node$1 | null);
     private currentNode;
-    get node(): Node$2;
+    get node(): Node$1;
     get element(): HTMLElement;
     actualDepth: number | null;
     get depth(): number;
@@ -1967,7 +1965,7 @@ declare module '@tiptap/core' {
             /**
              * The ProseMirror content to insert.
              */
-            value: Content | Node$2 | Fragment, 
+            value: Content | Node$1 | Fragment, 
             /**
              * Optional options
              */
@@ -1990,7 +1988,7 @@ declare module '@tiptap/core' {
             /**
              * The ProseMirror content to insert.
              */
-            value: Content | Node$2 | Fragment, 
+            value: Content | Node$1 | Fragment, 
             /**
              * Optional options
              */
@@ -2258,7 +2256,7 @@ declare module '@tiptap/core' {
             /**
              * The new content.
              */
-            content: Content | Fragment | Node$2, 
+            content: Content | Fragment | Node$1, 
             /**
              * Options for `setContent`.
              */
@@ -2550,6 +2548,7 @@ declare class Editor extends EventEmitter<EditorEvents> {
     private commandManager;
     extensionManager: ExtensionManager;
     private css;
+    private className;
     schema: Schema;
     private editorView;
     isFocused: boolean;
@@ -2725,15 +2724,15 @@ type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
     class?: string;
     onNodeChange?: (data: {
-        node: Node | null;
+        node: Node$1 | null;
         editor: Editor$1;
         pos: number;
     }) => void;
 };
 declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     pluginKey: {
-        type: PropType<DragHandleProps["pluginKey"]>;
-        default: PluginKey$1<any>;
+        type: PropType<PluginKey | string>;
+        default: PluginKey<any>;
     };
     editor: {
         type: PropType<DragHandleProps["editor"]>;
@@ -2747,6 +2746,14 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["onNodeChange"]>;
         default: null;
     };
+    onElementDragStart: {
+        type: PropType<DragHandleProps["onElementDragStart"]>;
+        default: null;
+    };
+    onElementDragEnd: {
+        type: PropType<DragHandleProps["onElementDragEnd"]>;
+        default: null;
+    };
     class: {
         type: PropType<DragHandleProps["class"]>;
         default: string;
@@ -2755,8 +2762,8 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     pluginKey: {
-        type: PropType<DragHandleProps["pluginKey"]>;
-        default: PluginKey$1<any>;
+        type: PropType<PluginKey | string>;
+        default: PluginKey<any>;
     };
     editor: {
         type: PropType<DragHandleProps["editor"]>;
@@ -2770,21 +2777,31 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["onNodeChange"]>;
         default: null;
     };
+    onElementDragStart: {
+        type: PropType<DragHandleProps["onElementDragStart"]>;
+        default: null;
+    };
+    onElementDragEnd: {
+        type: PropType<DragHandleProps["onElementDragEnd"]>;
+        default: null;
+    };
     class: {
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
 }>> & Readonly<{}>, {
-    pluginKey: string | PluginKey$1<any> | undefined;
+    pluginKey: string | PluginKey<any>;
     onNodeChange: (((data: {
         editor: Editor;
-        node: Node$3 | null;
+        node: Node$1 | null;
         pos: number;
     }) => void) & ((data: {
-        node: Node | null;
+        node: Node$1 | null;
         editor: Editor$1;
         pos: number;
     }) => void)) | undefined;
+    onElementDragStart: ((e: DragEvent) => void) | undefined;
+    onElementDragEnd: ((e: DragEvent) => void) | undefined;
     computePositionConfig: {
         placement?: _floating_ui_dom.Placement | undefined;
         strategy?: _floating_ui_dom.Strategy | undefined;

package/dist/index.d.ts

@@ -1,12 +1,10 @@
 import * as _floating_ui_dom from '@floating-ui/dom';
-import { Node as Node$3 } from 'prosemirror-model';
 import { Plugin, PluginKey, Transaction, EditorState } from '@tiptap/pm/state';
-import { NodeType as NodeType$1, MarkType as MarkType$1, Node as Node$2, Fragment, ParseOptions, Schema, Slice, Mark as Mark$1, ResolvedPos, MarkSpec, DOMOutputSpec, NodeSpec } from '@tiptap/pm/model';
+import { NodeType as NodeType$1, MarkType as MarkType$1, Node as Node$1, Fragment, ParseOptions, Schema, Slice, Mark as Mark$1, ResolvedPos, MarkSpec, DOMOutputSpec, NodeSpec } from '@tiptap/pm/model';
 import { EditorView, EditorProps, NodeViewConstructor, MarkViewConstructor, NodeView, MarkView } from '@tiptap/pm/view';
 import { Transform } from '@tiptap/pm/transform';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { PluginKey as PluginKey$1 } from 'prosemirror-state';
 import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
 import { Editor as Editor$1 } from '@tiptap/vue-3';
 
@@ -425,7 +423,7 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
         parent: ParentConfig<NodeConfig<Options, Storage>>['renderHTML'];
         editor?: Editor;
     }, props: {
-        node: Node$2;
+        node: Node$1;
         HTMLAttributes: Record<string, any>;
     }) => DOMOutputSpec) | null;
     /**
@@ -439,9 +437,9 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
         parent: ParentConfig<NodeConfig<Options, Storage>>['renderText'];
         editor?: Editor;
     }, props: {
-        node: Node$2;
+        node: Node$1;
         pos: number;
-        parent: Node$2;
+        parent: Node$1;
         index: number;
     }) => string) | null;
     /**
@@ -460,21 +458,21 @@ interface NodeConfig<Options = any, Storage = any> extends ExtendableConfig<Opti
  * The Node class is used to create custom node extensions.
  * @see https://tiptap.dev/api/extensions#create-a-new-extension
  */
-declare class Node$1<Options = any, Storage = any> extends Extendable<Options, Storage, NodeConfig<Options, Storage>> {
+declare class Node<Options = any, Storage = any> extends Extendable<Options, Storage, NodeConfig<Options, Storage>> {
     type: string;
     /**
      * Create a new Node instance
      * @param config - Node configuration object or a function that returns a configuration object
      */
-    static create<O = any, S = any>(config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)): Node$1<O, S>;
-    configure(options?: Partial<Options>): Node$1<Options, Storage>;
+    static create<O = any, S = any>(config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)): Node<O, S>;
+    configure(options?: Partial<Options>): Node<Options, Storage>;
     extend<ExtendedOptions = Options, ExtendedStorage = Storage, ExtendedConfig = NodeConfig<ExtendedOptions, ExtendedStorage>>(extendedConfig?: (() => Partial<ExtendedConfig>) | (Partial<ExtendedConfig> & ThisType<{
         name: string;
         options: ExtendedOptions;
         storage: ExtendedStorage;
         editor: Editor;
         type: NodeType$1;
-    }>)): Node$1<ExtendedOptions, ExtendedStorage>;
+    }>)): Node<ExtendedOptions, ExtendedStorage>;
 }
 
 type PasteRuleMatch = {
@@ -589,7 +587,7 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         name: string;
         options: Options;
         storage: Storage;
-        extensions: (Node$1 | Mark)[];
+        extensions: (Node | Mark)[];
         parent: ParentConfig<Config>['addGlobalAttributes'];
     }) => GlobalAttributes;
     /**
@@ -755,7 +753,7 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         options: Options;
         storage: Storage;
         parent: ParentConfig<Config>['extendNodeSchema'];
-    }, extension: Node$1) => Record<string, any>) | null;
+    }, extension: Node) => Record<string, any>) | null;
     /**
      * This function extends the schema of the mark.
      * @example
@@ -1073,7 +1071,7 @@ interface EditorEvents {
          * The node which the deletion occurred in
          * @note This can be a parent node of the deleted content
          */
-        node: Node$2;
+        node: Node$1;
         /**
          * The new start position of the node in the document (after the deletion)
          */
@@ -1387,7 +1385,7 @@ interface NodeViewRendererProps {
     /**
      * The extension that is responsible for the node.
      */
-    extension: Node$1;
+    extension: Node;
     /**
      * The HTML attributes that should be added to the node's DOM element.
      */
@@ -1443,9 +1441,9 @@ type Range = {
     to: number;
 };
 type TextSerializer = (props: {
-    node: Node$2;
+    node: Node$1;
     pos: number;
-    parent: Node$2;
+    parent: Node$1;
     index: number;
     range: Range;
 }) => string;
@@ -1628,9 +1626,9 @@ declare class NodePos {
     private isBlock;
     private editor;
     private get name();
-    constructor(pos: ResolvedPos, editor: Editor, isBlock?: boolean, node?: Node$2 | null);
+    constructor(pos: ResolvedPos, editor: Editor, isBlock?: boolean, node?: Node$1 | null);
     private currentNode;
-    get node(): Node$2;
+    get node(): Node$1;
     get element(): HTMLElement;
     actualDepth: number | null;
     get depth(): number;
@@ -1967,7 +1965,7 @@ declare module '@tiptap/core' {
             /**
              * The ProseMirror content to insert.
              */
-            value: Content | Node$2 | Fragment, 
+            value: Content | Node$1 | Fragment, 
             /**
              * Optional options
              */
@@ -1990,7 +1988,7 @@ declare module '@tiptap/core' {
             /**
              * The ProseMirror content to insert.
              */
-            value: Content | Node$2 | Fragment, 
+            value: Content | Node$1 | Fragment, 
             /**
              * Optional options
              */
@@ -2258,7 +2256,7 @@ declare module '@tiptap/core' {
             /**
              * The new content.
              */
-            content: Content | Fragment | Node$2, 
+            content: Content | Fragment | Node$1, 
             /**
              * Options for `setContent`.
              */
@@ -2550,6 +2548,7 @@ declare class Editor extends EventEmitter<EditorEvents> {
     private commandManager;
     extensionManager: ExtensionManager;
     private css;
+    private className;
     schema: Schema;
     private editorView;
     isFocused: boolean;
@@ -2725,15 +2724,15 @@ type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
     class?: string;
     onNodeChange?: (data: {
-        node: Node | null;
+        node: Node$1 | null;
         editor: Editor$1;
         pos: number;
     }) => void;
 };
 declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     pluginKey: {
-        type: PropType<DragHandleProps["pluginKey"]>;
-        default: PluginKey$1<any>;
+        type: PropType<PluginKey | string>;
+        default: PluginKey<any>;
     };
     editor: {
         type: PropType<DragHandleProps["editor"]>;
@@ -2747,6 +2746,14 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["onNodeChange"]>;
         default: null;
     };
+    onElementDragStart: {
+        type: PropType<DragHandleProps["onElementDragStart"]>;
+        default: null;
+    };
+    onElementDragEnd: {
+        type: PropType<DragHandleProps["onElementDragEnd"]>;
+        default: null;
+    };
     class: {
         type: PropType<DragHandleProps["class"]>;
         default: string;
@@ -2755,8 +2762,8 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     pluginKey: {
-        type: PropType<DragHandleProps["pluginKey"]>;
-        default: PluginKey$1<any>;
+        type: PropType<PluginKey | string>;
+        default: PluginKey<any>;
     };
     editor: {
         type: PropType<DragHandleProps["editor"]>;
@@ -2770,21 +2777,31 @@ declare const DragHandle: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<DragHandleProps["onNodeChange"]>;
         default: null;
     };
+    onElementDragStart: {
+        type: PropType<DragHandleProps["onElementDragStart"]>;
+        default: null;
+    };
+    onElementDragEnd: {
+        type: PropType<DragHandleProps["onElementDragEnd"]>;
+        default: null;
+    };
     class: {
         type: PropType<DragHandleProps["class"]>;
         default: string;
     };
 }>> & Readonly<{}>, {
-    pluginKey: string | PluginKey$1<any> | undefined;
+    pluginKey: string | PluginKey<any>;
     onNodeChange: (((data: {
         editor: Editor;
-        node: Node$3 | null;
+        node: Node$1 | null;
         pos: number;
     }) => void) & ((data: {
-        node: Node | null;
+        node: Node$1 | null;
         editor: Editor$1;
         pos: number;
     }) => void)) | undefined;
+    onElementDragStart: ((e: DragEvent) => void) | undefined;
+    onElementDragEnd: ((e: DragEvent) => void) | undefined;
     computePositionConfig: {
         placement?: _floating_ui_dom.Placement | undefined;
         strategy?: _floating_ui_dom.Strategy | undefined;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   DragHandlePlugin,
   dragHandlePluginDefaultKey
 } from "@tiptap/extension-drag-handle";
-import { defineComponent, h, onBeforeUnmount, onMounted, ref } from "vue";
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 var DragHandle = defineComponent({
   name: "DragHandleVue",
   props: {
@@ -24,6 +24,14 @@ var DragHandle = defineComponent({
       type: Function,
       default: null
     },
+    onElementDragStart: {
+      type: Function,
+      default: null
+    },
+    onElementDragEnd: {
+      type: Function,
+      default: null
+    },
     class: {
       type: String,
       default: "drag-handle"
@@ -31,21 +39,38 @@ var DragHandle = defineComponent({
   },
   setup(props, { slots }) {
     const root = ref(null);
-    onMounted(() => {
-      const { editor, pluginKey, onNodeChange, computePositionConfig } = props;
-      editor.registerPlugin(
-        DragHandlePlugin({
-          editor,
-          element: root.value,
-          pluginKey,
-          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
-          onNodeChange
-        }).plugin
-      );
+    const pluginHandle = shallowRef(null);
+    onMounted(async () => {
+      await nextTick();
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props;
+      if (!root.value) {
+        return;
+      }
+      if (!props.editor || props.editor.isDestroyed) {
+        return;
+      }
+      const init = DragHandlePlugin({
+        editor,
+        element: root.value,
+        pluginKey,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange,
+        onElementDragStart,
+        onElementDragEnd
+      });
+      pluginHandle.value = init;
+      props.editor.registerPlugin(init.plugin);
     });
     onBeforeUnmount(() => {
-      const { pluginKey, editor } = props;
-      editor.unregisterPlugin(pluginKey);
+      var _a, _b;
+      if (!pluginHandle.value) {
+        return;
+      }
+      if (props.editor && !props.editor.isDestroyed) {
+        props.editor.unregisterPlugin(props.pluginKey);
+      }
+      (_b = (_a = pluginHandle.value).unbind) == null ? void 0 : _b.call(_a);
+      pluginHandle.value = null;
     });
     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 { Editor } from '@tiptap/vue-3'\nimport type { PropType } from 'vue'\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref } 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<DragHandleProps['pluginKey']>,\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    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\n    onMounted(() => {\n      const { editor, pluginKey, onNodeChange, computePositionConfig } = props\n\n      editor.registerPlugin(\n        DragHandlePlugin({\n          editor,\n          element: root.value as HTMLElement,\n          pluginKey,\n          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },\n          onNodeChange,\n        }).plugin,\n      )\n    })\n\n    onBeforeUnmount(() => {\n      const { pluginKey, editor } = props\n\n      editor.unregisterPlugin(pluginKey as string)\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: props.class,\n          style: { visibility: 'hidden', position: 'absolute' },\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;AAGP,SAAS,iBAAiB,GAAG,iBAAiB,WAAW,WAAW;AAS7D,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,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,UAAM,OAAO,IAAwB,IAAI;AAEzC,cAAU,MAAM;AACd,YAAM,EAAE,QAAQ,WAAW,cAAc,sBAAsB,IAAI;AAEnE,aAAO;AAAA,QACL,iBAAiB;AAAA,UACf;AAAA,UACA,SAAS,KAAK;AAAA,UACd;AAAA,UACA,uBAAuB,EAAE,GAAG,8BAA8B,GAAG,sBAAsB;AAAA,UACnF;AAAA,QACF,CAAC,EAAE;AAAA,MACL;AAAA,IACF,CAAC;AAED,oBAAgB,MAAM;AACpB,YAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,aAAO,iBAAiB,SAAmB;AAAA,IAC7C,CAAC;AAED,WAAO,MAAG;AAtEd;AAuEM;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,QACtD;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AC7ED,IAAO,gBAAQ;","names":[]}
+{"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        },\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,QACtD;AAAA,SACA,WAAM,YAAN;AAAA,MACF;AAAA;AAAA,EACJ;AACF,CAAC;;;AC7GD,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.8.0",
+  "version": "3.9.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -37,15 +37,15 @@
   ],
   "peerDependencies": {
     "vue": "^3.0.0",
-    "@tiptap/extension-drag-handle": "^3.8.0",
-    "@tiptap/pm": "^3.8.0",
-    "@tiptap/vue-3": "^3.8.0"
+    "@tiptap/extension-drag-handle": "^3.9.0",
+    "@tiptap/pm": "^3.9.0",
+    "@tiptap/vue-3": "^3.9.0"
   },
   "devDependencies": {
     "vue": "^3.0.0",
-    "@tiptap/extension-drag-handle": "^3.8.0",
-    "@tiptap/pm": "^3.8.0",
-    "@tiptap/vue-3": "^3.8.0"
+    "@tiptap/extension-drag-handle": "^3.9.0",
+    "@tiptap/pm": "^3.9.0",
+    "@tiptap/vue-3": "^3.9.0"
   },
   "scripts": {
     "build": "tsup",

package/src/DragHandle.ts

@@ -4,9 +4,11 @@ import {
   DragHandlePlugin,
   dragHandlePluginDefaultKey,
 } 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, onBeforeUnmount, onMounted, ref } from 'vue'
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
@@ -20,7 +22,7 @@ export const DragHandle = defineComponent({
 
   props: {
     pluginKey: {
-      type: [String, Object] as PropType<DragHandleProps['pluginKey']>,
+      type: [String, Object] as PropType<PluginKey | string>,
       default: dragHandlePluginDefaultKey,
     },
 
@@ -39,6 +41,16 @@ export const DragHandle = defineComponent({
       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',
@@ -47,25 +59,45 @@ export const DragHandle = defineComponent({
 
   setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
+    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)
 
-    onMounted(() => {
-      const { editor, pluginKey, onNodeChange, computePositionConfig } = props
-
-      editor.registerPlugin(
-        DragHandlePlugin({
-          editor,
-          element: root.value as HTMLElement,
-          pluginKey,
-          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
-          onNodeChange,
-        }).plugin,
-      )
+    onMounted(async () => {
+      await nextTick()
+
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props
+
+      if (!root.value) {
+        return
+      }
+      if (!props.editor || props.editor.isDestroyed) {
+        return
+      }
+
+      const init = DragHandlePlugin({
+        editor,
+        element: root.value,
+        pluginKey,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange,
+        onElementDragStart,
+        onElementDragEnd,
+      })
+
+      pluginHandle.value = init
+      props.editor.registerPlugin(init.plugin)
     })
 
     onBeforeUnmount(() => {
-      const { pluginKey, editor } = props
+      if (!pluginHandle.value) {
+        return
+      }
+
+      if (props.editor && !props.editor.isDestroyed) {
+        props.editor.unregisterPlugin(props.pluginKey)
+      }
 
-      editor.unregisterPlugin(pluginKey as string)
+      pluginHandle.value.unbind?.()
+      pluginHandle.value = null
     })
 
     return () =>