Simplify General Toolbar structure

ts/editor-toolbar/ButtonBar.svelte

@@ -1,10 +0,0 @@
-<style lang="scss">
-    ul {
-        padding-inline-start: 0;
-        margin-bottom: 0;
-    }
-</style>
-
-<ul>
-    <slot />
-</ul>

ts/editor-toolbar/ButtonBarOuter.svelte

@@ -1,19 +0,0 @@
-<style lang="scss">
-    div {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 5;
-        padding: 2px;
-
-        background: var(--bg-color);
-    }
-</style>
-
-<div>
-    <slot />
-</div>

ts/editor-toolbar/ButtonGroup.svelte

@@ -1,34 +1,55 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
+    type Buttons =
+        | { component: SvelteComponent; [...arg: string]: unknown }
+        | Buttons[];
+
+    export let buttons: Buttons;
 </script>
 
 <style lang="scss">
     ul {
         display: inline-block;
-        padding-inline-start: 0;
 
-        margin-left: 0.25rem;
+        padding-inline-start: 0;
-        margin-right: 0.25rem;
+        margin-bottom: 0;
 
         & :global(button) {
             margin-left: -1px;
         }
+    }
 
-        & > :global(li:nth-child(1) button) {
+    li {
-            margin-left: 0px;
+        display: inline-block;
-            border-top-left-radius: 0.35rem;
+        margin-bottom: 2px;
-            border-bottom-left-radius: 0.35rem;
+
+        &:nth-child(1) {
+            margin-left: 0.25rem;
+
+            & > :global(button) {
+                border-top-left-radius: 0.25rem;
+                border-bottom-left-radius: 0.25rem;
+            }
         }
 
-        & > :global(li:nth-last-child(1) button) {
+        &:nth-last-child(1) {
-            border-top-right-radius: 0.35rem;
+            margin-right: 0.25rem;
-            border-bottom-right-radius: 0.35rem;
+
+            & > :global(button) {
+                border-top-right-radius: 0.25rem;
+                border-bottom-right-radius: 0.25rem;
+            }
         }
     }
 </style>
 
-<ButtonItem>
+<ul>
-    <ul>
+    {#each buttons as button}
-        <slot />
+        <li>
-    </ul>
+            {#if Array.isArray(button)}
-</ButtonItem>
+                <svelte:self buttons={button} />
+            {:else}
+                <svelte:component this={button.component} {...button} />
+            {/if}
+        </li>
+    {/each}
+</ul>

ts/editor-toolbar/ButtonItem.svelte

@@ -1,10 +0,0 @@
-<style lang="scss">
-    li {
-        display: inline-block;
-        margin-bottom: 2px;
-    }
-</style>
-
-<li>
-    <slot />
-</li>

ts/editor-toolbar/ColorPicker.svelte

@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let className: string;
     export let onChange: (event: ChangeEvent) => void;
 </script>
@@ -28,8 +26,6 @@
     }
 </style>
 
-<ButtonItem>
+<button>
-    <button>
+    <span class={className}> <input type="color" on:change={onChange} /> </span>
-        <span class={className}> <input type="color" on:change={onChange} /> </span>
+</button>
-    </button>
-</ButtonItem>

ts/editor-toolbar/CommandIconButton.svelte

@@ -26,7 +26,6 @@
 </script>
 
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -50,8 +49,6 @@
     }
 </script>
 
-<ButtonItem>
+<InnerButton {className} {active} {onClick}>
-    <InnerButton {className} {active} {onClick}>
+    {@html icon}
-        {@html icon}
+</InnerButton>
-    </InnerButton>
-</ButtonItem>

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonBarOuter from "./ButtonBarOuter.svelte";
-    import ButtonBar from "./ButtonBar.svelte";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     import LabelButton from "./LabelButton.svelte";
@@ -48,14 +46,21 @@
     console.log(nightMode);
 </script>
 
-<ButtonBarOuter>
+<style lang="scss">
-    <ButtonBar>
+    div {
-        {#each buttons as group}
+        display: flex;
-            <ButtonGroup>
+        flex-wrap: wrap;
-                {#each group as button}
+
-                    <svelte:component this={button.component} {...button} />
+        position: sticky;
-                {/each}
+        top: 0;
-            </ButtonGroup>
+        left: 0;
-        {/each}
+        z-index: 5;
-    </ButtonBar>
+        padding: 2px;
-</ButtonBarOuter>
+
+        background: var(--bg-color);
+    }
+</style>
+
+<div>
+    <ButtonGroup {buttons} />
+</div>

ts/editor-toolbar/IconButton.svelte

@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -7,8 +6,6 @@
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<ButtonItem>
+<InnerButton {className} {onClick}>
-    <InnerButton {className} {onClick}>
+    {@html icon}
-        {@html icon}
+</InnerButton>
-    </InnerButton>
-</ButtonItem>

ts/editor-toolbar/LabelButton.svelte

@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let label: string;
 </script>
 
@@ -20,6 +18,4 @@
     }
 </style>
 
-<ButtonItem>
+<button type="button" class="btn btn-secondary" on:click> {label} </button>
-    <button type="button" class="btn btn-secondary" on:click> {label} </button>
-</ButtonItem>

ts/editor/editable.scss

@@ -6,6 +6,9 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
+    /* Fit bootstraps .rounded */
+    border-radius: 0.25rem;
+
     &:empty::after {
         content: "\a";
         white-space: pre;

ts/editor/editingArea.ts

@@ -24,7 +24,7 @@ export class EditingArea extends HTMLDivElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.className = "field";
+        this.className = "field rounded";
 
         const rootStyle = document.createElement("link");
         rootStyle.setAttribute("rel", "stylesheet");