Make all buttons functional

ts/editor-toolbar/extra.ts

@@ -1,10 +1,40 @@
+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";
 
-export const clozeButton = { component: IconButton, icon: bracketsIcon };
-export const attachmentButton = { component: IconButton, icon: paperclipIcon };
-export const micButton = { component: IconButton, icon: micIcon };
-export const etcButton = { component: IconButton, icon: threeDotsIcon };
+function onCloze(): void {
+    bridgeCommand("cloze");
+}
+
+function onAttachment(): void {
+    bridgeCommand("attach");
+}
+
+function onRecord(): void {
+    bridgeCommand("record");
+}
+
+function onMore(): void {
+    bridgeCommand("more");
+}
+
+export const clozeButton = {
+    component: IconButton,
+    icon: bracketsIcon,
+    onClick: onCloze,
+};
+export const attachmentButton = {
+    component: IconButton,
+    icon: paperclipIcon,
+    onClick: onAttachment,
+};
+export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+export const moreButton = {
+    component: IconButton,
+    icon: threeDotsIcon,
+    onClick: onMore,
+};

ts/editor-toolbar/index.ts

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