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>
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>`;