fix offset in editor

src/element/textElement.ts

@@ -977,3 +977,22 @@ export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
   }
   return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
+
+export const getSpacesOffsetForLine = (
+  element: ExcalidrawTextElement,
+  line: string,
+  font: FontString,
+) => {
+  const container = getContainerElement(element);
+  const trailingSpacesWidth =
+    getLineWidth(line, font) - getLineWidth(line.trimEnd(), font);
+  const maxWidth = container ? getBoundTextMaxWidth(container) : element.width;
+  const availableWidth = maxWidth - getLineWidth(line.trimEnd(), font);
+  let spacesOffset = 0;
+  if (element.textAlign === TEXT_ALIGN.CENTER) {
+    spacesOffset = -Math.min(trailingSpacesWidth / 2, availableWidth / 2);
+  } else if (element.textAlign === TEXT_ALIGN.RIGHT) {
+    spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
+  }
+  return spacesOffset;
+};

src/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari } from "../constants";
+import { CLASSES, TEXT_ALIGN, isSafari } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -196,6 +196,8 @@ export const textWysiwyg = ({
         }
 
         maxWidth = getBoundTextMaxWidth(container);
+        textElementWidth = Math.min(textElementWidth, maxWidth);
+
         maxHeight = getBoundTextMaxHeight(
           container,
           updatedTextElement as ExcalidrawTextElementWithContainer,
@@ -230,7 +232,16 @@ export const textWysiwyg = ({
           coordY = y;
         }
       }
-      const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
+      let spacesOffset = 0;
+      if (updatedTextElement.textAlign === TEXT_ALIGN.CENTER) {
+        spacesOffset = Math.max(0, updatedTextElement.width / 2 - maxWidth / 2);
+      } else if (updatedTextElement.textAlign === TEXT_ALIGN.RIGHT) {
+        spacesOffset = Math.max(0, updatedTextElement.width - maxWidth);
+      }
+      const [viewportX, viewportY] = getViewportCoords(
+        coordX + spacesOffset,
+        coordY,
+      );
       const initialSelectionStart = editable.selectionStart;
       const initialSelectionEnd = editable.selectionEnd;
       const initialLength = editable.value.length;

src/renderer/renderElement.ts

@@ -48,6 +48,7 @@ import {
   getBoundTextMaxHeight,
   getBoundTextMaxWidth,
   getLineWidth,
+  getSpacesOffsetForLine,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
 
@@ -338,27 +339,14 @@ const drawElementOnCanvas = (
           element.fontSize,
           element.lineHeight,
         );
-        const container = getContainerElement(element);
 
         const verticalOffset = element.height - element.baseline;
         for (let index = 0; index < lines.length; index++) {
-          const trailingSpacesWidth =
+          const spacesOffset = getSpacesOffsetForLine(
-            getLineWidth(lines[index], font) -
+            element,
-            getLineWidth(lines[index].trimEnd(), font);
+            lines[index],
-          const maxWidth = container
+            font,
-            ? getBoundTextMaxWidth(container)
+          );
-            : element.width;
-          const availableWidth =
-            maxWidth - getLineWidth(lines[index].trimEnd(), font);
-          let spacesOffset = 0;
-          if (element.textAlign === TEXT_ALIGN.CENTER) {
-            spacesOffset = -Math.min(
-              trailingSpacesWidth / 2,
-              availableWidth / 2,
-            );
-          } else if (element.textAlign === TEXT_ALIGN.RIGHT) {
-            spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
-          }
           context.fillText(
             lines[index].trimEnd(),
             horizontalOffset + spacesOffset,