@vaadin/rich-text-editor 25.0.0-alpha8 → 25.0.0-beta1

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

@@ -9,40 +9,33 @@
  * license.
  */
 import '../vendor/vaadin-quill.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 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 +62,6 @@ const STATE = {
   CLICKED: 2,
 };
 
-const TAB_KEY = 9;
-
 const DEFAULT_I18N = {
   undo: 'undo',
   redo: 'redo',
@@ -87,6 +78,8 @@ const DEFAULT_I18N = {
   superscript: 'superscript',
   listOrdered: 'list ordered',
   listBullet: 'list bullet',
+  outdent: 'outdent',
+  indent: 'indent',
   alignLeft: 'align left',
   alignCenter: 'align center',
   alignRight: 'align right',
@@ -374,23 +367,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;
         }
       });
@@ -422,9 +413,9 @@ export const RichTextEditorMixin = (superClass) =>
       // Set up tooltip to show when hovering or focusing toolbar buttons
       this._tooltip = document.createElement('vaadin-tooltip');
       this._tooltip.slot = 'tooltip';
-      // Create dummy aria target, as toolbar buttons already have aria-label, and also cannot be linked with the
-      // tooltip being in the light DOM
-      this._tooltip.ariaTarget = document.createElement('div');
+      // Set ariaTarget to null, as toolbar buttons already have aria-label,
+      // and also cannot be linked with the tooltip being in the light DOM
+      this._tooltip.ariaTarget = null;
       this.append(this._tooltip);
 
       const buttons = this.shadowRoot.querySelectorAll('[part~="toolbar-button"]');
@@ -435,13 +426,16 @@ export const RichTextEditorMixin = (superClass) =>
     }
 
     /** @private */
-    __showTooltip(event) {
-      const target = event.target;
+    __showTooltip({ type, target }) {
+      // Only show tooltip when focused with keyboard
+      if (type === 'focusin' && !isKeyboardActive()) {
+        return;
+      }
       this._tooltip.target = target;
       this._tooltip.text = target.ariaLabel;
       this._tooltip._stateController.open({
-        focus: event.type === 'focusin',
-        hover: event.type === 'mouseenter',
+        focus: type === 'focusin',
+        hover: type === 'mouseenter',
       });
     }
 
@@ -496,7 +490,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();
         }
@@ -539,7 +533,6 @@ export const RichTextEditorMixin = (superClass) =>
         toolbar.controls.forEach((pair) => {
           const input = pair[1];
           const isActive = input.classList.contains('ql-active');
-          input.toggleAttribute('on', isActive);
           input.part.toggle('toolbar-button-pressed', isActive);
         });
       };
@@ -552,19 +545,13 @@ export const RichTextEditorMixin = (superClass) =>
         this._toolbar.querySelector('button:not([tabindex])').focus();
       };
 
-      const keyboard = this._editor.getModule('keyboard');
-      const bindings = keyboard.bindings[TAB_KEY];
-
-      // 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 keyboard = this._editor.keyboard;
 
-      keyboard.bindings[TAB_KEY] = [...originalBindings, moveFocusBinding];
+      // Shift + Tab focuses a toolbar button unless we are in list / code block
+      keyboard.addBinding({ key: 'Tab', shiftKey: true, handler: focusToolbar });
 
       // 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 +590,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);
       }
@@ -678,6 +666,7 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __onColorClick() {
+      this._tooltip.opened = false;
       this._colorEditing = true;
     }
 
@@ -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;
@@ -693,6 +683,7 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __onBackgroundClick() {
+      this._tooltip.opened = false;
       this._backgroundEditing = true;
     }
 
@@ -701,6 +692,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,30 +700,66 @@ 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
+      // We have to use this instead of `innerHTML` to get correct tags like `<pre>` etc.
+      let content = this._editor.getSemanticHTML();
+      // Remove Quill classes, e.g. ql-syntax, except for align and indent
       content = content.replace(/class="([^"]*)"/gu, (_match, group1) => {
         const classes = group1.split(' ').filter((className) => {
-          return !className.startsWith('ql-') || className.startsWith('ql-align');
+          return !className.startsWith('ql-') || className.startsWith('ql-align') || className.startsWith('ql-indent');
         });
         return `class="${classes.join(' ')}"`;
       });
-      // Remove meta spans, e.g. cursor which are empty after Quill classes removed
-      content = content.replace(/<span[^>]*><\/span>/gu, '');
-
-      // Replace Quill align classes with inline styles
-      [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {
-        content = content.replace(
-          new RegExp(` class=[\\\\]?"\\s?ql-align-${align}[\\\\]?"`, 'gu'),
-          ` style="text-align: ${align}"`,
-        );
+      // Process align and indent classes
+      content = this.__processQuillClasses(content);
+      this._setHtmlValue(content);
+    }
+
+    /** @private */
+    __processQuillClasses(content) {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = content;
+      // Process only elements with align or indent classes
+      const elementsToProcess = tempDiv.querySelectorAll('[class*="ql-align"], [class*="ql-indent"]');
+      elementsToProcess.forEach((element) => {
+        this.__processAlignClasses(element);
+        this.__processIndentClasses(element);
+        element.removeAttribute('class');
       });
+      return tempDiv.innerHTML;
+    }
 
-      content = content.replace(/ class=""/gu, '');
+    /** @private */
+    __processAlignClasses(element) {
+      let styleText = element.getAttribute('style') || '';
+      const alignments = [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'];
+      alignments.forEach((align) => {
+        if (element.classList.contains(`ql-align-${align}`)) {
+          const newStyle = `text-align: ${align}`;
+          styleText = styleText ? `${styleText}; ${newStyle}` : newStyle;
+          element.setAttribute('style', styleText);
+          element.classList.remove(`ql-align-${align}`);
+        }
+      });
+    }
 
-      this._setHtmlValue(content);
+    /** @private */
+    __processIndentClasses(element) {
+      const indentClass = Array.from(element.classList).find((className) => className.startsWith('ql-indent-'));
+      if (indentClass) {
+        const level = parseInt(indentClass.replace('ql-indent-', '').trim(), 10);
+        const tabs = '\t'.repeat(level);
+        // Add tabs to content
+        const firstChild = element.firstChild;
+        if (firstChild && firstChild.nodeType === Node.TEXT_NODE) {
+          firstChild.textContent = tabs + firstChild.textContent;
+        } else if (element.childNodes.length > 0) {
+          const tabNode = document.createTextNode(tabs);
+          element.insertBefore(tabNode, element.firstChild);
+        } else {
+          element.textContent = tabs;
+        }
+        element.classList.remove(indentClass);
+      }
     }
 
     /**
@@ -778,7 +806,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-popup.js

@@ -16,7 +16,7 @@ import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { richTextEditorPopupOverlayStyles } from './styles/vaadin-rich-text-editor-popup-overlay-core-styles.js';
+import { richTextEditorPopupOverlayStyles } from './styles/vaadin-rich-text-editor-popup-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
@@ -32,15 +32,16 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
 
   static get styles() {
     return css`
-      :host {
-        display: none !important;
-      }
-
       :host([opened]),
       :host([opening]),
       :host([closing]) {
         display: contents !important;
       }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 
@@ -70,7 +71,7 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
   render() {
     return html`
       <vaadin-rich-text-editor-popup-overlay
-        popover="manual"
+        id="overlay"
         .owner="${this}"
         .opened="${this.opened}"
         .positionTarget="${this.target}"
@@ -163,22 +164,6 @@ class RichTextEditorPopupOverlay extends PositionMixin(
     `;
   }
 
-  /**
-   * @protected
-   * @override
-   */
-  _attachOverlay() {
-    this.showPopover();
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _detachOverlay() {
-    this.hidePopover();
-  }
-
   /**
    * Override method from OverlayFocusMixin to use owner as content root
    * @protected
@@ -189,11 +174,11 @@ class RichTextEditorPopupOverlay extends PositionMixin(
   }
 
   /**
-   * Override method from OverlayFocusMixin to use owner as modal root
+   * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
    * @override
    */
-  get _modalRoot() {
+  get _focusTrapRoot() {
     return this.owner;
   }
 }

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

@@ -34,18 +34,17 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * ```
  *
  * Vaadin Rich Text Editor focuses on the structure, not the styling of content.
- * Therefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,
+ * Therefore, the semantic HTML5 tags such as `<h1>`, `<strong>` and `<ul>` are used,
  * and CSS usage is limited to most common cases, like horizontal text alignment.
  *
  * ### Styling
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled`   | Set to a disabled text editor | :host
- * `readonly`   | Set to a readonly text editor | :host
- * `on`         | Set to a toolbar button applied to the selected text | toolbar-button
+ * Attribute    | Description
+ * -------------|------------------------------
+ * `disabled`   | Set to a disabled text editor
+ * `readonly`   | Set to a readonly text editor
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -54,12 +53,13 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `content`                            | The content wrapper
  * `toolbar`                            | The toolbar wrapper
  * `toolbar-group`                      | The group for toolbar controls
- * `toolbar-group-history`              | The group for histroy controls
+ * `toolbar-group-history`              | The group for history controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `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-indent`               | The group for indentation 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
@@ -81,6 +81,8 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-button-superscript`         | The "superscript" button
  * `toolbar-button-list-ordered`        | The "ordered list" button
  * `toolbar-button-list-bullet`         | The "bullet list" button
+ * `toolbar-button-outdent`             | The "decrease indentation" button
+ * `toolbar-button-indent`              | The "increase indentation" button
  * `toolbar-button-align-left`          | The "left align" button
  * `toolbar-button-align-center`        | The "center align" button
  * `toolbar-button-align-right`         | The "right align" button

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

@@ -14,12 +14,13 @@ import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/tooltip/src/vaadin-tooltip.js';
 import './vaadin-rich-text-editor-popup.js';
 import { html, LitElement, render } from 'lit';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { richTextEditorStyles } from './styles/vaadin-rich-text-editor-core-styles.js';
+import { richTextEditorStyles } from './styles/vaadin-rich-text-editor-base-styles.js';
 import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
 
 /**
@@ -32,18 +33,17 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * ```
  *
  * Vaadin Rich Text Editor focuses on the structure, not the styling of content.
- * Therefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,
+ * Therefore, the semantic HTML5 tags such as `<h1>`, `<strong>` and `<ul>` are used,
  * and CSS usage is limited to most common cases, like horizontal text alignment.
  *
  * ### Styling
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled`   | Set to a disabled text editor | :host
- * `readonly`   | Set to a readonly text editor | :host
- * `on`         | Set to a toolbar button applied to the selected text | toolbar-button
+ * Attribute    | Description
+ * -------------|------------------------------
+ * `disabled`   | Set to a disabled text editor
+ * `readonly`   | Set to a readonly text editor
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -52,12 +52,13 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * `content`                            | The content wrapper
  * `toolbar`                            | The toolbar wrapper
  * `toolbar-group`                      | The group for toolbar controls
- * `toolbar-group-history`              | The group for histroy controls
+ * `toolbar-group-history`              | The group for history controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `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-indent`               | The group for indentation 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
@@ -79,6 +80,8 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * `toolbar-button-superscript`         | The "superscript" button
  * `toolbar-button-list-ordered`        | The "ordered list" button
  * `toolbar-button-list-bullet`         | The "bullet list" button
+ * `toolbar-button-outdent`             | The "decrease indentation" button
+ * `toolbar-button-indent`              | The "increase indentation" button
  * `toolbar-button-align-left`          | The "left align" button
  * `toolbar-button-align-center`        | The "center align" button
  * `toolbar-button-align-right`         | The "right align" button
@@ -115,6 +118,12 @@ class RichTextEditor extends RichTextEditorMixin(
     return richTextEditorStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`
@@ -259,6 +268,27 @@ class RichTextEditor extends RichTextEditorMixin(
             ></button>
           </span>
 
+          <span part="toolbar-group toolbar-group-indent">
+            <!-- Decrease -->
+            <button
+              id="btn-outdent"
+              type="button"
+              class="ql-indent"
+              value="-1"
+              part="toolbar-button toolbar-button-outdent"
+              aria-label="${this.__effectiveI18n.outdent}"
+            ></button>
+            <!-- Increase -->
+            <button
+              id="btn-indent"
+              type="button"
+              class="ql-indent"
+              value="+1"
+              part="toolbar-button toolbar-button-indent"
+              aria-label="${this.__effectiveI18n.indent}"
+            ></button>
+          </span>
+
           <span part="toolbar-group toolbar-group-alignment">
             <!-- Align buttons -->
             <button
@@ -438,7 +468,7 @@ class RichTextEditor extends RichTextEditorMixin(
       confirmDialog.$.overlay.addEventListener(
         'vaadin-overlay-open',
         () => {
-          urlField.focus();
+          urlField.focus({ focusVisible: isKeyboardActive() });
         },
         { once: true },
       );

package/vaadin-rich-text-editor.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-rich-text-editor.js';
+import './src/vaadin-rich-text-editor.js';
 export * from './src/vaadin-rich-text-editor.js';