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/src/themes/bubble.ts b/packages/quill/src/themes/bubble.ts index 9f06992b81..85dcb2e4dc 100644 --- a/packages/quill/src/themes/bubble.ts +++ b/packages/quill/src/themes/bubble.ts @@ -106,6 +106,8 @@ class BubbleTooltip extends BaseTooltip { } class BubbleTheme extends BaseTheme { + tooltip: BubbleTooltip; + constructor(quill: Quill, options: ThemeOptions) { if ( options.modules.toolbar != null && diff --git a/packages/quill/test/unit/core/selection.spec.ts b/packages/quill/test/unit/core/selection.spec.ts index 0bc394a57b..f3ba0e98df 100644 --- a/packages/quill/test/unit/core/selection.spec.ts +++ b/packages/quill/test/unit/core/selection.spec.ts @@ -11,7 +11,7 @@ import Italic from '../../../src/formats/italic'; import Strike from '../../../src/formats/strike'; import { ColorStyle } from '../../../src/formats/color'; import { BackgroundStyle } from '../../../src/formats/background'; -import { FontClass } from '../../../src/formats/font'; +import { SizeClass } from '../../../src/formats/size'; const createSelection = (html: string, container = document.body) => { const scroll = createScroll( @@ -25,7 +25,7 @@ const createSelection = (html: string, container = document.body) => { Link, ColorStyle, BackgroundStyle, - FontClass, + SizeClass, ]), container, ); 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); + }); }); });