refactor: packages/

3 files changed, 1594 insertions, 0 deletions

diff --git a/packages/excalidraw/tests/data/__snapshots__/restore.test.ts.snap b/packages/excalidraw/tests/data/__snapshots__/restore.test.ts.snap
new file mode 100644
index 0000000..7dd0c01
--- /dev/null
+++ b/packages/excalidraw/tests/data/__snapshots__/restore.test.ts.snap
@@ -0,0 +1,397 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`restoreElements > should restore arrow element correctly 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "customData": undefined,
+  "elbowed": false,
+  "endArrowhead": null,
+  "endBinding": null,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-arrow01",
+  "index": "a0",
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      100,
+      100,
+    ],
+  ],
+  "roughness": 1,
+  "roundness": {
+    "type": 2,
+  },
+  "seed": Any<Number>,
+  "startArrowhead": null,
+  "startBinding": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "arrow",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`restoreElements > should restore correctly with rectangle, ellipse and diamond elements 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "blue",
+  "boundElements": [],
+  "customData": undefined,
+  "fillStyle": "cross-hatch",
+  "frameId": null,
+  "groupIds": [
+    "1",
+    "2",
+    "3",
+  ],
+  "height": 200,
+  "id": "1",
+  "index": "a0",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 10,
+  "roughness": 2,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "strokeColor": "red",
+  "strokeStyle": "dashed",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 10,
+  "y": 20,
+}
+`;
+
+exports[`restoreElements > should restore correctly with rectangle, ellipse and diamond elements 2`] = `
+{
+  "angle": 0,
+  "backgroundColor": "blue",
+  "boundElements": [],
+  "customData": undefined,
+  "fillStyle": "cross-hatch",
+  "frameId": null,
+  "groupIds": [
+    "1",
+    "2",
+    "3",
+  ],
+  "height": 200,
+  "id": "2",
+  "index": "a1",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 10,
+  "roughness": 2,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "strokeColor": "red",
+  "strokeStyle": "dashed",
+  "strokeWidth": 2,
+  "type": "ellipse",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 10,
+  "y": 20,
+}
+`;
+
+exports[`restoreElements > should restore correctly with rectangle, ellipse and diamond elements 3`] = `
+{
+  "angle": 0,
+  "backgroundColor": "blue",
+  "boundElements": [],
+  "customData": undefined,
+  "fillStyle": "cross-hatch",
+  "frameId": null,
+  "groupIds": [
+    "1",
+    "2",
+    "3",
+  ],
+  "height": 200,
+  "id": "3",
+  "index": "a2",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 10,
+  "roughness": 2,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "strokeColor": "red",
+  "strokeStyle": "dashed",
+  "strokeWidth": 2,
+  "type": "diamond",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 10,
+  "y": 20,
+}
+`;
+
+exports[`restoreElements > should restore freedraw element correctly 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-freedraw01",
+  "index": "a0",
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      10,
+      10,
+    ],
+  ],
+  "pressures": [],
+  "roughness": 1,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "simulatePressure": true,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "freedraw",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`restoreElements > should restore line and draw elements correctly 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "customData": undefined,
+  "endArrowhead": null,
+  "endBinding": null,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-line01",
+  "index": "a0",
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      100,
+      100,
+    ],
+  ],
+  "roughness": 1,
+  "roundness": {
+    "type": 2,
+  },
+  "seed": Any<Number>,
+  "startArrowhead": null,
+  "startBinding": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "line",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`restoreElements > should restore line and draw elements correctly 2`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "customData": undefined,
+  "endArrowhead": null,
+  "endBinding": null,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-draw01",
+  "index": "a1",
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      100,
+      100,
+    ],
+  ],
+  "roughness": 1,
+  "roundness": {
+    "type": 2,
+  },
+  "seed": Any<Number>,
+  "startArrowhead": null,
+  "startBinding": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "line",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`restoreElements > should restore text element correctly passing value for each attribute 1`] = `
+{
+  "angle": 0,
+  "autoResize": true,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "containerId": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "fontFamily": 1,
+  "fontSize": 14,
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-text01",
+  "index": "a0",
+  "isDeleted": false,
+  "lineHeight": "1.25000",
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "originalText": "text",
+  "roughness": 1,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "text": "text",
+  "textAlign": "center",
+  "type": "text",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "verticalAlign": "middle",
+  "width": 100,
+  "x": -20,
+  "y": "-8.75000",
+}
+`;
+
+exports[`restoreElements > should restore text element correctly with unknown font family, null text and undefined alignment 1`] = `
+{
+  "angle": 0,
+  "autoResize": true,
+  "backgroundColor": "transparent",
+  "boundElements": [],
+  "containerId": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "font": "10 unknown",
+  "fontFamily": 5,
+  "fontSize": 10,
+  "frameId": null,
+  "groupIds": [],
+  "height": 100,
+  "id": "id-text01",
+  "index": "a0",
+  "isDeleted": true,
+  "lineHeight": "1.25000",
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "originalText": "",
+  "roughness": 1,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": Any<Number>,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "text": "",
+  "textAlign": "left",
+  "type": "text",
+  "updated": 1,
+  "version": 3,
+  "versionNonce": Any<Number>,
+  "verticalAlign": "top",
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
diff --git a/packages/excalidraw/tests/data/reconcile.test.ts b/packages/excalidraw/tests/data/reconcile.test.ts
new file mode 100644
index 0000000..f0e8105
--- /dev/null
+++ b/packages/excalidraw/tests/data/reconcile.test.ts
@@ -0,0 +1,382 @@
+import type { RemoteExcalidrawElement } from "../../data/reconcile";
+import { reconcileElements } from "../../data/reconcile";
+import type {
+  ExcalidrawElement,
+  OrderedExcalidrawElement,
+} from "../../element/types";
+import { syncInvalidIndices } from "../../fractionalIndex";
+import { randomInteger } from "../../random";
+import type { AppState } from "../../types";
+import { cloneJSON } from "../../utils";
+
+type Id = string;
+type ElementLike = {
+  id: string;
+  version: number;
+  versionNonce: number;
+  index: string;
+};
+
+type Cache = Record<string, ExcalidrawElement | undefined>;
+
+const createElement = (opts: { uid: string } | ElementLike) => {
+  let uid: string;
+  let id: string;
+  let version: number | null;
+  let versionNonce: number | null = null;
+  if ("uid" in opts) {
+    const match = opts.uid.match(/^(\w+)(?::(\d+))?$/)!;
+    id = match[1];
+    version = match[2] ? parseInt(match[2]) : null;
+    uid = version ? `${id}:${version}` : id;
+  } else {
+    ({ id, version, versionNonce } = opts);
+    uid = id;
+  }
+  return {
+    uid,
+    id,
+    version,
+    versionNonce: versionNonce || randomInteger(),
+  };
+};
+
+const idsToElements = (ids: (Id | ElementLike)[], cache: Cache = {}) => {
+  return syncInvalidIndices(
+    ids.reduce((acc, _uid) => {
+      const { uid, id, version, versionNonce } = createElement(
+        typeof _uid === "string" ? { uid: _uid } : _uid,
+      );
+      const cached = cache[uid];
+      const elem = {
+        id,
+        version: version ?? 0,
+        versionNonce,
+        ...cached,
+      } as ExcalidrawElement;
+      // @ts-ignore
+      cache[uid] = elem;
+      acc.push(elem);
+      return acc;
+    }, [] as ExcalidrawElement[]),
+  );
+};
+
+const test = <U extends `${string}:${"L" | "R"}`>(
+  local: (Id | ElementLike)[],
+  remote: (Id | ElementLike)[],
+  target: U[],
+) => {
+  const cache: Cache = {};
+  const _local = idsToElements(local, cache);
+  const _remote = idsToElements(remote, cache);
+
+  const reconciled = reconcileElements(
+    cloneJSON(_local),
+    cloneJSON(_remote) as RemoteExcalidrawElement[],
+    {} as AppState,
+  );
+
+  const reconciledIds = reconciled.map((x) => x.id);
+  const reconciledIndices = reconciled.map((x) => x.index);
+
+  expect(target.length).toEqual(reconciled.length);
+  expect(reconciledIndices.length).toEqual(
+    new Set([...reconciledIndices]).size,
+  ); // expect no duplicated indices
+  assert.deepEqual(
+    reconciledIds,
+    target.map((uid) => {
+      const [, id, source] = uid.match(/^(\w+):([LR])$/)!;
+      const element = (source === "L" ? _local : _remote).find(
+        (e) => e.id === id,
+      )!;
+
+      return element.id;
+    }),
+    "remote reconciliation",
+  );
+
+  // convergent reconciliation on the remote client
+  try {
+    assert.deepEqual(
+      reconcileElements(
+        cloneJSON(_remote),
+        cloneJSON(_local as RemoteExcalidrawElement[]),
+        {} as AppState,
+      ).map((x) => x.id),
+      reconciledIds,
+      "convergent reconciliation",
+    );
+  } catch (error: any) {
+    console.error("local original", _remote);
+    console.error("remote original", _local);
+    throw error;
+  }
+
+  // bidirectional re-reconciliation on remote client
+  try {
+    assert.deepEqual(
+      reconcileElements(
+        cloneJSON(_remote),
+        cloneJSON(reconciled as unknown as RemoteExcalidrawElement[]),
+        {} as AppState,
+      ).map((x) => x.id),
+      reconciledIds,
+      "local re-reconciliation",
+    );
+  } catch (error: any) {
+    console.error("local original", _remote);
+    console.error("remote reconciled", reconciled);
+    throw error;
+  }
+};
+
+describe("elements reconciliation", () => {
+  it("reconcileElements()", () => {
+    // -------------------------------------------------------------------------
+    //
+    // in following tests, we pass:
+    //  (1) an array of local elements and their version (:1, :2...)
+    //  (2) an array of remote elements and their version (:1, :2...)
+    //  (3) expected reconciled elements
+    //
+    // in the reconciled array:
+    //  :L means local element was resolved
+    //  :R means remote element was resolved
+    //
+    // if versions are missing, it defaults to version 0
+    // -------------------------------------------------------------------------
+
+    test(["A:1", "B:1", "C:1"], ["B:2"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "B:1", "C"], ["B:2", "A:2"], ["B:R", "A:R", "C:L"]);
+    test(["A:2", "B:1", "C"], ["B:2", "A:1"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "C:1"], ["B:1"], ["A:L", "B:R", "C:L"]);
+    test(["A", "B"], ["A:1"], ["A:R", "B:L"]);
+    test(["A"], ["A", "B"], ["A:L", "B:R"]);
+    test(["A"], ["A:1", "B"], ["A:R", "B:R"]);
+    test(["A:2"], ["A:1", "B"], ["A:L", "B:R"]);
+    test(["A:2"], ["B", "A:1"], ["A:L", "B:R"]);
+    test(["A:1"], ["B", "A:2"], ["B:R", "A:R"]);
+    test(["A"], ["A:1"], ["A:R"]);
+    test(["A", "B:1", "D"], ["B", "C:2", "A"], ["C:R", "A:R", "B:L", "D:L"]);
+
+    // some of the following tests are kinda arbitrary and they're less
+    // likely to happen in real-world cases
+    test(["A", "B"], ["B:1", "A:1"], ["B:R", "A:R"]);
+    test(["A:2", "B:2"], ["B:1", "A:1"], ["A:L", "B:L"]);
+    test(["A", "B", "C"], ["A", "B:2", "G", "C"], ["A:L", "B:R", "G:R", "C:L"]);
+    test(["A", "B", "C"], ["A", "B:2", "G"], ["A:R", "B:R", "C:L", "G:R"]);
+    test(
+      ["A:2", "B:2", "C"],
+      ["D", "B:1", "A:3"],
+      ["D:R", "B:L", "A:R", "C:L"],
+    );
+    test(
+      ["A:2", "B:2", "C"],
+      ["D", "B:2", "A:3", "C"],
+      ["D:R", "B:L", "A:R", "C:L"],
+    );
+    test(
+      ["A", "B", "C", "D", "E", "F"],
+      ["A", "B:2", "X", "E:2", "F", "Y"],
+      ["A:L", "B:R", "X:R", "C:L", "E:R", "D:L", "F:L", "Y:R"],
+    );
+
+    // fractional elements (previously annotated)
+    test(
+      ["A", "B", "C"],
+      ["A", "B", "X", "Y", "Z"],
+      ["A:R", "B:R", "C:L", "X:R", "Y:R", "Z:R"],
+    );
+
+    test(["A"], ["X", "Y"], ["A:L", "X:R", "Y:R"]);
+    test(["A"], ["X", "Y", "Z"], ["A:L", "X:R", "Y:R", "Z:R"]);
+    test(["A", "B"], ["C", "D", "F"], ["A:L", "C:R", "B:L", "D:R", "F:R"]);
+
+    test(
+      ["A", "B", "C", "D"],
+      ["C:1", "B", "D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+    test(
+      ["A", "B", "C"],
+      ["X", "A", "Y", "B", "Z"],
+      ["X:R", "A:R", "Y:R", "B:L", "C:L", "Z:R"],
+    );
+    test(
+      ["B", "A", "C"],
+      ["X", "A", "Y", "B", "Z"],
+      ["X:R", "A:R", "C:L", "Y:R", "B:R", "Z:R"],
+    );
+    test(["A", "B"], ["A", "X", "Y"], ["A:R", "B:L", "X:R", "Y:R"]);
+    test(
+      ["A", "B", "C", "D", "E"],
+      ["A", "X", "C", "Y", "D", "Z"],
+      ["A:R", "B:L", "X:R", "C:R", "Y:R", "D:R", "E:L", "Z:R"],
+    );
+    test(
+      ["X", "Y", "Z"],
+      ["A", "B", "C"],
+      ["A:R", "X:L", "B:R", "Y:L", "C:R", "Z:L"],
+    );
+    test(
+      ["X", "Y", "Z"],
+      ["A", "B", "C", "X", "D", "Y", "Z"],
+      ["A:R", "B:R", "C:R", "X:L", "D:R", "Y:L", "Z:L"],
+    );
+    test(
+      ["A", "B", "C", "D", "E"],
+      ["C", "X", "A", "Y", "D", "E:1"],
+      ["B:L", "C:L", "X:R", "A:R", "Y:R", "D:R", "E:R"],
+    );
+    test(
+      ["C:1", "B", "D:1"],
+      ["A", "B", "C:1", "D:1"],
+      ["A:R", "B:R", "C:R", "D:R"],
+    );
+
+    test(
+      ["C:1", "B", "D:1"],
+      ["A", "B", "C:2", "D:1"],
+      ["A:R", "B:L", "C:R", "D:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["A", "C:1", "B", "D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["C", "X", "B", "Y", "A", "Z"],
+      ["C:R", "D:L", "X:R", "B:R", "Y:R", "A:R", "Z:R"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["A", "B:1", "C:1"],
+      ["A:R", "B:R", "C:R", "D:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["A", "C:1", "B:1"],
+      ["A:R", "C:R", "B:R", "D:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["A", "C:1", "B", "D:1"],
+      ["A:R", "C:R", "B:R", "D:R"],
+    );
+
+    test(["A:1", "B:1", "C"], ["B:2"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "B:1", "C"], ["B:2", "C:2"], ["A:L", "B:R", "C:R"]);
+    test(["A", "B"], ["A", "C", "B", "D"], ["A:R", "C:R", "B:R", "D:R"]);
+    test(["A", "B"], ["B", "C", "D"], ["A:L", "B:R", "C:R", "D:R"]);
+    test(["A", "B"], ["C", "D"], ["A:L", "C:R", "B:L", "D:R"]);
+    test(["A", "B"], ["A", "B:1"], ["A:L", "B:R"]);
+    test(["A:2", "B"], ["A", "B:1"], ["A:L", "B:R"]);
+    test(["A:2", "B:2"], ["B:1"], ["A:L", "B:L"]);
+    test(["A:2", "B:2"], ["B:1", "C"], ["A:L", "B:L", "C:R"]);
+    test(["A:2", "B:2"], ["A", "C", "B:1"], ["A:L", "B:L", "C:R"]);
+
+    // concurrent convergency
+    test(["A", "B", "C"], ["A", "B", "D"], ["A:R", "B:R", "C:L", "D:R"]);
+    test(["A", "B", "E"], ["A", "B", "D"], ["A:R", "B:R", "D:R", "E:L"]);
+    test(
+      ["A", "B", "C"],
+      ["A", "B", "D", "E"],
+      ["A:R", "B:R", "C:L", "D:R", "E:R"],
+    );
+    test(
+      ["A", "B", "E"],
+      ["A", "B", "D", "C"],
+      ["A:R", "B:R", "D:R", "E:L", "C:R"],
+    );
+    test(["A", "B"], ["B", "D"], ["A:L", "B:R", "D:R"]);
+    test(["C", "A", "B"], ["C", "B", "D"], ["C:R", "A:L", "B:R", "D:R"]);
+  });
+
+  it("test identical elements reconciliation", () => {
+    const testIdentical = (
+      local: ElementLike[],
+      remote: ElementLike[],
+      expected: Id[],
+    ) => {
+      const ret = reconcileElements(
+        local as unknown as OrderedExcalidrawElement[],
+        remote as unknown as RemoteExcalidrawElement[],
+        {} as AppState,
+      );
+
+      if (new Set(ret.map((x) => x.id)).size !== ret.length) {
+        throw new Error("reconcileElements: duplicate elements found");
+      }
+
+      assert.deepEqual(
+        ret.map((x) => x.id),
+        expected,
+      );
+    };
+
+    // identical id/version/versionNonce/index
+    // -------------------------------------------------------------------------
+
+    testIdentical(
+      [{ id: "A", version: 1, versionNonce: 1, index: "a0" }],
+      [{ id: "A", version: 1, versionNonce: 1, index: "a0" }],
+      ["A"],
+    );
+    testIdentical(
+      [
+        { id: "A", version: 1, versionNonce: 1, index: "a0" },
+        { id: "B", version: 1, versionNonce: 1, index: "a0" },
+      ],
+      [
+        { id: "B", version: 1, versionNonce: 1, index: "a0" },
+        { id: "A", version: 1, versionNonce: 1, index: "a0" },
+      ],
+      ["A", "B"],
+    );
+
+    // actually identical (arrays and element objects)
+    // -------------------------------------------------------------------------
+
+    const elements1 = [
+      {
+        id: "A",
+        version: 1,
+        versionNonce: 1,
+        index: "a0",
+      },
+      {
+        id: "B",
+        version: 1,
+        versionNonce: 1,
+        index: "a0",
+      },
+    ];
+
+    testIdentical(elements1, elements1, ["A", "B"]);
+    testIdentical(elements1, elements1.slice(), ["A", "B"]);
+    testIdentical(elements1.slice(), elements1, ["A", "B"]);
+    testIdentical(elements1.slice(), elements1.slice(), ["A", "B"]);
+
+    const el1 = {
+      id: "A",
+      version: 1,
+      versionNonce: 1,
+      index: "a0",
+    };
+    const el2 = {
+      id: "B",
+      version: 1,
+      versionNonce: 1,
+      index: "a0",
+    };
+    testIdentical([el1, el2], [el2, el1], ["A", "B"]);
+  });
+});
diff --git a/packages/excalidraw/tests/data/restore.test.ts b/packages/excalidraw/tests/data/restore.test.ts
new file mode 100644
index 0000000..37a27ac
--- /dev/null
+++ b/packages/excalidraw/tests/data/restore.test.ts
@@ -0,0 +1,815 @@
+import * as restore from "../../data/restore";
+import type {
+  ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+} from "../../element/types";
+import * as sizeHelpers from "../../element/sizeHelpers";
+import { API } from "../helpers/api";
+import { getDefaultAppState } from "../../appState";
+import type { ImportedDataState } from "../../data/types";
+import type { NormalizedZoomValue } from "../../types";
+import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "../../constants";
+import { newElementWith } from "../../element/mutateElement";
+import { vi } from "vitest";
+import { pointFrom } from "@excalidraw/math";
+
+describe("restoreElements", () => {
+  const mockSizeHelper = vi.spyOn(sizeHelpers, "isInvisiblySmallElement");
+
+  beforeEach(() => {
+    mockSizeHelper.mockReset();
+  });
+
+  afterAll(() => {
+    mockSizeHelper.mockRestore();
+  });
+
+  it("should return empty array when element is null", () => {
+    expect(restore.restoreElements(null, null)).toStrictEqual([]);
+  });
+
+  it("should not call isInvisiblySmallElement when element is a selection element", () => {
+    const selectionEl = { type: "selection" } as ExcalidrawElement;
+    const restoreElements = restore.restoreElements([selectionEl], null);
+    expect(restoreElements.length).toBe(0);
+    expect(sizeHelpers.isInvisiblySmallElement).toBeCalledTimes(0);
+  });
+
+  it("should return empty array when input type is not supported", () => {
+    const dummyNotSupportedElement: any = API.createElement({
+      type: "text",
+    });
+
+    dummyNotSupportedElement.type = "not supported";
+    expect(
+      restore.restoreElements([dummyNotSupportedElement], null).length,
+    ).toBe(0);
+  });
+
+  it("should return empty array when isInvisiblySmallElement is true", () => {
+    const rectElement = API.createElement({ type: "rectangle" });
+    mockSizeHelper.mockImplementation(() => true);
+
+    expect(restore.restoreElements([rectElement], null).length).toBe(0);
+  });
+
+  it("should restore text element correctly passing value for each attribute", () => {
+    const textElement = API.createElement({
+      type: "text",
+      fontSize: 14,
+      fontFamily: FONT_FAMILY.Virgil,
+      text: "text",
+      textAlign: "center",
+      verticalAlign: "middle",
+      id: "id-text01",
+    });
+
+    const restoredText = restore.restoreElements(
+      [textElement],
+      null,
+    )[0] as ExcalidrawTextElement;
+
+    expect(restoredText).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it("should restore text element correctly with unknown font family, null text and undefined alignment", () => {
+    const textElement: any = API.createElement({
+      type: "text",
+      textAlign: undefined,
+      verticalAlign: undefined,
+      id: "id-text01",
+    });
+
+    textElement.text = null;
+    textElement.font = "10 unknown";
+
+    expect(textElement.isDeleted).toBe(false);
+    const restoredText = restore.restoreElements(
+      [textElement],
+      null,
+    )[0] as ExcalidrawTextElement;
+    expect(restoredText.isDeleted).toBe(true);
+    expect(restoredText).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it("should restore freedraw element correctly", () => {
+    const freedrawElement = API.createElement({
+      type: "freedraw",
+      id: "id-freedraw01",
+      points: [pointFrom(0, 0), pointFrom(10, 10)],
+    });
+
+    const restoredFreedraw = restore.restoreElements(
+      [freedrawElement],
+      null,
+    )[0] as ExcalidrawFreeDrawElement;
+
+    expect(restoredFreedraw).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it("should restore line and draw elements correctly", () => {
+    const lineElement = API.createElement({ type: "line", id: "id-line01" });
+
+    const drawElement: any = API.createElement({
+      type: "line",
+      id: "id-draw01",
+    });
+    drawElement.type = "draw";
+
+    const restoredElements = restore.restoreElements(
+      [lineElement, drawElement],
+      null,
+    );
+
+    const restoredLine = restoredElements[0] as ExcalidrawLinearElement;
+    const restoredDraw = restoredElements[1] as ExcalidrawLinearElement;
+
+    expect(restoredLine).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+    expect(restoredDraw).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it("should restore arrow element correctly", () => {
+    const arrowElement = API.createElement({ type: "arrow", id: "id-arrow01" });
+
+    const restoredElements = restore.restoreElements([arrowElement], null);
+
+    const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
+
+    expect(restoredArrow).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is null', () => {
+    const arrowElement = API.createElement({ type: "arrow" });
+    const restoredElements = restore.restoreElements([arrowElement], null);
+
+    const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
+
+    expect(arrowElement.endArrowhead).toBe(restoredArrow.endArrowhead);
+  });
+
+  it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is undefined', () => {
+    const arrowElement = API.createElement({ type: "arrow" });
+    Object.defineProperty(arrowElement, "endArrowhead", {
+      get: vi.fn(() => undefined),
+    });
+
+    const restoredElements = restore.restoreElements([arrowElement], null);
+
+    const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
+
+    expect(restoredArrow.endArrowhead).toBe("arrow");
+  });
+
+  it("when element.points of a line element is not an array", () => {
+    const lineElement: any = API.createElement({
+      type: "line",
+      width: 100,
+      height: 200,
+    });
+
+    lineElement.points = "not an array";
+
+    const expectedLinePoints = [
+      [0, 0],
+      [lineElement.width, lineElement.height],
+    ];
+
+    const restoredLine = restore.restoreElements(
+      [lineElement],
+      null,
+    )[0] as ExcalidrawLinearElement;
+
+    expect(restoredLine.points).toMatchObject(expectedLinePoints);
+  });
+
+  it("when the number of points of a line is greater or equal 2", () => {
+    const lineElement_0 = API.createElement({
+      type: "line",
+      width: 100,
+      height: 200,
+      x: 10,
+      y: 20,
+    });
+    const lineElement_1 = API.createElement({
+      type: "line",
+      width: 200,
+      height: 400,
+      x: 30,
+      y: 40,
+    });
+
+    const pointsEl_0 = [
+      [0, 0],
+      [1, 1],
+    ];
+    Object.defineProperty(lineElement_0, "points", {
+      get: vi.fn(() => pointsEl_0),
+    });
+
+    const pointsEl_1 = [
+      [3, 4],
+      [5, 6],
+    ];
+    Object.defineProperty(lineElement_1, "points", {
+      get: vi.fn(() => pointsEl_1),
+    });
+
+    const restoredElements = restore.restoreElements(
+      [lineElement_0, lineElement_1],
+      null,
+    );
+
+    const restoredLine_0 = restoredElements[0] as ExcalidrawLinearElement;
+    const restoredLine_1 = restoredElements[1] as ExcalidrawLinearElement;
+
+    expect(restoredLine_0.points).toMatchObject(pointsEl_0);
+
+    const offsetX = pointsEl_1[0][0];
+    const offsetY = pointsEl_1[0][1];
+    const restoredPointsEl1 = [
+      [pointsEl_1[0][0] - offsetX, pointsEl_1[0][1] - offsetY],
+      [pointsEl_1[1][0] - offsetX, pointsEl_1[1][1] - offsetY],
+    ];
+    expect(restoredLine_1.points).toMatchObject(restoredPointsEl1);
+    expect(restoredLine_1.x).toBe(lineElement_1.x + offsetX);
+    expect(restoredLine_1.y).toBe(lineElement_1.y + offsetY);
+  });
+
+  it("should restore correctly with rectangle, ellipse and diamond elements", () => {
+    const types = ["rectangle", "ellipse", "diamond"];
+
+    const elements: ExcalidrawElement[] = [];
+    let idCount = 0;
+    types.forEach((elType) => {
+      idCount += 1;
+      const element = API.createElement({
+        type: elType as "rectangle" | "ellipse" | "diamond" | "embeddable",
+        id: idCount.toString(),
+        fillStyle: "cross-hatch",
+        strokeWidth: 2,
+        strokeStyle: "dashed",
+        roughness: 2,
+        opacity: 10,
+        x: 10,
+        y: 20,
+        strokeColor: "red",
+        backgroundColor: "blue",
+        width: 100,
+        height: 200,
+        groupIds: ["1", "2", "3"],
+        roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
+      });
+
+      elements.push(element);
+    });
+
+    const restoredElements = restore.restoreElements(elements, null);
+
+    expect(restoredElements[0]).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+    expect(restoredElements[1]).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+    expect(restoredElements[2]).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+  });
+
+  it("bump versions of local duplicate elements when supplied", () => {
+    const rectangle = API.createElement({ type: "rectangle" });
+    const ellipse = API.createElement({ type: "ellipse" });
+    const rectangle_modified = newElementWith(rectangle, { isDeleted: true });
+
+    const restoredElements = restore.restoreElements(
+      [rectangle, ellipse],
+      [rectangle_modified],
+    );
+
+    expect(restoredElements[0].id).toBe(rectangle.id);
+    expect(restoredElements[0].versionNonce).not.toBe(rectangle.versionNonce);
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: rectangle.id,
+        version: rectangle_modified.version + 2,
+      }),
+      expect.objectContaining({
+        id: ellipse.id,
+        version: ellipse.version + 1,
+      }),
+    ]);
+  });
+});
+
+describe("restoreAppState", () => {
+  it("should restore with imported data", () => {
+    const stubImportedAppState = getDefaultAppState();
+    stubImportedAppState.activeTool.type = "selection";
+    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";
+
+    const stubLocalAppState = getDefaultAppState();
+    stubLocalAppState.activeTool.type = "rectangle";
+    stubLocalAppState.cursorButton = "up";
+    stubLocalAppState.name = "local app state";
+
+    const restoredAppState = restore.restoreAppState(
+      stubImportedAppState,
+      stubLocalAppState,
+    );
+    expect(restoredAppState.activeTool).toEqual(
+      stubImportedAppState.activeTool,
+    );
+    expect(restoredAppState.cursorButton).toBe("up");
+    expect(restoredAppState.name).toBe(stubImportedAppState.name);
+  });
+
+  it("should restore with current app state when imported data state is undefined", () => {
+    const stubImportedAppState = {
+      ...getDefaultAppState(),
+      cursorButton: undefined,
+      name: undefined,
+    };
+
+    const stubLocalAppState = getDefaultAppState();
+    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";
+
+    const restoredAppState = restore.restoreAppState(
+      stubImportedAppState,
+      stubLocalAppState,
+    );
+    expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
+    expect(restoredAppState.name).toBe(stubLocalAppState.name);
+  });
+
+  it("should return imported data when local app state is null", () => {
+    const stubImportedAppState = getDefaultAppState();
+    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";
+
+    const restoredAppState = restore.restoreAppState(
+      stubImportedAppState,
+      null,
+    );
+    expect(restoredAppState.cursorButton).toBe("up");
+    expect(restoredAppState.name).toBe(stubImportedAppState.name);
+  });
+
+  it("should return local app state when imported data state is null", () => {
+    const stubLocalAppState = getDefaultAppState();
+    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";
+
+    const restoredAppState = restore.restoreAppState(null, stubLocalAppState);
+    expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
+    expect(restoredAppState.name).toBe(stubLocalAppState.name);
+  });
+
+  it("should return default app state when imported data state and local app state are undefined", () => {
+    const stubImportedAppState = {
+      ...getDefaultAppState(),
+      cursorButton: undefined,
+    };
+
+    const stubLocalAppState = {
+      ...getDefaultAppState(),
+      cursorButton: undefined,
+    };
+
+    const restoredAppState = restore.restoreAppState(
+      stubImportedAppState,
+      stubLocalAppState,
+    );
+    expect(restoredAppState.cursorButton).toBe(
+      getDefaultAppState().cursorButton,
+    );
+  });
+
+  it("should return default app state when imported data state and local app state are null", () => {
+    const restoredAppState = restore.restoreAppState(null, null);
+    expect(restoredAppState.cursorButton).toBe(
+      getDefaultAppState().cursorButton,
+    );
+  });
+
+  it("when imported data state has a not allowed Excalidraw Element Types", () => {
+    const stubImportedAppState: any = getDefaultAppState();
+
+    stubImportedAppState.activeTool = "not allowed Excalidraw Element Types";
+    const stubLocalAppState = getDefaultAppState();
+
+    const restoredAppState = restore.restoreAppState(
+      stubImportedAppState,
+      stubLocalAppState,
+    );
+    expect(restoredAppState.activeTool.type).toBe("selection");
+  });
+
+  describe("with zoom in imported data state", () => {
+    it("when imported data state has zoom as a number", () => {
+      const stubImportedAppState: any = getDefaultAppState();
+
+      stubImportedAppState.zoom = 10;
+
+      const stubLocalAppState = getDefaultAppState();
+
+      const restoredAppState = restore.restoreAppState(
+        stubImportedAppState,
+        stubLocalAppState,
+      );
+
+      expect(restoredAppState.zoom.value).toBe(10);
+    });
+
+    it("when the zoom of imported data state is not a number", () => {
+      const stubImportedAppState = getDefaultAppState();
+      stubImportedAppState.zoom = {
+        value: 10 as NormalizedZoomValue,
+      };
+
+      const stubLocalAppState = getDefaultAppState();
+
+      const restoredAppState = restore.restoreAppState(
+        stubImportedAppState,
+        stubLocalAppState,
+      );
+
+      expect(restoredAppState.zoom.value).toBe(10);
+      expect(restoredAppState.zoom).toMatchObject(stubImportedAppState.zoom);
+    });
+
+    it("when the zoom of imported data state zoom is null", () => {
+      const stubImportedAppState = getDefaultAppState();
+
+      Object.defineProperty(stubImportedAppState, "zoom", {
+        get: vi.fn(() => null),
+      });
+
+      const stubLocalAppState = getDefaultAppState();
+
+      const restoredAppState = restore.restoreAppState(
+        stubImportedAppState,
+        stubLocalAppState,
+      );
+
+      expect(restoredAppState.zoom).toMatchObject(getDefaultAppState().zoom);
+    });
+  });
+
+  it("should handle appState.openSidebar legacy values", () => {
+    expect(restore.restoreAppState({}, null).openSidebar).toBe(null);
+    expect(
+      restore.restoreAppState({ openSidebar: "library" } as any, null)
+        .openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name });
+    expect(
+      restore.restoreAppState({ openSidebar: "xxx" } as any, null).openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name });
+    // while "library" was our legacy sidebar name, we can't assume it's legacy
+    // value as it may be some host app's custom sidebar name ¯\_(ツ)_/¯
+    expect(
+      restore.restoreAppState({ openSidebar: { name: "library" } } as any, null)
+        .openSidebar,
+    ).toEqual({ name: "library" });
+    expect(
+      restore.restoreAppState(
+        { openSidebar: { name: DEFAULT_SIDEBAR.name, tab: "ola" } } as any,
+        null,
+      ).openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name, tab: "ola" });
+  });
+});
+
+describe("restore", () => {
+  it("when imported data state is null it should return an empty array of elements", () => {
+    const stubLocalAppState = getDefaultAppState();
+
+    const restoredData = restore.restore(null, stubLocalAppState, null);
+    expect(restoredData.elements.length).toBe(0);
+  });
+
+  it("when imported data state is null it should return the local app state property", () => {
+    const stubLocalAppState = getDefaultAppState();
+    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";
+
+    const restoredData = restore.restore(null, stubLocalAppState, null);
+    expect(restoredData.appState.cursorButton).toBe(
+      stubLocalAppState.cursorButton,
+    );
+    expect(restoredData.appState.name).toBe(stubLocalAppState.name);
+  });
+
+  it("when imported data state has elements", () => {
+    const stubLocalAppState = getDefaultAppState();
+
+    const textElement = API.createElement({ type: "text" });
+    const rectElement = API.createElement({ type: "rectangle" });
+    const elements = [textElement, rectElement];
+
+    const importedDataState = {} as ImportedDataState;
+    importedDataState.elements = elements;
+
+    const restoredData = restore.restore(
+      importedDataState,
+      stubLocalAppState,
+      null,
+    );
+    expect(restoredData.elements.length).toBe(elements.length);
+  });
+
+  it("when local app state is null but imported app state is supplied", () => {
+    const stubImportedAppState = getDefaultAppState();
+    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";
+
+    const importedDataState = {} as ImportedDataState;
+    importedDataState.appState = stubImportedAppState;
+
+    const restoredData = restore.restore(importedDataState, null, null);
+    expect(restoredData.appState.cursorButton).toBe("up");
+    expect(restoredData.appState.name).toBe(stubImportedAppState.name);
+  });
+
+  it("bump versions of local duplicate elements when supplied", () => {
+    const rectangle = API.createElement({ type: "rectangle" });
+    const ellipse = API.createElement({ type: "ellipse" });
+
+    const rectangle_modified = newElementWith(rectangle, { isDeleted: true });
+
+    const restoredData = restore.restore(
+      { elements: [rectangle, ellipse] },
+      null,
+      [rectangle_modified],
+    );
+
+    expect(restoredData.elements[0].id).toBe(rectangle.id);
+    expect(restoredData.elements[0].versionNonce).not.toBe(
+      rectangle.versionNonce,
+    );
+    expect(restoredData.elements).toEqual([
+      expect.objectContaining({ version: rectangle_modified.version + 2 }),
+      expect.objectContaining({
+        id: ellipse.id,
+        version: ellipse.version + 1,
+      }),
+    ]);
+  });
+});
+
+describe("repairing bindings", () => {
+  it("should repair container boundElements when repair is true", () => {
+    const container = API.createElement({
+      type: "rectangle",
+      boundElements: [],
+    });
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: container.id,
+    });
+
+    expect(container.boundElements).toEqual([]);
+
+    let restoredElements = restore.restoreElements(
+      [container, boundElement],
+      null,
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+
+    restoredElements = restore.restoreElements(
+      [container, boundElement],
+      null,
+      { repairBindings: true },
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [{ type: boundElement.type, id: boundElement.id }],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+  });
+
+  it("should repair containerId of boundElements when repair is true", () => {
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: null,
+    });
+    const container = API.createElement({
+      type: "rectangle",
+      boundElements: [{ type: boundElement.type, id: boundElement.id }],
+    });
+
+    let restoredElements = restore.restoreElements(
+      [container, boundElement],
+      null,
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [{ type: boundElement.type, id: boundElement.id }],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: null,
+      }),
+    ]);
+
+    restoredElements = restore.restoreElements(
+      [container, boundElement],
+      null,
+      { repairBindings: true },
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [{ type: boundElement.type, id: boundElement.id }],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+  });
+
+  it("should ignore bound element if deleted", () => {
+    const container = API.createElement({
+      type: "rectangle",
+      boundElements: [],
+    });
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: container.id,
+      isDeleted: true,
+    });
+
+    expect(container.boundElements).toEqual([]);
+
+    const restoredElements = restore.restoreElements(
+      [container, boundElement],
+      null,
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+  });
+
+  it("should remove bindings of deleted elements from boundElements when repair is true", () => {
+    const container = API.createElement({
+      type: "rectangle",
+      boundElements: [],
+    });
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: container.id,
+      isDeleted: true,
+    });
+    const invisibleBoundElement = API.createElement({
+      type: "text",
+      containerId: container.id,
+      width: 0,
+      height: 0,
+    });
+
+    const obsoleteBinding = { type: boundElement.type, id: boundElement.id };
+    const invisibleBinding = {
+      type: invisibleBoundElement.type,
+      id: invisibleBoundElement.id,
+    };
+    expect(container.boundElements).toEqual([]);
+
+    const nonExistentBinding = { type: "text", id: "non-existent" };
+    // @ts-ignore
+    container.boundElements = [
+      obsoleteBinding,
+      invisibleBinding,
+      nonExistentBinding,
+    ];
+
+    let restoredElements = restore.restoreElements(
+      [container, invisibleBoundElement, boundElement],
+      null,
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [obsoleteBinding, invisibleBinding, nonExistentBinding],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+
+    restoredElements = restore.restoreElements(
+      [container, invisibleBoundElement, boundElement],
+      null,
+      { repairBindings: true },
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: container.id,
+        boundElements: [],
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: container.id,
+      }),
+    ]);
+  });
+
+  it("should remove containerId if container not exists when repair is true", () => {
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: "non-existent",
+    });
+    const boundElementDeleted = API.createElement({
+      type: "text",
+      containerId: "non-existent",
+      isDeleted: true,
+    });
+
+    let restoredElements = restore.restoreElements(
+      [boundElement, boundElementDeleted],
+      null,
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: "non-existent",
+      }),
+      expect.objectContaining({
+        id: boundElementDeleted.id,
+        containerId: "non-existent",
+      }),
+    ]);
+
+    restoredElements = restore.restoreElements(
+      [boundElement, boundElementDeleted],
+      null,
+      { repairBindings: true },
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: boundElement.id,
+        containerId: null,
+      }),
+      expect.objectContaining({
+        id: boundElementDeleted.id,
+        containerId: null,
+      }),
+    ]);
+  });
+});