move some nodeview logic to core

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -1,12 +1,11 @@
-import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
+import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
 import {
   ref,
   provide,
   Component,
   defineComponent,
 } from 'vue'
-import { Decoration, NodeView } from 'prosemirror-view'
-import { NodeSelection } from 'prosemirror-state'
+import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
 import { Editor } from './Editor'
 import { VueRenderer } from './VueRenderer'
@@ -16,54 +15,11 @@ interface VueNodeViewRendererOptions {
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
 }
 
-class VueNodeView implements NodeView {
+class VueNodeView extends NodeView<Component, Editor> {
 
   renderer!: VueRenderer
 
-  editor: Editor
-
-  extension!: Node
-
-  node!: ProseMirrorNode
-
-  decorations!: Decoration[]
-
-  getPos!: any
-
-  isDragging = false
-
-  options: VueNodeViewRendererOptions = {
-    stopEvent: null,
-    update: null,
-  }
-
-  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<VueNodeViewRendererOptions>) {
-    this.options = { ...this.options, ...options }
-    this.editor = props.editor as Editor
-    this.extension = props.extension
-    this.node = props.node
-    this.getPos = props.getPos
-    this.mount(component)
-  }
-
-  onDragStart(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)
-  }
-
-  mount(component: Component) {
+  mount() {
     const props = {
       editor: this.editor,
       node: this.node,
@@ -82,13 +38,13 @@ class VueNodeView implements NodeView {
     })
 
     const extendedComponent = defineComponent({
-      extends: { ...component },
+      extends: { ...this.component },
       props: Object.keys(props),
-      setup() {
+      setup: () => {
         provide('onDragStart', onDragStart)
         provide('isEditable', isEditable)
 
-        return (component as any).setup?.()
+        return (this.component as any).setup?.()
       },
     })
 
@@ -116,92 +72,6 @@ class VueNodeView implements NodeView {
     return contentElement || this.dom
   }
 
-  stopEvent(event: Event) {
-    if (typeof this.options.stopEvent === 'function') {
-      return this.options.stopEvent(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 { isEditable } = this.editor
-    const { isDragging } = this
-    const isDraggable = !!this.node.type.spec.draggable
-    const isSelectable = NodeSelection.isSelectable(this.node)
-    const isCopyEvent = event.type === 'copy'
-    const isPasteEvent = event.type === 'paste'
-    const isCutEvent = event.type === 'cut'
-    const isClickEvent = event.type === 'mousedown'
-    const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
-
-    // ProseMirror tries to drag selectable nodes
-    // even if `draggable` is set to `false`
-    // this fix prevents that
-    if (!isDraggable && isSelectable && isDragEvent) {
-      event.preventDefault()
-    }
-
-    if (isDraggable && isDragEvent && !isDragging) {
-      event.preventDefault()
-      return false
-    }
-
-    // we have to store that dragging started
-    if (isDraggable && isEditable && !isDragging && isClickEvent) {
-      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 (
-      isDragging
-      || isCopyEvent
-      || isPasteEvent
-      || isCutEvent
-      || (isClickEvent && isSelectable)
-    ) {
-      return false
-    }
-
-    return true
-  }
-
-  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
-    if (mutation.type === 'selection') {
-      if (this.node.isLeaf) {
-        return true
-      }
-
-      return false
-    }
-
-    if (!this.contentDOM) {
-      return true
-    }
-
-    const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
-      || this.contentDOM === mutation.target
-
-    return contentDOMHasChanged
-  }
-
-  destroy() {
-    this.renderer.destroy()
-  }
-
   update(node: ProseMirrorNode, decorations: Decoration[]) {
     if (typeof this.options.update === 'function') {
       return this.options.update(node, decorations)
@@ -222,21 +92,6 @@ class VueNodeView implements NodeView {
     return true
   }
 
-  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)
-  }
-
   selectNode() {
     this.renderer.updateProps({
       selected: true,
@@ -249,6 +104,10 @@ class VueNodeView implements NodeView {
     })
   }
 
+  destroy() {
+    this.renderer.destroy()
+  }
+
 }
 
 export function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer {
@@ -260,6 +119,6 @@ export function VueNodeViewRenderer(component: Component, options?: Partial<VueN
       return {}
     }
 
-    return new VueNodeView(component, props, options) as NodeView
+    return new VueNodeView(component, props, options) as ProseMirrorNodeView
   }
 }