Add mathjaxButton and htmlButton instead of more button

ts/editor-toolbar/BUILD.bazel

@@ -57,7 +57,6 @@ copy_bootstrap_icons(
         "square-fill.svg",
         "paperclip.svg",
         "mic.svg",
-        "three-dots.svg",
     ],
 )
 
@@ -66,7 +65,9 @@ copy_mdi_icons(
     icons = [
         "format-superscript.svg",
         "format-subscript.svg",
+        "function-variant.svg",
         "code-brackets.svg",
+        "xml.svg",
     ],
 )
 

ts/editor-toolbar/extra.ts

@@ -1,14 +1,12 @@
 import { bridgeCommand } from "anki/bridgecommand";
 
 import IconButton from "./IconButton.svelte";
-import bracketsIcon from "./code-brackets.svg";
+
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
-import threeDotsIcon from "./three-dots.svg";
-
-function onCloze(): void {
-    bridgeCommand("cloze");
-}
+import bracketsIcon from "./code-brackets.svg";
+import functionIcon from "./function-variant.svg";
+import xmlIcon from "./xml.svg";
 
 function onAttachment(): void {
     bridgeCommand("attach");
@@ -18,23 +16,36 @@ function onRecord(): void {
     bridgeCommand("record");
 }
 
+function onCloze(): void {
+    bridgeCommand("cloze");
+}
+
 function onMore(): void {
     bridgeCommand("more");
 }
 
+export const attachmentButton = {
+    component: IconButton,
+    icon: paperclipIcon,
+    onClick: onAttachment,
+};
+
+export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+
 export const clozeButton = {
     component: IconButton,
     icon: bracketsIcon,
     onClick: onCloze,
 };
-export const attachmentButton = {
+
+export const mathjaxButton = {
     component: IconButton,
-    icon: paperclipIcon,
-    onClick: onAttachment,
-};
-export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
-export const moreButton = {
-    component: IconButton,
-    icon: threeDotsIcon,
+    icon: functionIcon,
+    onClick: onMore,
+};
+
+export const htmlButton = {
+    component: IconButton,
+    icon: xmlIcon,
     onClick: onMore,
 };

ts/editor-toolbar/index.ts

@@ -15,7 +15,13 @@ import {
 
 import { forecolorButton, colorpickerButton } from "./color";
 
-import { clozeButton, attachmentButton, recordButton, moreButton } from "./extra";
+import {
+    attachmentButton,
+    recordButton,
+    clozeButton,
+    mathjaxButton,
+    htmlButton,
+} from "./extra";
 
 const defaultButtons = [
     [
@@ -31,7 +37,7 @@ const defaultButtons = [
         eraserButton,
     ],
     [forecolorButton, colorpickerButton],
-    [clozeButton, attachmentButton, recordButton, moreButton],
+    [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
 ];
 
 class EditorToolbar extends HTMLElement {