Merge pull request #287 from Tofandel/patch-1

fix(reactivity): correctly trigger content update if prop changes

Author: luthfi-hh

demo/package-lock.json

@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "quill-blot-formatter": "^1.0.5",
-    "vue": "^3.0.5"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.2.1",
-    "@vue/compiler-sfc": "^3.0.5",
-    "typescript": "^4.1.3",
-    "vite": "^2.1.5",
-    "vue-tsc": "^0.0.15"
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/compiler-sfc": "^3.2.41",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vue-tsc": "^1.0.9"
   }
 }

demo/package.json

@@ -1,11 +1,26 @@
 <template>
   <h1>Content Type</h1>
-  <QuillEditor v-model:content="contentDelta" contentType="delta" />
+  <QuillEditor
+    v-model:content="contentDelta"
+    content-type="delta"
+  />
   <pre>{{ contentDelta }}</pre>
-  <QuillEditor v-model:content="contentHTML" contentType="html" />
+  <QuillEditor
+    v-model:content="contentHTML"
+    content-type="html"
+  />
   <pre>{{ contentHTML }}</pre>
-  <QuillEditor v-model:content="contentText" contentType="text" />
+  <QuillEditor
+    v-model:content="contentText"
+    content-type="text"
+  />
   <pre>{{ contentText }}</pre>
+  <button
+    type="button"
+    @click="update"
+  >
+    Trigger external content update
+  </button>
 </template>
 
 <script lang="ts">
@@ -27,7 +42,17 @@ export default defineComponent({
     const contentHTML = ref('<h1>This is html header</h1>')
     const contentText = ref('This is just plain text')
 
-    return { contentDelta, contentHTML, contentText }
+    const update = () => {
+      contentDelta.value = new Delta([
+        { insert: 'Gandalf', attributes: { bold: true } },
+        { insert: ' the ' },
+        { insert: 'White', attributes: { color: '#fff', background: '#000' } },
+      ]);
+      contentHTML.value = '<h3>This is a different HTML header</h3>';
+      contentText.value = 'This is some more plain text';
+    }
+
+    return { contentDelta, contentHTML, contentText, update }
   },
 })
 </script>

demo/src/assets/logo.png

@@ -1,4 +1,3 @@
-
 {
   "compilerOptions": {
     "target": "esnext",
@@ -11,10 +10,12 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "types": ["vite/client"],
-    "rootDir": ".",
+    "rootDir": "..",
+    "baseUrl": ".",
     "paths": {
       "@vueup/*": ["../packages/*/src"]
-    }
+    },
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }