refactoring

packages/tiptap/src/utils/ComponentView.js

@@ -11,9 +11,9 @@ export default class ComponentView {
     decorations,
     editable,
   }) {
+    this.component = component
     this.extension = extension
     this.parent = parent
-    this.component = component
     this.node = node
     this.view = view
     this.getPos = getPos
@@ -41,41 +41,6 @@ export default class ComponentView {
     return this.vm.$el
   }
 
-  updateAttrs(attrs) {
-    if (!this.editable) {
-      return
-    }
-
-    const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, {
-      ...this.node.attrs,
-      ...attrs,
-    })
-    this.view.dispatch(transaction)
-  }
-
-  updateContent(content) {
-    if (!this.editable) {
-      return
-    }
-
-    const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), this.node.type, { content })
-    this.view.dispatch(transaction)
-  }
-
-  ignoreMutation() {
-    return true
-  }
-
-  stopEvent() {
-    const draggable = !!this.extension.schema.draggable
-
-    if (draggable) {
-      return false
-    }
-
-    return true
-  }
-
   update(node, decorations) {
     if (node.type !== this.node.type) {
       return false
@@ -100,6 +65,44 @@ export default class ComponentView {
     return true
   }
 
+  updateAttrs(attrs) {
+    if (!this.editable) {
+      return
+    }
+
+    const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, {
+      ...this.node.attrs,
+      ...attrs,
+    })
+    this.view.dispatch(transaction)
+  }
+
+  updateContent(content) {
+    if (!this.editable) {
+      return
+    }
+
+    const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), this.node.type, { content })
+    this.view.dispatch(transaction)
+  }
+
+  // prevent a full re-render of the vue component on update
+  // we'll handle prop updates in `update()`
+  ignoreMutation() {
+    return true
+  }
+
+  // disable (almost) all prosemirror event listener for node views
+  stopEvent() {
+    const draggable = !!this.extension.schema.draggable
+
+    if (draggable) {
+      return false
+    }
+
+    return true
+  }
+
   destroy() {
     this.vm.$destroy()
   }