add drag handle example

examples/Components/Routes/DragHandle/DragItem.js

@@ -0,0 +1,32 @@
+import { Node } from 'tiptap'
+
+export default class DragItem extends Node {
+
+  get name() {
+    return 'drag_item'
+  }
+
+  get schema() {
+    return {
+      group: 'block',
+      draggable: true,
+      content: 'paragraph+',
+      toDOM: () => ['div', { 'data-type': this.name }, 0],
+      parseDOM: [{
+        tag: `[data-type="${this.name}"]`,
+      }],
+    }
+  }
+
+  get view() {
+    return {
+      template: `
+        <div data-type="drag_item">
+          <div ref="content" contenteditable="true"></div>
+          <div data-drag-handle contenteditable="false"></div>
+        </div>
+      `,
+    }
+  }
+
+}

examples/Components/Routes/DragHandle/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="editor">
+    <editor-content class="editor__content" :editor="editor" />
+  </div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor, EditorContent } from 'tiptap'
+import { Heading, Code } from 'tiptap-extensions'
+import DragItem from './DragItem'
+
+export default {
+  components: {
+    EditorContent,
+    Icon,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Heading(),
+          new Code(),
+          new DragItem(),
+        ],
+        content: `
+          <h2>
+            Drag Handle
+          </h2>
+          <p>
+            Add <code>data-drag-handle</code> to a DOM element within your node view to define your custom drag handle.
+          </p>
+          <div data-type="drag_item">
+            Drag me!
+          </div>
+          <div data-type="drag_item">
+            Try it!
+          </div>
+          <div data-type="drag_item">
+            It works!
+          </div>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+[data-type="drag_item"] {
+  display: flex;
+  padding: 0.5rem;
+  background-color: rgba(black, 0.05);
+  margin-bottom: 0.5rem;
+  border-radius: 6px;
+
+  > :first-child {
+    flex: 1 1 auto;
+  }
+
+  > :last-child {
+    flex: 0 0 auto;
+    margin-left: auto;
+    cursor: move;
+  }
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -60,6 +60,9 @@
     <router-link class="subnavigation__link" to="/trailing-paragraph">
       Trailing Paragraph
     </router-link>
+    <router-link class="subnavigation__link" to="/drag-handle">
+      Drag Handle
+    </router-link>
     <router-link class="subnavigation__link" to="/export">
       Export HTML or JSON
     </router-link>

examples/main.js

@@ -151,6 +151,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/TrailingParagraph',
     },
   },
+  {
+    path: '/drag-handle',
+    component: () => import('Components/Routes/DragHandle'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/DragHandle',
+    },
+  },
   {
     path: '/export',
     component: () => import('Components/Routes/Export'),