fix(test): attempt to fix test flake in collision.test.tsx

fix(editor): ensure font picker font names are not quoted (#11036 )
feat(editor): deselect on esc (#11035 )
2026-03-25 21:03:20 +01:00 · 2026-03-25 17:56:48 +01:00 · 2026-03-25 17:14:24 +01:00 · 2026-03-24 20:20:28 +01:00 · 2026-03-24 19:01:08 +01:00 · 2026-03-23 15:54:59 +01:00
34 changed files with 1491 additions and 179 deletions
@@ -465,7 +465,12 @@ export const intersectElementWithLineSegment = (
    case "line":
    case "freedraw":
    case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line,
+        elementsMap,
+        onlyFirst,
+      );
  }
 };

@@ -532,11 +537,15 @@ const lineIntersections = (
 const intersectLinearOrFreeDrawWithLineSegment = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
  segment: LineSegment<GlobalPoint>,
+  elementsMap: ElementsMap,
  onlyFirst = false,
 ): GlobalPoint[] => {
  // NOTE: This is the only one which return the decomposed elements
  // rotated! This is due to taking advantage of roughjs definitions.
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
  const intersections: GlobalPoint[] = [];

  for (const l of lines) {
@@ -48,7 +48,7 @@ export const distanceToElement = (
    case "line":
    case "arrow":
    case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
  }
 };

@@ -133,9 +133,13 @@ const distanceToEllipseElement = (

 const distanceToLinearOrFreeDraElement = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
  p: GlobalPoint,
 ) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
  return Math.min(
    ...lines.map((s) => distanceToLineSegment(p, s)),
    ...curves.map((a) => curvePointDistance(a, p)),
@@ -476,16 +476,22 @@ export class LinearElementEditor {
      });
    }

-    invariant(
-      lastClickedPoint > -1 &&
-        selectedPointsIndices.includes(lastClickedPoint) &&
-        element.points[lastClickedPoint],
-      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-        selectedPointsIndices,
-      )}) points(0..${
-        element.points.length - 1
-      }) lastClickedPoint(${lastClickedPoint})`,
-    );
+    if (
+      lastClickedPoint < 0 ||
+      !selectedPointsIndices.includes(lastClickedPoint) ||
+      !element.points[lastClickedPoint]
+    ) {
+      console.error(
+        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+          selectedPointsIndices,
+        )}) points(0..${
+          element.points.length - 1
+        }) lastClickedPoint(${lastClickedPoint})`,
+      );
+
+      // Fall back to the actual last point as a last resort.
+      lastClickedPoint = element.points.length - 1;
+    }

    // point that's being dragged (out of all selected points)
    const draggingPoint = element.points[lastClickedPoint];
@@ -794,6 +800,7 @@ export class LinearElementEditor {
          element.points[index + 1],
          index,
          appState.zoom,
+          elementsMap,
        )
      ) {
        midpoints.push(null);
@@ -803,6 +810,7 @@ export class LinearElementEditor {
      const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
+        elementsMap,
      );
      midpoints.push(segmentMidPoint);
      index++;
@@ -890,6 +898,7 @@ export class LinearElementEditor {
    endPoint: P,
    index: number,
    zoom: Zoom,
+    elementsMap: ElementsMap,
  ) {
    if (isElbowArrow(element)) {
      if (index >= 0 && index < element.points.length) {
@@ -904,7 +913,10 @@ export class LinearElementEditor {

    let distance = pointDistance(startPoint, endPoint);
    if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap,
+      );

      invariant(
        lines.length === 0 && curves.length > 0,
@@ -924,6 +936,7 @@ export class LinearElementEditor {
  static getSegmentMidPoint(
    element: NonDeleted<ExcalidrawLinearElement>,
    index: number,
+    elementsMap: ElementsMap,
  ): GlobalPoint {
    if (isElbowArrow(element)) {
      invariant(
@@ -936,7 +949,10 @@ export class LinearElementEditor {
      return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
    }

-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap,
+    );

    invariant(
      (lines.length === 0 && curves.length > 0) ||
@@ -1851,6 +1867,7 @@ export class LinearElementEditor {
      const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
+        elementsMap,
      );

      x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -2400,7 +2417,7 @@ const pointDraggingUpdates = (
    ? nextArrow.points[0]
    : endBindable
    ? updateBoundPoint(
-        element,
+        nextArrow,
        "endBinding",
        nextArrow.endBinding,
        endBindable,
@@ -2431,7 +2448,7 @@ const pointDraggingUpdates = (
      ? endLocalPoint
      : startBindable
      ? updateBoundPoint(
-          element,
+          nextArrow,
          "startBinding",
          nextArrow.startBinding,
          startBindable,
@@ -11,6 +11,7 @@ import {
  isBoundToContainer,
  isFrameLikeElement,
  isLinearElement,
+  isTextElement,
 } from "./typeChecks";
 import {
  elementOverlapsWithFrame,
@@ -25,6 +26,7 @@ import type {
  ElementsMap,
  ElementsMapOrArray,
  ExcalidrawElement,
+  NonDeleted,
  NonDeletedExcalidrawElement,
 } from "./types";

@@ -288,3 +290,19 @@ export const getSelectionStateForElements = (
    ),
  };
 };
+
+/**
+ * Returns editing or single-selected text element, if any.
+ */
+export const getActiveTextElement = (
+  selectedElements: readonly NonDeleted<ExcalidrawElement>[],
+  appState: Pick<AppState, "editingTextElement">,
+) => {
+  const activeTextElement =
+    appState.editingTextElement ||
+    (selectedElements.length === 1 &&
+      isTextElement(selectedElements[0]) &&
+      selectedElements[0]);
+
+  return activeTextElement || null;
+};
@@ -57,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading";

 import { canChangeRoundness } from "./comparisons";
 import {
+  elementCenterPoint,
  getArrowheadPoints,
-  getCenterForBounds,
  getDiamondPoints,
  getElementAbsoluteCoords,
 } from "./bounds";
@@ -583,7 +583,11 @@ const getArrowheadShapes = (

 export const generateLinearCollisionShape = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-) => {
+  elementsMap: ElementsMap,
+): {
+  op: string;
+  data: number[];
+}[] => {
  const generator = new RoughGenerator();
  const options: Options = {
    seed: element.seed,
@@ -592,20 +596,7 @@ export const generateLinearCollisionShape = (
    roughness: 0,
    preserveVertices: true,
  };
-  const center = getCenterForBounds(
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3]),
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity],
-    ),
-  );
+  const center = elementCenterPoint(element, elementsMap);

  switch (element.type) {
    case "line":
@@ -347,6 +347,7 @@ export const getContainerCenter = (
    midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
      container,
      index + 1,
+      elementsMap,
    );
  }
  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -124,6 +124,7 @@ const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
 */
 export function deconstructLinearOrFreeDrawElement(
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
  const cachedShape = getElementShapesCacheEntry(element, 0);

@@ -131,10 +132,7 @@ export function deconstructLinearOrFreeDrawElement(
    return cachedShape;
  }

-  const ops = generateLinearCollisionShape(element) as {
-    op: string;
-    data: number[];
-  }[];
+  const ops = generateLinearCollisionShape(element, elementsMap);
  const lines = [];
  const curves = [];

@@ -1,8 +1,7 @@
-import { arrayToMap } from "@excalidraw/common";
+import { arrayToMap, ROUNDNESS } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
 import "@excalidraw/utils/test-utils";
 import { render } from "@excalidraw/excalidraw/tests/test-utils";

@@ -10,29 +9,29 @@ import * as distance from "../src/distance";
 import { hitElementItself } from "../src/collision";

 describe("check rotated elements can be hit:", () => {
-  beforeEach(async () => {
-    localStorage.clear();
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
  it("arrow", () => {
-    UI.createElement("arrow", {
+    const element = API.createElement({
+      type: "arrow",
      x: 0,
      y: 0,
      width: 124,
      height: 302,
      angle: 1.8700426423973724,
+      roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
+      endArrowhead: "arrow",
      points: [
        [0, 0],
        [120, -198],
        [-4, -302],
      ] as LocalPoint[],
    });
+    const elementsMap = arrayToMap([element]);
+
    const hit = hitElementItself({
      point: pointFrom<GlobalPoint>(88, -68),
-      element: window.h.elements[0],
+      element,
      threshold: 10,
-      elementsMap: window.h.scene.getNonDeletedElementsMap(),
+      elementsMap,
    });
    expect(hit).toBe(true);
  });
@@ -0,0 +1,145 @@
+import {
+  getElementsInGroup,
+  isSomeElementSelected,
+  makeNextSelectedElementIds,
+  selectGroupsForSelectedElements,
+} from "@excalidraw/element";
+import { CaptureUpdateAction } from "@excalidraw/element";
+import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common";
+
+import type { GroupId } from "@excalidraw/element/types";
+
+import { register } from "./register";
+
+import type { AppClassProperties, AppState } from "../types";
+
+const getNextActiveTool = (
+  appState: Readonly<AppState>,
+  app: AppClassProperties,
+) => {
+  if (appState.activeTool.type === "eraser") {
+    return updateActiveTool(appState, {
+      ...(appState.activeTool.lastActiveTool || {
+        type: app.state.preferredSelectionTool.type,
+      }),
+      lastActiveToolBeforeEraser: null,
+    });
+  }
+
+  return updateActiveTool(appState, {
+    type: app.state.preferredSelectionTool.type,
+  });
+};
+
+const getParentEditingGroupId = (
+  appState: Readonly<AppState>,
+  app: AppClassProperties,
+  selectedElementIds: AppState["selectedElementIds"],
+): GroupId | null => {
+  if (!appState.editingGroupId) {
+    return null;
+  }
+
+  const nonDeletedElements = app.scene.getNonDeletedElements();
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds,
+    elements: nonDeletedElements,
+  });
+  const candidateElements = selectedElements.length
+    ? selectedElements
+    : getElementsInGroup(nonDeletedElements, appState.editingGroupId);
+
+  for (const element of candidateElements) {
+    const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId);
+    if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) {
+      return element.groupIds[editingGroupIndex + 1] as GroupId;
+    }
+  }
+
+  return null;
+};
+
+export const actionDeselect = register({
+  name: "deselect",
+  label: "",
+  trackEvent: false,
+  perform: (_elements, appState, _, app) => {
+    const activeTool = getNextActiveTool(appState, app);
+
+    if (appState.editingGroupId) {
+      const nonDeletedElements = app.scene.getNonDeletedElements();
+      const selectedElementIds =
+        Object.keys(appState.selectedElementIds).length > 0
+          ? appState.selectedElementIds
+          : getElementsInGroup(
+              nonDeletedElements,
+              appState.editingGroupId,
+            ).reduce((acc, element) => {
+              acc[element.id] = true;
+              return acc;
+            }, {} as Record<string, true>);
+
+      return {
+        appState: {
+          ...appState,
+          ...selectGroupsForSelectedElements(
+            {
+              editingGroupId: getParentEditingGroupId(
+                appState,
+                app,
+                selectedElementIds,
+              ),
+              selectedElementIds,
+            },
+            nonDeletedElements,
+            appState,
+            app,
+          ),
+          activeEmbeddable: null,
+          activeTool,
+          selectedLinearElement: null,
+          selectionElement: null,
+          showHyperlinkPopup: false,
+          suggestedBinding: null,
+        },
+        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      };
+    }
+
+    return {
+      appState: {
+        ...appState,
+        activeEmbeddable: null,
+        activeTool,
+        editingGroupId: null,
+        selectedElementIds: makeNextSelectedElementIds({}, appState),
+        selectedGroupIds: {},
+        selectedLinearElement: null,
+        selectionElement: null,
+        showHyperlinkPopup: false,
+        suggestedBinding: null,
+      },
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    };
+  },
+  keyTest: (event, appState, _, app) => {
+    if (event.key !== KEYS.ESCAPE) {
+      return false;
+    }
+
+    if (isWritableElement(event.target)) {
+      return false;
+    }
+
+    return (
+      !appState.newElement &&
+      appState.multiElement === null &&
+      !appState.selectedLinearElement?.isEditing &&
+      (appState.activeEmbeddable !== null ||
+        appState.activeTool.type !== app.state.preferredSelectionTool.type ||
+        !!appState.editingGroupId ||
+        !!appState.selectedLinearElement ||
+        isSomeElementSelected(app.scene.getNonDeletedElements(), appState))
+    );
+  },
+});
@@ -348,9 +348,7 @@ export const actionFinalize = register<FormData>({
    };
  },
  keyTest: (event, appState) =>
-    (event.key === KEYS.ESCAPE &&
-      (appState.selectedLinearElement?.isEditing ||
-        (!appState.newElement && appState.multiElement === null))) ||
+    (event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
  PanelComponent: ({ appState, updateData, data }) => (
@@ -191,7 +191,7 @@ export const getFormValue = function <T extends Primitive>(
  elements: readonly ExcalidrawElement[],
  app: AppClassProperties,
  getAttribute: (element: ExcalidrawElement) => T,
-  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
+  elementPredicate: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
  const editingTextElement = app.state.editingTextElement;
@@ -209,9 +209,9 @@ export const getFormValue = function <T extends Primitive>(
    if (hasSelection) {
      const selectedElements = app.scene.getSelectedElements(app.state);
      const targetElements =
-        isRelevantElement === true
+        elementPredicate === true
          ? selectedElements
-          : selectedElements.filter((el) => isRelevantElement(el));
+          : selectedElements.filter((el) => elementPredicate(el));

      ret =
        reduceToCommonValue(targetElements, getAttribute) ??
@@ -730,9 +730,28 @@ export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
-  PanelComponent: ({ app, updateData }) => (
-    <Range updateData={updateData} app={app} testId="opacity" />
-  ),
+  PanelComponent: ({ elements, appState, app, updateData }) => {
+    const opacity = getFormValue(
+      elements,
+      app,
+      (element) => element.opacity,
+      true,
+      (hasSelection) => (hasSelection ? null : appState.currentItemOpacity),
+    );
+
+    return (
+      <Range
+        label={t("labels.opacity")}
+        value={opacity ?? appState.currentItemOpacity}
+        hasCommonValue={opacity !== null}
+        onChange={updateData}
+        min={0}
+        max={100}
+        step={10}
+        testId="opacity"
+      />
+    );
+  },
 });

 export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
@@ -1,24 +1,24 @@
 import { getFontString } from "@excalidraw/common";

-import { newElementWith } from "@excalidraw/element";
+import { isExcalidrawElement, newElementWith } from "@excalidraw/element";
 import { measureText } from "@excalidraw/element";

 import { isTextElement } from "@excalidraw/element";

 import { CaptureUpdateAction } from "@excalidraw/element";

+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { getSelectedElements } from "../scene";

 import { register } from "./register";

-import type { AppClassProperties } from "../types";
-
 export const actionTextAutoResize = register({
  name: "autoResize",
  label: "labels.autoResize",
  icon: null,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, _: unknown, app: AppClassProperties) => {
+  predicate: (elements, appState, _: unknown) => {
    const selectedElements = getSelectedElements(elements, appState);
    return (
      selectedElements.length === 1 &&
@@ -26,13 +26,18 @@ export const actionTextAutoResize = register({
      !selectedElements[0].autoResize
    );
  },
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState, targetElement) => {
    const selectedElements = getSelectedElements(elements, appState);

+    const targetTextElement =
+      isExcalidrawElement(targetElement) && isTextElement(targetElement)
+        ? targetElement
+        : (selectedElements[0] as ExcalidrawElement | undefined);
+
    return {
      appState,
      elements: elements.map((element) => {
-        if (element.id === selectedElements[0].id && isTextElement(element)) {
+        if (element.id === targetTextElement?.id && isTextElement(element)) {
          const metrics = measureText(
            element.originalText,
            getFontString(element),
@@ -34,6 +34,7 @@ export {
 export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";

 export { actionFinalize } from "./actionFinalize";
+export { actionDeselect } from "./actionDeselect";

 export {
  actionChangeProjectName,
@@ -114,6 +114,7 @@ export type ActionName =
  | "distributeVertically"
  | "flipHorizontal"
  | "flipVertical"
+  | "deselect"
  | "viewMode"
  | "exportWithDarkMode"
  | "toggleTheme"
@@ -257,6 +257,7 @@ import {
  handleFocusPointPointerUp,
  maybeHandleArrowPointlikeDrag,
  getUncroppedWidthAndHeight,
+  getActiveTextElement,
 } from "@excalidraw/element";

 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
@@ -416,6 +417,7 @@ import {
 import { ElementCanvasButtons } from "../components/ElementCanvasButtons";
 import { LaserTrails } from "../laser-trails";
 import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
+import { isPointHittingTextAutoResizeHandle } from "../textAutoResizeHandle";
 import { textWysiwyg } from "../wysiwyg/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";

@@ -692,6 +694,7 @@ class App extends React.Component<AppProps, AppState> {
  lastPointerMoveEvent: PointerEvent | null = null;
  /** current frame pointer cords */
  lastPointerMoveCoords: { x: number; y: number } | null = null;
+  private lastCompletedCanvasClicks: { x: number; y: number }[] = [];
  /** previous frame pointer coords */
  previousPointerMoveCoords: { x: number; y: number } | null = null;
  lastViewportPosition = { x: 0, y: 0 };
@@ -1253,6 +1256,26 @@ class App extends React.Component<AppProps, AppState> {
    ) as NullableGridSize;
  };

+  private getTextCreationGridPoint = (x: number, y: number) => {
+    const effectiveGridSize = this.getEffectiveGridSize();
+
+    if (effectiveGridSize === null) {
+      return null;
+    }
+
+    const getTextCreationGridCoordinate = (coordinate: number) => {
+      const topLeftGridPoint =
+        Math.floor(coordinate / effectiveGridSize) * effectiveGridSize;
+
+      return topLeftGridPoint;
+    };
+
+    return {
+      x: getTextCreationGridCoordinate(x),
+      y: getTextCreationGridCoordinate(y),
+    };
+  };
+
  private getHTMLIFrameElement(
    element: ExcalidrawIframeLikeElement,
  ): HTMLIFrameElement | undefined {
@@ -2341,6 +2364,7 @@ class App extends React.Component<AppProps, AppState> {
                            }
                            handleCanvasRef={this.handleInteractiveCanvasRef}
                            onContextMenu={this.handleCanvasContextMenu}
+                            onClick={this.handleCanvasClick}
                            onPointerMove={this.handleCanvasPointerMove}
                            onPointerUp={this.handleCanvasPointerUp}
                            onPointerCancel={this.removePointer}
@@ -3594,10 +3618,14 @@ class App extends React.Component<AppProps, AppState> {
        this.lassoTrail.endPath();
        this.deselectElements();

-        // @ts-ignore
        this.handleCanvasDoubleClick({
          clientX: touch.clientX,
          clientY: touch.clientY,
+          type: "touch",
+          altKey: false,
+          ctrlKey: false,
+          metaKey: false,
+          shiftKey: false,
        });
      }
      didTapTwice = false;
@@ -5697,13 +5725,13 @@ class App extends React.Component<AppProps, AppState> {
        const isDeleted = !nextOriginalText.trim();
        updateElement(nextOriginalText, isDeleted);

-        // select the created text element only if submitting via keyboard
-        // (when submitting via click it should act as signal to deselect)
-        if (!isDeleted && viaKeyboard) {
-          const elementIdToSelect = element.containerId
-            ? element.containerId
-            : element.id;
+        // keyboard-submit keeps focus on the edited object. For bound text, keep
+        // the container selected even if the text becomes empty and is deleted.
+        const elementIdToSelect = viaKeyboard
+          ? element.containerId || (!isDeleted ? element.id : null)
+          : null;

+        if (elementIdToSelect) {
          // needed to ensure state is updated before "finalize" action
          // that's invoked on keyboard-submit as well
          // TODO either move this into finalize as well, or handle all state
@@ -5846,6 +5874,58 @@ class App extends React.Component<AppProps, AppState> {
    return null;
  }

+  private isHittingTextAutoResizeHandle = (
+    selectedElements: NonDeleted<ExcalidrawElement>[],
+    point: Readonly<{ x: number; y: number }>,
+  ): boolean => {
+    const activeTextElement = getActiveTextElement(
+      selectedElements,
+      this.state,
+    );
+
+    if (
+      activeTextElement &&
+      !activeTextElement.isDeleted &&
+      !activeTextElement.autoResize &&
+      isPointHittingTextAutoResizeHandle(
+        point,
+        activeTextElement,
+        this.state.zoom.value,
+        this.editorInterface.formFactor,
+      )
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
+  private handleTextAutoResizeHandlePointerDown = (
+    selectedElements: NonDeleted<ExcalidrawElement>[],
+    point: Readonly<{ x: number; y: number }>,
+  ) => {
+    const activeTextElement = getActiveTextElement(
+      selectedElements,
+      this.state,
+    );
+    if (
+      !activeTextElement ||
+      !this.isHittingTextAutoResizeHandle(selectedElements, point)
+    ) {
+      return false;
+    }
+
+    this.actionManager.executeAction(
+      actionTextAutoResize,
+      "ui",
+      // we need to pass down the element since it may already be deselected
+      // due to the pointerdown
+      activeTextElement,
+    );
+    this.resetCursor();
+    return true;
+  };
+
  // NOTE: Hot path for hit testing, so avoid unnecessary computations
  private getElementAtPosition(
    x: number,
@@ -6138,11 +6218,32 @@ class App extends React.Component<AppProps, AppState> {
      y: sceneY,
    });

+    const textCreationGridPoint = this.getTextCreationGridPoint(sceneX, sceneY);
+
+    const newTextElementPosition = parentCenterPosition
+      ? {
+          x: parentCenterPosition.elementCenterX,
+          y: parentCenterPosition.elementCenterY,
+        }
+      : !existingTextElement
+      ? {
+          x: textCreationGridPoint?.x ?? sceneX,
+          y:
+            textCreationGridPoint === null
+              ? // Free text starts from a point cursor, so center the first line box on it.
+                sceneY - getLineHeightInPx(fontSize, lineHeight) / 2
+              : textCreationGridPoint.y,
+        }
+      : {
+          x: sceneX,
+          y: sceneY,
+        };
+
    const element =
      existingTextElement ||
      newTextElement({
-        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
-        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
+        x: newTextElementPosition.x,
+        y: newTextElementPosition.y,
        strokeColor: this.state.currentItemStrokeColor,
        backgroundColor: this.state.currentItemBackgroundColor,
        fillStyle: this.state.currentItemFillStyle,
@@ -6220,10 +6321,46 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

+  private shouldHandleBrowserCanvasDoubleClick = (type: string) => {
+    // TODO remove this once we consolidate double-click logic and handle
+    // ourselves for all event types together
+    if (type === "touch") {
+      return true;
+    }
+    if (this.lastCompletedCanvasClicks.length === 0) {
+      return true;
+    }
+
+    if (this.lastCompletedCanvasClicks.length < 2) {
+      return false;
+    }
+
+    const [firstClick, secondClick] = this.lastCompletedCanvasClicks;
+
+    return (
+      pointDistance(
+        pointFrom(firstClick.x, firstClick.y),
+        pointFrom(secondClick.x, secondClick.y),
+      ) <= DOUBLE_TAP_POSITION_THRESHOLD
+    );
+  };
+
  private handleCanvasDoubleClick = (
-    event: React.MouseEvent<HTMLCanvasElement>,
+    event: Pick<
+      React.MouseEvent<HTMLCanvasElement>,
+      | "type"
+      | "clientX"
+      | "clientY"
+      | "altKey"
+      | "ctrlKey"
+      | "metaKey"
+      | "shiftKey"
+    >,
  ) => {
-    if (this.state.editingTextElement) {
+    if (
+      this.state.editingTextElement ||
+      !this.shouldHandleBrowserCanvasDoubleClick(event.type)
+    ) {
      return;
    }
    // case: double-clicking with arrow/line tool selected would both create
@@ -6413,6 +6550,21 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

+  private handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    if (event.button !== POINTER_BUTTON.MAIN) {
+      this.lastCompletedCanvasClicks = [];
+      return;
+    }
+
+    this.lastCompletedCanvasClicks = [
+      ...this.lastCompletedCanvasClicks.slice(-1),
+      {
+        x: event.clientX,
+        y: event.clientY,
+      },
+    ];
+  };
+
  private getElementLinkAtPosition = (
    scenePointer: Readonly<{ x: number; y: number }>,
    hitElementMightBeLocked: NonDeletedExcalidrawElement | null,
@@ -6843,27 +6995,23 @@ class App extends React.Component<AppProps, AppState> {
          },
          { informMutation: false, isDragging: false },
        );
+        const newLastIdx = multiElement.points.length - 1;
        this.setState({
          selectedLinearElement: {
            ...selectedLinearElement,
-            selectedPointsIndices:
-              selectedLinearElement.selectedPointsIndices?.includes(
-                multiElement.points.length,
-              )
-                ? [
-                    ...selectedLinearElement.selectedPointsIndices.filter(
-                      (idx) =>
-                        idx !== multiElement.points.length &&
-                        idx !== multiElement.points.length - 1,
+            selectedPointsIndices: selectedLinearElement.selectedPointsIndices
+              ? [
+                  ...new Set(
+                    selectedLinearElement.selectedPointsIndices.map((idx) =>
+                      Math.min(idx, newLastIdx),
                    ),
-                    multiElement.points.length - 1,
-                  ]
-                : selectedLinearElement.selectedPointsIndices,
-            lastCommittedPoint:
-              multiElement.points[multiElement.points.length - 1],
+                  ),
+                ]
+              : selectedLinearElement.selectedPointsIndices,
+            lastCommittedPoint: multiElement.points[newLastIdx],
            initialState: {
              ...selectedLinearElement.initialState,
-              lastClickedPoint: multiElement.points.length - 1,
+              lastClickedPoint: newLastIdx,
            },
          },
        });
@@ -6949,6 +7097,12 @@ class App extends React.Component<AppProps, AppState> {
    const elements = this.scene.getNonDeletedElements();

    const selectedElements = this.scene.getSelectedElements(this.state);
+
+    if (this.isHittingTextAutoResizeHandle(selectedElements, scenePointer)) {
+      setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
+      return;
+    }
+
    if (
      selectedElements.length === 1 &&
      !isOverScrollBar &&
@@ -7093,7 +7247,9 @@ class App extends React.Component<AppProps, AppState> {
        setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
      } else if (
        // if using cmd/ctrl, we're not dragging
-        !event[KEYS.CTRL_OR_CMD]
+        !event[KEYS.CTRL_OR_CMD] &&
+        // editing text -> don't show move cursor when hovering over its bbox
+        hitElement?.id !== this.state.editingTextElement?.id
      ) {
        if (
          (hitElement ||
@@ -7314,6 +7470,8 @@ class App extends React.Component<AppProps, AppState> {
  private handleCanvasPointerDown = (
    event: React.PointerEvent<HTMLElement>,
  ) => {
+    const selectedElements = this.scene.getSelectedElements(this.state);
+
    // If Ctrl is not held, ensure isBindingEnabled reflects the user preference.
    if (!event.ctrlKey) {
      const preferenceEnabled = this.state.bindingPreference === "enabled";
@@ -7537,6 +7695,15 @@ class App extends React.Component<AppProps, AppState> {
      selectedElementsAreBeingDragged: false,
    });

+    if (
+      this.handleTextAutoResizeHandlePointerDown(
+        selectedElements,
+        pointerDownState.origin,
+      )
+    ) {
+      return;
+    }
+
    if (this.handleDraggingScrollBar(event, pointerDownState)) {
      return;
    }
@@ -46,6 +46,7 @@ import {
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";

 import type { JSX } from "react";
+import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";

 export interface FontDescriptor {
  value: number;
@@ -86,6 +87,15 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
  }
 };

+const getFontFamilyLabel = (
+  fontFamily: FontFamilyValues,
+  fontFaces: ExcalidrawFontFace[],
+) =>
+  // prefer our config as the browser resolved names may be wrapped in quotes and such
+  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
+  fontFaces[0]?.fontFace?.family ??
+  "Unknown";
+
 export const FontPickerList = React.memo(
  ({
    selectedFontFamily,
@@ -114,7 +124,7 @@ export const FontPickerList = React.memo(
            const fontDescriptor = {
              value: familyId,
              icon: getFontFamilyIcon(familyId),
-              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
+              text: getFontFamilyLabel(familyId, fontFaces),
            };

            if (metadata.deprecated) {
@@ -1,74 +1,78 @@
 import React, { useEffect } from "react";

-import { t } from "../i18n";
-
 import "./Range.scss";

-import type { AppClassProperties } from "../types";
-
 export type RangeProps = {
-  updateData: (value: number) => void;
-  app: AppClassProperties;
+  label: React.ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLabel?: React.ReactNode;
+  hasCommonValue?: boolean;
  testId?: string;
 };

-export const Range = ({ updateData, app, testId }: RangeProps) => {
+export const Range = ({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 10,
+  minLabel = min,
+  hasCommonValue = true,
+  testId,
+}: RangeProps) => {
  const rangeRef = React.useRef<HTMLInputElement>(null);
  const valueRef = React.useRef<HTMLDivElement>(null);
-  const selectedElements = app.scene.getSelectedElements(app.state);
-  let hasCommonOpacity = true;
-  const firstElement = selectedElements.at(0);
-  const leastCommonOpacity = selectedElements.reduce((acc, element) => {
-    if (acc != null && acc !== element.opacity) {
-      hasCommonOpacity = false;
-    }
-    if (acc == null || acc > element.opacity) {
-      return element.opacity;
-    }
-    return acc;
-  }, firstElement?.opacity ?? null);
-
-  const value = leastCommonOpacity ?? app.state.currentItemOpacity;

  useEffect(() => {
    if (rangeRef.current && valueRef.current) {
      const rangeElement = rangeRef.current;
      const valueElement = valueRef.current;
      const inputWidth = rangeElement.offsetWidth;
-      const thumbWidth = 15; // 15 is the width of the thumb
+      const thumbWidth =
+        parseFloat(
+          getComputedStyle(rangeElement).getPropertyValue(
+            "--slider-thumb-size",
+          ),
+        ) || 16;
+      const progress = ((value - min) / (max - min || 1)) * 100;
      const position =
-        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+        (progress / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
      valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${progress}%, var(--button-bg) ${progress}%, var(--button-bg) 100%)`;
    }
-  }, [value]);
+  }, [max, min, value]);

  return (
    <label className="control-label">
-      {t("labels.opacity")}
+      {label}
      <div className="range-wrapper">
        <input
          style={{
-            ["--color-slider-track" as string]: hasCommonOpacity
+            ["--color-slider-track" as string]: hasCommonValue
              ? undefined
              : "var(--button-bg)",
          }}
          ref={rangeRef}
          type="range"
-          min="0"
-          max="100"
-          step="10"
+          min={min}
+          max={max}
+          step={step}
          onChange={(event) => {
-            updateData(+event.target.value);
+            onChange(+event.target.value);
          }}
          value={value}
          className="range-input"
          data-testid={testId}
        />
        <div className="value-bubble" ref={valueRef}>
-          {value !== 0 ? value : null}
+          {value !== min ? value : null}
        </div>
-        <div className="zero-label">0</div>
+        <div className="zero-label">{minLabel}</div>
      </div>
    </label>
  );
@@ -54,6 +54,7 @@ type InteractiveCanvasProps = {
    DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"],
    undefined
  >;
+  onClick: Exclude<DOMAttributes<HTMLCanvasElement>["onClick"], undefined>;
  onPointerMove: Exclude<
    DOMAttributes<HTMLCanvasElement>["onPointerMove"],
    undefined
@@ -213,6 +214,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
      height={props.appState.height * props.scale}
      ref={props.handleCanvasRef}
      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
      onPointerMove={props.onPointerMove}
      onPointerUp={props.onPointerUp}
      onPointerCancel={props.onPointerCancel}
@@ -251,7 +251,9 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
      };
    }

-    console.error(`could not repair binding for element`);
+    console.error(
+      `Could not repair binding for element "${boundElement?.id}" out of (${elementsMap?.size}) elements`,
+    );
  } catch (error) {
    console.error("Error repairing binding:", error);
  }
@@ -382,6 +382,8 @@ export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToC
 export { getDataURL } from "./data/blob";
 export { isElementLink } from "@excalidraw/element";

+export { Fonts } from "./fonts/Fonts";
+
 export { setCustomTextMetricsProvider } from "@excalidraw/element";

 export { CommandPalette } from "./components/CommandPalette/CommandPalette";
@@ -661,7 +661,7 @@
    "placeholder": {
      "title": "Let's design your diagram",
      "description": "Describe the diagram you want to create, and we'll generate it for you.",
-      "hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams."
+      "hint": "At the moment we know Flowchart, Sequence, Class, State, and Entity Relationship diagrams."
    },
    "preview": "Preview",
    "insert": "Insert",
@@ -88,7 +88,7 @@
    "@excalidraw/element": "0.18.0",
    "@excalidraw/laser-pointer": "1.3.1",
    "@excalidraw/math": "0.18.0",
-    "@excalidraw/mermaid-to-excalidraw": "2.1.1",
+    "@excalidraw/mermaid-to-excalidraw": "2.2.2",
    "@excalidraw/random-username": "1.1.0",
    "browser-fs-access": "0.38.0",
    "canvas-roundrect-polyfill": "0.0.1",
@@ -41,6 +41,7 @@ import {
  maxBindingDistance_simple,
  isTextElement,
  LinearElementEditor,
+  getActiveTextElement,
 } from "@excalidraw/element";

 import { renderSelectionElement } from "@excalidraw/element";
@@ -58,6 +59,8 @@ import {
  isFocusPointVisible,
 } from "@excalidraw/element";

+import type { EditorInterface } from "@excalidraw/common";
+
 import type {
  TransformHandles,
  TransformHandleType,
@@ -86,6 +89,10 @@ import {
 } from "../scene/scrollbars";

 import { getClientColor, renderRemoteCursors } from "../clients";
+import {
+  getTextAutoResizeHandle,
+  getTextBoxPadding,
+} from "../textAutoResizeHandle";

 import {
  bootstrapCanvas,
@@ -1149,6 +1156,7 @@ const renderLinearPointHandles = (
          points[idx],
          idx,
          appState.zoom,
+          elementsMap,
        )
      ) {
        renderSingleLinearPoint(
@@ -1489,21 +1497,58 @@ const renderTextBox = (
  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
 ) => {
  context.save();
-  const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+  const padding = getTextBoxPadding(appState.zoom.value);
  const width = text.width + padding * 2;
  const height = text.height + padding * 2;
-  const cx = text.x + width / 2;
-  const cy = text.y + height / 2;
-  const shiftX = -(width / 2 + padding);
-  const shiftY = -(height / 2 + padding);
+  const cx = text.x + text.width / 2;
+  const cy = text.y + text.height / 2;
+  const shiftX = -(text.width / 2 + padding);
+  const shiftY = -(text.height / 2 + padding);
  context.translate(cx + appState.scrollX, cy + appState.scrollY);
  context.rotate(text.angle);
  context.lineWidth = 1 / appState.zoom.value;
  context.strokeStyle = selectionColor;
+  context.globalAlpha = 0.5;
+  context.setLineDash([6 / appState.zoom.value, 4 / appState.zoom.value]);
  context.strokeRect(shiftX, shiftY, width, height);
  context.restore();
 };

+const renderResetAutoResizeHandle = (
+  text: NonDeleted<ExcalidrawTextElement>,
+  context: CanvasRenderingContext2D,
+  appState: InteractiveCanvasAppState,
+  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
+  formFactor: EditorInterface["formFactor"],
+) => {
+  const autoResizeHandle = getTextAutoResizeHandle(
+    text,
+    appState.zoom.value,
+    formFactor,
+  );
+
+  if (!autoResizeHandle) {
+    return;
+  }
+
+  context.save();
+  context.globalAlpha = 0.5;
+  context.lineWidth = 1.5 / appState.zoom.value;
+  context.lineCap = "round";
+  context.strokeStyle = selectionColor;
+  context.beginPath();
+  context.moveTo(
+    autoResizeHandle.start[0] + appState.scrollX,
+    autoResizeHandle.start[1] + appState.scrollY,
+  );
+  context.lineTo(
+    autoResizeHandle.end[0] + appState.scrollX,
+    autoResizeHandle.end[1] + appState.scrollY,
+  );
+  context.stroke();
+  context.restore();
+};
+
 const _renderInteractiveScene = ({
  app,
  canvas,
@@ -1584,10 +1629,19 @@ const _renderInteractiveScene = ({
    }
  }

-  if (
-    appState.editingTextElement &&
-    isTextElement(appState.editingTextElement)
-  ) {
+  const activeTextElement = getActiveTextElement(selectedElements, appState);
+
+  if (activeTextElement && !activeTextElement.autoResize) {
+    renderResetAutoResizeHandle(
+      activeTextElement,
+      context,
+      appState,
+      renderConfig.selectionColor,
+      editorInterface.formFactor,
+    );
+  }
+
+  if (appState.editingTextElement) {
    const textElement = allElementsMap.get(appState.editingTextElement.id) as
      | ExcalidrawTextElement
      | undefined;
@@ -224,7 +224,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 29,
+  "version": 22,
  "width": "94.00000",
  "x": 0,
  "y": 0,
@@ -350,8 +350,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
              ],
              "mode": "orbit",
            },
-            "version": 28,
+            "version": 21,
            "width": "88.00000",
+            "y": "7.20923",
          },
          "inserted": {
            "endBinding": {
@@ -381,8 +382,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
              ],
              "mode": "orbit",
            },
-            "version": 25,
+            "version": 20,
            "width": "88.00000",
+            "y": "0.01000",
          },
        },
      },
@@ -437,7 +439,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
              ],
            ],
            "startBinding": null,
-            "version": 29,
+            "version": 22,
            "width": "94.00000",
            "x": 0,
            "y": 0,
@@ -462,7 +464,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
              ],
              "mode": "orbit",
            },
-            "version": 28,
+            "version": 21,
            "width": "88.00000",
            "x": 6,
            "y": "7.20923",
@@ -1360,9 +1362,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 8,
+  "version": 7,
  "width": 88,
-  "x": 6,
+  "x": "6.00000",
  "y": "2.00947",
 }
 `;
@@ -1537,12 +1539,12 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
              ],
              "mode": "orbit",
            },
-            "version": 8,
+            "version": 7,
          },
          "inserted": {
            "endBinding": null,
            "startBinding": null,
-            "version": 7,
+            "version": 6,
          },
        },
      },
@@ -1722,7 +1724,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "updated": 1,
  "version": 8,
  "width": 88,
-  "x": 6,
+  "x": "6.00000",
  "y": "38.80379",
 }
 `;
@@ -1867,7 +1869,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
            "type": "arrow",
            "version": 8,
            "width": 88,
-            "x": 6,
+            "x": "6.00000",
            "y": "38.80379",
          },
          "inserted": {
@@ -2416,7 +2418,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 12,
+  "version": 11,
  "width": 488,
  "x": 6,
  "y": "-5.39000",
@@ -2581,7 +2583,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
            "strokeStyle": "solid",
            "strokeWidth": 2,
            "type": "arrow",
-            "version": 12,
+            "version": 11,
            "width": 488,
            "x": 6,
            "y": "-5.39000",
@@ -11220,6 +11222,489 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o

 exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end of test] undo stack 1`] = `[]`;

+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] appState 1`] = `
+{
+  "activeEmbeddable": null,
+  "activeLockedId": null,
+  "activeTool": {
+    "customType": null,
+    "fromSelection": false,
+    "lastActiveTool": null,
+    "locked": false,
+    "type": "selection",
+  },
+  "bindMode": "orbit",
+  "bindingPreference": "enabled",
+  "collaborators": Map {},
+  "contextMenu": null,
+  "croppingElementId": null,
+  "currentHoveredFontFamily": null,
+  "currentItemArrowType": "round",
+  "currentItemBackgroundColor": "transparent",
+  "currentItemEndArrowhead": "arrow",
+  "currentItemFillStyle": "solid",
+  "currentItemFontFamily": 5,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemRoundness": "sharp",
+  "currentItemStartArrowhead": null,
+  "currentItemStrokeColor": "#1e1e1e",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 2,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
+  "editingFrame": null,
+  "editingGroupId": null,
+  "editingTextElement": null,
+  "elementsToHighlight": null,
+  "errorMessage": null,
+  "exportBackground": true,
+  "exportEmbedScene": false,
+  "exportScale": 1,
+  "exportWithDarkMode": false,
+  "fileHandle": null,
+  "followedBy": Set {},
+  "frameRendering": {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
+  "height": 0,
+  "hoveredElementIds": {},
+  "isBindingEnabled": true,
+  "isCropping": false,
+  "isLoading": false,
+  "isMidpointSnappingEnabled": true,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "lockedMultiSelections": {},
+  "multiElement": null,
+  "newElement": null,
+  "objectsSnapModeEnabled": false,
+  "offsetLeft": 0,
+  "offsetTop": 0,
+  "openDialog": null,
+  "openMenu": null,
+  "openPopup": null,
+  "openSidebar": null,
+  "originSnapOffset": null,
+  "penDetected": false,
+  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
+  "previousSelectedElementIds": {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "searchMatches": null,
+  "selectedElementIds": {},
+  "selectedElementsAreBeingDragged": false,
+  "selectedGroupIds": {},
+  "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
+  "showHyperlinkPopup": false,
+  "showWelcomeScreen": true,
+  "snapLines": [],
+  "startBoundElement": null,
+  "stats": {
+    "open": false,
+    "panels": 3,
+  },
+  "suggestedBinding": null,
+  "theme": "light",
+  "toast": null,
+  "userToFollow": null,
+  "viewBackgroundColor": "#ffffff",
+  "viewModeEnabled": false,
+  "width": 0,
+  "zenModeEnabled": false,
+  "zoom": {
+    "value": 1,
+  },
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 0 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "inner",
+    "outer",
+  ],
+  "height": 100,
+  "id": "id0",
+  "index": "a0",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 1 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "outer",
+  ],
+  "height": 100,
+  "id": "id1",
+  "index": "a1",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 100,
+  "y": 100,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 2 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "inner",
+    "outer",
+  ],
+  "height": 100,
+  "id": "id2",
+  "index": "a2",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 200,
+  "y": 200,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of elements 1`] = `3`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of renders 1`] = `16`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] redo stack 1`] = `[]`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] undo stack 1`] = `
+[
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "selectedElementIds": {
+            "id0": true,
+            "id1": true,
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+        "inserted": {
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {
+        "id0": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "inner",
+              "outer",
+            ],
+            "height": 100,
+            "index": "a0",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 0,
+            "y": 0,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+        "id1": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "outer",
+            ],
+            "height": 100,
+            "index": "a1",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 100,
+            "y": 100,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+        "id2": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "inner",
+              "outer",
+            ],
+            "height": 100,
+            "index": "a2",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 200,
+            "y": 200,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+      },
+      "updated": {},
+    },
+    "id": "id5",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {},
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": null,
+          "selectedElementIds": {
+            "id1": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id7",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "inner",
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+        "inserted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id9",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": "inner",
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id19",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": null,
+          "selectedElementIds": {
+            "id1": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {},
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id20",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+        "inserted": {
+          "selectedElementIds": {
+            "id0": true,
+            "id1": true,
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id21",
+  },
+]
+`;
+
 exports[`history > multiplayer undo/redo > should update history entries after remote changes on the same properties > [end of test] appState 1`] = `
 {
  "activeEmbeddable": null,
@@ -16636,7 +17121,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "fillStyle": "solid",
            "frameId": null,
            "groupIds": [],
-            "height": "0.00120",
+            "height": 0,
            "index": "a3",
            "isDeleted": false,
            "link": null,
@@ -16649,7 +17134,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
              ],
              [
                "88.00000",
-                "0.00120",
+                0,
              ],
            ],
            "roughness": 1,
@@ -16672,7 +17157,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "version": 7,
            "width": "88.00000",
            "x": 6,
-            "y": "0.00880",
+            "y": "0.01000",
          },
          "inserted": {
            "isDeleted": true,
@@ -18650,7 +19135,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "fillStyle": "solid",
            "frameId": null,
            "groupIds": [],
-            "height": "0.00120",
+            "height": 0,
            "index": "a3",
            "isDeleted": false,
            "link": null,
@@ -18663,7 +19148,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
              ],
              [
                "88.00000",
-                "0.00120",
+                0,
              ],
            ],
            "roughness": 1,
@@ -18686,7 +19171,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "version": 7,
            "width": "88.00000",
            "x": 6,
-            "y": "0.00880",
+            "y": "0.01000",
          },
          "inserted": {
            "isDeleted": true,
@@ -19398,7 +19883,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "fillStyle": "solid",
            "frameId": null,
            "groupIds": [],
-            "height": "0.00120",
+            "height": 0,
            "index": "a3",
            "isDeleted": false,
            "link": null,
@@ -19411,7 +19896,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
              ],
              [
                "88.00000",
-                "0.00120",
+                0,
              ],
            ],
            "roughness": 1,
@@ -19434,7 +19919,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
            "version": 7,
            "width": "88.00000",
            "x": 6,
-            "y": "0.00880",
+            "y": "0.01000",
          },
          "inserted": {
            "isDeleted": true,
@@ -4,6 +4,7 @@ import {
  elementCenterPoint,
  getCommonBounds,
  getElementPointsCoords,
+  getLineHeightInPx,
 } from "@excalidraw/element";
 import { cropElement } from "@excalidraw/element";
 import {
@@ -20,7 +21,7 @@ import {
  isTextElement,
  isFrameLikeElement,
 } from "@excalidraw/element";
-import { KEYS, arrayToMap } from "@excalidraw/common";
+import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common";

 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";

@@ -516,8 +517,17 @@ export class UI {
    UI.clickTool(type);

    if (type === "text") {
+      const clickY = h.state.gridModeEnabled
+        ? y
+        : y +
+          getLineHeightInPx(
+            h.state.currentItemFontSize,
+            getLineHeight(h.state.currentItemFontFamily),
+          ) /
+            2;
+
      mouse.reset();
-      mouse.click(x, y);
+      mouse.click(x, clickY);
    } else if ((type === "line" || type === "arrow") && points.length > 2) {
      points.forEach((point) => {
        mouse.reset();
@@ -2971,6 +2971,82 @@ describe("history", () => {
      expect(h.state.editingGroupId).toBeNull();
    });

+    // TODO mark with "noncritical" tag once we migrate to vitest 4
+    it.skip("should support undo and redo when escape unwinds nested group editing", async () => {
+      const rectA = API.createElement({
+        type: "rectangle",
+        groupIds: ["inner", "outer"],
+        x: 0,
+      });
+      const rectB = API.createElement({
+        type: "rectangle",
+        groupIds: ["outer"],
+        x: 100,
+      });
+      const rectC = API.createElement({
+        type: "rectangle",
+        groupIds: ["inner", "outer"],
+        x: 200,
+      });
+
+      API.setElements([rectA, rectB, rectC]);
+      mouse.select(rectA);
+      mouse.doubleClickOn(rectA);
+      mouse.doubleClickOn(rectA);
+
+      assertSelectedElements([rectA]);
+      expect(h.state.editingGroupId).toBe("inner");
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+
+      Keyboard.keyPress(KEYS.ESCAPE);
+      assertSelectedElements([rectA, rectC]);
+      expect(h.state.editingGroupId).toBe("outer");
+      expect(API.getUndoStack().length).toBe(4);
+      expect(API.getRedoStack().length).toBe(0);
+
+      Keyboard.keyPress(KEYS.ESCAPE);
+      assertSelectedElements([rectA, rectB, rectC]);
+      expect(h.state.editingGroupId).toBeNull();
+      expect(h.state.selectedGroupIds).toEqual({ outer: true });
+      expect(API.getUndoStack().length).toBe(5);
+      expect(API.getRedoStack().length).toBe(0);
+
+      Keyboard.keyPress(KEYS.ESCAPE);
+      expect(API.getSelectedElements()).toEqual([]);
+      expect(h.state.editingGroupId).toBeNull();
+      expect(h.state.selectedGroupIds).toEqual({});
+      expect(API.getUndoStack().length).toBe(6);
+      expect(API.getRedoStack().length).toBe(0);
+
+      Keyboard.undo();
+      assertSelectedElements([rectA, rectB, rectC]);
+      expect(h.state.editingGroupId).toBeNull();
+      expect(h.state.selectedGroupIds).toEqual({ outer: true });
+
+      Keyboard.undo();
+      assertSelectedElements([rectA, rectC]);
+      expect(h.state.editingGroupId).toBe("outer");
+
+      Keyboard.undo();
+      assertSelectedElements([rectA]);
+      expect(h.state.editingGroupId).toBe("inner");
+
+      Keyboard.redo();
+      assertSelectedElements([rectA, rectC]);
+      expect(h.state.editingGroupId).toBe("outer");
+
+      Keyboard.redo();
+      assertSelectedElements([rectA, rectB, rectC]);
+      expect(h.state.editingGroupId).toBeNull();
+      expect(h.state.selectedGroupIds).toEqual({ outer: true });
+
+      Keyboard.redo();
+      expect(API.getSelectedElements()).toEqual([]);
+      expect(h.state.editingGroupId).toBeNull();
+      expect(h.state.selectedGroupIds).toEqual({});
+    });
+
    it("should iterate through the history when selected or editing linear element was remotely deleted", async () => {
      // create three point arrow
      UI.clickTool("arrow");
@@ -326,7 +326,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -359,7 +359,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -392,7 +392,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -438,7 +438,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
-    expect(renderStaticScene).toHaveBeenCalledTimes(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(9);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -483,7 +483,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
-    expect(renderStaticScene).toHaveBeenCalledTimes(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(9);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -558,3 +558,58 @@ describe("selectedElementIds stability", () => {
    expect(h.state.selectedElementIds).toBe(selectedElementIds_2);
  });
 });
+
+describe("deselecting", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+  });
+
+  it("esc unwinds nested group editing before deselecting", () => {
+    const rectA = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      groupIds: ["inner", "outer"],
+    });
+    const rectB = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 0,
+      groupIds: ["outer"],
+    });
+    const rectC = API.createElement({
+      type: "rectangle",
+      x: 200,
+      y: 0,
+      groupIds: ["inner", "outer"],
+    });
+
+    API.setElements([rectA, rectB, rectC]);
+
+    mouse.select(rectA);
+    assertSelectedElements(rectA, rectB, rectC);
+    expect(h.state.editingGroupId).toBeNull();
+
+    mouse.doubleClickOn(rectA);
+    assertSelectedElements(rectA, rectC);
+    expect(h.state.editingGroupId).toBe("outer");
+
+    mouse.doubleClickOn(rectA);
+    assertSelectedElements(rectA);
+    expect(h.state.editingGroupId).toBe("inner");
+
+    Keyboard.keyPress(KEYS.ESCAPE);
+    assertSelectedElements(rectA, rectC);
+    expect(h.state.editingGroupId).toBe("outer");
+
+    Keyboard.keyPress(KEYS.ESCAPE);
+    assertSelectedElements(rectA, rectB, rectC);
+    expect(h.state.editingGroupId).toBeNull();
+    expect(h.state.selectedGroupIds).toEqual({ outer: true });
+
+    Keyboard.keyPress(KEYS.ESCAPE);
+    expect(API.getSelectedElements()).toEqual([]);
+    expect(h.state.editingGroupId).toBeNull();
+    expect(h.state.selectedGroupIds).toEqual({});
+  });
+});
@@ -0,0 +1,88 @@
+import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
+import {
+  pointFrom,
+  pointRotateRads,
+  type GlobalPoint,
+  type Radians,
+} from "@excalidraw/math";
+
+import type { EditorInterface } from "@excalidraw/common";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
+const TEXT_AUTO_RESIZE_HANDLE_GAP = 12;
+const TEXT_AUTO_RESIZE_HANDLE_LENGTH = 16;
+const TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH = 10;
+const TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT =
+  TEXT_AUTO_RESIZE_HANDLE_LENGTH + 2;
+const MAX_HANDLE_HEIGHT_RATIO = 0.8;
+
+export const getTextBoxPadding = (zoomValue: number) =>
+  (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / zoomValue;
+
+export const getTextAutoResizeHandle = (
+  textElement: ExcalidrawTextElement,
+  zoomValue: number,
+  formFactor: EditorInterface["formFactor"],
+) => {
+  if (
+    formFactor !== "desktop" ||
+    TEXT_AUTO_RESIZE_HANDLE_LENGTH >
+      textElement.height * zoomValue * MAX_HANDLE_HEIGHT_RATIO
+  ) {
+    return null;
+  }
+
+  const padding = getTextBoxPadding(zoomValue);
+  const gap = TEXT_AUTO_RESIZE_HANDLE_GAP / zoomValue;
+  const length = TEXT_AUTO_RESIZE_HANDLE_LENGTH / zoomValue;
+  const center = pointFrom(
+    textElement.x + textElement.width / 2,
+    textElement.y + textElement.height / 2,
+  );
+  const handleCenter = pointRotateRads(
+    pointFrom(center[0] + textElement.width / 2 + padding + gap, center[1]),
+    center,
+    textElement.angle,
+  );
+
+  return {
+    center: handleCenter,
+    start: pointRotateRads(
+      pointFrom(handleCenter[0], handleCenter[1] - length / 2),
+      handleCenter,
+      textElement.angle,
+    ) as GlobalPoint,
+    end: pointRotateRads(
+      pointFrom(handleCenter[0], handleCenter[1] + length / 2),
+      handleCenter,
+      textElement.angle,
+    ) as GlobalPoint,
+    hitboxWidth: TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH / zoomValue,
+    hitboxHeight: TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT / zoomValue,
+  };
+};
+
+export const isPointHittingTextAutoResizeHandle = (
+  point: Readonly<{ x: number; y: number }>,
+  textElement: ExcalidrawTextElement,
+  zoomValue: number,
+  formFactor: EditorInterface["formFactor"],
+) => {
+  const handle = getTextAutoResizeHandle(textElement, zoomValue, formFactor);
+
+  if (!handle) {
+    return false;
+  }
+
+  const unrotatedPoint = pointRotateRads(
+    pointFrom(point.x, point.y),
+    handle.center,
+    -textElement.angle as Radians,
+  );
+
+  return (
+    Math.abs(unrotatedPoint[0] - handle.center[0]) <= handle.hitboxWidth / 2 &&
+    Math.abs(unrotatedPoint[1] - handle.center[1]) <= handle.hitboxHeight / 2
+  );
+};
@@ -32,6 +32,7 @@ import type {
  OrderedExcalidrawElement,
  ExcalidrawNonSelectionElement,
  BindMode,
+  ExcalidrawTextElement,
 } from "@excalidraw/element/types";

 import type {
@@ -327,7 +328,7 @@ export interface AppState {
  /**
   * set when a new text is created or when an existing text is being edited
   */
-  editingTextElement: NonDeletedExcalidrawElement | null;
+  editingTextElement: ExcalidrawTextElement | null;
  activeTool: {
    /**
     * indicates a previous tool we should revert back to if we deselect the
@@ -876,9 +877,8 @@ export type PointerDownState = Readonly<{
    // by default same as PointerDownState.origin. On alt-duplication, reset
    // to current pointer position at time of duplication.
    origin: { x: number; y: number };
-    // Whether to block drag after lasso selection
-    // this is meant to be used to block dragging after lasso selection on PCs
-    // until the next pointer down
+    // explicit flag for specific scenarios such as:
+    // - after lasso selection until the next pointer down
    blockDragging: boolean;
  };
  // We need to have these in the state so that we can unsubscribe them
@@ -1,7 +1,10 @@
 import { queryByText } from "@testing-library/react";

 import { pointFrom } from "@excalidraw/math";
-import { getOriginalContainerHeightFromCache } from "@excalidraw/element";
+import {
+  getLineHeightInPx,
+  getOriginalContainerHeightFromCache,
+} from "@excalidraw/element";

 import {
  CODES,
@@ -42,6 +45,28 @@ unmountComponent();
 const tab = "    ";
 const mouse = new Pointer("mouse");

+const exitTextEditorAndAssertSelection = async ({
+  editor,
+  selectedIds,
+  nextText,
+}: {
+  editor: HTMLTextAreaElement;
+  selectedIds: string[];
+  nextText?: string;
+}) => {
+  if (nextText !== undefined) {
+    updateTextEditor(editor, nextText);
+  }
+
+  Keyboard.exitTextEditor(editor);
+
+  expect(await getTextEditor({ waitForEditor: false })).toBe(null);
+  expect(window.h.state.editingTextElement).toBeNull();
+  expect(API.getSelectedElements().map((element) => element.id)).toEqual(
+    selectedIds,
+  );
+};
+
 describe("textWysiwyg", () => {
  describe("start text editing", () => {
    const { h } = window;
@@ -210,6 +235,42 @@ describe("textWysiwyg", () => {
      expect(h.elements.length).toBe(1);
    });

+    it("should vertically center newly created text on the cursor when clicked with text tool", async () => {
+      API.setAppState({
+        currentItemFontFamily: FONT_FAMILY.Cascadia,
+        currentItemFontSize: 40,
+      });
+      UI.clickTool("text");
+
+      mouse.clickAt(120, 80);
+
+      const editor = await getTextEditor();
+      const text = h.elements[0] as ExcalidrawTextElement;
+      const lineHeightPx = getLineHeightInPx(text.fontSize, text.lineHeight);
+
+      expect(editor).not.toBe(null);
+      expect(text.y + lineHeightPx / 2).toBe(80);
+    });
+
+    it("should snap newly created text top-left to the current grid cell when clicked with text tool in grid mode", async () => {
+      API.setAppState({
+        currentItemFontFamily: FONT_FAMILY.Cascadia,
+        currentItemFontSize: 40,
+        gridModeEnabled: true,
+        gridSize: 24,
+      });
+      UI.clickTool("text");
+
+      mouse.clickAt(113, 86);
+
+      const editor = await getTextEditor();
+      const text = h.elements[0] as ExcalidrawTextElement;
+
+      expect(editor).not.toBe(null);
+      expect(text.x).toBe(96);
+      expect(text.y).toBe(72);
+    });
+
    it("should edit text under cursor when double-clicked with selection tool", async () => {
      const text = API.createElement({
        type: "text",
@@ -232,6 +293,33 @@ describe("textWysiwyg", () => {
      expect(h.elements.length).toBe(1);
    });

+    it("should reselect text after exiting wysiwyg with escape", async () => {
+      const text = API.createElement({
+        type: "text",
+        text: "ola",
+        x: 60,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      API.setElements([text]);
+      API.setSelectedElements([text]);
+      UI.clickTool("selection");
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      const editor = await getTextEditor();
+
+      expect(editor).not.toBe(null);
+      expect(h.state.editingTextElement?.id).toBe(text.id);
+
+      await exitTextEditorAndAssertSelection({
+        editor,
+        selectedIds: [text.id],
+      });
+    });
+
    it("should edit selected bound text on single click", async () => {
      const container = API.createElement({
        type: "rectangle",
@@ -1266,6 +1354,40 @@ describe("textWysiwyg", () => {
      );
    });

+    it.each([
+      {
+        label: "container",
+        createElements: () => API.createTextContainer(),
+      },
+      {
+        label: "arrow",
+        createElements: () => API.createLabeledArrow(),
+      },
+    ])(
+      "should reselect $label after deleting bound text with escape",
+      async ({ createElements }) => {
+        const [selectedElement, text] = createElements();
+        API.setElements([selectedElement, text]);
+        API.setSelectedElements([selectedElement]);
+
+        Keyboard.keyPress(KEYS.ENTER);
+        const editor = await getTextEditor();
+
+        await exitTextEditorAndAssertSelection({
+          editor,
+          nextText: "",
+          selectedIds: [selectedElement.id],
+        });
+
+        expect(selectedElement.boundElements).toStrictEqual([]);
+        expect(h.elements[1]).toEqual(
+          expect.objectContaining({
+            isDeleted: true,
+          }),
+        );
+      },
+    );
+
    it("should restore original container height and clear cache once text is unbind", async () => {
      const container = API.createElement({
        type: "rectangle",
@@ -1572,7 +1694,7 @@ describe("textWysiwyg", () => {
          version: 2,
          width: 610,
          x: 15,
-          y: 25,
+          y: 12.5,
        }),
      );
      expect(h.elements[2] as ExcalidrawTextElement).toEqual(
@@ -123,10 +123,15 @@ export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
 * @returns The rotated point
 */
 export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
-  [x, y]: Point,
-  [cx, cy]: Point,
+  point: Point,
+  center: Point,
  angle: Radians,
 ): Point {
+  if (!angle) {
+    return point;
+  }
+  const [x, y] = point;
+  const [cx, cy] = center;
  return pointFrom(
    (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
    (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy,
@@ -40,7 +40,7 @@ export const isLineSegment = <Point extends GlobalPoint | LocalPoint>(
  Array.isArray(segment) &&
  segment.length === 2 &&
  isPoint(segment[0]) &&
-  isPoint(segment[0]);
+  isPoint(segment[1]);

 /**
 * Return the coordinates resulting from rotating the given line about an origin by an angle in radians
@@ -1,5 +1,9 @@
 import { pointFrom } from "../src/point";
-import { lineSegment, lineSegmentIntersectionPoints } from "../src/segment";
+import {
+  lineSegment,
+  lineSegmentIntersectionPoints,
+  isLineSegment,
+} from "../src/segment";

 describe("line-segment intersections", () => {
  it("should correctly detect intersection", () => {
@@ -19,3 +23,23 @@ describe("line-segment intersections", () => {
    ).toEqual(null);
  });
 });
+describe("isLineSegment validation", () => {
+  it("should return true for a valid segment", () => {
+    expect(
+      isLineSegment([
+        [0, 0],
+        [1, 1],
+      ]),
+    ).toBe(true);
+  });
+
+  it("should return false if second element is not a point", () => {
+    const invalidSegment = [[0, 0], "not-a-point"] as any;
+
+    expect(isLineSegment(invalidSegment)).toBe(false);
+  });
+
+  it("should return false for wrong length", () => {
+    expect(isLineSegment([[0, 0]])).toBe(false);
+  });
+});
@@ -1531,10 +1531,10 @@
  resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
  integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==

-"@excalidraw/mermaid-to-excalidraw@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.0.tgz#a5b9cf87c3185558cda7f9687d87b9937f452358"
-  integrity sha512-RMd+c2b7WzzUjhERMpKwp8PhF2/XlHDjr/zK+Gxfp8K9sVlafPYJ5OEa/GkN6edi2rBUXRfW+41WdO6L56b6Kw==
+"@excalidraw/mermaid-to-excalidraw@2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.2.2.tgz#ee6b597a0d95b9a76f7ae41ce0e3733a9b96e4a0"
+  integrity sha512-5VKQq5CdRocC82vOIUpQ5ufJOVV9FpBTdHGA+ULqazeIVV+cr299877omQCibsdS3Bpitz2fsnTwnIXEmLVDSg==
  dependencies:
    "@excalidraw/markdown-to-text" "0.1.2"
    "@mermaid-js/parser" "^0.6.3"
Author	SHA1	Message	Date
dwelle	b92f585ce7	fix(test): attempt to fix test flake in collision.test.tsx	2026-03-25 21:03:20 +01:00
David Luzar	4a5c9e990c	fix(editor): ensure font picker font names are not quoted (#11036 )	2026-03-25 17:56:48 +01:00
David Luzar	c09e170bdd	feat(editor): deselect on esc (#11035 ) Co-authored-by: Jawahar <jawahars_16@live.in> Co-authored-by: Andrew Aquino <dawneraq@gmail.com>	2026-03-25 17:14:24 +01:00
David Luzar	c1082923ee	feat(editor): support mermaid staate diagrams (#11031 )	2026-03-24 20:20:28 +01:00
Kundan	1c292e4936	fix(math): correctly validate second point in isLineSegment (#11007 ) Co-authored-by: Mark Tolmacs <mark@lazycat.hu>	2026-03-24 19:01:08 +01:00
Márk Tolmács	d6f0f34fe9	fix: Rotated rounded arrow center point (#10962 )	2026-03-23 15:54:59 +01:00
Márk Tolmács	75789f620d	fix: Other endpoint is not immediately updated on midpoint snap (#10933 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-03-23 14:54:44 +00:00
David Luzar	a9ca16eb42	chore(packages/excalidraw): export Fonts helper class (#11008 )	2026-03-21 22:44:27 +01:00
Márk Tolmács	987173b52f	fix: Arrow point index Out-of-Bounds (#10922 ) * fix: Make OOB not fatal Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: More conservative temp arrow state update Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * chore: Capture condition variables in binding restoration failure Signed-off-by: Mark Tolmacs <mark@lazycat.hu> --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2026-03-21 19:26:47 +01:00
David Luzar	81ab857a6f	feat(editor): various text related improvements (#10979 )	2026-03-19 16:00:58 +01:00