Update textWysiwyg.tsx

src/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isFirefox, isSafari, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, VERTICAL_ALIGN } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -270,12 +270,10 @@ export const textWysiwyg = ({
       const lineHeight = updatedTextElement.containerId
         ? approxLineHeight
         : updatedTextElement.height / lines.length;
+
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);
-      } else if (isFirefox || isSafari) {
-        // As firefox, Safari needs little higher dimensions on DOM
-        textElementWidth += 0.5;
       }
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
@@ -348,7 +346,32 @@ export const textWysiwyg = ({
     overflowWrap: "break-word",
     boxSizing: "content-box",
   });
+
+  const magicOffset =
+    (excalidrawContainer
+      ? parseFloat(getComputedStyle(excalidrawContainer).fontSize)
+      : 16) / 16;
+
+  const onEditableInput = () => {
+    const updatedTextElement = Scene.getScene(element)?.getElement(
+      id,
+    ) as ExcalidrawTextElement;
+    const font = getFontString(updatedTextElement);
+    if (isBoundToContainer(element)) {
+      const container = getContainerElement(element);
+      const wrappedText = wrapText(
+        normalizeText(editable.value),
+        font,
+        getMaxContainerWidth(container!),
+      );
+      const { width, height } = measureText(wrappedText, font);
+      editable.style.width = `${width + magicOffset}px`;
+      editable.style.height = `${height}px`;
+    }
+  };
+
   updateWysiwygStyle();
+  onEditableInput();
 
   if (onChange) {
     editable.onpaste = async (event) => {
@@ -378,21 +401,7 @@ export const textWysiwyg = ({
     };
 
     editable.oninput = () => {
-      const updatedTextElement = Scene.getScene(element)?.getElement(
+      onEditableInput();
-        id,
-      ) as ExcalidrawTextElement;
-      const font = getFontString(updatedTextElement);
-      if (isBoundToContainer(element)) {
-        const container = getContainerElement(element);
-        const wrappedText = wrapText(
-          normalizeText(editable.value),
-          font,
-          getMaxContainerWidth(container!),
-        );
-        const { width, height } = measureText(wrappedText, font);
-        editable.style.width = `${width}px`;
-        editable.style.height = `${height}px`;
-      }
       onChange(normalizeText(editable.value));
     };
   }