Fixed cleaning handlers after cleanup

src/element/index.ts

@@ -9,3 +9,4 @@ export { handlerRectangles } from "./handlerRectangles";
 export { hitTest } from "./collision";
 export { resizeTest } from "./resizeTest";
 export { isTextElement } from "./typeChecks";
+export { textWysiwyg } from "./textWysiwyg";

src/element/textWysiwyg.tsx

@@ -0,0 +1,60 @@
+import { KEYS } from "../index";
+
+export function textWysiwyg(
+  x: number,
+  y: number,
+  strokeColor: string,
+  onSubmit: (text: string) => void
+) {
+  const input = document.createElement("input");
+
+  Object.assign(input.style, {
+    color: strokeColor,
+    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) {
+      ev.preventDefault();
+      cleanup();
+      return;
+    }
+    if (ev.key === KEYS.ENTER) {
+      ev.preventDefault();
+      handleSubmit();
+    }
+  };
+  input.onblur = handleSubmit;
+
+  function stopEvent(ev: Event) {
+    ev.stopPropagation();
+  }
+
+  function handleSubmit() {
+    if (input.value) {
+      onSubmit(input.value);
+    }
+    cleanup();
+  }
+
+  function cleanup() {
+    input.onblur = null;
+    input.onkeydown = null;
+    window.removeEventListener("wheel", stopEvent, true);
+    document.body.removeChild(input);
+  }
+
+  window.addEventListener("wheel", stopEvent, true);
+  document.body.appendChild(input);
+  input.focus();
+}

src/index.tsx

@@ -4,7 +4,7 @@ import rough from "roughjs/bin/wrappers/rough";
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
 import { randomSeed } from "./random";
-import { newElement, resizeTest, isTextElement } from "./element";
+import { newElement, resizeTest, isTextElement, textWysiwyg } from "./element";
 import {
   clearSelection,
   getSelectedIndices,
@@ -50,11 +50,12 @@ const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
 const CANVAS_WINDOW_OFFSET_LEFT = 250;
 const CANVAS_WINDOW_OFFSET_TOP = 0;
 
-const KEYS = {
+export const KEYS = {
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight",
   ARROW_DOWN: "ArrowDown",
   ARROW_UP: "ArrowUp",
+  ENTER: "Enter",
   ESCAPE: "Escape",
   DELETE: "Delete",
   BACKSPACE: "Backspace"
@@ -79,9 +80,8 @@ function resetCursor() {
   document.documentElement.style.cursor = "";
 }
 
-function addTextElement(element: ExcalidrawTextElement) {
+function addTextElement(element: ExcalidrawTextElement, text: string) {
   resetCursor();
-  const text = prompt("What text do you want?");
   if (text === null || text === "") {
     return false;
   }
@@ -688,9 +688,22 @@ class App extends React.Component<{}, AppState> {
             }
 
             if (isTextElement(element)) {
-              if (!addTextElement(element)) {
+              textWysiwyg(
-                return;
+                e.clientX,
-              }
+                e.clientY,
+                this.state.currentItemStrokeColor,
+                text => {
+                  addTextElement(element, text);
+                  elements.push(element);
+                  element.isSelected = true;
+
+                  this.setState({
+                    draggingElement: null,
+                    elementType: "selection"
+                  });
+                }
+              );
+              return;
             }
 
             elements.push(element);
@@ -920,19 +933,21 @@ class App extends React.Component<{}, AppState> {
               100
             );
 
-            if (!addTextElement(element as ExcalidrawTextElement)) {
+            textWysiwyg(
-              return;
+              e.clientX,
-            }
+              e.clientY,
+              this.state.currentItemStrokeColor,
+              text => {
+                addTextElement(element as ExcalidrawTextElement, text);
+                elements.push(element);
+                element.isSelected = true;
 
-            elements.push(element);
+                this.setState({
-
+                  draggingElement: null,
-            this.setState({
+                  elementType: "selection"
-              draggingElement: null,
+                });
-              elementType: "selection"
+              }
-            });
+            );
-            element.isSelected = true;
-
-            this.forceUpdate();
           }}
         />
       </div>