Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/src/components/Demo/index.vue

@@ -124,7 +124,7 @@ export default {
         }
       })
       .filter(item => {
-        return ['vue', 'jsx', 'scss'].includes(item.extension)
+        return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
       })
       .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
       .toArray()

docs/src/components/Demo/style.scss

@@ -19,6 +19,9 @@
   &__tabs {
     padding: 1rem 1.25rem 0 1.25rem;
     background-color: rgba($colorBlack, 0.9);
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   &__tab {

docs/src/demos/Examples/DragHandle/Component.vue

@@ -0,0 +1,43 @@
+<template>
+  <node-view-wrapper class="draggable-item">
+    <div
+      class="drag-handle"
+      contenteditable="false"
+      draggable="true"
+      data-drag-handle
+    />
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<style lang="scss" scoped>
+.draggable-item {
+  display: flex;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  background: white;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+
+  .drag-handle {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.3rem;
+    margin-right: 0.5rem;
+    cursor: grab;
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+</style>

docs/src/demos/Examples/DragHandle/DraggableItem.js

@@ -0,0 +1,29 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'draggableItem',
+
+  group: 'block',
+
+  content: 'block+',
+
+  draggable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="draggable-item"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'draggable-item' }), 0]
+  },
+
+  addNodeView() {
+    return VueRenderer(Component)
+  },
+})

docs/src/demos/Examples/DragHandle/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+import DraggableItem from './DraggableItem.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        DraggableItem,
+      ],
+      content: `
+        <p>paragraph</p>
+        <div data-type="draggable-item">
+          <p>draggable item</p>
+        </div>
+        <div data-type="draggable-item">
+          <p>another one</p>
+          <div data-type="draggable-item">
+            <p>can be nested too</p>
+            <div data-type="draggable-item">
+              <p>but can we go deeper?</p>
+            </div>
+          </div>
+        </div>
+        <p>paragraph</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/Examples/VModel/index.vue

@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .content {
   padding: 1rem 0 0;
 

docs/src/docPages/examples/drag-handle.md

@@ -1,3 +1,3 @@
 # Drag Handle
 
-<demo name="Examples/DragHandle" />
+<demo name="Examples/DragHandle" />

docs/src/links.yaml

@@ -34,6 +34,9 @@
           link: /examples/minimalist
         - title: Use with v-model
           link: /examples/v-model
+        - title: Drag handle
+          link: /examples/drag-handle
+          draft: true
         - title: Export HTML or JSON
           link: /examples/export-html-or-json
     - title: Feedback