From d6a73193f21a5dc5ca679ea5b7d8d04a249e222c Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Wed, 27 May 2026 16:02:50 -0500 Subject: [PATCH] Fix toolbar enabling/disabling when multiple MathQuill inputs are on the page. The local storage setting needs to be checked each time an input is focused, because the toolbar may have been disabled via another input. So now a getter/setter approach is used that handles this. --- package.json | 2 +- src/toolbar.ts | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 07b455a9..035ceece 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@openwebwork/mathquill", "description": "Easily type math in your webapp", - "version": "0.11.3", + "version": "0.11.4", "license": "MPL-2.0", "repository": { "type": "git", diff --git a/src/toolbar.ts b/src/toolbar.ts index 2280ca8f..b74a2ccf 100644 --- a/src/toolbar.ts +++ b/src/toolbar.ts @@ -5,7 +5,6 @@ import { EditableField } from 'src/abstractFields'; import { StaticMath } from 'commands/math'; export class MathQuillToolbar { - private enabled: boolean; private element?: HTMLDivElement; private tooltips: Tooltip[] = []; private contextMenuElement?: HTMLDivElement; @@ -14,12 +13,19 @@ export class MathQuillToolbar { private controller: Controller, private textarea: HTMLTextAreaElement ) { - this.enabled = (localStorage.getItem('MQEditorToolbarEnabled') ?? 'true') === 'true'; textarea.addEventListener('focusin', this.insert); textarea.addEventListener('focusout', this.removeUnlessFocused); this.controller.container.addEventListener('contextmenu', this.contextMenu); } + get enabled() { + return (localStorage.getItem('MQEditorToolbarEnabled') ?? 'true') === 'true'; + } + + set enabled(enable: boolean) { + localStorage.setItem('MQEditorToolbarEnabled', enable ? 'true' : 'false'); + } + unbind() { this.textarea.removeEventListener('focusin', this.insert); this.textarea.removeEventListener('focusout', this.removeUnlessFocused); @@ -307,7 +313,6 @@ export class MathQuillToolbar { (e) => { e.preventDefault(); this.enabled = !this.enabled; - localStorage.setItem('MQEditorToolbarEnabled', this.enabled ? 'true' : 'false'); if (!this.enabled && this.element) this.remove(); // Bootstrap tries to focus the triggering element after hiding the menu. However, the menu gets // disposed of and the hidden link which is the triggering element removed too quickly in the