diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 1046e375..168ffabb 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -21,7 +21,7 @@ export function textWysiwyg({ // But this solution has an issue — it allows to paste // multiline text, which is not currently supported const editable = document.createElement("div"); - editable.contentEditable = "plaintext-only"; + editable.contentEditable = "true"; editable.tabIndex = 0; editable.innerText = initText; editable.dataset.type = "wysiwyg"; @@ -37,7 +37,8 @@ export function textWysiwyg({ font: font, padding: "4px", outline: "transparent", - whiteSpace: "nowrap" + whiteSpace: "nowrap", + minHeight: "1em" }); editable.onkeydown = ev => { @@ -57,6 +58,14 @@ export function textWysiwyg({ } }; editable.onblur = handleSubmit; + // override paste to disallow non-textual data, and replace newlines + editable.onpaste = ev => { + ev.preventDefault(); + try { + const text = ev.clipboardData!.getData("text").replace(/\n+/g, " "); + editable.textContent = text; + } catch {} + }; function stopEvent(ev: Event) { ev.stopPropagation(); @@ -72,6 +81,7 @@ export function textWysiwyg({ function cleanup() { editable.onblur = null; editable.onkeydown = null; + editable.onpaste = null; window.removeEventListener("wheel", stopEvent, true); document.body.removeChild(editable); }