Double click to edit text

src/element/textWysiwyg.tsx

@@ -1,13 +1,26 @@
 import { KEYS } from "../index";
 
-export function textWysiwyg(
+type TextWysiwygParams = {
-  x: number,
+  initText: string;
-  y: number,
+  x: number;
-  strokeColor: string,
+  y: number;
-  onSubmit: (text: string) => void
+  strokeColor: string;
-) {
+  fontSize: number;
-  const input = document.createElement("input");
+  fontFamily: string;
+  onSubmit: (text: string) => void;
+};
 
+export function textWysiwyg({
+  initText,
+  x,
+  y,
+  strokeColor,
+  fontSize,
+  fontFamily,
+  onSubmit
+}: TextWysiwygParams) {
+  const input = document.createElement("input");
+  input.value = initText;
   Object.assign(input.style, {
     color: strokeColor,
     position: "absolute",
@@ -17,8 +30,8 @@ export function textWysiwyg(
     boxShadow: "none",
     textAlign: "center",
     width: (window.innerWidth - x) * 2 + "px",
-    fontSize: "20px",
+    fontSize: fontSize + "px",
-    fontFamily: "Virgil",
+    fontFamily,
     border: "none",
     background: "transparent"
   });
@@ -57,4 +70,5 @@ export function textWysiwyg(
   window.addEventListener("wheel", stopEvent, true);
   document.body.appendChild(input);
   input.focus();
+  input.select();
 }

src/index.tsx

@@ -80,14 +80,18 @@ function resetCursor() {
   document.documentElement.style.cursor = "";
 }
 
-function addTextElement(element: ExcalidrawTextElement, text: string) {
+function addTextElement(
+  element: ExcalidrawTextElement,
+  text: string,
+  fontSize: number,
+  fontFamily: string
+) {
   resetCursor();
   if (text === null || text === "") {
     return false;
   }
-  const fontSize = 20;
   element.text = text;
-  element.font = `${fontSize}px Virgil`;
+  element.font = `${fontSize}px ${fontFamily}`;
   const font = context.font;
   context.font = element.font;
   const textMeasure = context.measureText(element.text);
@@ -138,6 +142,8 @@ class App extends React.Component<{}, AppState> {
     exportBackground: true,
     currentItemStrokeColor: "#000000",
     currentItemBackgroundColor: "#ffffff",
+    currentItemFontFamily: "Virgil",
+    currentItemFontSize: 20,
     viewBackgroundColor: "#ffffff",
     scrollX: 0,
     scrollY: 0,
@@ -688,21 +694,28 @@ class App extends React.Component<{}, AppState> {
             }
 
             if (isTextElement(element)) {
-              textWysiwyg(
+              textWysiwyg({
-                e.clientX,
+                initText: "",
-                e.clientY,
+                x: e.clientX,
-                this.state.currentItemStrokeColor,
+                y: e.clientY,
-                text => {
+                strokeColor: this.state.currentItemStrokeColor,
-                  addTextElement(element, text);
+                fontSize: this.state.currentItemFontSize,
+                fontFamily: this.state.currentItemFontFamily,
+                onSubmit: text => {
+                  addTextElement(
+                    element,
+                    text,
+                    this.state.currentItemFontSize,
+                    this.state.currentItemFontFamily
+                  );
                   elements.push(element);
                   element.isSelected = true;
-
                   this.setState({
                     draggingElement: null,
                     elementType: "selection"
                   });
                 }
-              );
+              });
               return;
             }
 
@@ -916,9 +929,12 @@ class App extends React.Component<{}, AppState> {
             const x =
               e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
             const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
-
+            const elementAtPosition = getElementAtPosition(elements, x, y);
-            if (getElementAtPosition(elements, x, y)) {
+            if (elementAtPosition && !isTextElement(elementAtPosition)) {
               return;
+            } else if (elementAtPosition) {
+              elements.splice(elements.indexOf(elementAtPosition), 1);
+              this.forceUpdate();
             }
 
             const element = newElement(
@@ -933,21 +949,50 @@ class App extends React.Component<{}, AppState> {
               100
             );
 
-            textWysiwyg(
+            let initText = "";
-              e.clientX,
+            let textX = e.clientX;
-              e.clientY,
+            let textY = e.clientY;
-              this.state.currentItemStrokeColor,
+            if (elementAtPosition) {
-              text => {
+              Object.assign(element, elementAtPosition);
-                addTextElement(element as ExcalidrawTextElement, text);
+              // x and y will change after calling addTextElement function
+              element.x = elementAtPosition.x + elementAtPosition.width / 2;
+              element.y =
+                elementAtPosition.y + elementAtPosition.actualBoundingBoxAscent;
+              initText = elementAtPosition.text;
+              textX =
+                this.state.scrollX +
+                elementAtPosition.x +
+                CANVAS_WINDOW_OFFSET_LEFT +
+                elementAtPosition.width / 2;
+              textY =
+                this.state.scrollY +
+                elementAtPosition.y +
+                CANVAS_WINDOW_OFFSET_TOP +
+                elementAtPosition.actualBoundingBoxAscent;
+            }
+
+            textWysiwyg({
+              initText,
+              x: textX,
+              y: textY,
+              strokeColor: this.state.currentItemStrokeColor,
+              fontSize: this.state.currentItemFontSize,
+              fontFamily: this.state.currentItemFontFamily,
+              onSubmit: text => {
+                addTextElement(
+                  element as ExcalidrawTextElement,
+                  text,
+                  this.state.currentItemFontSize,
+                  this.state.currentItemFontFamily
+                );
                 elements.push(element);
                 element.isSelected = true;
-
                 this.setState({
                   draggingElement: null,
                   elementType: "selection"
                 });
               }
-            );
+            });
           }}
         />
       </div>

src/types.ts

@@ -7,6 +7,8 @@ export type AppState = {
   exportBackground: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
+  currentItemFontSize: number;
+  currentItemFontFamily: string;
   viewBackgroundColor: string;
   scrollX: number;
   scrollY: number;