WIP: Turn DropdownMenu into a _decorator_ usable with all other button types

ts/editor-toolbar/ColorPicker.svelte

@@ -37,6 +37,6 @@
     }
 </style>
 
-<button tabindex="-1">
+<button tabindex="-1" on:mousedown|preventDefault> 
     <span class={className}> <input type="color" on:change={onChange} /> </span>
 </button>

ts/editor-toolbar/DropdownIconButton.svelte

@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import { onMount } from "svelte";
+
+    export let buttonId = `dropdownMenuButton123`;
+
+    // ${Math.random().toString(36).substring(2)}`
+    let dropdownButtonRef: HTMLButtonElement;
+
+    onMount(() => {
+        /* Prevent focus on menu activation */
+        const noop = () => {};
+        Object.defineProperty(dropdownButtonRef, 'focus', { value: noop });
+
+        /* Set custom menu without using .dropdown
+         * Rendering the menu here would cause the menu to
+         * be displayed outside of the visible area
+         */
+        const dropdown = new bootstrap.Dropdown(dropdownButtonRef);
+        dropdown._menu = document.getElementById(buttonId);
+    })
+</script>
+
+<button bind:this={dropdownButtonRef} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" on:mousedown|preventDefault>
+  Dropdown button
+</button>

ts/editor-toolbar/DropdownItem.svelte

@@ -0,0 +1,14 @@
+<script lang="typescript">
+    export let onClick: (event: ClickEvent) => void;
+</script>
+
+<li>
+    <button class="dropdown-item" on:click={onClick} on:mousedown|preventDefault>
+        {#if $$slots.default}
+            <slot />
+        {:else}
+            <span class="float-start"><slot name="start" /></span>
+            <span class="float-end"><slot name="end" /></span>
+        {/if}
+    </button>
+</li>

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import DropdownItem from "./DropdownItem.svelte";
     import type { Readable } from "svelte/store";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
@@ -15,7 +16,7 @@
 </script>
 
 <style lang="scss">
-    div {
+    nav {
         position: sticky;
         top: 0;
         left: 0;
@@ -37,6 +38,15 @@
     }
 </style>
 
-<div>
+<ul class="dropdown-menu" id="dropdownMenuButton123" aria-labelledby="dropdownMenuButton123">
+    <DropdownItem>
+        <svelte:fragment slot="start">Action</svelte:fragment>
+        <svelte:fragment slot="end">Shortcut</svelte:fragment>
+    </DropdownItem>
+    <DropdownItem>Action 1</DropdownItem>
+    <DropdownItem>Action 2</DropdownItem>
+</ul>
+
+<nav>
     <ButtonGroup {buttons} />
-</div>
+</nav>

ts/editor-toolbar/index.ts

@@ -6,6 +6,7 @@ import { setupI18n, ModuleName } from "anki/i18n";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import LabelButton from "./LabelButton.svelte";
+import DropdownIconButton from "./DropdownIconButton.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -45,6 +46,8 @@ const defaultButtons = [
     ],
     [forecolorButton, colorpickerButton],
     [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
+    [ { component: DropdownIconButton }],
+
 ];
 
 class EditorToolbar extends HTMLElement {