diff --git a/package-lock.json b/package-lock.json index 0002a97..2d078ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "stencil-quill", - "version": "5.2.1", + "version": "6.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 30ea01b..455f473 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stencil-quill", - "version": "5.2.1", + "version": "6.0.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 4130532..f17ad89 100644 --- a/readme.md +++ b/readme.md @@ -114,11 +114,11 @@ XRP Wallet Address: [Full Quill Toolbar HTML](https://github.com/quilljs/quill/blob/f75ff2973f068c3db44f949915eb8a74faf162a8/docs/_includes/full-toolbar.html) ### Events -- onInitialised - editor instance +- editorInit - editor instance ``` editor ``` -- onContentChanged - text is updated by 'user' +- editorContentChange - text is updated by 'user' ``` { editor: editorInstance, @@ -130,7 +130,7 @@ editor source: source } ``` -- onSelectionChanged - selection is updated, also triggered for onBlur and onFocus, because the selection changed +- editorSelectionChange - selection is updated, also triggered for onBlur and onFocus, because the selection changed ``` { editor: editorInstance, @@ -139,7 +139,7 @@ editor source: source } ``` -- onEditorChanged - text or selection is updated - independent of the source +- editorChange - text or selection is updated - independent of the source ``` { editor: editorInstance, // Quill @@ -165,14 +165,14 @@ or } ``` -- onFocus - editor is focused +- editorFocus - editor is focused ``` { editor: editorInstance, // Quill source: source // ('user', 'api', 'silent' , undefined) } ``` -- onBlur - editor is blured +- editorBlur - editor is blured ``` { editor: editorInstance, // Quill diff --git a/src/components.d.ts b/src/components.d.ts index 1867b59..65a1dbf 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -1,3 +1,4 @@ +/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. @@ -46,19 +47,19 @@ declare global { interface HTMLQuillEditorElement extends Components.QuillEditor, HTMLStencilElement {} - var HTMLQuillEditorElement: { + const HTMLQuillEditorElement: { prototype: HTMLQuillEditorElement; new (): HTMLQuillEditorElement; }; interface HTMLQuillViewElement extends Components.QuillView, HTMLStencilElement {} - var HTMLQuillViewElement: { + const HTMLQuillViewElement: { prototype: HTMLQuillViewElement; new (): HTMLQuillViewElement; }; interface HTMLQuillViewHtmlElement extends Components.QuillViewHtml, HTMLStencilElement {} - var HTMLQuillViewHtmlElement: { + const HTMLQuillViewHtmlElement: { prototype: HTMLQuillViewHtmlElement; new (): HTMLQuillViewHtmlElement; }; @@ -70,7 +71,7 @@ declare global { } declare namespace LocalJSX { - interface QuillEditor extends JSXBase.HTMLAttributes { + interface QuillEditor { 'bounds'?: HTMLElement | string; 'content'?: string; 'customToolbarPosition'?: 'top' | 'bottom'; @@ -78,41 +79,41 @@ declare namespace LocalJSX { 'format'?: 'html' | 'text' | 'json'; 'formats'?: string[]; 'modules'?: string; - 'onOnBlur'?: (event: CustomEvent<{ + 'onEditorBlur'?: (event: CustomEvent<{ editor: any source: string }>) => void; - 'onOnContentChanged'?: (event: CustomEvent<{ + 'onEditorChange'?: (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; - 'onOnEditorChanged'?: (event: CustomEvent<{ + 'onEditorContentChange'?: (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<{ + 'onEditorFocus'?: (event: CustomEvent<{ editor: any source: string }>) => void; - 'onOnInitialised'?: (event: CustomEvent) => void; - 'onOnSelectionChanged'?: (event: CustomEvent<{ + 'onEditorInit'?: (event: CustomEvent) => void; + 'onEditorSelectionChange'?: (event: CustomEvent<{ editor: any range: any oldRange: any @@ -126,7 +127,7 @@ declare namespace LocalJSX { 'styles'?: string; 'theme'?: string; } - interface QuillView extends JSXBase.HTMLAttributes { + interface QuillView { 'content'?: string; 'debug'?: string; 'format'?: 'html' | 'text' | 'json'; @@ -137,7 +138,7 @@ declare namespace LocalJSX { 'styles'?: string; 'theme'?: string; } - interface QuillViewHtml extends JSXBase.HTMLAttributes { + interface QuillViewHtml { 'content'?: string; 'theme'?: string; } @@ -154,7 +155,11 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { - interface IntrinsicElements extends LocalJSX.IntrinsicElements {} + interface IntrinsicElements { + 'quill-editor': LocalJSX.QuillEditor & JSXBase.HTMLAttributes; + 'quill-view': LocalJSX.QuillView & JSXBase.HTMLAttributes; + 'quill-view-html': LocalJSX.QuillViewHtml & JSXBase.HTMLAttributes; + } } } diff --git a/src/components/quill-editor.tsx b/src/components/quill-editor.tsx index 0ebcca1..e1139e8 100644 --- a/src/components/quill-editor.tsx +++ b/src/components/quill-editor.tsx @@ -9,8 +9,8 @@ declare const Quill: any }) export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnload { - @Event() onInitialised: EventEmitter; - @Event() onEditorChanged: EventEmitter<{ + @Event() editorInit: EventEmitter; + @Event() editorChange: EventEmitter<{ editor: any event: 'text-change', content: any @@ -26,7 +26,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa oldRange: any source: string }> - @Event() onContentChanged: EventEmitter<{ + @Event() editorContentChange: EventEmitter<{ editor: any content: any text: string @@ -35,17 +35,17 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa oldDelta: any source: string }>; - @Event() onSelectionChanged: EventEmitter<{ + @Event() editorSelectionChange: EventEmitter<{ editor: any range: any oldRange: any source: string }>; - @Event() onFocus: EventEmitter<{ + @Event() editorFocus: EventEmitter<{ editor: any source: string }>; - @Event() onBlur: EventEmitter<{ + @Event() editorBlur: EventEmitter<{ editor: any source: string }>; @@ -190,7 +190,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa html = null } - this.onEditorChanged.emit({ + this.editorChange.emit({ content, delta: current, editor: this.quillEditor, @@ -201,7 +201,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa text }) } else { - this.onEditorChanged.emit({ + this.editorChange.emit({ editor: this.quillEditor, event, oldRange: old, @@ -216,18 +216,18 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa 'selection-change', (range: any, oldRange: any, source: string) => { if (range === null) { - this.onBlur.emit({ + this.editorBlur.emit({ editor: this.quillEditor, source }) } else if (oldRange === null) { - this.onFocus.emit({ + this.editorFocus.emit({ editor: this.quillEditor, source }) } - this.onSelectionChanged.emit({ + this.editorSelectionChange.emit({ editor: this.quillEditor, range, oldRange, @@ -247,7 +247,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa html = null; } - this.onContentChanged.emit({ + this.editorContentChange.emit({ editor: this.quillEditor, content, delta, @@ -259,7 +259,7 @@ export class QuillEditorComponent implements ComponentDidLoad, ComponentDidUnloa } ); - this.onInitialised.emit(this.quillEditor); + this.editorInit.emit(this.quillEditor); } componentDidUnload() { diff --git a/src/index.html b/src/index.html index 56cd54d..b6e2f15 100644 --- a/src/index.html +++ b/src/index.html @@ -127,31 +127,31 @@

QuillView - Present json connected to default editor

quillEditor.styles = !JSON.parse(quillEditor.styles)['background-color'] ? JSON.stringify({ 'background-color': 'grey' }) : '{}' } - quillEditor.addEventListener('onInitialised', (event) => { - console.log('onInitialised', event.detail) + quillEditor.addEventListener('editorInit', (event) => { + console.log('editorInit', event.detail) quillEditor.content = JSON.stringify({ ops: [{ insert: 'hallo' }] }) quillView.content = JSON.stringify({ ops: [{ insert: 'hallo' }] }) }); - quillEditor.addEventListener('onContentChanged', (event) => { - console.log('onContentChanged', event.detail) + quillEditor.addEventListener('editorContentChange', (event) => { + console.log('editorContentChange', event.detail) quillView.content = JSON.stringify(event.detail.content) }); - quillEditor.addEventListener('onEditorChanged', (event) => { - console.log('onEditorChanged', event.detail) + quillEditor.addEventListener('editorChange', (event) => { + console.log('editorChange', event.detail) }); - quillEditor.addEventListener('onSelectionChanged', (event) => { - console.log('onSelectionChanged', event.detail) + quillEditor.addEventListener('editorSelectionChange', (event) => { + console.log('editorSelectionChange', event.detail) }); - quillEditor.addEventListener('onFocus', (event) => { - console.log('onFocus', event.detail) + quillEditor.addEventListener('editorFocus', (event) => { + console.log('editorFocus', event.detail) }); - quillEditor.addEventListener('onBlur', (event) => { - console.log('onFocus', event.detail) + quillEditor.addEventListener('editorBlur', (event) => { + console.log('editorBlur', event.detail) });