fix: allow adding text via enter only for text containers (#5891)

* fix: allow adding text via enter only for text containers

* fix

* fix

* fix

* move check isTextElement outside

src/components/App.tsx

@@ -259,6 +259,7 @@ import {
   getApproxMinLineWidth,
   getBoundTextElement,
   getContainerDims,
+  isValidTextContainer,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
 import {
@@ -1974,7 +1975,9 @@ class App extends React.Component<AppProps, AppState> {
         );
 
         if (selectedElements.length === 1) {
-          if (isLinearElement(selectedElements[0])) {
+          const selectedElement = selectedElements[0];
+
+          if (isLinearElement(selectedElement)) {
             if (
               !this.state.editingLinearElement ||
               this.state.editingLinearElement.elementId !==
@@ -1983,14 +1986,15 @@ class App extends React.Component<AppProps, AppState> {
               this.history.resumeRecording();
               this.setState({
                 editingLinearElement: new LinearElementEditor(
-                  selectedElements[0],
+                  selectedElement,
                   this.scene,
                 ),
               });
             }
-          } else {
-            const selectedElement = selectedElements[0];
-
+          } else if (
+            isTextElement(selectedElement) ||
+            isValidTextContainer(selectedElement)
+          ) {
             this.startTextEditing({
               sceneX: selectedElement.x + selectedElement.width / 2,
               sceneY: selectedElement.y + selectedElement.height / 2,
@@ -2610,8 +2614,7 @@ class App extends React.Component<AppProps, AppState> {
       );
       if (selectedElements.length === 1) {
         const selectedElement = selectedElements[0];
-        const canBindText = hasBoundTextElement(selectedElement);
-        if (canBindText) {
+        if (hasBoundTextElement(selectedElement)) {
           sceneX = selectedElement.x + selectedElement.width / 2;
           sceneY = selectedElement.y + selectedElement.height / 2;
         }
@@ -3913,8 +3916,7 @@ class App extends React.Component<AppProps, AppState> {
       includeBoundTextElement: true,
     });
 
-    const canBindText = hasBoundTextElement(element);
-    if (canBindText) {
+    if (hasBoundTextElement(element)) {
       sceneX = element.x + element.width / 2;
       sceneY = element.y + element.height / 2;
     }

src/element/textElement.ts

@@ -12,6 +12,7 @@ import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { isTextElement } from ".";
 import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
+import { isImageElement } from "./typeChecks";
 
 export const redrawTextBoundingBox = (
   textElement: ExcalidrawTextElement,
@@ -490,3 +491,12 @@ export const getContainerElement = (
 export const getContainerDims = (element: ExcalidrawElement) => {
   return { width: element.width, height: element.height };
 };
+
+export const isValidTextContainer = (element: ExcalidrawElement) => {
+  return (
+    element.type === "rectangle" ||
+    element.type === "ellipse" ||
+    element.type === "diamond" ||
+    isImageElement(element)
+  );
+};

src/element/textWysiwyg.test.tsx

@@ -584,6 +584,17 @@ describe("textWysiwyg", () => {
       expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
     });
 
+    it("shouldn't create text element when pressing 'Enter' key on non text bindable container", async () => {
+      h.elements = [];
+      const freeDraw = UI.createElement("freedraw", {
+        width: 100,
+        height: 50,
+      });
+      API.setSelectedElements([freeDraw]);
+      Keyboard.keyPress(KEYS.ENTER);
+      expect(h.elements.length).toBe(1);
+    });
+
     it("should'nt bind text to container when not double clicked on center", async () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);