diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts index ac51751c7..7b5ba200d 100644 --- a/ts/editor-toolbar/formatBlock.ts +++ b/ts/editor-toolbar/formatBlock.ts @@ -1,14 +1,16 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import ButtonGroup from "./ButtonGroup.svelte"; +import type { ButtonGroupProps } from "./ButtonGroup"; +import ButtonDropdown from "./ButtonDropdown.svelte"; +import type { ButtonDropdownProps } from "./ButtonDropdown"; +import WithDropdownMenu from "./WithDropdownMenu.svelte"; +import type { WithDropdownMenuProps } from "./WithDropdownMenu"; + import CommandIconButton from "./CommandIconButton.svelte"; import type { CommandIconButtonProps } from "./CommandIconButton"; import IconButton from "./IconButton.svelte"; import type { IconButtonProps } from "./IconButton"; -import ButtonGroup from "./ButtonGroup.svelte"; -import type { ButtonGroupProps } from "./ButtonGroup"; - -import type ButtonDropdown from "./ButtonDropdown.svelte"; -import type { ButtonDropdownProps } from "./ButtonDropdown"; import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent"; import * as tr from "anki/i18n"; @@ -17,7 +19,7 @@ import ulIcon from "./list-ul.svg"; import olIcon from "./list-ol.svg"; import listOptionsIcon from "./text-paragraph.svg"; -import justifyIcon from "./justify.svg"; +import justifyFullIcon from "./justify.svg"; import justifyLeftIcon from "./text-left.svg"; import justifyRightIcon from "./text-right.svg"; import justifyCenterIcon from "./text-center.svg"; @@ -29,8 +31,79 @@ const commandIconButton = dynamicComponent< typeof CommandIconButton, CommandIconButtonProps >(CommandIconButton); -const iconButton = dynamicComponent(IconButton); + const buttonGroup = dynamicComponent(ButtonGroup); +const buttonDropdown = dynamicComponent( + ButtonDropdown +); + +const withDropdownMenu = dynamicComponent< + typeof WithDropdownMenu, + WithDropdownMenuProps +>(WithDropdownMenu); + +export function getFormatBlockMenus(): (DynamicSvelteComponent & + ButtonDropdownProps)[] { + const justifyLeftButton = commandIconButton({ + icon: justifyLeftIcon, + command: "justifyLeft", + tooltip: "Justify to the left", + }); + + const justifyCenterButton = commandIconButton({ + icon: justifyCenterIcon, + command: "justifyCenter", + tooltip: "Justify to the center", + }); + + const justifyFullButton = commandIconButton({ + icon: justifyFullIcon, + command: "justifyFull", + tooltip: "Justify full", + }); + + const justifyRightButton = commandIconButton({ + icon: justifyRightIcon, + command: "justifyRight", + tooltip: "Justify to the right", + }); + + const justifyGroup = buttonGroup({ + id: "justify", + buttons: [ + justifyLeftButton, + justifyCenterButton, + justifyFullButton, + justifyRightButton, + ], + }); + + const indentButton = commandIconButton({ + icon: indentIcon, + command: "indent", + tooltip: "Indent selection", + }); + + const outdentButton = commandIconButton({ + icon: outdentIcon, + command: "outdent", + tooltip: "Outdent selection", + }); + + const indentationGroup = buttonGroup({ + id: "indentation", + buttons: [indentButton, outdentButton], + }); + + const formattingOptions = buttonDropdown({ + id: "listFormatting", + buttons: [justifyGroup, indentationGroup], + }); + + return [formattingOptions]; +} + +const iconButton = dynamicComponent(IconButton); export function getFormatBlockGroup(): DynamicSvelteComponent & ButtonGroupProps { @@ -51,13 +124,13 @@ export function getFormatBlockGroup(): DynamicSvelteComponent & - ButtonDropdownProps)[] { - return []; -}