fix: Don't overflow text beyond width of Excalidraw (#3215)

* fix: Don't overflow text beyond width of Excalidraw

* update changelog

src/element/textWysiwyg.tsx

@@ -80,6 +80,19 @@ export const textWysiwyg = ({
         color: updatedElement.strokeColor,
         opacity: updatedElement.opacity / 100,
         filter: "var(--appearance-filter)",
+        maxWidth: `${
+          appState.offsetLeft +
+          appState.width -
+          viewportX -
+          // margin-right of parent if any
+          Number(
+            getComputedStyle(
+              document.querySelector(".excalidraw")!.parentNode as Element,
+            ).marginRight.slice(0, -2),
+          ) -
+          // padding of layer ui footer
+          8
+        }px`,
       });
     }
   };

src/packages/excalidraw/CHANGELOG.md

@@ -22,6 +22,10 @@ Please add the latest change on the top under the correct section.
 - 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).
 
+## Excalidraw Library
+
+- Don't overflow text beyond width of Excalidraw [#3215](https://github.com/excalidraw/excalidraw/pull/3215).
+
 ---
 
 ## 0.4.2