Merge branch 'master' into ryan-di/line-snapping

# Conflicts: # packages/element/src/linearElementEditor.ts # packages/element/src/snapping.ts # packages/excalidraw/components/App.tsx
2025-07-31 22:42:52 +02:00
parent 0e197ef5c4 178eca5828
commit 09b18cacec
69 changed files with 1810 additions and 856 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@excalidraw/element",
-  "version": "0.1.0",
+  "version": "0.18.0",
  "type": "module",
  "types": "./dist/types/element/src/index.d.ts",
  "main": "./dist/prod/index.js",
@@ -13,7 +13,10 @@
      "default": "./dist/prod/index.js"
    },
    "./*": {
-      "types": "./dist/types/element/src/*.d.ts"
+      "types": "./dist/types/element/src/*.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
    }
  },
  "files": [
@@ -52,5 +55,9 @@
  "scripts": {
    "gen:types": "rimraf types && tsc",
    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
+  },
+  "dependencies": {
+    "@excalidraw/common": "0.18.0",
+    "@excalidraw/math": "0.18.0"
  }
 }
@@ -1,6 +1,8 @@
+import type { AppState } from "@excalidraw/excalidraw/types";
+
 import { updateBoundElements } from "./binding";
 import { getCommonBoundingBox } from "./bounds";
-import { getMaximumGroups } from "./groups";
+import { getSelectedElementsByGroup } from "./groups";

 import type { Scene } from "./Scene";

@@ -16,11 +18,12 @@ export const alignElements = (
  selectedElements: ExcalidrawElement[],
  alignment: Alignment,
  scene: Scene,
+  appState: Readonly<AppState>,
 ): ExcalidrawElement[] => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const groups: ExcalidrawElement[][] = getMaximumGroups(
+  const groups: ExcalidrawElement[][] = getSelectedElementsByGroup(
    selectedElements,
-    elementsMap,
+    scene.getNonDeletedElementsMap(),
+    appState,
  );
  const selectionBoundingBox = getCommonBoundingBox(selectedElements);

@@ -2,6 +2,7 @@ import {
  arrayToMap,
  arrayToObject,
  assertNever,
+  invariant,
  isDevEnv,
  isShallowEqual,
  isTestEnv,
@@ -548,7 +549,7 @@ export class AppStateDelta implements DeltaContainer<AppState> {
        selectedElementIds: addedSelectedElementIds = {},
        selectedGroupIds: addedSelectedGroupIds = {},
        selectedLinearElementId,
-        editingLinearElementId,
+        selectedLinearElementIsEditing,
        ...directlyApplicablePartial
      } = this.delta.inserted;

@@ -564,39 +565,46 @@ export class AppStateDelta implements DeltaContainer<AppState> {
        removedSelectedGroupIds,
      );

-      const selectedLinearElement =
-        selectedLinearElementId && nextElements.has(selectedLinearElementId)
-          ? new LinearElementEditor(
-              nextElements.get(
-                selectedLinearElementId,
-              ) as NonDeleted<ExcalidrawLinearElement>,
-              nextElements,
-            )
-          : null;
+      let selectedLinearElement = appState.selectedLinearElement;

-      const editingLinearElement =
-        editingLinearElementId && nextElements.has(editingLinearElementId)
-          ? new LinearElementEditor(
-              nextElements.get(
-                editingLinearElementId,
-              ) as NonDeleted<ExcalidrawLinearElement>,
-              nextElements,
-            )
-          : null;
+      if (selectedLinearElementId === null) {
+        // Unselect linear element (visible change)
+        selectedLinearElement = null;
+      } else if (
+        selectedLinearElementId &&
+        nextElements.has(selectedLinearElementId)
+      ) {
+        selectedLinearElement = new LinearElementEditor(
+          nextElements.get(
+            selectedLinearElementId,
+          ) as NonDeleted<ExcalidrawLinearElement>,
+          nextElements,
+          selectedLinearElementIsEditing === true, // Can be unknown which is defaulted to false
+        );
+      }
+
+      if (
+        // Value being 'null' is equivaluent to unknown in this case because it only gets set
+        // to null when 'selectedLinearElementId' is set to null
+        selectedLinearElementIsEditing != null
+      ) {
+        invariant(
+          selectedLinearElement,
+          `selectedLinearElement is null when selectedLinearElementIsEditing is set to ${selectedLinearElementIsEditing}`,
+        );
+
+        selectedLinearElement = {
+          ...selectedLinearElement,
+          isEditing: selectedLinearElementIsEditing,
+        };
+      }

      const nextAppState = {
        ...appState,
        ...directlyApplicablePartial,
        selectedElementIds: mergedSelectedElementIds,
        selectedGroupIds: mergedSelectedGroupIds,
-        selectedLinearElement:
-          typeof selectedLinearElementId !== "undefined"
-            ? selectedLinearElement // element was either inserted or deleted
-            : appState.selectedLinearElement, // otherwise assign what we had before
-        editingLinearElement:
-          typeof editingLinearElementId !== "undefined"
-            ? editingLinearElement // element was either inserted or deleted
-            : appState.editingLinearElement, // otherwise assign what we had before
+        selectedLinearElement,
      };

      const constainsVisibleChanges = this.filterInvisibleChanges(
@@ -725,8 +733,7 @@ export class AppStateDelta implements DeltaContainer<AppState> {
            }

            break;
-          case "selectedLinearElementId":
-          case "editingLinearElementId":
+          case "selectedLinearElementId": {
            const appStateKey = AppStateDelta.convertToAppStateKey(key);
            const linearElement = nextAppState[appStateKey];

@@ -746,6 +753,19 @@ export class AppStateDelta implements DeltaContainer<AppState> {
            }

            break;
+          }
+          case "selectedLinearElementIsEditing": {
+            // Changes in editing state are always visible
+            const prevIsEditing =
+              prevAppState.selectedLinearElement?.isEditing ?? false;
+            const nextIsEditing =
+              nextAppState.selectedLinearElement?.isEditing ?? false;
+
+            if (prevIsEditing !== nextIsEditing) {
+              visibleDifferenceFlag.value = true;
+            }
+            break;
+          }
          case "lockedMultiSelections": {
            const prevLockedUnits = prevAppState[key] || {};
            const nextLockedUnits = nextAppState[key] || {};
@@ -779,16 +799,11 @@ export class AppStateDelta implements DeltaContainer<AppState> {
  }

  private static convertToAppStateKey(
-    key: keyof Pick<
-      ObservedElementsAppState,
-      "selectedLinearElementId" | "editingLinearElementId"
-    >,
-  ): keyof Pick<AppState, "selectedLinearElement" | "editingLinearElement"> {
+    key: keyof Pick<ObservedElementsAppState, "selectedLinearElementId">,
+  ): keyof Pick<AppState, "selectedLinearElement"> {
    switch (key) {
      case "selectedLinearElementId":
        return "selectedLinearElement";
-      case "editingLinearElementId":
-        return "editingLinearElement";
    }
  }

@@ -856,8 +871,8 @@ export class AppStateDelta implements DeltaContainer<AppState> {
      editingGroupId,
      selectedGroupIds,
      selectedElementIds,
-      editingLinearElementId,
      selectedLinearElementId,
+      selectedLinearElementIsEditing,
      croppingElementId,
      lockedMultiSelections,
      activeLockedId,
@@ -1,7 +1,9 @@
+import type { AppState } from "@excalidraw/excalidraw/types";
+
 import { getCommonBoundingBox } from "./bounds";
 import { newElementWith } from "./mutateElement";

-import { getMaximumGroups } from "./groups";
+import { getSelectedElementsByGroup } from "./groups";

 import type { ElementsMap, ExcalidrawElement } from "./types";

@@ -14,6 +16,7 @@ export const distributeElements = (
  selectedElements: ExcalidrawElement[],
  elementsMap: ElementsMap,
  distribution: Distribution,
+  appState: Readonly<AppState>,
 ): ExcalidrawElement[] => {
  const [start, mid, end, extent] =
    distribution.axis === "x"
@@ -21,7 +24,11 @@ export const distributeElements = (
      : (["minY", "midY", "maxY", "height"] as const);

  const bounds = getCommonBoundingBox(selectedElements);
-  const groups = getMaximumGroups(selectedElements, elementsMap)
+  const groups = getSelectedElementsByGroup(
+    selectedElements,
+    elementsMap,
+    appState,
+  )
    .map((group) => [group, getCommonBoundingBox(group)] as const)
    .sort((a, b) => a[1][mid] - b[1][mid]);

@@ -23,7 +23,7 @@ type IframeDataWithSandbox = MarkRequired<IframeData, "sandbox">;
 const embeddedLinkCache = new Map<string, IframeDataWithSandbox>();

 const RE_YOUTUBE =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)/;

 const RE_VIMEO =
  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
@@ -56,6 +56,35 @@ const RE_REDDIT =
 const RE_REDDIT_EMBED =
  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;

+const parseYouTubeTimestamp = (url: string): number => {
+  let timeParam: string | null | undefined;
+
+  try {
+    const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`);
+    timeParam =
+      urlObj.searchParams.get("t") || urlObj.searchParams.get("start");
+  } catch (error) {
+    const timeMatch = url.match(/[?&#](?:t|start)=([^&#\s]+)/);
+    timeParam = timeMatch?.[1];
+  }
+
+  if (!timeParam) {
+    return 0;
+  }
+
+  if (/^\d+$/.test(timeParam)) {
+    return parseInt(timeParam, 10);
+  }
+
+  const timeMatch = timeParam.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
+  if (!timeMatch) {
+    return 0;
+  }
+
+  const [, hours = "0", minutes = "0", seconds = "0"] = timeMatch;
+  return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
+};
+
 const ALLOWED_DOMAINS = new Set([
  "youtube.com",
  "youtu.be",
@@ -113,7 +142,8 @@ export const getEmbedLink = (
  let aspectRatio = { w: 560, h: 840 };
  const ytLink = link.match(RE_YOUTUBE);
  if (ytLink?.[2]) {
-    const time = ytLink[3] ? `&start=${ytLink[3]}` : ``;
+    const startTime = parseYouTubeTimestamp(originalLink);
+    const time = startTime > 0 ? `&start=${startTime}` : ``;
    const isPortrait = link.includes("shorts");
    type = "video";
    switch (ytLink[1]) {
@@ -7,6 +7,8 @@ import type { Mutable } from "@excalidraw/common/utility-types";

 import { getBoundTextElement } from "./textElement";

+import { isBoundToContainer } from "./typeChecks";
+
 import { makeNextSelectedElementIds, getSelectedElements } from "./selection";

 import type {
@@ -402,3 +404,78 @@ export const getNewGroupIdsForDuplication = (

  return copy;
 };
+
+// given a list of selected elements, return the element grouped by their immediate group selected state
+// in the case if only one group is selected and all elements selected are within the group, it will respect group hierarchy in accordance to their nested grouping order
+export const getSelectedElementsByGroup = (
+  selectedElements: ExcalidrawElement[],
+  elementsMap: ElementsMap,
+  appState: Readonly<AppState>,
+): ExcalidrawElement[][] => {
+  const selectedGroupIds = getSelectedGroupIds(appState);
+  const unboundElements = selectedElements.filter(
+    (element) => !isBoundToContainer(element),
+  );
+  const groups: Map<string, ExcalidrawElement[]> = new Map();
+  const elements: Map<string, ExcalidrawElement[]> = new Map();
+
+  // helper function to add an element to the elements map
+  const addToElementsMap = (element: ExcalidrawElement) => {
+    // elements
+    const currentElementMembers = elements.get(element.id) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+
+    if (boundTextElement) {
+      currentElementMembers.push(boundTextElement);
+    }
+    elements.set(element.id, [...currentElementMembers, element]);
+  };
+
+  // helper function to add an element to the groups map
+  const addToGroupsMap = (element: ExcalidrawElement, groupId: string) => {
+    // groups
+    const currentGroupMembers = groups.get(groupId) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+
+    if (boundTextElement) {
+      currentGroupMembers.push(boundTextElement);
+    }
+    groups.set(groupId, [...currentGroupMembers, element]);
+  };
+
+  // helper function to handle the case where a single group is selected
+  // and all elements selected are within the group, it will respect group hierarchy in accordance to
+  // their nested grouping order
+  const handleSingleSelectedGroupCase = (
+    element: ExcalidrawElement,
+    selectedGroupId: GroupId,
+  ) => {
+    const indexOfSelectedGroupId = element.groupIds.indexOf(selectedGroupId, 0);
+    const nestedGroupCount = element.groupIds.slice(
+      0,
+      indexOfSelectedGroupId,
+    ).length;
+    return nestedGroupCount > 0
+      ? addToGroupsMap(element, element.groupIds[indexOfSelectedGroupId - 1])
+      : addToElementsMap(element);
+  };
+
+  const isAllInSameGroup = selectedElements.every((element) =>
+    isSelectedViaGroup(appState, element),
+  );
+
+  unboundElements.forEach((element) => {
+    const selectedGroupId = getSelectedGroupIdForElement(
+      element,
+      appState.selectedGroupIds,
+    );
+    if (!selectedGroupId) {
+      addToElementsMap(element);
+    } else if (selectedGroupIds.length === 1 && isAllInSameGroup) {
+      handleSingleSelectedGroupCase(element, selectedGroupId);
+    } else {
+      addToGroupsMap(element, selectedGroupId);
+    }
+  });
+  return Array.from(groups.values()).concat(Array.from(elements.values()));
+};
@@ -153,10 +153,12 @@ export class LinearElementEditor {
  public readonly segmentMidPointHoveredCoords: GlobalPoint | null;
  public readonly elbowed: boolean;
  public readonly customLineAngle: number | null;
+  public readonly isEditing: boolean;

  constructor(
    element: NonDeleted<ExcalidrawLinearElement>,
    elementsMap: ElementsMap,
+    isEditing: boolean = false,
  ) {
    this.elementId = element.id as string & {
      _brand: "excalidrawLinearElementId";
@@ -191,6 +193,7 @@ export class LinearElementEditor {
    this.segmentMidPointHoveredCoords = null;
    this.elbowed = isElbowArrow(element) && element.elbowed;
    this.customLineAngle = null;
+    this.isEditing = isEditing;
  }

  // ---------------------------------------------------------------------------
@@ -198,6 +201,7 @@ export class LinearElementEditor {
  // ---------------------------------------------------------------------------

  static POINT_HANDLE_SIZE = 10;
+
  /**
   * @param id the `elementId` from the instance of this class (so that we can
   *  statically guarantee this method returns an ExcalidrawLinearElement)
@@ -219,11 +223,14 @@ export class LinearElementEditor {
    setState: React.Component<any, AppState>["setState"],
    elementsMap: NonDeletedSceneElementsMap,
  ) {
-    if (!appState.editingLinearElement || !appState.selectionElement) {
+    if (
+      !appState.selectedLinearElement?.isEditing ||
+      !appState.selectionElement
+    ) {
      return false;
    }
-    const { editingLinearElement } = appState;
-    const { selectedPointsIndices, elementId } = editingLinearElement;
+    const { selectedLinearElement } = appState;
+    const { selectedPointsIndices, elementId } = selectedLinearElement;

    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
@@ -264,8 +271,8 @@ export class LinearElementEditor {
      });

    setState({
-      editingLinearElement: {
-        ...editingLinearElement,
+      selectedLinearElement: {
+        ...selectedLinearElement,
        selectedPointsIndices: nextSelectedPoints.length
          ? nextSelectedPoints
          : null,
@@ -597,9 +604,6 @@ export class LinearElementEditor {

      return {
        ...app.state,
-        editingLinearElement: app.state.editingLinearElement
-          ? newLinearElementEditor
-          : null,
        selectedLinearElement: newLinearElementEditor,
        suggestedBindings,
        snapLines: _snapLines,
@@ -737,7 +741,7 @@ export class LinearElementEditor {
    // Since its not needed outside editor unless 2 pointer lines or bound text
    if (
      !isElbowArrow(element) &&
-      !appState.editingLinearElement &&
+      !appState.selectedLinearElement?.isEditing &&
      element.points.length > 2 &&
      !boundText
    ) {
@@ -803,7 +807,7 @@ export class LinearElementEditor {
    );
    if (
      points.length >= 3 &&
-      !appState.editingLinearElement &&
+      !appState.selectedLinearElement?.isEditing &&
      !isElbowArrow(element)
    ) {
      return null;
@@ -1000,7 +1004,7 @@ export class LinearElementEditor {
        segmentMidpoint,
        elementsMap,
      );
-    } else if (event.altKey && appState.editingLinearElement) {
+    } else if (event.altKey && appState.selectedLinearElement?.isEditing) {
      if (linearElementEditor.lastUncommittedPoint == null) {
        scene.mutateElement(element, {
          points: [
@@ -1141,19 +1145,19 @@ export class LinearElementEditor {
    scenePointerY: number,
    app: AppClassProperties,
  ): {
-    linearElementEditor: LinearElementEditor;
+    editingLinearElement: LinearElementEditor;
    snapLines: readonly SnapLine[];
  } | null {
    const appState = app.state;
-    if (!appState.editingLinearElement) {
+    if (!appState.selectedLinearElement?.isEditing) {
      return null;
    }
-    const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
+    const { elementId, lastUncommittedPoint } = appState.selectedLinearElement;
    const elementsMap = app.scene.getNonDeletedElementsMap();
    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return {
-        linearElementEditor: appState.editingLinearElement,
+        editingLinearElement: appState.selectedLinearElement,
        snapLines: appState.snapLines,
      };
    }
@@ -1166,8 +1170,8 @@ export class LinearElementEditor {
        LinearElementEditor.deletePoints(element, app, [points.length - 1]);
      }
      return {
-        linearElementEditor: {
-          ...appState.editingLinearElement,
+        editingLinearElement: {
+          ...appState.selectedLinearElement,
          lastUncommittedPoint: null,
          isDragging: false,
          pointerOffset: { x: 0, y: 0 },
@@ -1298,9 +1302,9 @@ export class LinearElementEditor {
      );
    } else {
      const originalPointerX =
-        scenePointerX - appState.editingLinearElement.pointerOffset.x;
+        scenePointerX - appState.selectedLinearElement.pointerOffset.x;
      const originalPointerY =
-        scenePointerY - appState.editingLinearElement.pointerOffset.y;
+        scenePointerY - appState.selectedLinearElement.pointerOffset.y;

      const { snapOffset, snapLines: snappingLines } = snapLinearElementPoint(
        app.scene.getNonDeletedElements(),
@@ -1347,8 +1351,8 @@ export class LinearElementEditor {
    }

    return {
-      linearElementEditor: {
-        ...appState.editingLinearElement,
+      editingLinearElement: {
+        ...appState.selectedLinearElement,
        lastUncommittedPoint: element.points[element.points.length - 1],
      },
      snapLines,
@@ -1509,12 +1513,12 @@ export class LinearElementEditor {
  // ---------------------------------------------------------------------------
  static duplicateSelectedPoints(appState: AppState, scene: Scene): AppState {
    invariant(
-      appState.editingLinearElement,
+      appState.selectedLinearElement?.isEditing,
      "Not currently editing a linear element",
    );

    const elementsMap = scene.getNonDeletedElementsMap();
-    const { selectedPointsIndices, elementId } = appState.editingLinearElement;
+    const { selectedPointsIndices, elementId } = appState.selectedLinearElement;
    const element = LinearElementEditor.getElement(elementId, elementsMap);

    invariant(
@@ -1576,8 +1580,8 @@ export class LinearElementEditor {

    return {
      ...appState,
-      editingLinearElement: {
-        ...appState.editingLinearElement,
+      selectedLinearElement: {
+        ...appState.selectedLinearElement,
        selectedPointsIndices: nextSelectedIndices,
      },
    };
@@ -1589,8 +1593,9 @@ export class LinearElementEditor {
    pointIndices: readonly number[],
  ) {
    const isUncommittedPoint =
-      app.state.editingLinearElement?.lastUncommittedPoint ===
-      element.points[element.points.length - 1];
+      app.state.selectedLinearElement?.isEditing &&
+      app.state.selectedLinearElement?.lastUncommittedPoint ===
+        element.points[element.points.length - 1];

    const nextPoints = element.points.filter((_, idx) => {
      return !pointIndices.includes(idx);
@@ -1763,7 +1768,7 @@ export class LinearElementEditor {
      pointFrom(pointerCoords.x, pointerCoords.y),
    );
    if (
-      !appState.editingLinearElement &&
+      !appState.selectedLinearElement?.isEditing &&
      dist < DRAGGING_THRESHOLD / appState.zoom.value
    ) {
      return false;
@@ -106,6 +106,11 @@ const getCanvasPadding = (element: ExcalidrawElement) => {
      return element.strokeWidth * 12;
    case "text":
      return element.fontSize / 2;
+    case "arrow":
+      if (element.endArrowhead || element.endArrowhead) {
+        return 40;
+      }
+      return 20;
    default:
      return 20;
  }
@@ -14,11 +14,7 @@ import {
  getDraggedElementsBounds,
  getElementAbsoluteCoords,
 } from "@excalidraw/element";
-import {
-  isBoundToContainer,
-  isFrameLikeElement,
-  isElbowArrow,
-} from "@excalidraw/element";
+import { isBoundToContainer, isElbowArrow } from "@excalidraw/element";

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

@@ -379,20 +375,13 @@ const getReferenceElements = (
  selectedElements: NonDeletedExcalidrawElement[],
  appState: AppState,
  elementsMap: ElementsMap,
-) => {
-  const selectedFrames = selectedElements
-    .filter((element) => isFrameLikeElement(element))
-    .map((frame) => frame.id);
-
-  return getVisibleAndNonSelectedElements(
+) =>
+  getVisibleAndNonSelectedElements(
    elements,
    selectedElements,
    appState,
    elementsMap,
-  ).filter(
-    (element) => !(element.frameId && selectedFrames.includes(element.frameId)),
  );
-};

 export const getVisibleGaps = (
  elements: readonly NonDeletedExcalidrawElement[],
@@ -27,6 +27,8 @@ import {
  isImageElement,
 } from "./index";

+import type { ApplyToOptions } from "./delta";
+
 import type {
  ExcalidrawElement,
  OrderedExcalidrawElement,
@@ -570,9 +572,15 @@ export class StoreDelta {
    delta: StoreDelta,
    elements: SceneElementsMap,
    appState: AppState,
+    options: ApplyToOptions = {
+      excludedProperties: new Set(),
+    },
  ): [SceneElementsMap, AppState, boolean] {
-    const [nextElements, elementsContainVisibleChange] =
-      delta.elements.applyTo(elements);
+    const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
+      elements,
+      StoreSnapshot.empty().elements,
+      options,
+    );

    const [nextAppState, appStateContainsVisibleChange] =
      delta.appState.applyTo(appState, nextElements);
@@ -970,8 +978,8 @@ const getDefaultObservedAppState = (): ObservedAppState => {
    viewBackgroundColor: COLOR_PALETTE.white,
    selectedElementIds: {},
    selectedGroupIds: {},
-    editingLinearElementId: null,
    selectedLinearElementId: null,
+    selectedLinearElementIsEditing: null,
    croppingElementId: null,
    activeLockedId: null,
    lockedMultiSelections: {},
@@ -990,14 +998,14 @@ export const getObservedAppState = (
    croppingElementId: appState.croppingElementId,
    activeLockedId: appState.activeLockedId,
    lockedMultiSelections: appState.lockedMultiSelections,
-    editingLinearElementId:
-      (appState as AppState).editingLinearElement?.elementId ?? // prefer app state, as it's likely newer
-      (appState as ObservedAppState).editingLinearElementId ?? // fallback to observed app state, as it's likely older coming from a previous snapshot
-      null,
    selectedLinearElementId:
      (appState as AppState).selectedLinearElement?.elementId ??
      (appState as ObservedAppState).selectedLinearElementId ??
      null,
+    selectedLinearElementIsEditing:
+      (appState as AppState).selectedLinearElement?.isEditing ??
+      (appState as ObservedAppState).selectedLinearElementIsEditing ??
+      null,
  };

  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
@@ -330,7 +330,7 @@ export const shouldShowBoundingBox = (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: InteractiveCanvasAppState,
 ) => {
-  if (appState.editingLinearElement) {
+  if (appState.selectedLinearElement?.isEditing) {
    return false;
  }
  if (elements.length > 1) {
@@ -589,4 +589,424 @@ describe("aligning", () => {
    expect(API.getSelectedElements()[2].x).toEqual(250);
    expect(API.getSelectedElements()[3].x).toEqual(150);
  });
+
+  const createGroupAndSelectInEditGroupMode = () => {
+    UI.clickTool("rectangle");
+    mouse.down();
+    mouse.up(100, 100);
+
+    UI.clickTool("rectangle");
+    mouse.down(0, 0);
+    mouse.up(100, 100);
+
+    // select the first element.
+    // The second rectangle is already reselected because it was the last element created
+    mouse.reset();
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(10, 0);
+      mouse.click();
+    });
+
+    API.executeAction(actionGroup);
+    mouse.reset();
+    mouse.moveTo(10, 0);
+    mouse.doubleClick();
+
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.click();
+      mouse.moveTo(100, 100);
+      mouse.click();
+    });
+  };
+
+  it("aligns elements within a group while in group edit mode correctly to the top", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignTop);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(0);
+  });
+  it("aligns elements within a group while in group edit mode correctly to the bottom", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignBottom);
+
+    expect(API.getSelectedElements()[0].y).toEqual(100);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+  });
+  it("aligns elements within a group while in group edit mode correctly to the left", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignLeft);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(0);
+  });
+  it("aligns elements within a group while in group edit mode correctly to the right", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignRight);
+
+    expect(API.getSelectedElements()[0].x).toEqual(100);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+  });
+  it("aligns elements within a group while in group edit mode correctly to the vertical center", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignVerticallyCentered);
+
+    expect(API.getSelectedElements()[0].y).toEqual(50);
+    expect(API.getSelectedElements()[1].y).toEqual(50);
+  });
+  it("aligns elements within a group while in group edit mode correctly to the horizontal center", () => {
+    createGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignHorizontallyCentered);
+
+    expect(API.getSelectedElements()[0].x).toEqual(50);
+    expect(API.getSelectedElements()[1].x).toEqual(50);
+  });
+
+  const createNestedGroupAndSelectInEditGroupMode = () => {
+    UI.clickTool("rectangle");
+    mouse.down();
+    mouse.up(100, 100);
+
+    UI.clickTool("rectangle");
+    mouse.down(0, 0);
+    mouse.up(100, 100);
+
+    // Select the first element.
+    // The second rectangle is already reselected because it was the last element created
+    mouse.reset();
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(10, 0);
+      mouse.click();
+    });
+
+    API.executeAction(actionGroup);
+
+    mouse.reset();
+    mouse.moveTo(200, 200);
+    // create third element
+    UI.clickTool("rectangle");
+    mouse.down(0, 0);
+    mouse.up(100, 100);
+
+    // third element is already selected, select the initial group and group together
+    mouse.reset();
+
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(10, 0);
+      mouse.click();
+    });
+
+    API.executeAction(actionGroup);
+
+    // double click to enter edit mode
+    mouse.doubleClick();
+
+    // select nested group and other element within the group
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(200, 200);
+      mouse.click();
+    });
+  };
+
+  it("aligns element and nested group while in group edit mode correctly to the top", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignTop);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(0);
+  });
+  it("aligns element and nested group while in group edit mode correctly to the bottom", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignBottom);
+
+    expect(API.getSelectedElements()[0].y).toEqual(100);
+    expect(API.getSelectedElements()[1].y).toEqual(200);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+  });
+  it("aligns element and nested group while in group edit mode correctly to the left", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignLeft);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(0);
+  });
+  it("aligns element and nested group while in group edit mode correctly to the right", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignRight);
+
+    expect(API.getSelectedElements()[0].x).toEqual(100);
+    expect(API.getSelectedElements()[1].x).toEqual(200);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+  });
+  it("aligns element and nested group while in group edit mode correctly to the vertical center", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignVerticallyCentered);
+
+    expect(API.getSelectedElements()[0].y).toEqual(50);
+    expect(API.getSelectedElements()[1].y).toEqual(150);
+    expect(API.getSelectedElements()[2].y).toEqual(100);
+  });
+  it("aligns elements and nested group within a group while in group edit mode correctly to the horizontal center", () => {
+    createNestedGroupAndSelectInEditGroupMode();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignHorizontallyCentered);
+
+    expect(API.getSelectedElements()[0].x).toEqual(50);
+    expect(API.getSelectedElements()[1].x).toEqual(150);
+    expect(API.getSelectedElements()[2].x).toEqual(100);
+  });
+
+  const createAndSelectSingleGroup = () => {
+    UI.clickTool("rectangle");
+    mouse.down();
+    mouse.up(100, 100);
+
+    UI.clickTool("rectangle");
+    mouse.down(0, 0);
+    mouse.up(100, 100);
+
+    // Select the first element.
+    // The second rectangle is already reselected because it was the last element created
+    mouse.reset();
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(10, 0);
+      mouse.click();
+    });
+
+    API.executeAction(actionGroup);
+  };
+
+  it("aligns elements within a single-selected group correctly to the top", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignTop);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(0);
+  });
+  it("aligns elements within a single-selected group correctly to the bottom", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignBottom);
+
+    expect(API.getSelectedElements()[0].y).toEqual(100);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+  });
+  it("aligns elements within a single-selected group correctly to the left", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignLeft);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(0);
+  });
+  it("aligns elements within a single-selected group correctly to the right", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignRight);
+
+    expect(API.getSelectedElements()[0].x).toEqual(100);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+  });
+  it("aligns elements within a single-selected group correctly to the vertical center", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+
+    API.executeAction(actionAlignVerticallyCentered);
+
+    expect(API.getSelectedElements()[0].y).toEqual(50);
+    expect(API.getSelectedElements()[1].y).toEqual(50);
+  });
+  it("aligns elements within a single-selected group correctly to the horizontal center", () => {
+    createAndSelectSingleGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+
+    API.executeAction(actionAlignHorizontallyCentered);
+
+    expect(API.getSelectedElements()[0].x).toEqual(50);
+    expect(API.getSelectedElements()[1].x).toEqual(50);
+  });
+
+  const createAndSelectSingleGroupWithNestedGroup = () => {
+    UI.clickTool("rectangle");
+    mouse.down();
+    mouse.up(100, 100);
+
+    UI.clickTool("rectangle");
+    mouse.down(0, 0);
+    mouse.up(100, 100);
+
+    // Select the first element.
+    // The second rectangle is already reselected because it was the last element created
+    mouse.reset();
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.moveTo(10, 0);
+      mouse.click();
+    });
+
+    API.executeAction(actionGroup);
+
+    mouse.reset();
+    UI.clickTool("rectangle");
+    mouse.down(200, 200);
+    mouse.up(100, 100);
+
+    // Add group to current selection
+    mouse.restorePosition(10, 0);
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.click();
+    });
+
+    // Create the nested group
+    API.executeAction(actionGroup);
+  };
+  it("aligns elements within a single-selected group containing a nested group correctly to the top", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignTop);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(0);
+  });
+  it("aligns elements within a single-selected group containing a nested group correctly to the bottom", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignBottom);
+
+    expect(API.getSelectedElements()[0].y).toEqual(100);
+    expect(API.getSelectedElements()[1].y).toEqual(200);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+  });
+  it("aligns elements within a single-selected group containing a nested group correctly to the left", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignLeft);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(0);
+  });
+  it("aligns elements within a single-selected group containing a nested group correctly to the right", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignRight);
+
+    expect(API.getSelectedElements()[0].x).toEqual(100);
+    expect(API.getSelectedElements()[1].x).toEqual(200);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+  });
+  it("aligns elements within a single-selected group containing a nested group correctly to the vertical center", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(100);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(actionAlignVerticallyCentered);
+
+    expect(API.getSelectedElements()[0].y).toEqual(50);
+    expect(API.getSelectedElements()[1].y).toEqual(150);
+    expect(API.getSelectedElements()[2].y).toEqual(100);
+  });
+  it("aligns elements within a single-selected group containing a nested group correctly to the horizontal center", () => {
+    createAndSelectSingleGroupWithNestedGroup();
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(100);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(actionAlignHorizontallyCentered);
+
+    expect(API.getSelectedElements()[0].x).toEqual(50);
+    expect(API.getSelectedElements()[1].x).toEqual(150);
+    expect(API.getSelectedElements()[2].x).toEqual(100);
+  });
 });
@@ -155,10 +155,10 @@ describe("element binding", () => {
      // NOTE this mouse down/up + await needs to be done in order to repro
      // the issue, due to https://github.com/excalidraw/excalidraw/blob/46bff3daceb602accf60c40a84610797260fca94/src/components/App.tsx#L740
      mouse.reset();
-      expect(h.state.editingLinearElement).not.toBe(null);
+      expect(h.state.selectedLinearElement?.isEditing).toBe(true);
      mouse.down(0, 0);
      await new Promise((r) => setTimeout(r, 100));
-      expect(h.state.editingLinearElement).toBe(null);
+      expect(h.state.selectedLinearElement?.isEditing).toBe(false);
      expect(API.getSelectedElement().type).toBe("rectangle");
      mouse.up();
      expect(API.getSelectedElement().type).toBe("rectangle");
@@ -16,6 +16,7 @@ describe("AppStateDelta", () => {
        editingGroupId: null,
        croppingElementId: null,
        editingLinearElementId: null,
+        selectedLinearElementIsEditing: null,
        lockedMultiSelections: {},
        activeLockedId: null,
      };
@@ -58,6 +59,7 @@ describe("AppStateDelta", () => {
        editingGroupId: null,
        croppingElementId: null,
        selectedLinearElementId: null,
+        selectedLinearElementIsEditing: null,
        editingLinearElementId: null,
        activeLockedId: null,
        lockedMultiSelections: {},
@@ -105,6 +107,7 @@ describe("AppStateDelta", () => {
        editingGroupId: null,
        croppingElementId: null,
        selectedLinearElementId: null,
+        selectedLinearElementIsEditing: null,
        editingLinearElementId: null,
        activeLockedId: null,
        lockedMultiSelections: {},
@@ -0,0 +1,128 @@
+import {
+  distributeHorizontally,
+  distributeVertically,
+} from "@excalidraw/excalidraw/actions";
+import { defaultLang, setLanguage } from "@excalidraw/excalidraw/i18n";
+import { Excalidraw } from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
+import {
+  act,
+  unmountComponent,
+  render,
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+const mouse = new Pointer("mouse");
+
+// Scenario: three rectangles that will be distributed with gaps
+const createAndSelectThreeRectanglesWithGap = () => {
+  UI.clickTool("rectangle");
+  mouse.down();
+  mouse.up(100, 100);
+  mouse.reset();
+
+  UI.clickTool("rectangle");
+  mouse.down(10, 10);
+  mouse.up(100, 100);
+  mouse.reset();
+
+  UI.clickTool("rectangle");
+  mouse.down(300, 300);
+  mouse.up(100, 100);
+  mouse.reset();
+
+  // Last rectangle is selected by default
+  Keyboard.withModifierKeys({ shift: true }, () => {
+    mouse.click(0, 10);
+    mouse.click(10, 0);
+  });
+};
+
+// Scenario: three rectangles that will be distributed by their centers
+const createAndSelectThreeRectanglesWithoutGap = () => {
+  UI.clickTool("rectangle");
+  mouse.down();
+  mouse.up(100, 100);
+  mouse.reset();
+
+  UI.clickTool("rectangle");
+  mouse.down(10, 10);
+  mouse.up(200, 200);
+  mouse.reset();
+
+  UI.clickTool("rectangle");
+  mouse.down(200, 200);
+  mouse.up(100, 100);
+  mouse.reset();
+
+  // Last rectangle is selected by default
+  Keyboard.withModifierKeys({ shift: true }, () => {
+    mouse.click(0, 10);
+    mouse.click(10, 0);
+  });
+};
+
+describe("distributing", () => {
+  beforeEach(async () => {
+    unmountComponent();
+    mouse.reset();
+
+    await act(() => {
+      return setLanguage(defaultLang);
+    });
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+  });
+
+  it("should distribute selected elements horizontally", async () => {
+    createAndSelectThreeRectanglesWithGap();
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(10);
+    expect(API.getSelectedElements()[2].x).toEqual(300);
+
+    API.executeAction(distributeHorizontally);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(150);
+    expect(API.getSelectedElements()[2].x).toEqual(300);
+  });
+
+  it("should distribute selected elements vertically", async () => {
+    createAndSelectThreeRectanglesWithGap();
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(10);
+    expect(API.getSelectedElements()[2].y).toEqual(300);
+
+    API.executeAction(distributeVertically);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(150);
+    expect(API.getSelectedElements()[2].y).toEqual(300);
+  });
+
+  it("should distribute selected elements horizontally based on their centers", async () => {
+    createAndSelectThreeRectanglesWithoutGap();
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(10);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+
+    API.executeAction(distributeHorizontally);
+
+    expect(API.getSelectedElements()[0].x).toEqual(0);
+    expect(API.getSelectedElements()[1].x).toEqual(50);
+    expect(API.getSelectedElements()[2].x).toEqual(200);
+  });
+
+  it("should distribute selected elements vertically with based on their centers", async () => {
+    createAndSelectThreeRectanglesWithoutGap();
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(10);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+
+    API.executeAction(distributeVertically);
+
+    expect(API.getSelectedElements()[0].y).toEqual(0);
+    expect(API.getSelectedElements()[1].y).toEqual(50);
+    expect(API.getSelectedElements()[2].y).toEqual(200);
+  });
+});
@@ -0,0 +1,153 @@
+import { getEmbedLink } from "../src/embeddable";
+
+describe("YouTube timestamp parsing", () => {
+  it("should parse YouTube URLs with timestamp in seconds", () => {
+    const testCases = [
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=90",
+        expectedStart: 90,
+      },
+      {
+        url: "https://youtu.be/dQw4w9WgXcQ?t=120",
+        expectedStart: 120,
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&start=150",
+        expectedStart: 150,
+      },
+    ];
+
+    testCases.forEach(({ url, expectedStart }) => {
+      const result = getEmbedLink(url);
+      expect(result).toBeTruthy();
+      expect(result?.type).toBe("video");
+      if (result?.type === "video" || result?.type === "generic") {
+        expect(result.link).toContain(`start=${expectedStart}`);
+      }
+    });
+  });
+
+  it("should parse YouTube URLs with timestamp in time format", () => {
+    const testCases = [
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=1m30s",
+        expectedStart: 90, // 1*60 + 30
+      },
+      {
+        url: "https://youtu.be/dQw4w9WgXcQ?t=2m45s",
+        expectedStart: 165, // 2*60 + 45
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=1h2m3s",
+        expectedStart: 3723, // 1*3600 + 2*60 + 3
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=45s",
+        expectedStart: 45,
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=5m",
+        expectedStart: 300, // 5*60
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=2h",
+        expectedStart: 7200, // 2*3600
+      },
+    ];
+
+    testCases.forEach(({ url, expectedStart }) => {
+      const result = getEmbedLink(url);
+      expect(result).toBeTruthy();
+      expect(result?.type).toBe("video");
+      if (result?.type === "video" || result?.type === "generic") {
+        expect(result.link).toContain(`start=${expectedStart}`);
+      }
+    });
+  });
+
+  it("should handle YouTube URLs without timestamps", () => {
+    const testCases = [
+      "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      "https://youtu.be/dQw4w9WgXcQ",
+      "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    ];
+
+    testCases.forEach((url) => {
+      const result = getEmbedLink(url);
+      expect(result).toBeTruthy();
+      expect(result?.type).toBe("video");
+      if (result?.type === "video" || result?.type === "generic") {
+        expect(result.link).not.toContain("start=");
+      }
+    });
+  });
+
+  it("should handle YouTube shorts URLs with timestamps", () => {
+    const url = "https://www.youtube.com/shorts/dQw4w9WgXcQ?t=30";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toContain("start=30");
+    }
+    // Shorts should have portrait aspect ratio
+    expect(result?.intrinsicSize).toEqual({ w: 315, h: 560 });
+  });
+
+  it("should handle playlist URLs with timestamps", () => {
+    const url =
+      "https://www.youtube.com/playlist?list=PLrAXtmRdnEQy1KbG5lbfgQ0-PKQY6FKYZ&t=60";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toContain("start=60");
+      expect(result.link).toContain("list=PLrAXtmRdnEQy1KbG5lbfgQ0-PKQY6FKYZ");
+    }
+  });
+
+  it("should handle malformed or edge case timestamps", () => {
+    const testCases = [
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=abc",
+        expectedStart: 0, // Invalid timestamp should default to 0
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=",
+        expectedStart: 0, // Empty timestamp should default to 0
+      },
+      {
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=0",
+        expectedStart: 0, // Zero timestamp should be handled
+      },
+    ];
+
+    testCases.forEach(({ url, expectedStart }) => {
+      const result = getEmbedLink(url);
+      expect(result).toBeTruthy();
+      expect(result?.type).toBe("video");
+      if (result?.type === "video" || result?.type === "generic") {
+        if (expectedStart === 0) {
+          expect(result.link).not.toContain("start=");
+        } else {
+          expect(result.link).toContain(`start=${expectedStart}`);
+        }
+      }
+    });
+  });
+
+  it("should preserve other URL parameters", () => {
+    const url =
+      "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=90&feature=youtu.be&list=PLtest";
+    const result = getEmbedLink(url);
+
+    expect(result).toBeTruthy();
+    expect(result?.type).toBe("video");
+    if (result?.type === "video" || result?.type === "generic") {
+      expect(result.link).toContain("start=90");
+      expect(result.link).toContain("enablejsapi=1");
+    }
+  });
+});
@@ -136,7 +136,8 @@ describe("Test Linear Elements", () => {
    Keyboard.withModifierKeys({ ctrl: true }, () => {
      Keyboard.keyPress(KEYS.ENTER);
    });
-    expect(h.state.editingLinearElement?.elementId).toEqual(line.id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(line.id);
  };

  const drag = (startPoint: GlobalPoint, endPoint: GlobalPoint) => {
@@ -253,75 +254,82 @@ describe("Test Linear Elements", () => {
    });
    fireEvent.click(queryByText(contextMenu as HTMLElement, "Edit line")!);

-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should enter line editor via enter (line)", () => {
    createTwoPointerLinearElement("line");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    mouse.clickAt(midpoint[0], midpoint[1]);
    Keyboard.keyPress(KEYS.ENTER);
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  // ctrl+enter alias (to align with arrows)
  it("should enter line editor via ctrl+enter (line)", () => {
    createTwoPointerLinearElement("line");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    mouse.clickAt(midpoint[0], midpoint[1]);
    Keyboard.withModifierKeys({ ctrl: true }, () => {
      Keyboard.keyPress(KEYS.ENTER);
    });
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should enter line editor via ctrl+enter (arrow)", () => {
    createTwoPointerLinearElement("arrow");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    mouse.clickAt(midpoint[0], midpoint[1]);
    Keyboard.withModifierKeys({ ctrl: true }, () => {
      Keyboard.keyPress(KEYS.ENTER);
    });
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should enter line editor on ctrl+dblclick (simple arrow)", () => {
    createTwoPointerLinearElement("arrow");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    Keyboard.withModifierKeys({ ctrl: true }, () => {
      mouse.doubleClick();
    });
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should enter line editor on ctrl+dblclick (line)", () => {
    createTwoPointerLinearElement("line");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    Keyboard.withModifierKeys({ ctrl: true }, () => {
      mouse.doubleClick();
    });
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should enter line editor on dblclick (line)", () => {
    createTwoPointerLinearElement("line");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    mouse.doubleClick();
-    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
  });

  it("should not enter line editor on dblclick (arrow)", async () => {
    createTwoPointerLinearElement("arrow");
-    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+    expect(h.state.selectedLinearElement?.isEditing).toBe(false);

    mouse.doubleClick();
-    expect(h.state.editingLinearElement).toEqual(null);
+    expect(h.state.selectedLinearElement).toBe(null);
    await getTextEditor();
  });

@@ -330,10 +338,12 @@ describe("Test Linear Elements", () => {
    const arrow = h.elements[0] as ExcalidrawLinearElement;
    enterLineEditingMode(arrow);

-    expect(h.state.editingLinearElement?.elementId).toEqual(arrow.id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(arrow.id);

    mouse.doubleClick();
-    expect(h.state.editingLinearElement?.elementId).toEqual(arrow.id);
+    expect(h.state.selectedLinearElement?.isEditing).toBe(true);
+    expect(h.state.selectedLinearElement?.elementId).toEqual(arrow.id);
    expect(h.elements.length).toEqual(1);

    expect(document.querySelector(TEXT_EDITOR_SELECTOR)).toBe(null);
@@ -367,7 +377,7 @@ describe("Test Linear Elements", () => {
      // drag line from midpoint
      drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `12`,
+        `11`,
      );
      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);

@@ -469,7 +479,7 @@ describe("Test Linear Elements", () => {
      drag(startPoint, endPoint);

      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-        `12`,
+        `11`,
      );
      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);

@@ -537,7 +547,7 @@ describe("Test Linear Elements", () => {
        );

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `16`,
+          `14`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);

@@ -588,7 +598,7 @@ describe("Test Linear Elements", () => {
        drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);

@@ -629,7 +639,7 @@ describe("Test Linear Elements", () => {
        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);

@@ -677,7 +687,7 @@ describe("Test Linear Elements", () => {
        deletePoint(points[2]);
        expect(line.points.length).toEqual(3);
        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `18`,
+          `17`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);

@@ -735,7 +745,7 @@ describe("Test Linear Elements", () => {
          ),
        );
        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `16`,
+          `14`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
        expect(line.points.length).toEqual(5);
@@ -833,7 +843,7 @@ describe("Test Linear Elements", () => {
        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
-          `12`,
+          `11`,
        );
        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);