Merge branch 'feature/vue-node-views' into main

.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,

docs/src/components/Demo/index.vue

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

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

@@ -0,0 +1,62 @@
+<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>
+
+<script>
+export default {
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+
+    node: {
+      type: Object,
+      required: true,
+    },
+
+    updateAttributes: {
+      type: Function,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.draggable-item {
+  display: flex;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+
+  .drag-handle {
+    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,39 @@
+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,
+
+  selectable: true,
+
+  addAttributes() {
+    return {
+      checked: {
+        default: false,
+      },
+    }
+  },
+
+  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,59 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Dropcursor from '@tiptap/extension-dropcursor'
+import DraggableItem from './DraggableItem.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Dropcursor,
+        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

packages/core/src/ExtensionManager.ts

@@ -137,6 +137,7 @@ export default class ExtensionManager {
             getPos,
             decorations,
             HTMLAttributes,
+            extension,
           })
         }
 

packages/core/src/types.ts

@@ -97,6 +97,7 @@ export type NodeViewRendererProps = {
   getPos: (() => number) | boolean,
   decorations: Decoration[],
   HTMLAttributes: { [key: string]: any },
+  extension: Node,
 }
 
 export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView

packages/vue/src/VueRenderer.ts

@@ -1,5 +1,7 @@
-import { NodeViewRendererProps } from '@tiptap/core'
-import { NodeView } from 'prosemirror-view'
+import { Editor, Node, NodeViewRendererProps } from '@tiptap/core'
+import { Decoration, NodeView } from 'prosemirror-view'
+import { NodeSelection } from 'prosemirror-state'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
 
@@ -7,21 +9,129 @@ class VueNodeView implements NodeView {
 
   vm!: Vue
 
-  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
-    // eslint-disable-next-line
-    const { node, editor, getPos } = props
-    // eslint-disable-next-line
-    const { view } = editor
+  editor: Editor
 
+  extension!: Node
+
+  node!: ProseMirrorNode
+
+  decorations!: Decoration[]
+
+  id!: string
+
+  getPos!: any
+
+  isDragging = false
+
+  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
+    this.editor = props.editor
+    this.extension = props.extension
+    this.node = props.node
+    this.getPos = props.getPos
+    this.createUniqueId()
     this.mount(component)
   }
 
+  createUniqueId() {
+    this.id = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
+  }
+
+  createNodeViewWrapper() {
+    const { handleDragStart } = this
+    const dragstart = handleDragStart.bind(this)
+
+    return Vue.extend({
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement) {
+        return createElement(
+          this.as, {
+            style: {
+              whiteSpace: 'normal',
+            },
+            on: {
+              dragstart,
+            },
+          },
+          this.$slots.default,
+        )
+      },
+    })
+  }
+
+  handleDragStart(event: DragEvent) {
+    const { view } = this.editor
+    const target = (event.target as HTMLElement)
+
+    if (this.contentDOM?.contains(target)) {
+      return
+    }
+
+    // sometimes `event.target` is not the `dom` element
+    event.dataTransfer?.setDragImage(this.dom, 0, 0)
+
+    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const transaction = view.state.tr.setSelection(selection)
+
+    view.dispatch(transaction)
+  }
+
+  createNodeViewContent() {
+    const { id } = this
+
+    return Vue.extend({
+      inheritAttrs: false,
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement) {
+        return createElement(
+          this.as, {
+            style: {
+              whiteSpace: 'pre-wrap',
+            },
+            attrs: {
+              id,
+              contenteditable: true,
+            },
+          },
+        )
+      },
+    })
+  }
+
   mount(component: Vue | VueConstructor) {
-    const Component = Vue.extend(component)
+    const NodeViewWrapper = this.createNodeViewWrapper()
+    const NodeViewContent = this.createNodeViewContent()
+
+    const Component = Vue
+      .extend(component)
+      .extend({
+        components: {
+          NodeViewWrapper,
+          NodeViewContent,
+        },
+      })
+
+    const props = {
+      editor: this.editor,
+      NodeViewWrapper,
+      NodeViewContent,
+      node: this.node,
+      updateAttributes: (attrs: {}) => this.updateAttributes(attrs),
+    }
 
     this.vm = new Component({
+      // TODO: get parent component <editor-content>
       // parent: this.parent,
-      // propsData: props,
+      propsData: props,
     }).$mount()
   }
 
@@ -30,13 +140,110 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    return this.vm.$refs.content as Element
+    if (this.vm.$el.id === this.id) {
+      return this.vm.$el
+    }
+
+    return this.vm.$el.querySelector(`#${this.id}`)
   }
 
-  stopEvent() {
+  stopEvent(event: Event) {
+    const target = (event.target as HTMLElement)
+    const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
+
+    // ignore all events from child nodes
+    if (!isInElement) {
+      return false
+    }
+
+    const isDraggable = this.node.type.spec.draggable
+    const isCopyEvent = event.type === 'copy'
+    const isPasteEvent = event.type === 'paste'
+    const isCutEvent = event.type === 'cut'
+    const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
+
+    if (isDraggable && isDragEvent && !this.isDragging) {
+      event.preventDefault()
+      return false
+    }
+
+    // we have to store that dragging started
+    if (isDraggable && !this.isDragging && event.type === 'mousedown') {
+      const dragHandle = target.closest('[data-drag-handle]')
+      const isValidDragHandle = dragHandle
+        && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
+
+      if (isValidDragHandle) {
+        this.isDragging = true
+        document.addEventListener('dragend', () => {
+          this.isDragging = false
+        }, { once: true })
+      }
+    }
+
+    // these events are handled by prosemirror
+    if (this.isDragging || isCopyEvent || isPasteEvent || isCutEvent) {
+      return false
+    }
+
     return true
   }
 
+  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    if (mutation.type === 'selection') {
+      return true
+    }
+
+    if (!this.contentDOM) {
+      return true
+    }
+
+    const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
+      || this.contentDOM === mutation.target
+
+    return contentDOMHasChanged
+  }
+
+  destroy() {
+    this.vm.$destroy()
+  }
+
+  update(node: ProseMirrorNode, decorations: Decoration[]) {
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (node === this.node && this.decorations === decorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+    this.updateComponentProps()
+
+    return true
+  }
+
+  updateComponentProps() {
+    this.vm.$props.node = this.node
+    this.vm.$props.decorations = this.decorations
+  }
+
+  updateAttributes(attributes: {}) {
+    if (!this.editor.view.editable) {
+      return
+    }
+
+    const { state } = this.editor.view
+    const pos = this.getPos()
+    const transaction = state.tr.setNodeMarkup(pos, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(transaction)
+  }
+
 }
 
 export default function VueRenderer(component: Vue | VueConstructor) {