From f526b51ea2afa61e4adce6342b297a5eed426aa2 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 15:40:11 +0200
Subject: [PATCH] Add SelectButton

---
 ts/editor-toolbar/ButtonGroup.svelte  |  9 +++--
 ts/editor-toolbar/LabelButton.svelte  |  2 --
 ts/editor-toolbar/SelectButton.svelte | 52 +++++++++++++++++++++++++++
 ts/editor-toolbar/SelectOption.svelte |  7 ++++
 ts/editor-toolbar/index.ts            |  2 ++
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 ts/editor-toolbar/SelectButton.svelte
 create mode 100644 ts/editor-toolbar/SelectOption.svelte

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 9a9d876c6..fbb6e3459 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/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;
             }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 890e7d455..27c46e3ec 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/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);
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
new file mode 100644
index 000000000..9135a6086
--- /dev/null
+++ b/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>
diff --git a/ts/editor-toolbar/SelectOption.svelte b/ts/editor-toolbar/SelectOption.svelte
new file mode 100644
index 000000000..6e357d188
--- /dev/null
+++ b/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>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 22641d862..10213412d 100644
--- a/ts/editor-toolbar/index.ts
+++ b/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" }] },
     ],
 ];