fix: Position text editor absolute and fix the offsets so it doesn't remain fixed when container is scrolled (#3200)

* fix: Position text editor absolute and fix the offsets so it doesn't remain fixed when container is scrolled

* update changelog

* Update src/packages/excalidraw/CHANGELOG.md

src/components/App.tsx

@@ -1578,7 +1578,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           },
           this.state,
         );
-        return [viewportX, viewportY];
+        return [
+          viewportX - this.state.offsetLeft,
+          viewportY - this.state.offsetTop,
+        ];
       },
       onChange: withBatchedUpdates((text) => {
         updateElement(text);

src/element/textWysiwyg.tsx

@@ -93,7 +93,7 @@ export const textWysiwyg = ({
   editable.wrap = "off";
 
   Object.assign(editable.style, {
-    position: "fixed",
+    position: "absolute",
     display: "inline-block",
     minHeight: "1em",
     backfaceVisibility: "hidden",

src/packages/excalidraw/CHANGELOG.md

@@ -18,7 +18,8 @@ Please add the latest change on the top under the correct section.
 
 ### Fixes
 
-- Scope css variables so that host css vars don't clash with excalidraw[#3199](https://github.com/excalidraw/excalidraw/pull/3199).
+- Position text editor absolute and fix the offsets so it doesn't remain fixed when the container is scrolled [#3200](https://github.com/excalidraw/excalidraw/pull/3200).
+- Scope CSS variables so that host CSS vars don't clash with excalidraw [#3199](https://github.com/excalidraw/excalidraw/pull/3199).
 
 ---