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 { } -