fix: delta comparison and add demo

vueup · Nov 29, 2022 · f4eba73 · f4eba73
1 parent f55d907
commit f4eba73
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/demo/src/examples/ContentType.vue b/demo/src/examples/ContentType.vue
@@ -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>

diff --git a/packages/vue-quill/src/components/QuillEditor.ts b/packages/vue-quill/src/components/QuillEditor.ts
@@ -16,7 +16,6 @@ import {
   PropType,
   watch,
   ref,
-  shallowRef,
   h,
 } from 'vue'
 import { toolbarOptions, ToolbarOptions } from './options'
@@ -186,18 +185,29 @@ export const QuillEditor = defineComponent({
       )
     }
 
-    const internalModel = shallowRef(props.content)
+    const deltaHasValuesOtherThanRetain = (delta: Delta): boolean => {
+      return Object.values(delta).some((v) => !v.retain)
+    }
+
+    const internalModel = ref(props.content)
     const internalModelEquals = (against: Delta | String | undefined) => {
       if (typeof internalModel.value === typeof against) {
         if (against === internalModel.value) {
           return true
         }
-        if (against instanceof Delta && internalModel.value instanceof Delta) {
-          return internalModel.value.diff(against).length() > 0
+        // Ref/Proxy does not support instanceof, so do a loose check
+        if (
+          typeof against === 'object' &&
+          typeof internalModel.value === 'object'
+        ) {
+          return !deltaHasValuesOtherThanRetain(
+            internalModel.value.diff(against as Delta)
+          )
         }
       }
       return false
     }
+
     const handleTextChange: TextChangeHandler = (
       delta: Delta,
       oldContents: Delta,