From fcb2ab28e39db43b2d6966c293c682269af39a10 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 19 Apr 2021 16:31:35 +0200
Subject: [PATCH] Add paragraph button

---
 ts/editor-toolbar/BUILD.bazel     |  1 +
 ts/editor-toolbar/formatBlock.ts  | 16 ++++++++++++++--
 ts/editor-toolbar/formatInline.ts |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index b8bf53313..a52e9b3ea 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -77,6 +77,7 @@ copy_bootstrap_icons(
         "mic.svg",
 
         # block formatting
+        "paragraph.svg",
         "list-ul.svg",
         "list-ol.svg",
         "text-paragraph.svg",
diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts
index 38339d7b0..f0229ea28 100644
--- a/ts/editor-toolbar/formatBlock.ts
+++ b/ts/editor-toolbar/formatBlock.ts
@@ -15,6 +15,7 @@ import type { IconButtonProps } from "./IconButton";
 import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
+import paragraphIcon from "./paragraph.svg";
 import ulIcon from "./list-ul.svg";
 import olIcon from "./list-ol.svg";
 import listOptionsIcon from "./text-paragraph.svg";
@@ -109,6 +110,12 @@ const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButt
 
 export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
+    const paragraphButton = commandIconButton({
+        icon: paragraphIcon,
+        command: "formatBlock",
+        tooltip: tr.editingUnorderedList(),
+    });
+
     const ulButton = commandIconButton({
         icon: ulIcon,
         command: "insertUnorderedList",
@@ -131,7 +138,12 @@ export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup
     });
 
     return buttonGroup({
-        id: "formatBlock",
-        buttons: [ulButton, olButton, listFormatting],
+        id: "blockFormatting",
+        buttons: [
+            paragraphButton,
+            ulButton,
+            olButton,
+            listFormatting,
+        ],
     });
 }
diff --git a/ts/editor-toolbar/formatInline.ts b/ts/editor-toolbar/formatInline.ts
index 4d6f50c3c..2629d00f7 100644
--- a/ts/editor-toolbar/formatInline.ts
+++ b/ts/editor-toolbar/formatInline.ts
@@ -61,7 +61,7 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
     });
 
     return buttonGroup({
-        id: "formatInline",
+        id: "inlineFormatting",
         buttons: [
             boldButton,
             italicButton,