Repository: excalidraw/excalidraw
File: src/element/textWysiwyg.tsx (TypeScript)

Code before:

      editable.value = updatedElement.originalText || updatedElement.text;
      const lines = updatedElement.originalText.split("\n");
      const lineHeight = updatedElement.containerId
        ? approxLineHeight
        : updatedElement.height / lines.length;
      if (!container) {
        maxWidth =
          (appState.offsetLeft + appState.width - viewportX - 8) /
            appState.zoom.value -
          // margin-right of parent if any
          Number(
            getComputedStyle(
              excalidrawContainer?.parentNode as Element,
            ).marginRight.slice(0, -2),
          );
      }

      // Make sure text editor height doesn't go beyond viewport
      editorMaxHeight =
        (appState.height -
          viewportY -
          // There is a ~14px difference which keeps on increasing
          // with every zoom when offset present hence I am substracting it here
          // However this is not the best fix and breaks in
          // few scenarios
          (appState.offsetTop
            ? ((appState.zoom.value * 100 - 100) / 10) * 14
            : 0)) /
        appState.zoom.value;
      Object.assign(editable.style, {
        font: getFontString(updatedElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight: `${lineHeight}px`,
        width: `${width}px`,
        height: `${height}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
        transform: getTransform(
          width,
          height,
          angle,
          appState,
          maxWidth,
          editorMaxHeight,
        ),
        textAlign,
        color: updatedElement.strokeColor,
        opacity: updatedElement.opacity / 100,
        filter: "var(--theme-filter)",
        maxWidth: `${maxWidth}px`,

Review comment (suggestion):
```suggestion
          // There is a ~14px difference which keeps on increasing
          // with every zoom step when offset present hence I am subtracting it here
          // However this is not the best fix and breaks in
          // few scenarios
```

Code after:
      editable.value = updatedElement.originalText || updatedElement.text;
      const lines = updatedElement.originalText.split("\n");
      const lineHeight = updatedElement.containerId
        ? approxLineHeight
        : updatedElement.height / lines.length;
      if (!container) {
        maxWidth =
          (appState.offsetLeft + appState.width - viewportX - 8) /
            appState.zoom.value -
          // margin-right of parent if any
          Number(
            getComputedStyle(
              excalidrawContainer?.parentNode as Element,
            ).marginRight.slice(0, -2),
          );
      }

      // Make sure text editor height doesn't go beyond viewport
      const editorMaxHeight =
        (appState.height -
          viewportY -
          // There is a ~14px difference which keeps on increasing
          // with every zoom step when offset present hence I am subtracting it here
          // However this is not the best fix and breaks in
          // few scenarios
          (appState.offsetTop
            ? ((appState.zoom.value * 100 - 100) / 10) * 14
            : 0)) /
        appState.zoom.value;
      Object.assign(editable.style, {
        font: getFontString(updatedElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight: `${lineHeight}px`,
        width: `${width}px`,
        height: `${height}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
        transform: getTransform(
          width,
          height,
          angle,
          appState,
          maxWidth,
          editorMaxHeight,
        ),
        textAlign,
        color: updatedElement.strokeColor,
        opacity: updatedElement.opacity / 100,
        filter: "var(--theme-filter)",
        maxWidth: `${maxWidth}px`,
        maxHeight: `${editorMaxHeight}px`,