Revert "Wysiwyg text (#200)" (#225)

This reverts commit abbc04df0e5a3b9265ada12a73bc9b8a810a329c.

src/element/index.ts

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

src/element/textWysiwyg.tsx

@@ -1,54 +0,0 @@
-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();
-}

src/index.tsx

@@ -4,13 +4,7 @@ import rough from "roughjs/bin/wrappers/rough";
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
 import { randomSeed } from "./random";
-import {
-  newElement,
-  resizeTest,
-  generateDraw,
-  isTextElement,
-  textWysiwyg
-} from "./element";
+import { newElement, resizeTest, generateDraw, isTextElement } from "./element";
 import {
   renderScene,
   clearSelection,
@@ -54,13 +48,12 @@ const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
 const CANVAS_WINDOW_OFFSET_LEFT = 250;
 const CANVAS_WINDOW_OFFSET_TOP = 0;
 
-export const KEYS = {
+const KEYS = {
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight",
   ARROW_DOWN: "ArrowDown",
   ARROW_UP: "ArrowUp",
   ESCAPE: "Escape",
-  ENTER: "Enter",
   DELETE: "Delete",
   BACKSPACE: "Backspace"
 };
@@ -84,8 +77,9 @@ function resetCursor() {
   document.documentElement.style.cursor = "";
 }
 
-function addTextElement(element: ExcalidrawTextElement, text = "") {
+function addTextElement(element: ExcalidrawTextElement) {
   resetCursor();
+  const text = prompt("What text do you want?");
   if (text === null || text === "") {
     return false;
   }
@@ -737,23 +731,22 @@ class App extends React.Component<{}, AppState> {
             }
 
             if (isTextElement(element)) {
-              textWysiwyg(e.clientX, e.clientY, text => {
-                addTextElement(element, text);
-                generateDraw(element);
-                elements.push(element);
-                element.isSelected = true;
-
-                this.setState({
-                  draggingElement: null,
-                  elementType: "selection"
-                });
-              });
-              return;
+              if (!addTextElement(element)) {
+                return;
+              }
             }
 
             generateDraw(element);
             elements.push(element);
-            this.setState({ draggingElement: element });
+            if (this.state.elementType === "text") {
+              this.setState({
+                draggingElement: null,
+                elementType: "selection"
+              });
+              element.isSelected = true;
+            } else {
+              this.setState({ draggingElement: element });
+            }
 
             let lastX = x;
             let lastY = y;
@@ -974,17 +967,20 @@ class App extends React.Component<{}, AppState> {
               100
             );
 
-            textWysiwyg(e.clientX, e.clientY, text => {
-              addTextElement(element as ExcalidrawTextElement, text);
-              generateDraw(element);
-              elements.push(element);
-              element.isSelected = true;
+            if (!addTextElement(element as ExcalidrawTextElement)) {
+              return;
+            }
 
-              this.setState({
-                draggingElement: null,
-                elementType: "selection"
-              });
+            generateDraw(element);
+            elements.push(element);
+
+            this.setState({
+              draggingElement: null,
+              elementType: "selection"
             });
+            element.isSelected = true;
+
+            this.forceUpdate();
           }}
         />
       </div>