refactor: better event names

KillerCodeMonkey · Oct 21, 2019 · 492dbc5 · 492dbc5
1 parent b09dee0
commit 492dbc5
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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,49 +71,49 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface QuillEditor extends JSXBase.HTMLAttributes<HTMLQuillEditorElement> {
+  interface QuillEditor {
     'bounds'?: HTMLElement | string;
     'content'?: string;
     'customToolbarPosition'?: 'top' | 'bottom';
     'debug'?: string;
     '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<any>) => void;
-    'onOnSelectionChanged'?: (event: CustomEvent<{
+    'onEditorInit'?: (event: CustomEvent<any>) => 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<HTMLQuillViewElement> {
+  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<HTMLQuillViewHtmlElement> {
+  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<HTMLQuillEditorElement>;
+      'quill-view': LocalJSX.QuillView & JSXBase.HTMLAttributes<HTMLQuillViewElement>;
+      'quill-view-html': LocalJSX.QuillViewHtml & JSXBase.HTMLAttributes<HTMLQuillViewHtmlElement>;
+    }
   }
 }
 

diff --git 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<any>;
-  @Event() onEditorChanged: EventEmitter<{
+  @Event() editorInit: EventEmitter<any>;
+  @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
@@ -127,31 +127,31 @@ <h3>QuillView - Present json <small>connected to default editor</small></h3>
       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)
     });
   </script>
 </body>