fix: preserve trailing spaces in word wrap

src/renderer/renderElement.ts

@@ -37,17 +37,21 @@ import {
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MIME_TYPES,
   SVG_NS,
+  TEXT_ALIGN,
 } from "../constants";
 import { getStroke, StrokeOptions } from "perfect-freehand";
 import {
   getBoundTextElement,
+  getBoundTextElementOffset,
   getContainerCoords,
   getContainerElement,
   getLineHeightInPx,
+  getLineWidth,
   getMaxContainerHeight,
   getMaxContainerWidth,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import heILJsonE0bd304682986695208c from "../packages/excalidraw/dist/excalidraw-assets-dev/locales/he-IL-json-e0bd304682986695208c";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -319,13 +323,17 @@ const drawElementOnCanvas = (
         }
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
-        context.font = getFontString(element);
+        const font = getFontString(element);
+        context.font = font;
         context.fillStyle = element.strokeColor;
         context.textAlign = element.textAlign as CanvasTextAlign;
 
+        context.fillStyle = "yellow";
+        context.fillRect(0, 0, element.width, element.height);
+        context.fillStyle = element.strokeColor;
+
         // Canvas does not support multiline text by default
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
-
         const horizontalOffset =
           element.textAlign === "center"
             ? element.width / 2
@@ -336,11 +344,35 @@ const drawElementOnCanvas = (
           element.fontSize,
           element.lineHeight,
         );
+        const container = getContainerElement(element);
+        if (container) {
+          console.log(
+            "Element width = ",
+            element.width,
+            getMaxContainerWidth(container),
+          );
+        }
         const verticalOffset = element.height - element.baseline;
         for (let index = 0; index < lines.length; index++) {
+          const trailingSpacesWidth =
+            getLineWidth(lines[index], font) -
+            getLineWidth(lines[index].trimEnd(), font);
+          console.log(trailingSpacesWidth, "width");
+          const maxWidth = container
+            ? getMaxContainerWidth(container)
+            : element.width;
+          const availableWidth =
+            maxWidth - getLineWidth(lines[index].trimEnd(), font);
+          let spacesOffset = 0;
+          if (element.textAlign === TEXT_ALIGN.CENTER) {
+            spacesOffset = -trailingSpacesWidth / 2;
+          } else if (element.textAlign === TEXT_ALIGN.RIGHT) {
+            spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
+          }
+          console.log(spacesOffset, "spacesOffset", trailingSpacesWidth);
           context.fillText(
-            lines[index],
-            horizontalOffset,
+            lines[index].trimEnd(),
+            horizontalOffset + spacesOffset,
             (index + 1) * lineHeightPx - verticalOffset,
           );
         }