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; + @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 === '


' || html === '

') { + 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 @@

QuillView - Present json connected to default editor

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) });