Fix toolbar button state not updated in some cases (#2892)

Co-authored-by: Alec Gibson <aleckgibson@gmail.com>
slab · Feb 12, 2024 · 9e7ff2a · 9e7ff2a
1 parent 15f2e8f
commit 9e7ff2a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/quill/src/modules/toolbar.ts b/packages/quill/src/modules/toolbar.ts
@@ -61,12 +61,7 @@ class Toolbar extends Module<ToolbarProps> {
         this.attach(input);
       },
     );
-    this.quill.on(Quill.events.EDITOR_CHANGE, (type, range) => {
-      if (type === Quill.events.SELECTION_CHANGE) {
-        this.update(range as Range);
-      }
-    });
-    this.quill.on(Quill.events.SCROLL_OPTIMIZE, () => {
+    this.quill.on(Quill.events.EDITOR_CHANGE, () => {
       const [range] = this.quill.selection.getRange(); // quill.getSelection triggers update
       this.update(range);
     });

diff --git a/packages/quill/test/unit/modules/toolbar.spec.ts b/packages/quill/test/unit/modules/toolbar.spec.ts
@@ -236,5 +236,14 @@ describe('Toolbar', () => {
       expect(centerButton.getAttribute('aria-pressed')).toBe('false');
       expect(leftButton.getAttribute('aria-pressed')).toBe('false');
     });
+
+    test('update on format', function () {
+      const { container, quill } = setup();
+      const boldButton = container?.parentNode?.querySelector('button.ql-bold');
+      quill.setSelection(1, 2);
+      expect(boldButton?.classList.contains('ql-active')).toBe(false);
+      quill.format('bold', true, 'user');
+      expect(boldButton?.classList.contains('ql-active')).toBe(true);
+    });
   });
 });