@vaadin/rich-text-editor 24.1.9 → 24.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.1.9",
+  "version": "24.1.10",
   "publishConfig": {
     "access": "public"
   },
@@ -40,18 +40,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.1.9",
-    "@vaadin/component-base": "~24.1.9",
-    "@vaadin/confirm-dialog": "~24.1.9",
-    "@vaadin/text-field": "~24.1.9",
-    "@vaadin/tooltip": "~24.1.9",
-    "@vaadin/vaadin-lumo-styles": "~24.1.9",
-    "@vaadin/vaadin-material-styles": "~24.1.9",
-    "@vaadin/vaadin-themable-mixin": "~24.1.9"
+    "@vaadin/button": "~24.1.10",
+    "@vaadin/component-base": "~24.1.10",
+    "@vaadin/confirm-dialog": "~24.1.10",
+    "@vaadin/text-field": "~24.1.10",
+    "@vaadin/tooltip": "~24.1.10",
+    "@vaadin/vaadin-lumo-styles": "~24.1.10",
+    "@vaadin/vaadin-material-styles": "~24.1.10",
+    "@vaadin/vaadin-themable-mixin": "~24.1.10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "~24.1.9",
+    "@vaadin/a11y-base": "~24.1.10",
     "@vaadin/testing-helpers": "^0.4.2",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -63,5 +63,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "33afe5c47c46df82bf6cfc8cd9dfb2b34ca91067"
+  "gitHead": "d0d07a263af46425a3b1db115115782c7835270b"
 }

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

@@ -26,6 +26,35 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
 
 const Quill = window.Quill;
 
+// Workaround for text disappearing when accepting spellcheck suggestion
+// See https://github.com/quilljs/quill/issues/2096#issuecomment-399576957
+const Inline = Quill.import('blots/inline');
+
+class CustomColor extends Inline {
+  constructor(domNode, value) {
+    super(domNode, value);
+
+    // Map <font> properties
+    domNode.style.color = domNode.color;
+
+    const span = this.replaceWith(new Inline(Inline.create()));
+
+    span.children.forEach((child) => {
+      if (child.attributes) child.attributes.copy(span);
+      if (child.unwrap) child.unwrap();
+    });
+
+    this.remove();
+
+    return span; // eslint-disable-line no-constructor-return
+  }
+}
+
+CustomColor.blotName = 'customColor';
+CustomColor.tagName = 'FONT';
+
+Quill.register(CustomColor, true);
+
 const HANDLERS = [
   'bold',
   'italic',
@@ -533,6 +562,20 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Ensure that htmlValue property set before attach
+    // gets applied in case of detach and re-attach.
+    if (this.__debounceSetValue && this.__debounceSetValue.isActive()) {
+      this.__debounceSetValue.flush();
+    }
+
+    this._editor.emitter.removeAllListeners();
+    this._editor.emitter.listeners = {};
+  }
+
   /** @private */
   __setDirection(dir) {
     // Needed for proper `ql-align` class to be set and activate the toolbar align button
@@ -554,18 +597,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @protected */
-  ready() {
-    super.ready();
+  connectedCallback() {
+    super.connectedCallback();
 
     const editor = this.shadowRoot.querySelector('[part="content"]');
-    const toolbarConfig = this._prepareToolbar();
-    this._toolbar = toolbarConfig.container;
-
-    this._addToolbarListeners();
 
     this._editor = new Quill(editor, {
       modules: {
-        toolbar: toolbarConfig,
+        toolbar: this._toolbarConfig,
       },
     });
 
@@ -577,10 +616,6 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       this.__patchFirefoxFocus();
     }
 
-    this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
-      this.$.linkUrl.focus();
-    });
-
     const editorContent = editor.querySelector('.ql-editor');
 
     editorContent.setAttribute('role', 'textbox');
@@ -632,6 +667,20 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._editor.on('selection-change', this.__announceFormatting.bind(this));
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._toolbarConfig = this._prepareToolbar();
+    this._toolbar = this._toolbarConfig.container;
+
+    this._addToolbarListeners();
+
+    this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
+      this.$.linkUrl.focus();
+    });
+  }
+
   /** @private */
   _prepareToolbar() {
     const clean = Quill.imports['modules/toolbar'].DEFAULTS.handlers.clean;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.1.9",
+  "version": "24.1.10",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.1.9",
+  "version": "24.1.10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {