Pass button groups as actual button groups, not arrays

ts/editor-toolbar/ButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import type { Buttons } from "./types";
+
+export interface ButtonGroupProps {
+    id: string;
+    className?: string;
+    buttons: Buttons;
+}

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} />

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],
+    },
+    {}
+);

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,
+        ],
+    },
+    {}
+);

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 {

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],
+    },
+    {}
+);

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];