From 162f13fee1018fe5ffea22a5239450169e1ad7f8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 16:29:24 +0200
Subject: [PATCH] Add ButtonDropdown for dropdowns like the MathJax dropdown on
 AnkiMobile

---
 ts/editor-toolbar/ButtonDropdown.svelte | 16 ++++++++++++++++
 ts/editor-toolbar/ButtonGroup.svelte    |  6 +++++-
 ts/editor-toolbar/index.ts              |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 ts/editor-toolbar/ButtonDropdown.svelte

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
new file mode 100644
index 000000000..3f10acec5
--- /dev/null
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import type { Buttons } from "./types";
+    import ButtonGroup from "./ButtonGroup.svelte";
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
+    function extendClassName(className: string): string {
+        return `dropdown-menu bg-transparent border-0 ${className}`;
+    }
+
+    export let buttons: Buttons;
+</script>
+
+<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 0ae2725b9..96dc42931 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,6 +1,10 @@
 <script lang="typescript">
     import type { Buttons } from "./types";
 
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let buttons: Buttons;
 </script>
 
@@ -47,7 +51,7 @@
     }
 </style>
 
-<ul>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 801510556..b30448000 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -64,4 +64,5 @@ export { default as SelectButton } from "./SelectButton.svelte";
 
 export { default as DropdownMenu } from "./DropdownMenu.svelte";
 export { default as DropdownItem } from "./DropdownItem.svelte";
+export { default as ButtonDropdown } from "./DropdownMenu.svelte";
 export { default as WithDropdownMenu } from "./WithDropdownMenu.svelte";