From 5c6694950dc86971ae373d1cfd322fdb09f1e8b7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 14 Jan 2021 13:32:30 +0100
Subject: [PATCH 1/3] Prefer <br> over <div></div>

---
 qt/aqt/data/web/js/editor.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/qt/aqt/data/web/js/editor.ts b/qt/aqt/data/web/js/editor.ts
index bb6695044..e6b4cc21a 100644
--- a/qt/aqt/data/web/js/editor.ts
+++ b/qt/aqt/data/web/js/editor.ts
@@ -55,6 +55,13 @@ function onKey(evt: KeyboardEvent) {
         return;
     }
 
+    // prefer <br> instead of <div></div>
+    if (evt.which === 13) {
+        evt.preventDefault();
+        document.execCommand("insertLineBreak");
+        return;
+    }
+
     // fix Ctrl+right/left handling in RTL fields
     if (currentField.dir === "rtl") {
         const selection = window.getSelection();

From 4e1139021b788760e42ab8b02bce4117360d812d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 14 Jan 2021 18:59:07 +0100
Subject: [PATCH 2/3] Consider list edge case for line breaks

* Enter makes a new bullet point
* Shift+Enter makes a line break in current bullet point
---
 qt/aqt/data/web/js/editor.ts | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/qt/aqt/data/web/js/editor.ts b/qt/aqt/data/web/js/editor.ts
index e6b4cc21a..bf3ea9dd7 100644
--- a/qt/aqt/data/web/js/editor.ts
+++ b/qt/aqt/data/web/js/editor.ts
@@ -56,7 +56,8 @@ function onKey(evt: KeyboardEvent) {
     }
 
     // prefer <br> instead of <div></div>
-    if (evt.which === 13) {
+    if (evt.which === 13 && !inListItem()) {
+        console.log("Enter");
         evt.preventDefault();
         document.execCommand("insertLineBreak");
         return;
@@ -87,6 +88,25 @@ function onKey(evt: KeyboardEvent) {
     triggerKeyTimer();
 }
 
+function nodeIsElement(node: Node): node is Element {
+    return node.nodeType == Node.ELEMENT_NODE;
+}
+
+function inListItem(): boolean {
+    const anchor = window.getSelection().anchorNode;
+
+    let n = nodeIsElement(anchor) ? anchor : anchor.parentElement;
+
+    let inList = false;
+
+    while (n) {
+        inList = inList || window.getComputedStyle(n).display == "list-item";
+        n = n.parentElement;
+    }
+
+    return inList;
+}
+
 function insertNewline() {
     if (!inPreEnvironment()) {
         setFormat("insertText", "\n");
@@ -113,11 +133,10 @@ function insertNewline() {
 }
 
 // is the cursor in an environment that respects whitespace?
-function inPreEnvironment() {
-    let n = window.getSelection().anchorNode as Element;
-    if (n.nodeType === 3) {
-        n = n.parentNode as Element;
-    }
+function inPreEnvironment(): boolean {
+    const anchor = window.getSelection().anchorNode;
+    const n = nodeIsElement(anchor) ? anchor : anchor.parentElement;
+
     return window.getComputedStyle(n).whiteSpace.startsWith("pre");
 }
 

From 0db8a14497624ffda7a4ceb97edb91f3dfe4cbc9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 15 Jan 2021 18:18:42 +0100
Subject: [PATCH 3/3] Deal with div insertion on deleting list item

---
 qt/aqt/data/web/js/editor.ts | 44 ++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/qt/aqt/data/web/js/editor.ts b/qt/aqt/data/web/js/editor.ts
index bf3ea9dd7..d56b71071 100644
--- a/qt/aqt/data/web/js/editor.ts
+++ b/qt/aqt/data/web/js/editor.ts
@@ -57,7 +57,6 @@ function onKey(evt: KeyboardEvent) {
 
     // prefer <br> instead of <div></div>
     if (evt.which === 13 && !inListItem()) {
-        console.log("Enter");
         evt.preventDefault();
         document.execCommand("insertLineBreak");
         return;
@@ -88,6 +87,23 @@ function onKey(evt: KeyboardEvent) {
     triggerKeyTimer();
 }
 
+function onKeyUp(evt: KeyboardEvent) {
+    // Avoid div element on remove
+    if (evt.which === 8 || evt.which === 13) {
+        const anchor = window.getSelection().anchorNode;
+
+        if (
+            nodeIsElement(anchor) &&
+            anchor.tagName === "DIV" &&
+            !anchor.classList.contains("field") &&
+            anchor.childElementCount === 1 &&
+            anchor.children[0].tagName === "BR"
+        ) {
+            anchor.replaceWith(anchor.children[0]);
+        }
+    }
+}
+
 function nodeIsElement(node: Node): node is Element {
     return node.nodeType == Node.ELEMENT_NODE;
 }
@@ -364,19 +380,19 @@ function setFields(fields) {
         </tr>
         <tr>
             <td width=100%>
-                <div id=f${i}
-                     onkeydown='onKey(window.event);'
-                     oninput='onInput();'
-                     onmouseup='onKey(window.event);'
-                     onfocus='onFocus(this);'
-                     onblur='onBlur();'
-                     class='field clearfix'
-                     onpaste='onPaste(this);'
-                     oncopy='onCutOrCopy(this);'
-                     oncut='onCutOrCopy(this);'
-                     contentEditable=true
-                     class=field
-                     style='color: ${color}'
+                <div id="f${i}"
+                     onkeydown="onKey(window.event);"
+                     onkeyup="onKeyUp(window.event);"
+                     oninput="onInput();"
+                     onmouseup="onKey(window.event);"
+                     onfocus="onFocus(this);"
+                     onblur="onBlur();"
+                     class="field clearfix"
+                     onpaste="onPaste(this);"
+                     oncopy="onCutOrCopy(this);"
+                     oncut="onCutOrCopy(this);"
+                     contentEditable
+                     style="color: ${color}"
                 >${f}</div>
             </td>
         </tr>`;