docs(drag-handle): document onElementDragStart and onElementDragEnd

.changeset/flat-bushes-bow.md

@@ -0,0 +1,5 @@
+---
+'tiptap-docs': patch
+---
+
+Added documentation for `onElementDragStart` and `onElementDragEnd` in `DragHandle` extension for Vue and Vanilla JS.

src/content/editor/extensions/functionality/drag-handle-vue.mdx

@@ -107,6 +107,74 @@ export default {
 </script>
 ```
 
+### onElementDragStart
+
+A function that is called when the element starts to be dragged. This can be used to add custom logic when dragging starts.
+
+Default: `undefined`
+
+```vue
+<template>
+  <drag-handle @elementDragStart="handleElementDragStart">
+    <div>Drag Me!</div>
+  </drag-handle>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'
+
+export default {
+  components: {
+    DragHandle,
+  },
+  setup() {
+    const handleElementDragStart = (event) => {
+      // do something when dragging starts
+    }
+
+    return {
+      handleElementDragStart,
+    }
+  },
+}
+</script>
+```
+
+### onElementDragEnd
+
+A function that is called when the element stops being dragged. This can be used to add custom logic when dragging ends.
+
+Default: `undefined`
+
+```vue
+<template>
+  <drag-handle @elementDragEnd="handleElementDragEnd">
+    <div>Drag Me!</div>
+  </drag-handle>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'
+
+export default {
+  components: {
+    DragHandle,
+  },
+  setup() {
+    const handleElementDragEnd = (event) => {
+      // do something when dragging ends
+    }
+
+    return {
+      handleElementDragEnd,
+    }
+  },
+}
+</script>
+```
+
 ### pluginKey
 
 The key that should be used to store the plugin in the editor. This is useful if you have multiple drag handles in the same editor.

src/content/editor/extensions/functionality/drag-handle.mdx

@@ -87,6 +87,34 @@ DragHandle.configure({
 })
 ```
 
+### onElementDragStart
+
+A function that is called when the element starts to be dragged. This can be used to add custom logic when dragging starts.
+
+Default: `undefined`
+
+```js
+DragHandle.configure({
+  onElementDragStart: (event) => {
+    // do something when dragging starts
+  },
+})
+```
+
+### onElementDragEnd
+
+A function that is called when the element stops being dragged. This can be used to add custom logic when dragging ends.
+
+Default: `undefined`
+
+```js
+DragHandle.configure({
+  onElementDragEnd: (event) => {
+    // do something when dragging ends
+  },
+})
+```
+
 ## Commands
 
 ### lockDragHandle()