fix: deep reactivity of delta

Author: Tofandel

demo/src/examples/ContentType.vue

@@ -50,10 +50,12 @@ export default defineComponent({
       ]);
       contentHTML.value = '<h3>This is a different HTML header</h3>';
       contentText.value = 'This is some more plain text';
+
+      setTimeout(() =>
+          contentDelta.value.insert('\n I am also deeply reactive and a ref update works'), 200)
     }
 
     return { contentDelta, contentHTML, contentText, update }
   },
 })
 </script>
-

packages/vue-quill/src/components/QuillEditor.ts

@@ -185,12 +185,19 @@ export const QuillEditor = defineComponent({
       )
     }
 
+    const maybeClone = (delta: Delta | string) => {
+      if (typeof delta === 'object') {
+        console.log(delta.ops, delta.ops === delta.slice().ops)
+      }
+      return typeof delta === 'object' ? delta.slice() : delta
+    }
+
     const deltaHasValuesOtherThanRetain = (delta: Delta): boolean => {
       return Object.values(delta.ops).some((v) => !v.retain)
     }
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    let internalModel = props.content // Doesn't need reactivity
+    // Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
+    let internalModel: typeof props.content
     const internalModelEquals = (against: Delta | String | undefined) => {
       if (typeof internalModel === typeof against) {
         if (against === internalModel) {
@@ -214,7 +221,7 @@ export const QuillEditor = defineComponent({
       // Quill should never be null at this point because we receive an event
       // so content should not be undefined but let's make ts and eslint happy
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      internalModel = getContents()!
+      internalModel = maybeClone(getContents()!)
       // Update v-model:content when text changes
       if (!internalModelEquals(props.content)) {
         ctx.emit('update:content', internalModel)
@@ -302,6 +309,7 @@ export const QuillEditor = defineComponent({
       } else {
         quill?.setContents(content as Delta, source)
       }
+      internalModel = maybeClone(content)
     }
 
     const getText = (index?: number, length?: number): string => {
@@ -320,7 +328,7 @@ export const QuillEditor = defineComponent({
       if (quill) quill.root.innerHTML = html
     }
 
-    const pasteHTML = (html: string, source: Sources = 'api') => {
+    const pasteHTML = (html: string, source: Sources = 'user') => {
       const delta = quill?.clipboard.convert(html as {})
       if (delta) quill?.setContents(delta, source)
     }
@@ -338,14 +346,14 @@ export const QuillEditor = defineComponent({
       (newContent) => {
         if (!quill || !newContent || internalModelEquals(newContent)) return
 
-        internalModel = newContent
         // Restore the selection and cursor position after updating the content
         const selection = quill.getSelection()
         if (selection) {
           nextTick(() => quill?.setSelection(selection))
         }
         setContents(newContent)
-      }
+      },
+      { deep: true }
     )
 
     watch(