Add option in math dropdown to toggle MathJax rendering (#2014)

* Add option in math dropdown to toggle MathJax rendering

Closes #1942

* Hackily redraw the page when toggling MathJax

* Add Fluent string

ftl/core/editing.ftl

@@ -58,6 +58,7 @@ editing-toggle-visual-editor = Toggle Visual Editor
 editing-underline-text = Underline text
 editing-unordered-list = Unordered list
 editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.
+editing-toggle-mathjax-rendering = Toggle MathJax Rendering
 
 ## You don't need to translate these strings, as they will be replaced with different ones soon.
 

qt/aqt/editor.py

@@ -125,6 +125,7 @@ class Editor:
         self.card: Card | None = None
         self._init_links()
         self.setupOuter()
+        self.add_webview()
         self.setupWeb()
         self.setupShortcuts()
         gui_hooks.editor_did_init(self)
@@ -139,11 +140,12 @@ class Editor:
         self.widget.setLayout(l)
         self.outerLayout = l
 
-    def setupWeb(self) -> None:
+    def add_webview(self) -> None:
         self.web = EditorWebView(self.widget, self)
         self.web.set_bridge_command(self.onBridgeCmd, self)
         self.outerLayout.addWidget(self.web, 1)
 
+    def setupWeb(self) -> None:
         if self.editorMode == EditorMode.ADD_CARDS:
             file = "note_creator"
         elif self.editorMode == EditorMode.BROWSER:
@@ -519,7 +521,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
         text_color = self.mw.pm.profile.get("lastTextColor", "#00f")
         highlight_color = self.mw.pm.profile.get("lastHighlightColor", "#00f")
 
-        js = "setFields({}); setDescriptions({}); setFonts({}); focusField({}); setNoteId({}); setColorButtons({}); setTags({}); ".format(
+        js = "setFields({}); setDescriptions({}); setFonts({}); focusField({}); setNoteId({}); setColorButtons({}); setTags({}); setMathjaxEnabled({});".format(
             json.dumps(data),
             json.dumps(descriptions),
             json.dumps(self.fonts()),
@@ -527,6 +529,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             json.dumps(self.note.id),
             json.dumps([text_color, highlight_color]),
             json.dumps(self.note.tags),
+            json.dumps(self.mw.col.get_config("renderMathjax", True)),
         )
 
         if self.addMode:
@@ -1130,6 +1133,14 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
     def insertMathjaxChemistry(self) -> None:
         self.web.eval("wrap('\\\\(\\\\ce{', '}\\\\)');")
 
+    def toggleMathjax(self) -> None:
+        self.mw.col.set_config(
+            "renderMathjax", not self.mw.col.get_config("renderMathjax", False)
+        )
+        # hackily redraw the page
+        self.setupWeb()
+        self.loadNoteKeepingFocus()
+
     # Links from HTML
     ######################################################################
 
@@ -1156,6 +1167,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             mathjaxInline=Editor.insertMathjaxInline,
             mathjaxBlock=Editor.insertMathjaxBlock,
             mathjaxChemistry=Editor.insertMathjaxChemistry,
+            toggleMathjax=Editor.toggleMathjax,
         )
 
 

ts/editable/mathjax-element.ts

@@ -20,6 +20,10 @@ function trimBreaks(text: string): string {
         .replace(/\n*$/, "");
 }
 
+export const mathjaxConfig = {
+    enabled: true,
+};
+
 export const Mathjax: DecoratedElementConstructor = class Mathjax
     extends HTMLElement
     implements DecoratedElement
@@ -41,6 +45,9 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
     }
 
     static toUndecorated(stored: string): string {
+        if (!mathjaxConfig.enabled) {
+            return stored;
+        }
         return stored
             .replace(mathjaxBlockDelimiterPattern, (_match: string, text: string) => {
                 const trimmed = trimBreaks(text);

ts/editor/NoteEditor.svelte

@@ -109,6 +109,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         fieldNames = newFieldNames;
     }
 
+    function setMathjaxEnabled(enabled: boolean): void {
+        mathjaxConfig.enabled = enabled;
+    }
+
     let fieldDescriptions: string[] = [];
     export function setDescriptions(fs: string[]): void {
         fieldDescriptions = fs;
@@ -223,6 +227,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const toolbar: Partial<EditorToolbarAPI> = {};
 
+    import { mathjaxConfig } from "../editable/mathjax-element";
     import { wrapInternal } from "../lib/wrap";
     import * as oldEditorAdapter from "./old-editor-adapter";
 
@@ -250,6 +255,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             getNoteId,
             setNoteId,
             wrap,
+            setMathjaxEnabled,
             ...oldEditorAdapter,
         });
 

ts/editor/editor-toolbar/LatexButton.svelte

@@ -10,6 +10,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Popover from "../../components/Popover.svelte";
     import Shortcut from "../../components/Shortcut.svelte";
     import WithFloating from "../../components/WithFloating.svelte";
+    import { mathjaxConfig } from "../../editable/mathjax-element";
+    import { bridgeCommand } from "../../lib/bridgecommand";
     import * as tr from "../../lib/ftl";
     import { getPlatformString } from "../../lib/shortcuts";
     import { wrapInternal } from "../../lib/wrap";
@@ -50,6 +52,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         surround("[$$]", "[/$$]");
     }
 
+    function toggleShowMathjax(): void {
+        mathjaxConfig.enabled = !mathjaxConfig.enabled;
+        bridgeCommand("toggleMathjax");
+    }
+
     type LatexItem = [() => void, string, string];
 
     const dropdownItems: LatexItem[] = [
@@ -93,6 +100,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </DropdownItem>
             <Shortcut {keyCombination} on:action={callback} />
         {/each}
+        <DropdownItem on:click={toggleShowMathjax}>
+            <span>{tr.editingToggleMathjaxRendering()}</span>
+        </DropdownItem>
     </Popover>
 </WithFloating>
 

ts/editor/editor-toolbar/RemoveFormatButton.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { onMount } from "svelte";
 
-    import Checkbox from "../../components/CheckBox.svelte";
+    import CheckBox from "../../components/CheckBox.svelte";
     import DropdownItem from "../../components/DropdownItem.svelte";
     import DropdownMenu from "../../components/DropdownMenu.svelte";
     import { withButton } from "../../components/helpers";
@@ -128,7 +128,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <DropdownMenu on:mousedown={(event) => event.preventDefault()}>
             {#each showFormats as format (format.name)}
                 <DropdownItem on:click={(event) => onItemClick(event, format)}>
-                    <Checkbox bind:value={format.active} />
+                    <CheckBox bind:value={format.active} />
                     <span class="d-flex-inline ps-3">{format.name}</span>
                 </DropdownItem>
             {/each}