diff --git a/packages/quill/src/modules/toolbar.ts b/packages/quill/src/modules/toolbar.ts index 72dec32993..5794bd765d 100644 --- a/packages/quill/src/modules/toolbar.ts +++ b/packages/quill/src/modules/toolbar.ts @@ -61,12 +61,7 @@ class Toolbar extends Module { 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 index bdae05f9f9..1c81aa3ffd 100644 --- 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); + }); }); });