From 51dc5860bdd1db32a615a36ae11c2d1885ae10be Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Mon, 5 Jun 2023 05:43:50 +0300
Subject: [PATCH] Fix toggleable editor button styles (#2531)

---
 qt/aqt/editor.py                | 4 +++-
 ts/editor/legacy.scss           | 4 ++++
 ts/editor/old-editor-adapter.ts | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index ffe4e0803..c2d80e8af 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -236,7 +236,9 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
 
                     def on_hotkey() -> None:
                         on_activated()
-                        self.web.eval(f'toggleEditorButton("#{id}");')
+                        self.web.eval(
+                            f'toggleEditorButton(document.getElementById("{id}"));'
+                        )
 
                 else:
                     on_hotkey = on_activated
diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index 835d2d281..1ebf4b056 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -33,3 +33,7 @@
         }
     }
 }
+
+button {
+    @include button.base($active-class: active);
+}
diff --git a/ts/editor/old-editor-adapter.ts b/ts/editor/old-editor-adapter.ts
index 551cb4c8b..0412584a1 100644
--- a/ts/editor/old-editor-adapter.ts
+++ b/ts/editor/old-editor-adapter.ts
@@ -21,3 +21,7 @@ export function setFormat(cmd: string, arg?: string, _nosave = false): void {
     execCommand(cmd, false, arg);
     updateAllState(new Event(cmd));
 }
+
+export function toggleEditorButton(button: HTMLButtonElement): void {
+    button.classList.toggle("active");
+}