improve updating props for nodeviews

examples/Components/Routes/Embeds/Iframe.js

@@ -32,24 +32,22 @@ export default class Iframe extends Node {
   get view() {
     return {
       props: ['node', 'updateAttrs', 'editable'],
-      data() {
-        return {
-          url: this.node.attrs.src,
-        }
-      },
-      methods: {
-        onChange(event) {
-          this.url = event.target.value
-
-          this.updateAttrs({
-            src: this.url,
-          })
+      computed: {
+        src: {
+          get() {
+            return this.node.attrs.src
+          },
+          set(src) {
+            this.updateAttrs({
+              src,
+            })
+          },
         },
       },
       template: `
         <div class="iframe">
-          <iframe class="iframe__embed" :src="url"></iframe>
-          <input class="iframe__input" type="text" :value="url" @input="onChange" v-if="editable" />
+          <iframe class="iframe__embed" :src="src"></iframe>
+          <input class="iframe__input" type="text" v-model="src" v-if="editable" />
         </div>
       `,
     }

packages/tiptap/src/utils/ComponentView.js

@@ -88,9 +88,14 @@ export default class ComponentView {
     this.node = node
     this.decorations = decorations
 
-    // TODO: should be update props? maybe this is required for the collab plugin
-    // this.vm._props.node = node
-    // this.vm._props.decorations = decorations
+    // Update props in component
+    // TODO: Avoid mutating a prop directly.
+    // Maybe there is a better way to do this?
+    const originalSilent = Vue.config.silent
+    Vue.config.silent = true
+    this.vm._props.node = node
+    this.vm._props.decorations = decorations
+    Vue.config.silent = originalSilent
 
     return true
   }