From 2f808fe60c3a3004af4a0ba60c6194d7100eb2c3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 01:23:39 +0200
Subject: [PATCH] Move initialization logic from EditorToolbar to index.ts

---
 ts/editor-toolbar/ButtonGroup.svelte   |  6 ++-
 ts/editor-toolbar/EditorToolbar.svelte | 54 +++++++-------------------
 ts/editor-toolbar/extra.ts             | 10 +++++
 ts/editor-toolbar/index.ts             | 33 ++++++++++++++++
 4 files changed, 61 insertions(+), 42 deletions(-)
 create mode 100644 ts/editor-toolbar/extra.ts

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 4bb2d857a..a2b07fa8b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,8 +1,10 @@
-<script lang="typescript">
-    type Buttons =
+<script lang="typescript" context="module">
+    export type Buttons =
         | { component: SvelteComponent; [...arg: string]: unknown }
         | Buttons[];
+</script>
 
+<script lang="typescript">
     export let buttons: Buttons;
 </script>
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index ede95cab5..de2d7a7e5 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/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";
-    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 buttons: Buttons = [];
     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>
 
diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts
new file mode 100644
index 000000000..ffd3aff43
--- /dev/null
+++ b/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 };
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 20c838afb..e1a9605ed 100644
--- a/ts/editor-toolbar/index.ts
+++ b/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,
             },
         });
     }