Deal with div insertion on deleting list item

This commit is contained in:
Henrik Giesel 2021-01-15 18:18:42 +01:00
parent 4e1139021b
commit 0db8a14497

View file

@ -57,7 +57,6 @@ function onKey(evt: KeyboardEvent) {
// prefer <br> instead of <div></div> // prefer <br> instead of <div></div>
if (evt.which === 13 && !inListItem()) { if (evt.which === 13 && !inListItem()) {
console.log("Enter");
evt.preventDefault(); evt.preventDefault();
document.execCommand("insertLineBreak"); document.execCommand("insertLineBreak");
return; return;
@ -88,6 +87,23 @@ function onKey(evt: KeyboardEvent) {
triggerKeyTimer(); 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 { function nodeIsElement(node: Node): node is Element {
return node.nodeType == Node.ELEMENT_NODE; return node.nodeType == Node.ELEMENT_NODE;
} }
@ -364,19 +380,19 @@ function setFields(fields) {
</tr> </tr>
<tr> <tr>
<td width=100%> <td width=100%>
<div id=f${i} <div id="f${i}"
onkeydown='onKey(window.event);' onkeydown="onKey(window.event);"
oninput='onInput();' onkeyup="onKeyUp(window.event);"
onmouseup='onKey(window.event);' oninput="onInput();"
onfocus='onFocus(this);' onmouseup="onKey(window.event);"
onblur='onBlur();' onfocus="onFocus(this);"
class='field clearfix' onblur="onBlur();"
onpaste='onPaste(this);' class="field clearfix"
oncopy='onCutOrCopy(this);' onpaste="onPaste(this);"
oncut='onCutOrCopy(this);' oncopy="onCutOrCopy(this);"
contentEditable=true oncut="onCutOrCopy(this);"
class=field contentEditable
style='color: ${color}' style="color: ${color}"
>${f}</div> >${f}</div>
</td> </td>
</tr>`; </tr>`;