@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/element/resizeTest.js

@@ -1,13 +1,17 @@
-import { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
+import { getTransformHandlesFromCoords, getTransformHandles, getOmitSidesForDevice, canResizeFromSides, } from "./transformHandles";
+import { getElementAbsoluteCoords } from "./bounds";
+import { SIDE_RESIZING_THRESHOLD } from "../constants";
+import { angleToDegrees, pointOnLine, pointRotate, } from "../../utils/geometry/geometry";
+import { isLinearElement } from "./typeChecks";
 const isInsideTransformHandle = (transformHandle, x, y) => x >= transformHandle[0] &&
     x <= transformHandle[0] + transformHandle[2] &&
     y >= transformHandle[1] &&
     y <= transformHandle[1] + transformHandle[3];
-export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType) => {
+export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, device) => {
     if (!appState.selectedElementIds[element.id]) {
         return false;
     }
-    const { rotation: rotationTransformHandle, ...transformHandles } = getTransformHandles(element, zoom, elementsMap, pointerType);
+    const { rotation: rotationTransformHandle, ...transformHandles } = getTransformHandles(element, zoom, elementsMap, pointerType, getOmitSidesForDevice(device));
     if (rotationTransformHandle &&
         isInsideTransformHandle(rotationTransformHandle, x, y)) {
         return "rotation";
@@ -22,25 +26,54 @@ export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerTy
     if (filter.length > 0) {
         return filter[0];
     }
+    if (canResizeFromSides(device)) {
+        const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+        // do not resize from the sides for linear elements with only two points
+        if (!(isLinearElement(element) && element.points.length <= 2)) {
+            const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
+            const sides = getSelectionBorders([x1 - SPACING, y1 - SPACING], [x2 + SPACING, y2 + SPACING], [cx, cy], angleToDegrees(element.angle));
+            for (const [dir, side] of Object.entries(sides)) {
+                // test to see if x, y are on the line segment
+                if (pointOnLine([x, y], side, SPACING)) {
+                    return dir;
+                }
+            }
+        }
+    }
     return false;
 };
-export const getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap) => {
+export const getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap, device) => {
     return elements.reduce((result, element) => {
         if (result) {
             return result;
         }
-        const transformHandleType = resizeTest(element, elementsMap, appState, scenePointerX, scenePointerY, zoom, pointerType);
+        const transformHandleType = resizeTest(element, elementsMap, appState, scenePointerX, scenePointerY, zoom, pointerType, device);
         return transformHandleType ? { element, transformHandleType } : null;
     }, null);
 };
-export const getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType) => {
-    const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, zoom, pointerType, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);
+export const getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType, device) => {
+    const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, zoom, pointerType, getOmitSidesForDevice(device));
     const found = Object.keys(transformHandles).find((key) => {
         const transformHandle = transformHandles[key];
         return (transformHandle &&
             isInsideTransformHandle(transformHandle, scenePointerX, scenePointerY));
     });
-    return (found || false);
+    if (found) {
+        return found;
+    }
+    if (canResizeFromSides(device)) {
+        const cx = (x1 + x2) / 2;
+        const cy = (y1 + y2) / 2;
+        const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
+        const sides = getSelectionBorders([x1 - SPACING, y1 - SPACING], [x2 + SPACING, y2 + SPACING], [cx, cy], angleToDegrees(0));
+        for (const [dir, side] of Object.entries(sides)) {
+            // test to see if x, y are on the line segment
+            if (pointOnLine([scenePointerX, scenePointerY], side, SPACING)) {
+                return dir;
+            }
+        }
+    }
+    return false;
 };
 const RESIZE_CURSORS = ["ns", "nesw", "ew", "nwse"];
 const rotateResizeCursor = (cursor, angle) => {
@@ -93,3 +126,15 @@ export const getCursorForResizingElement = (resizingElement) => {
     }
     return cursor ? `${cursor}-resize` : "";
 };
+const getSelectionBorders = ([x1, y1], [x2, y2], center, angleInDegrees) => {
+    const topLeft = pointRotate([x1, y1], angleInDegrees, center);
+    const topRight = pointRotate([x2, y1], angleInDegrees, center);
+    const bottomLeft = pointRotate([x1, y2], angleInDegrees, center);
+    const bottomRight = pointRotate([x2, y2], angleInDegrees, center);
+    return {
+        n: [topLeft, topRight],
+        e: [topRight, bottomRight],
+        s: [bottomRight, bottomLeft],
+        w: [bottomLeft, topLeft],
+    };
+};

package/dist/excalidraw/element/showSelectedShapeActions.d.ts

@@ -1,3 +1,3 @@
-import { NonDeletedExcalidrawElement } from "./types";
-import { UIAppState } from "../types";
+import type { NonDeletedExcalidrawElement } from "./types";
+import type { UIAppState } from "../types";
 export declare const showSelectedShapeActions: (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) => boolean;

package/dist/excalidraw/element/sizeHelpers.d.ts

@@ -1,5 +1,5 @@
-import { ElementsMap, ExcalidrawElement } from "./types";
-import { AppState, Zoom } from "../types";
+import type { ElementsMap, ExcalidrawElement } from "./types";
+import type { AppState, Zoom } from "../types";
 export declare const isInvisiblySmallElement: (element: ExcalidrawElement) => boolean;
 export declare const isElementInViewport: (element: ExcalidrawElement, width: number, height: number, viewTransformations: {
     zoom: Zoom;

package/dist/excalidraw/element/sizeHelpers.js

@@ -3,6 +3,9 @@ import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { getElementBounds } from "./bounds";
 import { viewportCoordsToSceneCoords } from "../utils";
+// TODO:  remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
+//        - perhaps could be as part of a standalone 'cleanup' action, in addition to 'finalize'
+//        - could also be part of `_clearElements`
 export const isInvisiblySmallElement = (element) => {
     if (isLinearElement(element) || isFreeDrawElement(element)) {
         return element.points.length < 2;

package/dist/excalidraw/element/sortElements.d.ts

@@ -1,2 +1,2 @@
-import { ExcalidrawElement } from "./types";
+import type { ExcalidrawElement } from "./types";
 export declare const normalizeElementOrder: (elements: readonly ExcalidrawElement[]) => readonly ExcalidrawElement[];

package/dist/excalidraw/element/textElement.d.ts

@@ -1,9 +1,9 @@
-import { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
-import { MaybeTransformHandleType } from "./transformHandles";
-import { AppState } from "../types";
-import { ExtractSetType, MakeBrand } from "../utility-types";
+import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontString, NonDeletedExcalidrawElement } from "./types";
+import type { MaybeTransformHandleType } from "./transformHandles";
+import type { AppState } from "../types";
+import type { ExtractSetType } from "../utility-types";
 export declare const normalizeText: (text: string) => string;
-export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap) => void;
+export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap, informMutation?: boolean) => void;
 export declare const bindTextToShapeAfterDuplication: (newElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleType: MaybeTransformHandleType, shouldMaintainAspectRatio?: boolean) => void;
 export declare const computeBoundTextPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer, elementsMap: ElementsMap) => {
@@ -26,12 +26,8 @@ export declare const detectLineHeight: (textElement: ExcalidrawTextElement) => n
  * aligning with the W3C spec.
  */
 export declare const getLineHeightInPx: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
-/**
- * Calculates vertical offset for a text with alphabetic baseline.
- */
-export declare const getVerticalOffset: (fontFamily: ExcalidrawTextElement["fontFamily"], fontSize: ExcalidrawTextElement["fontSize"], lineHeightPx: number) => number;
 export declare const getApproxMinLineHeight: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
-export declare const getTextWidth: (text: string, font: FontString) => number;
+export declare const getTextWidth: (text: string, font: FontString, forceAdvanceWidth?: true) => number;
 export declare const getTextHeight: (text: string, fontSize: number, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const parseTokens: (text: string) => string[];
 export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
@@ -42,7 +38,6 @@ export declare const charWidth: {
 export declare const getApproxMinLineWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const getMinCharWidth: (font: FontString) => number;
 export declare const getMaxCharWidth: (font: FontString) => number;
-export declare const getApproxCharsToFitInWidth: (font: FontString, width: number) => number;
 export declare const getBoundTextElementId: (container: ExcalidrawElement | null) => string | null;
 export declare const getBoundTextElement: (element: ExcalidrawElement | null, elementsMap: ElementsMap) => ExcalidrawTextElementWithContainer | null;
 export declare const getContainerElement: (element: ExcalidrawTextElement | null, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
@@ -61,7 +56,6 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
 } | undefined;
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
 export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
-export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
 declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
     type: ExcalidrawElementType;
@@ -70,22 +64,5 @@ export declare const computeContainerDimensionForBoundText: (dimension: number,
 export declare const getBoundTextMaxWidth: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElement | null) => number;
 export declare const getBoundTextMaxHeight: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => number;
 export declare const isMeasureTextSupported: () => boolean;
-/** OS/2 sTypoAscender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypoascender */
-type sTypoAscender = number & MakeBrand<"sTypoAscender">;
-/** OS/2 sTypoDescender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypodescender */
-type sTypoDescender = number & MakeBrand<"sTypoDescender">;
-/**
- * Hardcoded metrics for default fonts, read by https://opentype.js.org/font-inspector.html.
- * For custom fonts, read these metrics from OS/2 table and extend this object.
- *
- * WARN: opentype does NOT open WOFF2 correctly, make sure to convert WOFF2 to TTF first.
- */
-export declare const FONT_METRICS: Record<number, {
-    unitsPerEm: number;
-    ascender: sTypoAscender;
-    descender: sTypoDescender;
-}>;
-export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
-    _brand: "unitlessLineHeight";
-};
+export declare const getMinTextElementWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export {};

package/dist/excalidraw/element/textElement.js

@@ -1,13 +1,9 @@
 import { getFontString, arrayToMap, isTestEnv, normalizeEOL } from "../utils";
 import { mutateElement } from "./mutateElement";
-import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, BOUND_TEXT_PADDING, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
+import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, BOUND_TEXT_PADDING, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
-import { isTextBindableContainer } from "./typeChecks";
-import { getElementAbsoluteCoords } from ".";
-import { getSelectedElements } from "../scene";
-import { isHittingElementNotConsideringBoundingBox } from "./collision";
 import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 export const normalizeText = (text) => {
     return (normalizeEOL(text)
@@ -17,7 +13,7 @@ export const normalizeText = (text) => {
 const splitIntoLines = (text) => {
     return normalizeText(text).split("\n");
 };
-export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
+export const redrawTextBoundingBox = (textElement, container, elementsMap, informMutation = true) => {
     let maxWidth = undefined;
     const boundTextUpdates = {
         x: textElement.x,
@@ -25,26 +21,32 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         text: textElement.text,
         width: textElement.width,
         height: textElement.height,
+        angle: container?.angle ?? textElement.angle,
     };
     boundTextUpdates.text = textElement.text;
-    if (container) {
-        maxWidth = getBoundTextMaxWidth(container, textElement);
+    if (container || !textElement.autoResize) {
+        maxWidth = container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width;
         boundTextUpdates.text = wrapText(textElement.originalText, getFontString(textElement), maxWidth);
     }
     const metrics = measureText(boundTextUpdates.text, getFontString(textElement), textElement.lineHeight);
-    boundTextUpdates.width = metrics.width;
+    // Note: only update width for unwrapped text and bound texts (which always have autoResize set to true)
+    if (textElement.autoResize) {
+        boundTextUpdates.width = metrics.width;
+    }
     boundTextUpdates.height = metrics.height;
     if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(container, textElement);
         const maxContainerWidth = getBoundTextMaxWidth(container, textElement);
         if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
             const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type);
-            mutateElement(container, { height: nextHeight });
+            mutateElement(container, { height: nextHeight }, informMutation);
             updateOriginalContainerCache(container.id, nextHeight);
         }
         if (metrics.width > maxContainerWidth) {
             const nextWidth = computeContainerDimensionForBoundText(metrics.width, container.type);
-            mutateElement(container, { width: nextWidth });
+            mutateElement(container, { width: nextWidth }, informMutation);
         }
         const updatedTextElement = {
             ...textElement,
@@ -54,7 +56,7 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         boundTextUpdates.x = x;
         boundTextUpdates.y = y;
     }
-    mutateElement(textElement, boundTextUpdates);
+    mutateElement(textElement, boundTextUpdates, informMutation);
 };
 export const bindTextToShapeAfterDuplication = (newElements, oldElements, oldIdToDuplicatedId) => {
     const newElementsMap = arrayToMap(newElements);
@@ -199,41 +201,58 @@ export const detectLineHeight = (textElement) => {
 export const getLineHeightInPx = (fontSize, lineHeight) => {
     return fontSize * lineHeight;
 };
-/**
- * Calculates vertical offset for a text with alphabetic baseline.
- */
-export const getVerticalOffset = (fontFamily, fontSize, lineHeightPx) => {
-    const { unitsPerEm, ascender, descender } = FONT_METRICS[fontFamily] || FONT_METRICS[FONT_FAMILY.Helvetica];
-    const fontSizeEm = fontSize / unitsPerEm;
-    const lineGap = lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender;
-    const verticalOffset = fontSizeEm * ascender + lineGap;
-    return verticalOffset;
-};
 // FIXME rename to getApproxMinContainerHeight
 export const getApproxMinLineHeight = (fontSize, lineHeight) => {
     return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
 };
 let canvas;
-const getLineWidth = (text, font) => {
+/**
+ * @param forceAdvanceWidth use to force retrieve the "advance width" ~ `metrics.width`, instead of the actual boundind box width.
+ *
+ * > The advance width is the distance between the glyph's initial pen position and the next glyph's initial pen position.
+ *
+ * We need to use the advance width as that's the closest thing to the browser wrapping algo, hence using it for:
+ * - text wrapping
+ * - wysiwyg editor (+padding)
+ *
+ * Everything else should be based on the actual bounding box width.
+ *
+ * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
+ */
+const getLineWidth = (text, font, forceAdvanceWidth) => {
     if (!canvas) {
         canvas = document.createElement("canvas");
     }
     const canvas2dContext = canvas.getContext("2d");
     canvas2dContext.font = font;
-    const width = canvas2dContext.measureText(text).width;
+    const metrics = canvas2dContext.measureText(text);
+    const advanceWidth = metrics.width;
+    // retrieve the actual bounding box width if these metrics are available (as of now > 95% coverage)
+    if (!forceAdvanceWidth &&
+        window.TextMetrics &&
+        "actualBoundingBoxLeft" in window.TextMetrics.prototype &&
+        "actualBoundingBoxRight" in window.TextMetrics.prototype) {
+        // could be negative, therefore getting the absolute value
+        const actualWidth = Math.abs(metrics.actualBoundingBoxLeft) +
+            Math.abs(metrics.actualBoundingBoxRight);
+        // fallback to advance width if the actual width is zero, i.e. on text editing start
+        // or when actual width does not respect whitespace chars, i.e. spaces
+        // otherwise actual width should always be bigger
+        return Math.max(actualWidth, advanceWidth);
+    }
     // since in test env the canvas measureText algo
     // doesn't measure text and instead just returns number of
     // characters hence we assume that each letteris 10px
     if (isTestEnv()) {
-        return width * 10;
+        return advanceWidth * 10;
     }
-    return width;
+    return advanceWidth;
 };
-export const getTextWidth = (text, font) => {
+export const getTextWidth = (text, font, forceAdvanceWidth) => {
     const lines = splitIntoLines(text);
     let width = 0;
     lines.forEach((line) => {
-        width = Math.max(width, getLineWidth(line, font));
+        width = Math.max(width, getLineWidth(line, font, forceAdvanceWidth));
     });
     return width;
 };
@@ -267,7 +286,7 @@ export const wrapText = (text, font, maxWidth) => {
     }
     const lines = [];
     const originalLines = text.split("\n");
-    const spaceWidth = getLineWidth(" ", font);
+    const spaceAdvanceWidth = getLineWidth(" ", font, true);
     let currentLine = "";
     let currentLineWidthTillNow = 0;
     const push = (str) => {
@@ -279,18 +298,18 @@ export const wrapText = (text, font, maxWidth) => {
         currentLine = "";
         currentLineWidthTillNow = 0;
     };
-    originalLines.forEach((originalLine) => {
-        const currentLineWidth = getTextWidth(originalLine, font);
+    for (const originalLine of originalLines) {
+        const currentLineWidth = getLineWidth(originalLine, font, true);
         // Push the line if its <= maxWidth
         if (currentLineWidth <= maxWidth) {
             lines.push(originalLine);
-            return; // continue
+            continue;
         }
         const words = parseTokens(originalLine);
         resetParams();
         let index = 0;
         while (index < words.length) {
-            const currentWordWidth = getLineWidth(words[index], font);
+            const currentWordWidth = getLineWidth(words[index], font, true);
             // This will only happen when single word takes entire width
             if (currentWordWidth === maxWidth) {
                 push(words[index]);
@@ -304,20 +323,24 @@ export const wrapText = (text, font, maxWidth) => {
                 resetParams();
                 while (words[index].length > 0) {
                     const currentChar = String.fromCodePoint(words[index].codePointAt(0));
-                    const width = charWidth.calculate(currentChar, font);
-                    currentLineWidthTillNow += width;
+                    const line = currentLine + currentChar;
+                    // use advance width instead of the actual width as it's closest to the browser wapping algo
+                    // use width of the whole line instead of calculating individual chars to accomodate for kerning
+                    const lineAdvanceWidth = getLineWidth(line, font, true);
+                    const charAdvanceWidth = charWidth.calculate(currentChar, font);
+                    currentLineWidthTillNow = lineAdvanceWidth;
                     words[index] = words[index].slice(currentChar.length);
                     if (currentLineWidthTillNow >= maxWidth) {
                         push(currentLine);
                         currentLine = currentChar;
-                        currentLineWidthTillNow = width;
+                        currentLineWidthTillNow = charAdvanceWidth;
                     }
                     else {
-                        currentLine += currentChar;
+                        currentLine = line;
                     }
                 }
                 // push current line if appending space exceeds max width
-                if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+                if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
                     push(currentLine);
                     resetParams();
                     // space needs to be appended before next word
@@ -327,7 +350,7 @@ export const wrapText = (text, font, maxWidth) => {
                 }
                 else if (!currentLine.endsWith("-")) {
                     currentLine += " ";
-                    currentLineWidthTillNow += spaceWidth;
+                    currentLineWidthTillNow += spaceAdvanceWidth;
                 }
                 index++;
             }
@@ -335,7 +358,7 @@ export const wrapText = (text, font, maxWidth) => {
                 // Start appending words in a line till max width reached
                 while (currentLineWidthTillNow < maxWidth && index < words.length) {
                     const word = words[index];
-                    currentLineWidthTillNow = getLineWidth(currentLine + word, font);
+                    currentLineWidthTillNow = getLineWidth(currentLine + word, font, true);
                     if (currentLineWidthTillNow > maxWidth) {
                         push(currentLine);
                         resetParams();
@@ -350,7 +373,7 @@ export const wrapText = (text, font, maxWidth) => {
                         currentLine += " ";
                     }
                     // Push the word if appending space exceeds max width
-                    if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+                    if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
                         if (shouldAppendSpace) {
                             lines.push(currentLine.slice(0, -1));
                         }
@@ -368,7 +391,7 @@ export const wrapText = (text, font, maxWidth) => {
             currentLine = currentLine.slice(0, -1);
             push(currentLine);
         }
-    });
+    }
     return lines.join("\n");
 };
 export const charWidth = (() => {
@@ -379,7 +402,7 @@ export const charWidth = (() => {
             cachedCharWidth[font] = [];
         }
         if (!cachedCharWidth[font][ascii]) {
-            const width = getLineWidth(char, font);
+            const width = getLineWidth(char, font, true);
             cachedCharWidth[font][ascii] = width;
         }
         return cachedCharWidth[font][ascii];
@@ -418,28 +441,6 @@ export const getMaxCharWidth = (font) => {
     const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
     return Math.max(...cacheWithOutEmpty);
 };
-export const getApproxCharsToFitInWidth = (font, width) => {
-    // Generally lower case is used so converting to lower case
-    const dummyText = DUMMY_TEXT.toLocaleLowerCase();
-    const batchLength = 6;
-    let index = 0;
-    let widthTillNow = 0;
-    let str = "";
-    while (widthTillNow <= width) {
-        const batch = dummyText.substr(index, index + batchLength);
-        str += batch;
-        widthTillNow += getLineWidth(str, font);
-        if (index === dummyText.length - 1) {
-            index = 0;
-        }
-        index = index + batchLength;
-    }
-    while (widthTillNow > width) {
-        str = str.substr(0, str.length - 1);
-        widthTillNow = getLineWidth(str, font);
-    }
-    return str.length;
-};
 export const getBoundTextElementId = (container) => {
     return container?.boundElements?.length
         ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
@@ -540,32 +541,6 @@ export const suppportsHorizontalAlign = (selectedElements, elementsMap) => {
         return isTextElement(element);
     });
 };
-export const getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    if (selectedElements.length === 1) {
-        return isTextBindableContainer(selectedElements[0], false)
-            ? selectedElements[0]
-            : null;
-    }
-    let hitElement = null;
-    // We need to to hit testing from front (end of the array) to back (beginning of the array)
-    for (let index = elements.length - 1; index >= 0; --index) {
-        if (elements[index].isDeleted) {
-            continue;
-        }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], elementsMap);
-        if (isArrowElement(elements[index]) &&
-            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y], elementsMap)) {
-            hitElement = elements[index];
-            break;
-        }
-        else if (x1 < x && x < x2 && y1 < y && y < y2) {
-            hitElement = elements[index];
-            break;
-        }
-    }
-    return isTextBindableContainer(hitElement, false) ? hitElement : null;
-};
 const VALID_CONTAINER_TYPES = new Set([
     "rectangle",
     "ellipse",
@@ -636,57 +611,6 @@ export const isMeasureTextSupported = () => {
     }));
     return width > 0;
 };
-/**
- * Unitless line height
- *
- * In previous versions we used `normal` line height, which browsers interpret
- * differently, and based on font-family and font-size.
- *
- * To make line heights consistent across browsers we hardcode the values for
- * each of our fonts based on most common average line-heights.
- * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971
- * where the values come from.
- */
-const DEFAULT_LINE_HEIGHT = {
-    // ~1.25 is the average for Virgil in WebKit and Blink.
-    // Gecko (FF) uses ~1.28.
-    [FONT_FAMILY.Virgil]: 1.25,
-    // ~1.15 is the average for Helvetica in WebKit and Blink.
-    [FONT_FAMILY.Helvetica]: 1.15,
-    // ~1.2 is the average for Cascadia in WebKit and Blink, and kinda Gecko too
-    [FONT_FAMILY.Cascadia]: 1.2,
-};
-/**
- * Hardcoded metrics for default fonts, read by https://opentype.js.org/font-inspector.html.
- * For custom fonts, read these metrics from OS/2 table and extend this object.
- *
- * WARN: opentype does NOT open WOFF2 correctly, make sure to convert WOFF2 to TTF first.
- */
-export const FONT_METRICS = {
-    [FONT_FAMILY.Virgil]: {
-        unitsPerEm: 1000,
-        ascender: 886,
-        descender: -374,
-    },
-    [FONT_FAMILY.Helvetica]: {
-        unitsPerEm: 2048,
-        ascender: 1577,
-        descender: -471,
-    },
-    [FONT_FAMILY.Cascadia]: {
-        unitsPerEm: 2048,
-        ascender: 1977,
-        descender: -480,
-    },
-    [FONT_FAMILY.Assistant]: {
-        unitsPerEm: 1000,
-        ascender: 1021,
-        descender: -287,
-    },
-};
-export const getDefaultLineHeight = (fontFamily) => {
-    if (fontFamily in DEFAULT_LINE_HEIGHT) {
-        return DEFAULT_LINE_HEIGHT[fontFamily];
-    }
-    return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
+export const getMinTextElementWidth = (font, lineHeight) => {
+    return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
 };

package/dist/excalidraw/element/textWysiwyg.d.ts

@@ -1,16 +1,22 @@
-import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
-import App from "../components/App";
-export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
+import type { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+import type App from "../components/App";
+export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, }: {
     id: ExcalidrawElement["id"];
-    onChange?: ((text: string) => void) | undefined;
+    /**
+     * textWysiwyg only deals with `originalText`
+     *
+     * Note: `text`, which can be wrapped and therefore different from `originalText`,
+     *       is derived from `originalText`
+     */
+    onChange?: ((nextOriginalText: string) => void) | undefined;
     onSubmit: (data: {
-        text: string;
         viaKeyboard: boolean;
-        originalText: string;
+        nextOriginalText: string;
     }) => void;
     getViewportCoords: (x: number, y: number) => [number, number];
     element: ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
+    autoSelect?: boolean | undefined;
 }) => void;