Render text actions panel on double click (#450)

* Render text actions panel on double click

* cleanup wysiwyg on click

* use `state.editingElement` instead of global to determine whether t ext panel is shown

* clarify comment

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/appState.ts

@@ -7,6 +7,7 @@ export function getDefaultAppState(): AppState {
   return {
     draggingElement: null,
     resizingElement: null,
+    editingElement: null,
     elementType: "selection",
     exportBackground: true,
     currentItemStrokeColor: "#000000",

src/index.tsx

@@ -344,12 +344,18 @@ export class App extends React.Component<{}, AppState> {
   };
 
   private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) {
-    const { elementType } = this.state;
+    const { elementType, editingElement } = this.state;
     const selectedElements = elements.filter(el => el.isSelected);
     const hasSelectedElements = selectedElements.length > 0;
     const isTextToolSelected = elementType === "text";
     const isShapeToolSelected = elementType !== "selection";
-    if (!(hasSelectedElements || isShapeToolSelected || isTextToolSelected)) {
+    const isEditingText = editingElement && editingElement.type === "text";
+    if (
+      !hasSelectedElements &&
+      !isShapeToolSelected &&
+      !isTextToolSelected &&
+      !isEditingText
+    ) {
       return null;
     }
 
@@ -403,7 +409,7 @@ export class App extends React.Component<{}, AppState> {
             </>
           )}
 
-          {(hasText(elements) || isTextToolSelected) && (
+          {(hasText(elements) || isTextToolSelected || isEditingText) && (
             <>
               {this.actionManager.renderAction(
                 "changeFontSize",
@@ -800,11 +806,15 @@ export class App extends React.Component<{}, AppState> {
                   elements = [...elements, { ...element, isSelected: true }];
                   this.setState({
                     draggingElement: null,
+                    editingElement: null,
                     elementType: "selection"
                   });
                 }
               });
-              this.setState({ elementType: "selection" });
+              this.setState({
+                elementType: "selection",
+                editingElement: element
+              });
               return;
             }
 
@@ -1095,6 +1105,8 @@ export class App extends React.Component<{}, AppState> {
               100
             ) as ExcalidrawTextElement;
 
+            this.setState({ editingElement: element });
+
             let initText = "";
             let textX = e.clientX;
             let textY = e.clientY;
@@ -1149,6 +1161,7 @@ export class App extends React.Component<{}, AppState> {
                 elements = [...elements, { ...element, isSelected: true }];
                 this.setState({
                   draggingElement: null,
+                  editingElement: null,
                   elementType: "selection"
                 });
               }

src/types.ts

@@ -3,6 +3,9 @@ import { ExcalidrawElement } from "./element/types";
 export type AppState = {
   draggingElement: ExcalidrawElement | null;
   resizingElement: ExcalidrawElement | null;
+  // element being edited, but not necessarily added to elements array yet
+  //  (e.g. text element when typing into the input)
+  editingElement: ExcalidrawElement | null;
   elementType: string;
   exportBackground: boolean;
   currentItemStrokeColor: string;