Add ol and ul buttons, rename previous format to formatInline

ts/editor-toolbar/BUILD.bazel

@@ -67,6 +67,7 @@ ts_library(
 copy_bootstrap_icons(
     name = "bootstrap-icons",
     icons = [
+        # inline formatting
         "type-bold.svg",
         "type-italic.svg",
         "type-underline.svg",
@@ -74,6 +75,17 @@ copy_bootstrap_icons(
         "square-fill.svg",
         "paperclip.svg",
         "mic.svg",
+
+        # block formatting
+        "list-ul.svg",
+        "list-ol.svg",
+        "text-paragraph.svg",
+        "justify.svg",
+        "text-left.svg",
+        "text-right.svg",
+        "text-center.svg",
+        "text-indent-left.svg",
+        "text-indent-right.svg",
     ],
 )
 

ts/editor-toolbar/ButtonDropdown.d.ts

@@ -0,0 +1,9 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import type { ToolbarItem } from "./types";
+
+export interface ButtonDropdownProps {
+    id: string;
+    className?: string;
+    buttons: ToolbarItem[];
+}

ts/editor-toolbar/formatBlock.ts

@@ -0,0 +1,63 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+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";
+
+import ulIcon from "./list-ul.svg";
+import olIcon from "./list-ol.svg";
+import listOptionsIcon from "./text-paragraph.svg";
+
+import justifyIcon from "./justify.svg";
+import justifyLeftIcon from "./text-left.svg";
+import justifyRightIcon from "./text-right.svg";
+import justifyCenterIcon from "./text-center.svg";
+
+import indentIcon from "./text-indent-left.svg";
+import outdentIcon from "./text-indent-right.svg";
+
+const commandIconButton = dynamicComponent<
+    typeof CommandIconButton,
+    CommandIconButtonProps
+>(CommandIconButton);
+const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
+
+export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+    ButtonGroupProps {
+    const ulButton = commandIconButton({
+        icon: ulIcon,
+        command: "insertUnorderedList",
+        tooltip: "Insert unordered list",
+    });
+
+    const olButton = commandIconButton({
+        icon: olIcon,
+        command: "insertOrderedList",
+        tooltip: "Insert ordered list",
+    });
+
+    const listFormattingButton = iconButton({
+        icon: listOptionsIcon,
+        tooltip: "More list options",
+    });
+
+    return buttonGroup({
+        id: "formatInline",
+        buttons: [ulButton, olButton, listFormattingButton],
+    });
+}
+
+export function getFormatBlockMenus(): (DynamicSvelteComponent<typeof ButtonDropdown> &
+    ButtonDropdownProps)[] {
+    return [];
+}

ts/editor-toolbar/formatInline.ts

@@ -21,7 +21,7 @@ const commandIconButton = dynamicComponent<
 >(CommandIconButton);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getFormatGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
     const boldButton = commandIconButton({
         icon: boldIcon,
@@ -61,7 +61,7 @@ export function getFormatGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     });
 
     return buttonGroup({
-        id: "format",
+        id: "formatInline",
         buttons: [
             boldButton,
             italicButton,

ts/editor-toolbar/index.ts

@@ -16,7 +16,8 @@ import { setupI18n, ModuleName } from "anki/i18n";
 import "./bootstrap.css";
 
 import { getNotetypeGroup } from "./notetype";
-import { getFormatGroup } from "./format";
+import { getFormatInlineGroup } from "./formatInline";
+import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
 import { getColorGroup } from "./color";
 import { getTemplateGroup, getTemplateMenus } from "./template";
 import { Identifiable, search, add, insert } from "./identifiable";
@@ -60,11 +61,12 @@ class EditorToolbar extends HTMLElement {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
             const buttons = writable([
                 getNotetypeGroup(),
-                getFormatGroup(),
+                getFormatInlineGroup(),
+                getFormatBlockGroup(),
                 getColorGroup(),
                 getTemplateGroup(),
             ]);
-            const menus = writable([...getTemplateMenus()]);
+            const menus = writable([...getTemplateMenus(), ...getFormatBlockMenus()]);
 
             this.component = new EditorToolbarSvelte({
                 target: this,