fix: use active Excalidraw component when editing text (#3478)

* fix: use active excalidraw component when editing text

* changelog

* tweak

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({

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
+  excalidrawContainer
-    .querySelector(".excalidraw-textEditorContainer")!
+    ?.querySelector(".excalidraw-textEditorContainer")!
     .appendChild(editable);
 };

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