@vaadin/rich-text-editor 23.1.0-alpha3 → 23.1.0-beta2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-rich-text-editor",
   "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/rich-text-editor/LICENSE",
+  "cvdlName": "vaadin-rich-text-editor",
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
@@ -38,14 +39,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/confirm-dialog": "23.1.0-alpha3",
-    "@vaadin/text-field": "23.1.0-alpha3",
+    "@vaadin/button": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/confirm-dialog": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +56,5 @@
     "gulp-iconfont": "^11.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/vaadin-rich-text-editor.d.ts

@@ -181,13 +181,13 @@ declare class RichTextEditor extends ElementMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof RichTextEditorEventMap>(
     type: K,
     listener: (this: RichTextEditor, ev: RichTextEditorEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof RichTextEditorEventMap>(
     type: K,
     listener: (this: RichTextEditor, ev: RichTextEditorEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-rich-text-editor.js

@@ -31,19 +31,19 @@ const HANDLERS = [
   'list',
   'align',
   'blockquote',
-  'code-block'
+  'code-block',
 ];
 
 const SOURCE = {
   API: 'api',
   USER: 'user',
-  SILENT: 'silent'
+  SILENT: 'silent',
 };
 
 const STATE = {
   DEFAULT: 0,
   FOCUSED: 1,
-  CLICKED: 2
+  CLICKED: 2,
 };
 
 const TAB_KEY = 9;
@@ -362,6 +362,10 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     return 'vaadin-rich-text-editor';
   }
 
+  static get cvdlName() {
+    return 'vaadin-rich-text-editor';
+  }
+
   static get properties() {
     return {
       /**
@@ -382,7 +386,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       value: {
         type: String,
         notify: true,
-        value: ''
+        value: '',
       },
 
       /**
@@ -391,7 +395,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       htmlValue: {
         type: String,
         notify: true,
-        readOnly: true
+        readOnly: true,
       },
 
       /**
@@ -401,7 +405,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       disabled: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -411,7 +415,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       readonly: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -449,14 +453,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
             linkDialogTitle: 'Link address',
             ok: 'OK',
             cancel: 'Cancel',
-            remove: 'Remove'
+            remove: 'Remove',
           };
-        }
+        },
       },
 
       /** @private */
       _editor: {
-        type: Object
+        type: Object,
       },
 
       /**
@@ -468,31 +472,31 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       /** @private */
       __lastCommittedChange: {
         type: String,
-        value: ''
+        value: '',
       },
 
       /** @private */
       _linkEditing: {
-        type: Boolean
+        type: Boolean,
       },
 
       /** @private */
       _linkRange: {
         type: Object,
-        value: null
+        value: null,
       },
 
       /** @private */
       _linkIndex: {
         type: Number,
-        value: null
+        value: null,
       },
 
       /** @private */
       _linkUrl: {
         type: String,
-        value: ''
-      }
+        value: '',
+      },
     };
   }
 
@@ -558,8 +562,8 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
     this._editor = new Quill(editor, {
       modules: {
-        toolbar: toolbarConfig
-      }
+        toolbar: toolbarConfig,
+      },
     });
 
     this.__patchToolbar();
@@ -595,7 +599,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     });
 
     editorContent.addEventListener('focus', () => {
-      // format changed, but no value changed happened
+      // Format changed, but no value changed happened
       if (this._toolbarState === STATE.CLICKED) {
         this._cleanToolbarState();
       }
@@ -613,11 +617,11 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     const toolbar = {
       container: this.shadowRoot.querySelector('[part="toolbar"]'),
       handlers: {
-        clean: function () {
+        clean() {
           self._markToolbarClicked();
           clean.call(this);
-        }
-      }
+        },
+      },
     };
 
     HANDLERS.forEach((handler) => {
@@ -662,7 +666,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       }
     });
 
-    // mousedown happens before editor focusout
+    // Mousedown happens before editor focusout
     toolbar.addEventListener('mousedown', (e) => {
       if (buttons.indexOf(e.composedPath()[0]) > -1) {
         this._markToolbarFocused();
@@ -687,7 +691,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   __createFakeFocusTarget() {
-    const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
     const elem = document.createElement('textarea');
     // Reset box model
     elem.style.border = '0';
@@ -704,7 +708,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   __patchFirefoxFocus() {
-    // in Firefox 63+ with native Shadow DOM, when moving focus out of
+    // In Firefox 63+ with native Shadow DOM, when moving focus out of
     // contenteditable and back again within same shadow root, cursor
     // disappears. See https://bugzilla.mozilla.org/show_bug.cgi?id=1496769
     const editorContent = this.shadowRoot.querySelector('.ql-editor');
@@ -714,7 +718,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       isFake = true;
       this.__fakeTarget = this.__createFakeFocusTarget();
       document.body.appendChild(this.__fakeTarget);
-      // let the focus step out of shadow root!
+      // Let the focus step out of shadow root!
       this.__fakeTarget.focus();
       return new Promise((resolve) => {
         setTimeout(resolve);
@@ -753,7 +757,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     const toolbar = this._editor.getModule('toolbar');
     const update = toolbar.update;
 
-    // add custom link button to toggle state attribute
+    // Add custom link button to toggle state attribute
     toolbar.controls.push(['link', this.shadowRoot.querySelector('[part~="toolbar-button-link"]')]);
 
     toolbar.update = function (range) {
@@ -780,7 +784,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     const keyboard = this._editor.getModule('keyboard');
     const bindings = keyboard.bindings[TAB_KEY];
 
-    // exclude Quill shift-tab bindings, except for code block,
+    // Exclude Quill shift-tab bindings, except for code block,
     // as some of those are breaking when on a newline in the list
     // https://github.com/vaadin/vaadin-rich-text-editor/issues/67
     const originalBindings = bindings.filter((b) => !b.shiftKey || (b.format && b.format['code-block']));
@@ -788,7 +792,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
     keyboard.bindings[TAB_KEY] = [...originalBindings, moveFocusBinding];
 
-    // alt-f10 focuses a toolbar button
+    // Alt-f10 focuses a toolbar button
     keyboard.addBinding({ key: 121, altKey: true, handler: focusToolbar });
   }
 
@@ -814,7 +818,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       const LinkBlot = Quill.imports['formats/link'];
       const [link, offset] = this._editor.scroll.descendant(LinkBlot, range.index);
       if (link != null) {
-        // existing link
+        // Existing link
         this._linkRange = { index: range.index - offset, length: link.length() };
         this._linkUrl = LinkBlot.formats(link.domNode);
       } else if (range.length === 0) {
@@ -912,7 +916,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {
       content = content.replace(
         new RegExp(` class=[\\\\]?"\\s?ql-align-${align}[\\\\]?"`, 'g'),
-        ` style="text-align: ${align}"`
+        ` style="text-align: ${align}"`,
       );
     });
 
@@ -951,7 +955,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
           .map((button) => button.getAttribute('title'))
           .join(', ');
         announcer.textContent = formatting;
-      }
+      },
     );
   }
 
@@ -1017,7 +1021,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
         const range = this._editor.getSelection(true);
         this._editor.updateContents(
           new Quill.imports.delta().retain(range.index).delete(range.length).insert({ image }),
-          SOURCE.USER
+          SOURCE.USER,
         );
         this._markToolbarClicked();
         this._editor.setSelection(range.index + 1, SOURCE.SILENT);
@@ -1056,7 +1060,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       return;
     }
 
-    if (value == null || value == '[{"insert":"\\n"}]') {
+    if (value == null || value === '[{"insert":"\\n"}]') {
       this.value = '';
       return;
     }
@@ -1072,7 +1076,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       if (Array.isArray(parsedValue)) {
         this.__oldValue = value;
       } else {
-        throw new Error('expected JSON string with array of objects, got: ' + value);
+        throw new Error(`expected JSON string with array of objects, got: ${value}`);
       }
     } catch (err) {
       // Use old value in case new one is not suitable
@@ -1081,7 +1085,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       return;
     }
     const delta = new Quill.imports.delta(parsedValue);
-    // suppress text-change event to prevent infinite loop
+    // Suppress text-change event to prevent infinite loop
     if (JSON.stringify(editor.getContents()) !== JSON.stringify(delta)) {
       editor.setContents(delta, SOURCE.SILENT);
     }
@@ -1091,7 +1095,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       this._cleanToolbarState();
       this.__emitChangeEvent();
     } else if (!this._editor.hasFocus()) {
-      // value changed from outside
+      // Value changed from outside
       this.__lastCommittedChange = this.value;
     }
   }

package/theme/lumo/vaadin-rich-text-editor-styles.js

@@ -217,5 +217,5 @@ const richTextEditor = css`
 `;
 
 registerStyles('vaadin-rich-text-editor', [color, typography, richTextEditor], {
-  moduleId: 'lumo-rich-text-editor'
+  moduleId: 'lumo-rich-text-editor',
 });

package/theme/material/vaadin-rich-text-editor-styles.js

@@ -94,5 +94,5 @@ const richTextEditor = css`
 `;
 
 registerStyles('vaadin-rich-text-editor', [typography, richTextEditor], {
-  moduleId: 'material-rich-text-editor'
+  moduleId: 'material-rich-text-editor',
 });