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 @@ } -
+
{#each _menus as 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( } ); -export const colorButtons = [forecolorButton, colorpickerButton]; +const buttonGroup = dynamicComponent(ButtonGroup); +export const colorGroup = buttonGroup( + { + 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( } ); -export const formatButtons = [ - boldButton, - italicButton, - underlineButton, - superscriptButton, - subscriptButton, - removeFormatButton, -]; +const buttonGroup = dynamicComponent(ButtonGroup); +export const formatGroup = buttonGroup( + { + 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( } ); -export const notetypeButtons = [fieldsButton, cardsButton]; +const buttonGroup = dynamicComponent(ButtonGroup); +export const notetypeGroup = buttonGroup( + { + 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( } ); -export const templateButtons = [ - attachmentButton, - recordButton, - clozeButton, - mathjaxButtonWithMenu, - htmlButton, -]; +const buttonGroup = dynamicComponent(ButtonGroup); +export const templateGroup = buttonGroup( + { + id: "template", + buttons: [ + attachmentButton, + recordButton, + clozeButton, + mathjaxButtonWithMenu, + htmlButton, + ], + }, + {} +); export const templateMenus = [mathjaxMenu];