Wysiwyg text (#200)

src/element/textWysiwyg.tsx

@@ -0,0 +1,54 @@
+import { KEYS } from "../index";
+
+export function textWysiwyg(
+  x: number,
+  y: number,
+  onSubmit: (text: string) => void
+) {
+  const input = document.createElement("input");
+
+  Object.assign(input.style, {
+    position: "absolute",
+    top: y - 8 + "px",
+    left: x + "px",
+    transform: "translate(-50%, -50%)",
+    boxShadow: "none",
+    textAlign: "center",
+    width: (window.innerWidth - x) * 2 + "px",
+    fontSize: "20px",
+    fontFamily: "Virgil",
+    border: "none",
+    background: "transparent"
+  });
+
+  input.onkeydown = ev => {
+    if (ev.key === KEYS.ESCAPE) {
+      cleanup();
+      return;
+    }
+    if (ev.key === KEYS.ENTER) {
+      handleSubmit();
+    }
+  };
+  input.onblur = handleSubmit;
+
+  function stopEvent(ev: Event) {
+    ev.stopPropagation();
+  }
+
+  function handleSubmit() {
+    if (input.value) {
+      onSubmit(input.value);
+    }
+    cleanup();
+  }
+
+  function cleanup() {
+    window.removeEventListener("wheel", stopEvent, true);
+    document.body.removeChild(input);
+  }
+
+  window.addEventListener("wheel", stopEvent, true);
+  document.body.appendChild(input);
+  input.focus();
+}