fix: don't bind text to container if already present (#4946)

* fix: don't bind text to container if already present

* Add specs and update condition

src/components/App.tsx

@@ -2215,7 +2215,11 @@ class App extends React.Component<AppProps, AppState> {
       (shouldBind || parentCenterPosition)
     ) {
       container = getTextBindableContainerAtPosition(
-        this.scene.getElements().filter((ele) => !isTextElement(ele)),
+        this.scene
+          .getElements()
+          .filter(
+            (ele) => isTextBindableContainer(ele) && !getBoundTextElement(ele),
+          ),
         sceneX,
         sceneY,
       );

src/element/textWysiwyg.test.tsx

@@ -704,7 +704,7 @@ describe("textWysiwyg", () => {
       expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
     });
 
-    it("should unbind bound text when unbind action from context menu is triggred", async () => {
+    it("should unbind bound text when unbind action from context menu is triggered", async () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
 
@@ -745,5 +745,47 @@ describe("textWysiwyg", () => {
         null,
       );
     });
+    it("shouldn't bind to container if container has bound text", async () => {
+      expect(h.elements.length).toBe(1);
+
+      Keyboard.withModifierKeys({}, () => {
+        Keyboard.keyPress(KEYS.ENTER);
+      });
+
+      expect(h.elements.length).toBe(2);
+
+      // Bind first text
+      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.containerId).toBe(rectangle.id);
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+
+      // Attempt to bind another text
+      UI.clickTool("text");
+      mouse.clickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      mouse.down();
+      expect(h.elements.length).toBe(3);
+      text = h.elements[2] as ExcalidrawTextElementWithContainer;
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Whats up?" } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: h.elements[1].id, type: "text" },
+      ]);
+      expect(text.containerId).toBe(null);
+    });
   });
 });