feat: editor-change

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stencil-quill",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Native web component for quill editor",
   "module": "dist/index.mjs",
   "main": "dist/index.js",

readme.md

@@ -139,6 +139,32 @@ editor
   source: source
 }
 ```
+- onEditorChanged - text or selection is updated - independent of the source
+```
+{
+  editor: editorInstance, // Quill
+  event: 'text-change' // event type
+  html: html, // html string
+  text: text, // plain text string
+  content: content, // Content - operatins representation
+  delta: delta, // Delta
+  oldDelta: oldDelta, // Delta
+  source: source // ('user', 'api', 'silent' , undefined)
+}
+```
+
+or
+
+```
+{
+  editor: editorInstance, // Quill
+  event: 'selection-change' // event type
+  range: range, // Range
+  oldRange: oldRange, // Range
+  source: source // ('user', 'api', 'silent' , undefined)
+}
+```
+
 - onFocus - editor is focused
 ```
 {

src/components.d.ts

@@ -91,6 +91,22 @@ declare namespace LocalJSX {
       oldDelta: any
       source: string
     }>) => void;
+    'onOnEditorChanged'?: (event: CustomEvent<{
+      editor: any
+      event: 'text-change',
+      content: any
+      text: string
+      html: string
+      delta: any
+      oldDelta: any
+      source: string
+    } | {
+      editor: any
+      event: 'selection-change',
+      range: any
+      oldRange: any
+      source: string
+    }>) => void;
     'onOnFocus'?: (event: CustomEvent<{
       editor: any
       source: string

src/components/quill-editor.tsx

@@ -10,6 +10,22 @@ declare const Quill: any
 export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnload {
 
   @Event() onInitialised: EventEmitter<any>;
+  @Event() onEditorChanged: EventEmitter<{
+    editor: any
+    event: 'text-change',
+    content: any
+    text: string
+    html: string
+    delta: any
+    oldDelta: any
+    source: string
+  } | {
+    editor: any
+    event: 'selection-change',
+    range: any
+    oldRange: any
+    source: string
+  }>
   @Event() onContentChanged: EventEmitter<{
     editor: any
     content: any
@@ -82,6 +98,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa
 
   selectionChangeEvent: any;
   textChangeEvent: any;
+  editorChangeEvent: any;
 
   setEditorContent(value: any) {
     if (this.format === 'html') {
@@ -159,6 +176,42 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa
       this.quillEditor['history'].clear();
     }
 
+    this.editorChangeEvent = this.quillEditor.on(
+      'editor-change',
+      (event: 'text-change' | 'selection-change', current: any | Range | null, old: any | Range | null, source: string): void => {
+        // only emit changes emitted by user interactions
+
+        if (event === 'text-change') {
+          const text = this.quillEditor.getText()
+          const content = this.quillEditor.getContents()
+
+          let html: string | null = this.editorElement.querySelector('.ql-editor')!.innerHTML
+          if (html === '<p><br></p>' || html === '<div><br><div>') {
+            html = null
+          }
+
+          this.onEditorChanged.emit({
+            content,
+            delta: current,
+            editor: this.quillEditor,
+            event,
+            html,
+            oldDelta: old,
+            source,
+            text
+          })
+        } else {
+          this.onEditorChanged.emit({
+            editor: this.quillEditor,
+            event,
+            oldRange: old,
+            range: current,
+            source
+          })
+        }
+      }
+    )
+
     this.selectionChangeEvent = this.quillEditor.on(
       'selection-change',
       (range: any, oldRange: any, source: string) => {
@@ -216,6 +269,9 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa
     if (this.textChangeEvent) {
       this.textChangeEvent.removeListener('text-change');
     }
+    if (this.editorChangeEvent) {
+      this.editorChangeEvent.removeListener('editor-change');
+    }
   }
 
   @Watch('content')

src/index.html

@@ -138,6 +138,10 @@ <h3>QuillView - Present json <small>connected to default editor</small></h3>
       quillView.content = JSON.stringify(event.detail.content)
     });
 
+    quillEditor.addEventListener('onEditorChanged', (event) => {
+      console.log('onEditorChanged', event.detail)
+    });
+
     quillEditor.addEventListener('onSelectionChanged', (event) => {
       console.log('onSelectionChanged', event.detail)
     });