Expose onElementDragStart and onElementDragEnd callbacks from DragHandlePlugin

.changeset/dirty-mugs-live.md

@@ -0,0 +1,7 @@
+---
+'@tiptap/extension-drag-handle': minor
+'@tiptap/extension-drag-handle-vue-2': minor
+'@tiptap/extension-drag-handle-vue-3': minor
+---
+
+Expose `onElementDragStart` and `onElementDragEnd` callbacks from DragHandlePlugin.

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

@@ -38,14 +38,24 @@ export const DragHandle = Vue.extend({
       default: null,
     },
 
+    onElementDragStart: {
+      type: Function as PropType<DragHandleProps['onElementDragStart']>,
+      default: undefined,
+    },
+
+    onElementDragEnd: {
+      type: Function as PropType<DragHandleProps['onElementDragEnd']>,
+      default: undefined,
+    },
+
     class: {
       type: String as PropType<DragHandleProps['class']>,
       default: 'drag-handle',
     },
   },
 
   mounted() {
-    const { editor, pluginKey, onNodeChange } = this.$props
+    const { editor, pluginKey, onNodeChange, onElementDragStart, onElementDragEnd } = this.$props
 
     editor.registerPlugin(
       DragHandlePlugin({
@@ -54,6 +64,8 @@ export const DragHandle = Vue.extend({
         pluginKey,
         computePositionConfig: { ...defaultComputePositionConfig, ...this.computePositionConfig },
         onNodeChange,
+        onElementDragStart,
+        onElementDragEnd,
       }).plugin,
     )
   },

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

@@ -39,6 +39,16 @@ export const DragHandle = defineComponent({
       default: null,
     },
 
+    onElementDragStart: {
+      type: Function as PropType<DragHandleProps['onElementDragStart']>,
+      default: undefined,
+    },
+
+    onElementDragEnd: {
+      type: Function as PropType<DragHandleProps['onElementDragEnd']>,
+      default: undefined,
+    },
+
     class: {
       type: String as PropType<DragHandleProps['class']>,
       default: 'drag-handle',
@@ -49,7 +59,7 @@ export const DragHandle = defineComponent({
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
-      const { editor, pluginKey, onNodeChange, computePositionConfig } = props
+      const { editor, pluginKey, onNodeChange, computePositionConfig, onElementDragStart, onElementDragEnd } = props
 
       editor.registerPlugin(
         DragHandlePlugin({
@@ -58,6 +68,8 @@ export const DragHandle = defineComponent({
           pluginKey,
           computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
           onNodeChange,
+          onElementDragStart,
+          onElementDragEnd,
         }).plugin,
       )
     })

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

@@ -27,6 +27,14 @@ export interface DragHandleOptions {
    * Returns a node or null when a node is hovered over
    */
   onNodeChange?: (options: { node: Node | null; editor: Editor }) => void
+  /**
+   * The callback function that will be called when drag start.
+   */
+  onElementDragStart?: (e: DragEvent) => void
+  /**
+   * The callback function that will be called when drag end.
+   */
+  onElementDragEnd?: (e: DragEvent) => void
 }
 
 declare module '@tiptap/core' {
@@ -65,6 +73,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
       onNodeChange: () => {
         return null
       },
+      onElementDragStart: undefined,
+      onElementDragEnd: undefined,
     }
   },
 
@@ -100,6 +110,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
         element,
         editor: this.editor,
         onNodeChange: this.options.onNodeChange,
+        onElementDragStart: this.options.onElementDragStart,
+        onElementDragEnd: this.options.onElementDragEnd,
       }).plugin,
     ]
   },