Move initialization logic from EditorToolbar to index.ts

ts/editor-toolbar/ButtonGroup.svelte

@@ -1,8 +1,10 @@
-<script lang="typescript">
+<script lang="typescript" context="module">
-    type Buttons =
+    export type Buttons =
         | { component: SvelteComponent; [...arg: string]: unknown }
         | Buttons[];
+</script>
 
+<script lang="typescript">
     export let buttons: Buttons;
 </script>
 

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,46 +1,8 @@
 <script lang="typescript">
     import ButtonGroup from "./ButtonGroup.svelte";
+    import type { Buttons } from "./ButtonGroup.svelte";
 
-    import LabelButton from "./LabelButton.svelte";
+    export let buttons: Buttons = [];
-    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";
-
-    import {
-        boldButton,
-        italicButton,
-        underlineButton,
-        superscriptButton,
-        subscriptButton,
-        eraserButton,
-    } from "./format";
-    import { forecolorButton, colorpickerButton } from "./color";
-
-    export let buttons = [
-        [
-            { component: LabelButton, label: "Fields..." },
-            { component: LabelButton, label: "Cards..." },
-        ],
-        [
-            boldButton,
-            italicButton,
-            underlineButton,
-            superscriptButton,
-            subscriptButton,
-            eraserButton,
-        ],
-        [forecolorButton, colorpickerButton],
-        [
-            { component: IconButton, icon: bracketsIcon },
-            { component: IconButton, icon: paperclipIcon },
-            { component: IconButton, icon: micIcon },
-            { component: IconButton, icon: threeDotsIcon },
-        ],
-    ];
     export let nightMode: boolean;
 
     console.log(nightMode);
@@ -58,6 +20,18 @@
         padding: 2px;
 
         background: var(--bg-color);
+        border-bottom: 1px solid var(--border);
+
+        /* Remove most outer marigns */
+        & > :global(ul) {
+            & > :global(li:nth-child(1)) {
+                margin-left: 0;
+            }
+
+            & > :global(li:nth-last-child(1)) {
+                margin-right: 0;
+            }
+        }
     }
 </style>
 

ts/editor-toolbar/extra.ts

@@ -0,0 +1,10 @@
+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 };

ts/editor-toolbar/index.ts

@@ -2,6 +2,38 @@ import type { SvelteComponent } from "svelte";
 import { checkNightMode } from "anki/nightmode";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
+import LabelButton from "./LabelButton.svelte";
+
+import {
+    boldButton,
+    italicButton,
+    underlineButton,
+    superscriptButton,
+    subscriptButton,
+    eraserButton,
+} from "./format";
+
+import { forecolorButton, colorpickerButton } from "./color";
+
+import { clozeButton, attachmentButton, micButton, etcButton } from "./extra";
+
+const defaultButtons = [
+    [
+        { component: LabelButton, label: "Fields..." },
+        { component: LabelButton, label: "Cards..." },
+    ],
+    [
+        boldButton,
+        italicButton,
+        underlineButton,
+        superscriptButton,
+        subscriptButton,
+        eraserButton,
+    ],
+    [forecolorButton, colorpickerButton],
+    [clozeButton, attachmentButton, micButton, etcButton],
+];
+
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
@@ -12,6 +44,7 @@ class EditorToolbar extends HTMLElement {
             target: this,
             props: {
                 nightMode,
+                buttons: defaultButtons,
             },
         });
     }