smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Contenteditable wysiwyg

Browse source
This commit is contained in:
hazam 2020-01-09 01:51:22 +05:00
parent 1739540f00
commit b5366fe255
2 changed files with 29 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/element/textWysiwyg.tsx
View file

@ -17,27 +17,31 @@ export function textWysiwyg({
font, font,
onSubmit onSubmit
}: TextWysiwygParams) { }: TextWysiwygParams) {
const input = document.createElement("input"); const editable = document.createElement("div");
input.value = initText; editable.contentEditable = "plaintext-only";
Object.assign(input.style, { editable.tabIndex = 0;
editable.innerText = initText;
editable.dataset.type = "wysiwyg";
Object.assign(editable.style, {
color: strokeColor, color: strokeColor,
position: "absolute", position: "absolute",
top: y + "px", top: y + "px",
left: x + "px", left: x + "px",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
boxShadow: "none",
textAlign: "center", textAlign: "center",
width: (window.innerWidth - x) * 2 + "px", display: "inline-block",
font: font, font: font,
border: "none", padding: "4px",
background: "transparent" outline: "transparent",
whiteSpace: "nowrap"
}); });
input.onkeydown = ev => { editable.onkeydown = ev => {
if (ev.key === KEYS.ESCAPE) { if (ev.key === KEYS.ESCAPE) {
ev.preventDefault(); ev.preventDefault();
if (initText) { if (initText) {
input.value = initText; editable.innerText = initText;
handleSubmit(); handleSubmit();
return; return;
} }
@ -49,28 +53,34 @@ export function textWysiwyg({
handleSubmit(); handleSubmit();
} }
}; };
input.onblur = handleSubmit; editable.onblur = handleSubmit;
function stopEvent(ev: Event) { function stopEvent(ev: Event) {
ev.stopPropagation(); ev.stopPropagation();
} }
function handleSubmit() { function handleSubmit() {
if (input.value) { if (editable.innerText) {
onSubmit(input.value); onSubmit(editable.innerText);
} }
cleanup(); cleanup();
} }
function cleanup() { function cleanup() {
input.onblur = null; editable.onblur = null;
input.onkeydown = null; editable.onkeydown = null;
window.removeEventListener("wheel", stopEvent, true); window.removeEventListener("wheel", stopEvent, true);
document.body.removeChild(input); document.body.removeChild(editable);
} }
window.addEventListener("wheel", stopEvent, true); window.addEventListener("wheel", stopEvent, true);
document.body.appendChild(input); document.body.appendChild(editable);
input.focus(); editable.focus();
input.select(); const selection = window.getSelection();
if (selection) {
const range = document.createRange();
range.selectNodeContents(editable);
selection.removeAllRanges();
selection.addRange(range);
}
} }

1
src/utils.ts
View file

@ -18,6 +18,7 @@ export function isInputLike(
target: Element | EventTarget | null target: Element | EventTarget | null
): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement { ): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
return ( return (
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
target instanceof HTMLInputElement || target instanceof HTMLInputElement ||
target instanceof HTMLTextAreaElement || target instanceof HTMLTextAreaElement ||
target instanceof HTMLSelectElement target instanceof HTMLSelectElement