diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel index b27308da8..440a1a23f 100644 --- a/ts/editor-toolbar/BUILD.bazel +++ b/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", ], ) diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts index 8ba09be56..e94f20410 100644 --- a/ts/editor-toolbar/extra.ts +++ b/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, }; diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index ff8acc25d..800822943 100644 --- a/ts/editor-toolbar/index.ts +++ b/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 {