Update pasting html - fire text change and selection change, fix demo

demo/src/components/BasicEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { QuillyEditor } from 'vue-quilly'
+import { QuillyEditor } from '../../../src/'
 import Quill, { Delta, Range } from 'quill/core'
 import 'quill/dist/quill.core.css'
 

demo/src/components/CompleteEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { QuillyEditor } from 'vue-quilly'
+import { QuillyEditor } from '../../../src/'
 import { Delta, Range } from 'quill/core'
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'

src/components/QuillyEditor.vue

@@ -28,10 +28,17 @@ const container = ref<HTMLElement>()
 const model = ref<string>()
 
 // Convert modelValue HTML to Delta and replace editor content
-const pasteHTML = (quill: Quill | null) => {
+const pasteHTML = (quill: Quill) => {
   model.value = props.modelValue
-  const content = quill!.clipboard.convert({ html: props.modelValue })
-  return content
+  const oldContent = quill.getContents()
+  const oldRange = quill.getSelection()!
+  const delta = quill.clipboard.convert({ html: props.modelValue })
+  const range = { index: model.value!.length, length: 0 }
+  quill.setContents(delta)
+  quill.setSelection(range)
+  emit('text-change', { delta, oldContent, source: 'api' })
+  emit('selection-change', { range, oldRange, source: 'api' })
+  return delta
 }
 
 // Editor initialization, returns Quill instance
@@ -40,10 +47,7 @@ const initialize = (QuillClass: typeof Quill) => {
 
   // Set editor initial model
   if (props.modelValue) {
-    const oldContent = quill.getContents()
-    const delta = pasteHTML(quill)
-    console.log(delta, oldContent)
-    emit('text-change', { delta, oldContent, source: 'api' })
+    pasteHTML(quill)
   }
 
   // Handle editor selection change, emit blur and focus
@@ -79,7 +83,7 @@ watch(
   () => props.modelValue,
   (newValue) => {
     if (newValue && newValue !== model.value) {
-      pasteHTML(quillInstance)
+      pasteHTML(quillInstance!)
       model.value = quillInstance!.root.innerHTML
     } else if (!newValue) {
       quillInstance!.setContents([])