Add paragraph button

This commit is contained in:
Henrik Giesel 2021-04-19 16:31:35 +02:00
parent 5bc8385f8b
commit fcb2ab28e3
3 changed files with 16 additions and 3 deletions

View file

@ -77,6 +77,7 @@ copy_bootstrap_icons(
"mic.svg", "mic.svg",
# block formatting # block formatting
"paragraph.svg",
"list-ul.svg", "list-ul.svg",
"list-ol.svg", "list-ol.svg",
"text-paragraph.svg", "text-paragraph.svg",

View file

@ -15,6 +15,7 @@ import type { IconButtonProps } from "./IconButton";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent"; import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n"; import * as tr from "anki/i18n";
import paragraphIcon from "./paragraph.svg";
import ulIcon from "./list-ul.svg"; import ulIcon from "./list-ul.svg";
import olIcon from "./list-ol.svg"; import olIcon from "./list-ol.svg";
import listOptionsIcon from "./text-paragraph.svg"; import listOptionsIcon from "./text-paragraph.svg";
@ -109,6 +110,12 @@ const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButt
export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup> & export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps { ButtonGroupProps {
const paragraphButton = commandIconButton({
icon: paragraphIcon,
command: "formatBlock",
tooltip: tr.editingUnorderedList(),
});
const ulButton = commandIconButton({ const ulButton = commandIconButton({
icon: ulIcon, icon: ulIcon,
command: "insertUnorderedList", command: "insertUnorderedList",
@ -131,7 +138,12 @@ export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup
}); });
return buttonGroup({ return buttonGroup({
id: "formatBlock", id: "blockFormatting",
buttons: [ulButton, olButton, listFormatting], buttons: [
paragraphButton,
ulButton,
olButton,
listFormatting,
],
}); });
} }

View file

@ -61,7 +61,7 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}); });
return buttonGroup({ return buttonGroup({
id: "formatInline", id: "inlineFormatting",
buttons: [ buttons: [
boldButton, boldButton,
italicButton, italicButton,