feat: add indent and outdent toolbar buttons and i18n strings (#9971)

Author: web-padawan

packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-icons.js

@@ -515,6 +515,14 @@ const toolbar = css`
     mask-image: var(--_vaadin-icon-list-bullet);
   }
 
+  [part~='toolbar-button-outdent']::before {
+    mask-image: var(--_vaadin-icon-outdent);
+  }
+
+  [part~='toolbar-button-indent']::before {
+    mask-image: var(--_vaadin-icon-indent);
+  }
+
   [part~='toolbar-button-align-left']::before {
     mask-image: var(--_vaadin-icon-align-left);
   }

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

@@ -27,6 +27,8 @@ export interface RichTextEditorI18n {
   superscript?: string;
   listOrdered?: string;
   listBullet?: string;
+  outdent?: string;
+  indent?: string;
   alignLeft?: string;
   alignCenter?: string;
   alignRight?: string;

packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.d.ts

@@ -77,6 +77,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',

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

@@ -60,6 +60,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation 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 +82,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

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

@@ -58,6 +58,7 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation 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
@@ -259,6 +262,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

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

@@ -263,27 +263,35 @@ describe('accessibility', () => {
   });
 
   describe('indent', () => {
+    let indent;
+
     beforeEach(async () => {
       rte = fixtureSync('<vaadin-rich-text-editor></vaadin-rich-text-editor>');
       await nextRender();
       editor = rte._editor;
-      buttons = Array.from(rte.shadowRoot.querySelectorAll(`[part=toolbar] button`));
+      indent = rte.shadowRoot.querySelector('#btn-indent');
       content = rte.shadowRoot.querySelector('[contenteditable]');
     });
 
-    it('should represent indentation correctly', () => {
-      rte.value = JSON.stringify([
-        { insert: 'Indent 1\n', attributes: { indent: 1 } },
-        { insert: 'Indent 2\n', attributes: { indent: 2 } },
-      ]);
-      expect(content.innerHTML).to.equal('<p class="ql-indent-1">Indent 1</p><p class="ql-indent-2">Indent 2</p>');
-    });
+    it('should represent indentation correctly', async () => {
+      editor.focus();
+      indent.click();
 
-    it('should convert ql-indent-* classes to tabs in htmlValue', () => {
-      rte.value = JSON.stringify([
-        { insert: 'Indent 1\n', attributes: { indent: 1 } },
-        { insert: 'Indent 2\n', attributes: { indent: 2 } },
-      ]);
+      await sendKeys({ type: 'Indent 1' });
+      await sendKeys({ press: 'Enter' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ type: 'Indent 2' });
+      flushValueDebouncer();
+
+      expect(rte.value).to.equal(
+        JSON.stringify([
+          { insert: 'Indent 1' },
+          { attributes: { indent: 1 }, insert: '\n' },
+          { insert: 'Indent 2' },
+          { attributes: { indent: 2 }, insert: '\n' },
+        ]),
+      );
+      expect(content.innerHTML).to.equal('<p class="ql-indent-1">Indent 1</p><p class="ql-indent-2">Indent 2</p>');
       expect(rte.htmlValue).to.equal('<p>\tIndent 1</p><p>\t\tIndent 2</p>');
     });
 

packages/rich-text-editor/test/a11y.test.js

@@ -598,6 +598,30 @@ snapshots["vaadin-rich-text-editor shadow"] =
       >
       </button>
     </span>
+    <span part="toolbar-group toolbar-group-indent">
+      <button
+        aria-label="outdent"
+        aria-pressed="false"
+        class="ql-indent"
+        id="btn-outdent"
+        part="toolbar-button toolbar-button-outdent"
+        tabindex="-1"
+        type="button"
+        value="-1"
+      >
+      </button>
+      <button
+        aria-label="indent"
+        aria-pressed="false"
+        class="ql-indent"
+        id="btn-indent"
+        part="toolbar-button toolbar-button-indent"
+        tabindex="-1"
+        type="button"
+        value="+1"
+      >
+      </button>
+    </span>
     <span part="toolbar-group toolbar-group-alignment">
       <button
         aria-label="align left"

packages/rich-text-editor/test/dom/__snapshots__/rich-text-editor.test.snap.js

@@ -95,6 +95,28 @@ describe('toolbar controls', () => {
       });
     });
 
+    it('should increase indentation when clicking the "toolbar-button-indent" part', () => {
+      btn = getButton('indent');
+
+      btn.click();
+      expect(editor.getFormat(0).indent).to.be.equal(1);
+
+      btn.click();
+      expect(editor.getFormat(0).indent).to.be.equal(2);
+    });
+
+    it('should decrease indentation when clicking the "toolbar-button-outdent" part', () => {
+      rte.value = JSON.stringify([{ insert: 'Indent 2\n', attributes: { indent: 2 } }]);
+
+      btn = getButton('outdent');
+
+      btn.click();
+      expect(editor.getFormat(0).indent).to.be.equal(1);
+
+      btn.click();
+      expect(editor.getFormat(0).indent).to.be.not.ok;
+    });
+
     [1, 2].forEach((level) => {
       it(`should create <h${level}> header when clicking the "toolbar-button-h${level}" part`, () => {
         btn = getButton(`h${level}`);