@vaadin/rich-text-editor 25.0.0-alpha12 → 25.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "25.0.0-alpha12",
+  "version": "25.0.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha12",
-    "@vaadin/component-base": "25.0.0-alpha12",
-    "@vaadin/confirm-dialog": "25.0.0-alpha12",
-    "@vaadin/overlay": "25.0.0-alpha12",
-    "@vaadin/text-field": "25.0.0-alpha12",
-    "@vaadin/tooltip": "25.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha12",
+    "@vaadin/button": "25.0.0-alpha13",
+    "@vaadin/component-base": "25.0.0-alpha13",
+    "@vaadin/confirm-dialog": "25.0.0-alpha13",
+    "@vaadin/overlay": "25.0.0-alpha13",
+    "@vaadin/text-field": "25.0.0-alpha13",
+    "@vaadin/tooltip": "25.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha12",
-    "@vaadin/chai-plugins": "25.0.0-alpha12",
-    "@vaadin/test-runner-commands": "25.0.0-alpha12",
+    "@vaadin/a11y-base": "25.0.0-alpha13",
+    "@vaadin/chai-plugins": "25.0.0-alpha13",
+    "@vaadin/test-runner-commands": "25.0.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha13",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-rich-text-editor",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e75527348f9ba7c363d068c868b9f030c15b84a1"
+  "gitHead": "182de596226343392135468f021bbce9e6402011"
 }

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

@@ -15,7 +15,7 @@ const base = css`
   :host {
     background: var(--vaadin-rich-text-editor-background, var(--vaadin-background-color));
     border: var(--vaadin-input-field-border-width, 1px) solid
-      var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
+      var(--vaadin-input-field-border-color, var(--vaadin-border-color));
     border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
     box-sizing: border-box;
     display: flex;
@@ -118,30 +118,61 @@ export const content = css`
   .ql-align-right {
     text-align: right;
   }
+
+  .ql-code-block-container {
+    font-family: monospace;
+    background-color: var(--vaadin-background-container);
+    border-radius: var(--vaadin-radius-s);
+    white-space: pre-wrap;
+    margin-block: var(--vaadin-padding-s);
+    padding: var(--vaadin-padding-container);
+  }
+
+  .ql-editor li {
+    list-style-type: none;
+    position: relative;
+  }
+
+  .ql-editor li > .ql-ui::before {
+    display: inline-block;
+    margin-left: -1.5em;
+    margin-right: 0.3em;
+    text-align: right;
+    white-space: nowrap;
+    width: 1.2em;
+  }
+
+  .ql-editor li[data-list='bullet'] {
+    list-style-type: disc;
+  }
+
+  .ql-editor li[data-list='ordered'] {
+    counter-increment: list-0;
+  }
+
+  .ql-editor li[data-list='ordered'] > .ql-ui::before {
+    content: counter(list-0, decimal) '. ';
+  }
   /* quill core end */
 
   blockquote {
-    border-inline-start: 4px solid var(--vaadin-border-color);
+    border-inline-start: 4px solid var(--vaadin-border-color-subtle);
     margin: var(--vaadin-padding-container);
-    padding-inline-start: var(--vaadin-padding);
+    padding-inline-start: var(--vaadin-padding-s);
   }
 
-  code,
-  pre {
+  code {
     background-color: var(--vaadin-background-container);
     border-radius: var(--vaadin-radius-s);
+    padding: 0.125rem 0.25rem;
   }
 
   pre {
     white-space: pre-wrap;
-    margin-block: var(--vaadin-padding);
+    margin-block: var(--vaadin-padding-s);
     padding: var(--vaadin-padding-container);
   }
 
-  code {
-    padding: 0.125rem 0.25rem;
-  }
-
   img {
     max-width: 100%;
   }
@@ -159,8 +190,8 @@ const toolbar = css`
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
-    gap: var(--vaadin-rich-text-editor-toolbar-gap, var(--vaadin-gap-container-inline));
-    padding: var(--vaadin-rich-text-editor-toolbar-padding, var(--vaadin-padding));
+    gap: var(--vaadin-rich-text-editor-toolbar-gap, var(--vaadin-gap-s));
+    padding: var(--vaadin-rich-text-editor-toolbar-padding, var(--vaadin-padding-s));
   }
 
   [part~='toolbar-group'] {

package/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js

@@ -18,7 +18,7 @@ export const richTextEditorPopupOverlay = css`
 
   [part='content'] {
     display: grid;
-    gap: var(--vaadin-rich-text-editor-overlay-gap, var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-rich-text-editor-overlay-gap, var(--vaadin-gap-s));
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 

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

@@ -15,34 +15,26 @@ import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
 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
+// There are some issues e.g. `spellcheck="false"` not preserved
+// See https://github.com/slab/quill/issues/4289
+// Fix to add `spellcheck="false"` on the `<pre>` tag removed by Quill
+const QuillCodeBlockContainer = Quill.import('formats/code-block-container');
+
+class CodeBlockContainer extends QuillCodeBlockContainer {
+  html(index, length) {
+    const markup = super.html(index, length);
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = markup;
+    const preTag = tempDiv.querySelector('pre');
+    if (preTag) {
+      preTag.setAttribute('spellcheck', 'false');
+      return preTag.outerHTML;
+    }
+    return markup; // fallback
   }
 }
 
-CustomColor.blotName = 'customColor';
-CustomColor.tagName = 'FONT';
-
-Quill.register(CustomColor, true);
+Quill.register('formats/code-block-container', CodeBlockContainer, true);
 
 const HANDLERS = [
   'bold',
@@ -69,8 +61,6 @@ const STATE = {
   CLICKED: 2,
 };
 
-const TAB_KEY = 9;
-
 const DEFAULT_I18N = {
   undo: 'undo',
   redo: 'redo',
@@ -374,23 +364,21 @@ export const RichTextEditorMixin = (superClass) =>
         }
       });
 
-      const TAB_KEY = 9;
-
       editorContent.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
           if (!this.__tabBindings) {
-            this.__tabBindings = this._editor.keyboard.bindings[TAB_KEY];
-            this._editor.keyboard.bindings[TAB_KEY] = null;
+            this.__tabBindings = this._editor.keyboard.bindings.Tab;
+            this._editor.keyboard.bindings.Tab = null;
           }
         } else if (this.__tabBindings) {
-          this._editor.keyboard.bindings[TAB_KEY] = this.__tabBindings;
+          this._editor.keyboard.bindings.Tab = this.__tabBindings;
           this.__tabBindings = null;
         }
       });
 
       editorContent.addEventListener('blur', () => {
         if (this.__tabBindings) {
-          this._editor.keyboard.bindings[TAB_KEY] = this.__tabBindings;
+          this._editor.keyboard.bindings.Tab = this.__tabBindings;
           this.__tabBindings = null;
         }
       });
@@ -496,7 +484,7 @@ export const RichTextEditorMixin = (superClass) =>
           buttons[index].focus();
         }
         // Esc and Tab focuses the content
-        if (e.keyCode === 27 || (e.keyCode === TAB_KEY && !e.shiftKey)) {
+        if (e.keyCode === 27 || (e.key === 'Tab' && !e.shiftKey)) {
           e.preventDefault();
           this._editor.focus();
         }
@@ -552,19 +540,19 @@ export const RichTextEditorMixin = (superClass) =>
         this._toolbar.querySelector('button:not([tabindex])').focus();
       };
 
-      const keyboard = this._editor.getModule('keyboard');
-      const bindings = keyboard.bindings[TAB_KEY];
+      const keyboard = this._editor.keyboard;
+      const bindings = keyboard.bindings.Tab;
 
       // 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']));
-      const moveFocusBinding = { key: TAB_KEY, shiftKey: true, handler: focusToolbar };
+      const moveFocusBinding = { key: 'Tab', shiftKey: true, handler: focusToolbar };
 
-      keyboard.bindings[TAB_KEY] = [...originalBindings, moveFocusBinding];
+      keyboard.bindings.Tab = [...originalBindings, moveFocusBinding];
 
       // Alt-f10 focuses a toolbar button
-      keyboard.addBinding({ key: 121, altKey: true, handler: focusToolbar });
+      keyboard.addBinding({ key: 'F10', altKey: true, handler: focusToolbar });
     }
 
     /** @private */
@@ -603,6 +591,7 @@ export const RichTextEditorMixin = (superClass) =>
     _applyLink(link) {
       if (link) {
         this._markToolbarClicked();
+        this._editor.focus();
         this._editor.format('link', link, SOURCE.USER);
         this._editor.getModule('toolbar').update(this._editor.selection.savedRange);
       }
@@ -686,6 +675,7 @@ export const RichTextEditorMixin = (superClass) =>
       const color = event.detail.color;
       this._colorValue = color === '#000000' ? null : color;
       this._markToolbarClicked();
+      this._editor.focus();
       this._editor.format('color', this._colorValue, SOURCE.USER);
       this._toolbar.style.setProperty('--_color-value', this._colorValue);
       this._colorEditing = false;
@@ -701,6 +691,7 @@ export const RichTextEditorMixin = (superClass) =>
       const color = event.detail.color;
       this._backgroundValue = color === '#ffffff' ? null : color;
       this._markToolbarClicked();
+      this._editor.focus();
       this._editor.format('background', this._backgroundValue, SOURCE.USER);
       this._toolbar.style.setProperty('--_background-value', this._backgroundValue);
       this._backgroundEditing = false;
@@ -708,19 +699,8 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __updateHtmlValue() {
-      const editor = this.shadowRoot.querySelector('.ql-editor');
-      let content = editor.innerHTML;
-
-      // Remove Quill classes, e.g. ql-syntax, except for align
-      content = content.replace(/class="([^"]*)"/gu, (_match, group1) => {
-        const classes = group1.split(' ').filter((className) => {
-          return !className.startsWith('ql-') || className.startsWith('ql-align');
-        });
-        return `class="${classes.join(' ')}"`;
-      });
-      // Remove meta spans, e.g. cursor which are empty after Quill classes removed
-      content = content.replace(/<span[^>]*><\/span>/gu, '');
-
+      // We have to use this instead of `innerHTML` to get correct tags like `<pre>` etc.
+      let content = this._editor.getSemanticHTML();
       // Replace Quill align classes with inline styles
       [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {
         content = content.replace(
@@ -728,9 +708,6 @@ export const RichTextEditorMixin = (superClass) =>
           ` style="text-align: ${align}"`,
         );
       });
-
-      content = content.replace(/ class=""/gu, '');
-
       this._setHtmlValue(content);
     }
 
@@ -778,7 +755,7 @@ export const RichTextEditorMixin = (superClass) =>
         htmlValue = htmlValue.replaceAll(/>[^<]*</gu, (match) => match.replaceAll(character, replacement)); // NOSONAR
       });
 
-      const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
+      const deltaFromHtml = this._editor.clipboard.convert({ html: htmlValue });
 
       // Restore whitespace characters after the conversion
       Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {

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

@@ -59,7 +59,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-group-heading`              | The group for heading controls
  * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
- * `toolbar-group-group-list`           | The group for group list controls
+ * `toolbar-group-list`                 | The group for list controls
  * `toolbar-group-alignment`            | The group for alignment controls
  * `toolbar-group-rich-text`            | The group for rich text controls
  * `toolbar-group-block`                | The group for preformatted block controls

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

@@ -57,7 +57,7 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * `toolbar-group-heading`              | The group for heading controls
  * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
- * `toolbar-group-group-list`           | The group for group list controls
+ * `toolbar-group-list`                 | The group for list controls
  * `toolbar-group-alignment`            | The group for alignment controls
  * `toolbar-group-rich-text`            | The group for rich text controls
  * `toolbar-group-block`                | The group for preformatted block controls