Add SelectButton

ts/editor-toolbar/ButtonGroup.svelte

@@ -14,7 +14,8 @@
         padding-inline-start: 0;
         margin-bottom: 0;
 
-        & :global(button) {
+        & :global(button),
+        & :global(select) {
             margin-left: -1px;
         }
     }
@@ -26,7 +27,8 @@
         &:nth-child(1) {
             margin-left: 0.25rem;
 
-            & > :global(button) {
+            & > :global(button),
+            & > :global(select) {
                 border-top-left-radius: 0.25rem;
                 border-bottom-left-radius: 0.25rem;
             }
@@ -35,7 +37,8 @@
         &:nth-last-child(1) {
             margin-right: 0.25rem;
 
-            & > :global(button) {
+            & > :global(button),
+            & > :global(select) {
                 border-top-right-radius: 0.25rem;
                 border-bottom-right-radius: 0.25rem;
             }

ts/editor-toolbar/LabelButton.svelte

@@ -1,6 +1,5 @@
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
     export let id = "";
@@ -18,7 +17,6 @@
     }
 
     const dispatch = createEventDispatcher();
-
     onMount(() => dispatch("mount", { button: buttonRef }));
 
     const disabledStore = getContext(disabledKey);

ts/editor-toolbar/SelectButton.svelte

@@ -0,0 +1,52 @@
+<script lang="typescript">
+    import { onMount, createEventDispatcher, getContext } from "svelte";
+    import type { Readable } from "svelte/store";
+    import { disabledKey } from "./contextKeys";
+    import SelectOption from "./SelectOption.svelte";
+
+    interface Option {
+        label: string;
+        value: string;
+        selected: boolean;
+    }
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
+    function extendClassName(classes: string) {
+        return `form-select ${classes}`;
+    }
+
+    export let disables;
+    export let options: Option[];
+
+    let buttonRef: HTMLSelectElement;
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
+
+    const disabledStore = getContext(disabledKey);
+    $: disabled = disables && $disabledStore;
+</script>
+
+<style lang="scss">
+    select {
+        height: 30px;
+        width: auto;
+
+        font-size: smaller;
+        border-radius: 0;
+    }
+</style>
+
+<select
+    bind:this={buttonRef}
+    {disabled}
+    {id}
+    class={extendClassName(className)}
+    {...props}>
+    {#each options as option}
+        <SelectOption {...option} />
+    {/each}
+</select>

ts/editor-toolbar/SelectOption.svelte

@@ -0,0 +1,7 @@
+<script lang="typescript">
+    export let label: string;
+    export let value: string;
+    export let selected = false;
+</script>
+
+<option {selected} {value}>{label}</option>

ts/editor-toolbar/index.ts

@@ -7,6 +7,7 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import DropdownMenu from "./DropdownMenu.svelte";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
+import SelectButton from "./SelectButton.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -58,6 +59,7 @@ const defaultButtons = [
         clozeButton,
         { component: WithDropdownMenu, menuId: "mathjaxMenu", button: mathjaxButton },
         htmlButton,
+        { component: SelectButton, options: [{ label: "Test" }, { label: "Test2" }] },
     ],
 ];