Move cloze logic and wrapping logic editor-toolbar

ts/editor-toolbar/cloze.ts

@@ -0,0 +1,46 @@
+import IconButton from "./IconButton.svelte";
+import type { IconButtonProps } from "./IconButton";
+
+import { dynamicComponent } from "sveltelib/dynamicComponent";
+import * as tr from "anki/i18n";
+
+import bracketsIcon from "./code-brackets.svg";
+
+const clozePattern = /\{\{c(\d+)::/gu;
+function getCurrentHighestCloze(increment: boolean): number {
+    let highest = 0;
+
+    // @ts-expect-error
+    forEditorField([], (field) => {
+        const matches = field.editingArea.editable.fieldHTML.matchAll(clozePattern);
+        highest = Math.max(
+            highest,
+            ...[...matches].map((match: RegExpMatchArray): number => Number(match[1]))
+        );
+    });
+
+    if (increment) {
+        highest++;
+    }
+
+    return Math.max(1, highest);
+}
+
+function onCloze(event: MouseEvent): void {
+    const highestCloze = getCurrentHighestCloze(!event.altKey);
+
+    // @ts-expect-error
+    wrap(`{{c${highestCloze}::`, "}}");
+}
+
+const iconButton = dynamicComponent(IconButton);
+export const clozeButton = iconButton<IconButtonProps, "tooltip">(
+    {
+        id: "cloze",
+        icon: bracketsIcon,
+        onClick: onCloze,
+    },
+    {
+        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
+    }
+);

ts/editor-toolbar/template.ts

@@ -15,10 +15,11 @@ import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
-import bracketsIcon from "./code-brackets.svg";
 import functionIcon from "./function-variant.svg";
 import xmlIcon from "./xml.svg";
 
+import { clozeButton } from "./cloze";
+
 function onAttachment(): void {
     bridgeCommand("attach");
 }
@@ -27,10 +28,6 @@ function onRecord(): void {
     bridgeCommand("record");
 }
 
-function onCloze(): void {
-    bridgeCommand("cloze");
-}
-
 function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
@@ -58,17 +55,6 @@ const recordButton = iconButton(
     }
 );
 
-const clozeButton = iconButton<IconButtonProps, "tooltip">(
-    {
-        id: "cloze",
-        icon: bracketsIcon,
-        onClick: onCloze,
-    },
-    {
-        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
-    }
-);
-
 const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "tooltip">>(
     {
         icon: functionIcon,
@@ -84,7 +70,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
         menuItems: [
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxInline"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\(", "\\)"),
                     tooltip: "test",
                     endLabel: "test",
                 },
@@ -92,7 +79,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             ),
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxBlock"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\[", "\\]"),
                     tooltip: "test",
                     endLabel: "test",
                 },
@@ -100,7 +88,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             ),
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxChemistry"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\(\\ce{", "}\\)"),
                     tooltip: "test",
                     endLabel: "test",
                 },