From 86c57d5b759f668e8eddef7dcb30ac093be2eeb4 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:28:43 +0200
Subject: [PATCH] Pass button groups as actual button groups, not arrays

---
 ts/editor-toolbar/ButtonGroup.d.ts     |  7 +++++++
 ts/editor-toolbar/EditorToolbar.svelte |  2 +-
 ts/editor-toolbar/color.ts             | 11 ++++++++++-
 ts/editor-toolbar/format.ts            | 25 +++++++++++++++++--------
 ts/editor-toolbar/index.ts             | 10 +++++-----
 ts/editor-toolbar/notetype.ts          | 11 ++++++++++-
 ts/editor-toolbar/template.ts          | 23 ++++++++++++++++-------
 7 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 ts/editor-toolbar/ButtonGroup.d.ts

diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
new file mode 100644
index 000000000..2e5496f15
--- /dev/null
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -0,0 +1,7 @@
+import type { Buttons } from "./types";
+
+export interface ButtonGroupProps {
+    id: string;
+    className?: string;
+    buttons: Buttons;
+}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index ead8912f9..20dac37a7 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -58,7 +58,7 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
+<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? 'wrap' : 'nowrap'}`}>
     <div>
         {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 0c345eecb..35f52cf0e 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -2,6 +2,8 @@ import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 import ColorPicker from "./ColorPicker.svelte";
 import type { ColorPickerProps } from "./ColorPicker";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
@@ -47,4 +49,11 @@ const colorpickerButton = colorPicker<ColorPickerProps, "tooltip">(
     }
 );
 
-export const colorButtons = [forecolorButton, colorpickerButton];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const colorGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "color",
+        buttons: [forecolorButton, colorpickerButton],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 40cad8a8a..52a61060a 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,7 @@
 import CommandIconButton from "./CommandIconButton.svelte";
 import type { CommandIconButtonProps } from "./CommandIconButton";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
@@ -74,11 +76,18 @@ const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     }
 );
 
-export const formatButtons = [
-    boldButton,
-    italicButton,
-    underlineButton,
-    superscriptButton,
-    subscriptButton,
-    removeFormatButton,
-];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const formatGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "color",
+        buttons: [
+            boldButton,
+            italicButton,
+            underlineButton,
+            superscriptButton,
+            subscriptButton,
+            removeFormatButton,
+        ],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 8fec39b42..26111f135 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,16 +6,16 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
-import { notetypeButtons } from "./notetype";
-import { formatButtons } from "./format";
-import { colorButtons } from "./color";
-import { templateButtons, templateMenus } from "./template";
+import { notetypeGroup } from "./notetype";
+import { formatGroup } from "./format";
+import { colorGroup } from "./color";
+import { templateGroup, templateMenus } from "./template";
 
 // @ts-expect-error
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
-const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
+const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
 const defaultMenus = [...templateMenus];
 
 class EditorToolbar extends HTMLElement {
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 15ad589b1..32a0c5633 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,5 +1,7 @@
 import LabelButton from "./LabelButton.svelte";
 import type { LabelButtonProps } from "./LabelButton";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
@@ -28,4 +30,11 @@ const cardsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     }
 );
 
-export const notetypeButtons = [fieldsButton, cardsButton];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const notetypeGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "notetype",
+        buttons: [fieldsButton, cardsButton],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 772f35fc2..6e0ff81dd 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -6,6 +6,8 @@ import DropdownItem from "./DropdownItem.svelte";
 import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 import type { WithDropdownMenuProps } from "./WithDropdownMenu";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { bridgeCommand } from "anki/bridgecommand";
 import { dynamicComponent } from "sveltelib/dynamicComponent";
@@ -126,12 +128,19 @@ const htmlButton = iconButton<IconButtonProps, "tooltip">(
     }
 );
 
-export const templateButtons = [
-    attachmentButton,
-    recordButton,
-    clozeButton,
-    mathjaxButtonWithMenu,
-    htmlButton,
-];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const templateGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "template",
+        buttons: [
+            attachmentButton,
+            recordButton,
+            clozeButton,
+            mathjaxButtonWithMenu,
+            htmlButton,
+        ],
+    },
+    {}
+);
 
 export const templateMenus = [mathjaxMenu];