From dcb6a1105315912a054b81c4af62fd5e898b4c22 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 20 Apr 2021 03:55:59 +0200
Subject: [PATCH] Improve behavior of paragraph command and add tooltip

---
 ftl/core/editing.ftl       |  1 +
 ts/editor/formatBlock.ts   | 18 ++++++++++++++----
 ts/editor/helpers.ts       |  5 +++++
 ts/editor/inputHandlers.ts |  5 ++---
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
index 19e59632e..e88d261f7 100644
--- a/ftl/core/editing.ftl
+++ b/ftl/core/editing.ftl
@@ -29,6 +29,7 @@ editing-mathjax-inline = MathJax inline
 editing-media = Media
 editing-ordered-list = Ordered list
 editing-outdent = Decrease indent
+editing-paragraph = Paragraph
 editing-paste = Paste
 editing-record-audio-f5 = Record audio (F5)
 editing-remove-formatting-ctrlandr = Remove formatting (Ctrl+R)
diff --git a/ts/editor/formatBlock.ts b/ts/editor/formatBlock.ts
index 1d2b4b753..316f5ff62 100644
--- a/ts/editor/formatBlock.ts
+++ b/ts/editor/formatBlock.ts
@@ -63,6 +63,18 @@ const indentListItem = () => {
     }
 };
 
+const toggleParagraph = (): void => {
+    const currentField = document.activeElement as EditingArea;
+    const paragraph = getParagraph(currentField.shadowRoot!);
+
+    if (!paragraph) {
+        document.execCommand("formatBlock", false, "p");
+    } else {
+        paragraph.insertAdjacentElement("beforeend", document.createElement("br"));
+        paragraph.replaceWith(...paragraph.childNodes);
+    }
+};
+
 const checkForParagraph = (): boolean => {
     const currentField = document.activeElement as EditingArea;
     return Boolean(getParagraph(currentField.shadowRoot!));
@@ -134,11 +146,9 @@ export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup
     const paragraphButton = commandIconButton({
         icon: paragraphIcon,
         command: "formatBlock",
-        onClick: () => {
-            document.execCommand("formatBlock", false, "p");
-        },
+        onClick: toggleParagraph,
         onUpdate: checkForParagraph,
-        tooltip: tr.editingUnorderedList(),
+        tooltip: tr.editingParagraph(),
     });
 
     const ulButton = commandIconButton({
diff --git a/ts/editor/helpers.ts b/ts/editor/helpers.ts
index 5f5ac5abf..e8db7b316 100644
--- a/ts/editor/helpers.ts
+++ b/ts/editor/helpers.ts
@@ -102,6 +102,11 @@ const isListItem = (element: Element): element is HTMLLIElement =>
     window.getComputedStyle(element).display === "list-item";
 const isParagraph = (element: Element): element is HTMLParamElement =>
     element.tagName === "P";
+const isBlockElement = (
+    element: Element
+): element is HTMLLIElement & HTMLParamElement =>
+    isListItem(element) || isBlockElement(element);
 
 export const getListItem = getAnchorParent(isListItem);
 export const getParagraph = getAnchorParent(isParagraph);
+export const getBlockElement = getAnchorParent(isBlockElement);
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index 613233969..6d938f86c 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -3,7 +3,7 @@
 
 import { updateActiveButtons } from "editor-toolbar";
 import { EditingArea } from "./editingArea";
-import { caretToEnd, nodeIsElement, getListItem, getParagraph } from "./helpers";
+import { caretToEnd, nodeIsElement, getBlockElement } from "./helpers";
 import { triggerChangeTimer } from "./changeTimer";
 
 export function onInput(event: Event): void {
@@ -24,8 +24,7 @@ export function onKey(evt: KeyboardEvent): void {
     // prefer <br> instead of <div></div>
     if (
         evt.code === "Enter" &&
-        !getListItem(currentField.shadowRoot!) &&
-        !getParagraph(currentField.shadowRoot!)
+        !getBlockElement(currentField.shadowRoot!) !== evt.shiftKey
     ) {
         evt.preventDefault();
         document.execCommand("insertLineBreak");