From 891ac82447cfc923ac0255e49306caa9bd859620 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 23 Apr 2021 21:11:18 +0530
Subject: [PATCH] fix: use active Excalidraw component when editing text
 (#3478)

* fix: use active excalidraw component when editing text

* changelog

* tweak
---
 src/components/App.tsx               | 1 +
 src/element/textWysiwyg.tsx          | 8 +++++---
 src/packages/excalidraw/CHANGELOG.md | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4deb01dc..56c67a1a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1803,6 +1803,7 @@ class App extends React.Component<AppProps, AppState> {
         this.focusContainer();
       }),
       element,
+      excalidrawContainer: this.excalidrawContainerRef.current,
     });
     // deselect all other elements when inserting text
     this.setState({
diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index 40d1c1fc..6eee0d38 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -43,6 +43,7 @@ export const textWysiwyg = ({
   getViewportCoords,
   element,
   canvas,
+  excalidrawContainer,
 }: {
   id: ExcalidrawElement["id"];
   appState: AppState;
@@ -51,6 +52,7 @@ export const textWysiwyg = ({
   getViewportCoords: (x: number, y: number) => [number, number];
   element: ExcalidrawElement;
   canvas: HTMLCanvasElement | null;
+  excalidrawContainer: HTMLDivElement | null;
 }) => {
   const updateWysiwygStyle = () => {
     const updatedElement = Scene.getScene(element)?.getElement(id);
@@ -71,7 +73,7 @@ export const textWysiwyg = ({
         // margin-right of parent if any
         Number(
           getComputedStyle(
-            document.querySelector(".excalidraw")!.parentNode as Element,
+            excalidrawContainer?.parentNode as Element,
           ).marginRight.slice(0, -2),
         );
 
@@ -363,7 +365,7 @@ export const textWysiwyg = ({
     passive: false,
     capture: true,
   });
-  document
-    .querySelector(".excalidraw-textEditorContainer")!
+  excalidrawContainer
+    ?.querySelector(".excalidraw-textEditorContainer")!
     .appendChild(editable);
 };
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index eb1abe6a..64559af8 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -38,6 +38,7 @@ Please add the latest change on the top under the correct section.
 
 ### Fixes
 
+- Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page [#3478](https://github.com/excalidraw/excalidraw/pull/3478).
 - When switching theme, apply it only to the active Excalidraw component. This fixes a case where the theme was getting applied to the first Excalidraw component if you had multiple Excalidraw components on the same page [#3446](https://github.com/excalidraw/excalidraw/pull/3446)
 
 ### Refactor