Move MathJax toggle to OptionsButton and fix two bugs (#2126)

* Rename MathJax toggle and move it to OptionsButton

* Apply MathJax setting to newly added blocks

* Actually remove MathJax element on delete

ftl/core/editing.ftl

@@ -60,7 +60,7 @@ editing-collapse-field = Collapse field
 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
+editing-mathjax-preview = MathJax Preview
 editing-shrink-images = Shrink Images
 editing-close-html-tags = Auto-close HTML tags
 

ts/editor/editor-toolbar/LatexButton.svelte

@@ -9,7 +9,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     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";
@@ -27,15 +26,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function onMathjaxInline(): void {
+        if (mathjaxConfig.enabled) {
             surround("<anki-mathjax focusonmount>", "</anki-mathjax>");
+        } else {
+            surround("\\(", "\\)");
+        }
     }
 
     function onMathjaxBlock(): void {
+        if (mathjaxConfig.enabled) {
             surround('<anki-mathjax block="true" focusonmount>', "</anki-matjax>");
+        } else {
+            surround("\\[", "\\]");
+        }
     }
 
     function onMathjaxChemistry(): void {
+        if (mathjaxConfig.enabled) {
             surround('<anki-mathjax focusonmount="0,4">\\ce{', "}</anki-mathjax>");
+        } else {
+            surround("\\(\\ce{", "}\\)");
+        }
     }
 
     function onLatex(): void {
@@ -50,11 +61,6 @@ 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[] = [
@@ -94,10 +100,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
             </DropdownItem>
         {/each}
-
-        <DropdownItem on:click={toggleShowMathjax}>
-            <span>{tr.editingToggleMathjaxRendering()}</span>
-        </DropdownItem>
     </Popover>
 </WithFloating>
 

ts/editor/editor-toolbar/OptionsButton.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "../../components/IconButton.svelte";
     import Popover from "../../components/Popover.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 { shrinkImagesByDefault } from "../image-overlay/ImageOverlay.svelte";
@@ -22,6 +23,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         showFloating = false;
     }
 
+    function toggleShowMathjax(_evt: MouseEvent): void {
+        mathjaxConfig.enabled = !mathjaxConfig.enabled;
+        bridgeCommand("toggleMathjax");
+    }
+
     function toggleCloseHTMLTags(_evt: MouseEvent): void {
         $closeHTMLTags = !$closeHTMLTags;
         bridgeCommand("toggleCloseHTMLTags");
@@ -50,6 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <CheckBox value={$shrinkImagesByDefault} />
             <span class="d-flex-inline ps-3">{tr.editingShrinkImages()}</span>
         </DropdownItem>
+        <DropdownItem on:click={toggleShowMathjax}>
+            <CheckBox value={mathjaxConfig.enabled} />
+            <span class="d-flex-inline ps-3">{tr.editingMathjaxPreview()}</span>
+        </DropdownItem>
         <DropdownItem on:click={toggleCloseHTMLTags}>
             <CheckBox value={$closeHTMLTags} />
             <span class="d-flex-inline ps-3">{tr.editingCloseHtmlTags()}</span>

ts/editor/mathjax-overlay/MathjaxOverlay.svelte

@@ -65,14 +65,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
+    function clear(): void {
+        unsubscribe();
+        activeImage = null;
+        mathjaxElement = null;
+    }
+
     async function resetHandle(): Promise<void> {
         selectAll = false;
         position = undefined;
 
         if (activeImage && mathjaxElement) {
-            unsubscribe();
+            clear();
-            activeImage = null;
-            mathjaxElement = null;
         }
 
         allow();
@@ -220,8 +224,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             }}
                             on:delete={async () => {
                                 placeCaretAfter(activeImage);
-                                activeImage.remove();
+                                mathjaxElement?.remove();
-                                await resetHandle();
+                                clear();
                             }}
                             on:surround={async ({ detail }) => {
                                 const editor = await mathjaxEditor.editor;