feat: add toolbar-button-pressed part value to active buttons (#6691)

vaadin · Oct 24, 2023 · 9e45de0 · 9e45de0
1 parent c99bf7b
commit 9e45de0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
@@ -520,11 +520,9 @@ export const RichTextEditorMixin = (superClass) =>
 
         toolbar.controls.forEach((pair) => {
           const input = pair[1];
-          if (input.classList.contains('ql-active')) {
-            input.setAttribute('on', '');
-          } else {
-            input.removeAttribute('on');
-          }
+          const isActive = input.classList.contains('ql-active');
+          input.toggleAttribute('on', isActive);
+          input.part.toggle('toolbar-button-pressed', isActive);
         });
       };
     }

diff --git a/packages/rich-text-editor/test/basic.common.js b/packages/rich-text-editor/test/basic.common.js
@@ -164,6 +164,15 @@ describe('rich text editor', () => {
         expect(btn.hasAttribute('on')).to.be.false;
       });
 
+      it('should toggle "toolbar-button-pressed" part value when the format button is clicked', () => {
+        btn = getButton('bold');
+
+        btn.click();
+        expect(btn.part.contains('toolbar-button-pressed')).to.be.true;
+        btn.click();
+        expect(btn.part.contains('toolbar-button-pressed')).to.be.false;
+      });
+
       it('should toggle "on" attribute for corresponding buttons when selection is changed', () => {
         const delta = new window.Quill.imports.delta([
           { attributes: { bold: true }, insert: 'Foo\n' },