diff --git a/.eslintrc.js b/.eslintrc.js
index 36715012..8e87abee 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -46,6 +46,7 @@ module.exports = {
'func-names': ['error', 'never'],
'arrow-body-style': 'off',
'max-len': 'off',
+ 'vue/one-component-per-file': 'off',
'vue/this-in-template': ['error', 'never'],
'vue/max-attributes-per-line': ['error', {
singleline: 3,
diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 59b675e9..56c36297 100644
--- a/docs/src/components/Demo/index.vue
+++ b/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()
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index a34e38b7..4c6e6d3d 100644
--- a/docs/src/components/Demo/style.scss
+++ b/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 {
diff --git a/docs/src/demos/Examples/DragHandle/Component.vue b/docs/src/demos/Examples/DragHandle/Component.vue
new file mode 100644
index 00000000..7abae61f
--- /dev/null
+++ b/docs/src/demos/Examples/DragHandle/Component.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/docs/src/demos/Examples/DragHandle/DraggableItem.js b/docs/src/demos/Examples/DragHandle/DraggableItem.js
new file mode 100644
index 00000000..025cc9be
--- /dev/null
+++ b/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)
+ },
+})
diff --git a/docs/src/demos/Examples/DragHandle/index.vue b/docs/src/demos/Examples/DragHandle/index.vue
new file mode 100644
index 00000000..99745b7a
--- /dev/null
+++ b/docs/src/demos/Examples/DragHandle/index.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
diff --git a/docs/src/demos/Examples/VModel/index.vue b/docs/src/demos/Examples/VModel/index.vue
index 74fe1f07..9b173776 100644
--- a/docs/src/demos/Examples/VModel/index.vue
+++ b/docs/src/demos/Examples/VModel/index.vue
@@ -25,7 +25,7 @@ export default {
}
-