diff --git a/package-lock.json b/package-lock.json
index da40ae4..1aa0a7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "stencil-quill",
- "version": "5.0.2",
+ "version": "5.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1727,8 +1727,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"aproba": {
"version": "1.2.0",
@@ -1749,14 +1748,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1771,20 +1768,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -1901,8 +1895,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -1914,7 +1907,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -1929,7 +1921,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1937,14 +1928,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -1963,7 +1952,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -2044,8 +2032,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -2057,7 +2044,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -2143,8 +2129,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -2180,7 +2165,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -2200,7 +2184,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -2244,14 +2227,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
diff --git a/package.json b/package.json
index 3aa8bc5..92a5fb2 100644
--- a/package.json
+++ b/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",
diff --git a/readme.md b/readme.md
index ba59bbf..4130532 100644
--- a/readme.md
+++ b/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
```
{
diff --git a/src/components.d.ts b/src/components.d.ts
index ba8f70c..1867b59 100644
--- a/src/components.d.ts
+++ b/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
diff --git a/src/components/quill-editor.tsx b/src/components/quill-editor.tsx
index 6ea1c3a..f7dfa43 100644
--- a/src/components/quill-editor.tsx
+++ b/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')
diff --git a/src/index.html b/src/index.html
index 35048ab..56cd54d 100644
--- a/src/index.html
+++ b/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)
});