test: cover collab field preservation

excalidraw-app/App.tsx

@@ -286,13 +286,10 @@ const initializeScene = async (opts: {
         scene = {
           elements: bumpElementVersions(
             restoreElements(
-              migrateSceneElements(
+              migrateSceneElements(imported.elements, {
-                imported.elements,
+                payloadSchemaVersion: imported.schemaVersion,
-                {
+                fallbackVersion: SCHEMA_VERSIONS.initial,
-                  payloadSchemaVersion: imported.schemaVersion,
+              }),
-                  fallbackVersion: SCHEMA_VERSIONS.initial,
-                },
-              ),
               null,
               {
                 repairBindings: true,

excalidraw-app/data/LocalData.ts

@@ -87,10 +87,12 @@ const saveDataStateToLocalStorage = (
       _appState.openSidebar = null;
     }
 
-    const persistedElements = getNonDeletedElements(elements).map((element) => ({
+    const persistedElements = getNonDeletedElements(elements).map(
-      ...element,
+      (element) => ({
-      schemaVersion: SCHEMA_VERSIONS.latest,
+        ...element,
-    }));
+        schemaVersion: SCHEMA_VERSIONS.latest,
+      }),
+    );
 
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,

excalidraw-app/tests/collab.test.tsx

@@ -69,6 +69,98 @@ vi.mock("socket.io-client", () => {
  * i.e. multiplayer history tests could be a good first candidate, as we could test both history stacks simultaneously.
  */
 describe("collaboration", () => {
+  it("should preserve future element fields across collab reconciliation", async () => {
+    await render(<ExcalidrawApp />);
+
+    const frame = API.createElement({
+      type: "frame",
+      id: "A",
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+      backgroundColor: "#ff0000",
+    });
+
+    const frameWithFutureFields = {
+      ...frame,
+      schemaVersion: 2,
+      futureField: "keep-me",
+    } as typeof frame & {
+      schemaVersion: number;
+      futureField: string;
+    };
+
+    API.updateScene({
+      elements: [frameWithFutureFields],
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    });
+
+    await waitFor(() => {
+      expect((h.elements[0] as any).futureField).toBe("keep-me");
+      expect((h.elements[0] as any).schemaVersion).toBe(2);
+      expect(h.elements[0].backgroundColor).toBe("#ff0000");
+    });
+
+    const remoteMovedFrame = newElementWith(h.elements[0] as any, {
+      x: 120,
+      y: 80,
+    });
+
+    const reconciled = (window.collab as any)._reconcileElements([
+      remoteMovedFrame,
+    ]);
+
+    expect(reconciled[0]).toEqual(
+      expect.objectContaining({
+        x: 120,
+        y: 80,
+        backgroundColor: "#ff0000",
+      }),
+    );
+    expect((reconciled[0] as any).futureField).toBe("keep-me");
+    expect((reconciled[0] as any).schemaVersion).toBe(2);
+  });
+
+  it("should preserve future element fields on local edits before broadcast", async () => {
+    await render(<ExcalidrawApp />);
+
+    const rect = API.createElement({
+      type: "rectangle",
+      id: "A",
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    });
+
+    const rectWithFutureFields = {
+      ...rect,
+      schemaVersion: 2,
+      futureField: { value: "keep-me" },
+    } as typeof rect & {
+      schemaVersion: number;
+      futureField: { value: string };
+    };
+
+    API.updateScene({
+      elements: [rectWithFutureFields],
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    });
+
+    const locallyEdited = newElementWith(h.elements[0] as any, { x: 200 });
+    API.updateScene({
+      elements: [locallyEdited],
+      captureUpdate: CaptureUpdateAction.NEVER,
+    });
+
+    await waitFor(() => {
+      expect((h.elements[0] as any).futureField).toEqual({ value: "keep-me" });
+      expect((h.elements[0] as any).schemaVersion).toBe(2);
+      expect(h.elements[0]).toEqual(expect.objectContaining({ x: 200 }));
+    });
+  });
+
   it("should emit two ephemeral increments even though updates get batched", async () => {
     const durableIncrements: DurableIncrement[] = [];
     const ephemeralIncrements: EphemeralIncrement[] = [];

packages/excalidraw/clipboard.ts

@@ -35,12 +35,13 @@ import {
 
 import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
 
+import { SCHEMA_VERSIONS } from "./data/schema";
+
 import type { FileSystemHandle } from "./data/filesystem";
 
 import type { Spreadsheet } from "./charts";
 
 import type { BinaryFiles } from "./types";
-import { SCHEMA_VERSIONS } from "./data/schema";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;

packages/excalidraw/components/App.tsx

@@ -2822,13 +2822,10 @@ class App extends React.Component<AppProps, AppState> {
         ? SCHEMA_VERSIONS.initial
         : SCHEMA_VERSIONS.latest;
     const restoredElements = restoreElements(
-      migrateSceneElements(
+      migrateSceneElements(initialData?.elements, {
-        initialData?.elements,
+        payloadSchemaVersion: initialData?.schemaVersion,
-        {
+        fallbackVersion: initialDataSchemaFallback,
-          payloadSchemaVersion: initialData?.schemaVersion,
+      }),
-          fallbackVersion: initialDataSchemaFallback,
-        },
-      ),
       null,
       {
         repairBindings: true,
@@ -3764,13 +3761,9 @@ class App extends React.Component<AppProps, AppState> {
         ? migrateLibraryElements(opts.elements, opts.schemaVersionSource)
         : migrateAPIElements(opts.elements, opts.schemaVersionSource);
 
-    const elements = restoreElements(
+    const elements = restoreElements(migratedElements, null, {
-      migratedElements,
+      deleteInvisibleElements: true,
-      null,
+    });
-      {
-        deleteInvisibleElements: true,
-      },
-    );
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
 
     const elementsCenterX = distance(minX, maxX) / 2;

packages/excalidraw/components/PublishLibrary.tsx

@@ -9,6 +9,7 @@ import {
   chunk,
   getExportSource,
 } from "@excalidraw/common";
+
 import { SCHEMA_VERSIONS } from "../data/schema";
 
 import { EditorLocalStorage } from "../data/EditorLocalStorage";

packages/excalidraw/data/blob.ts

@@ -24,10 +24,7 @@ import {
   restoreElements,
   restoreLibraryItems,
 } from "./restore";
-import {
+import { migrateSceneElements, SCHEMA_VERSIONS } from "./schema";
-  migrateSceneElements,
-  SCHEMA_VERSIONS,
-} from "./schema";
 
 import type { AppState, DataURL, LibraryItem } from "../types";
 
@@ -161,13 +158,10 @@ export const loadSceneOrLibraryFromBlob = async (
       throw error;
     }
     if (isValidExcalidrawData(data)) {
-      const migratedElements = migrateSceneElements(
+      const migratedElements = migrateSceneElements(data.elements, {
-        data.elements,
+        payloadSchemaVersion: data.schemaVersion,
-        {
+        fallbackVersion: SCHEMA_VERSIONS.initial,
-          payloadSchemaVersion: data.schemaVersion,
+      });
-          fallbackVersion: SCHEMA_VERSIONS.initial,
-        },
-      );
       return {
         type: MIME_TYPES.excalidraw,
         data: {
@@ -233,14 +227,10 @@ export const parseLibraryJSON = (
     throw new Error("Invalid library");
   }
   const libraryItems = data.libraryItems || data.library;
-  return restoreLibraryItems(
+  return restoreLibraryItems(libraryItems, defaultStatus, {
-    libraryItems,
+    payloadSchemaVersion: data.schemaVersion,
-    defaultStatus,
+    fallbackVersion: SCHEMA_VERSIONS.initial,
-    {
+  });
-      payloadSchemaVersion: data.schemaVersion,
-      fallbackVersion: SCHEMA_VERSIONS.initial,
-    },
-  );
 };
 
 export const loadLibraryFromBlob = async (

packages/excalidraw/data/library.ts

@@ -91,9 +91,10 @@ export interface LibraryPersistenceAdapter {
      * purposes, in which case host app can implement more aggressive caching.
      */
     source: LibraryAdatapterSource;
-  }): MaybePromise<
+  }): MaybePromise<{
-    { libraryItems: LibraryItems_anyVersion; schemaVersion?: number } | null
+    libraryItems: LibraryItems_anyVersion;
-  >;
+    schemaVersion?: number;
+  } | null>;
   /** Should persist to the database as is (do no change the data structure). */
   save(libraryData: LibraryPersistedData): MaybePromise<void>;
 }
@@ -103,9 +104,10 @@ export interface LibraryMigrationAdapter {
    * loads data from legacy data source. Returns `null` if no data is
    * to be migrated.
    */
-  load(): MaybePromise<
+  load(): MaybePromise<{
-    { libraryItems: LibraryItems_anyVersion; schemaVersion?: number } | null
+    libraryItems: LibraryItems_anyVersion;
-  >;
+    schemaVersion?: number;
+  } | null>;
 
   /** clears entire storage afterwards */
   clear(): MaybePromise<void>;
@@ -561,14 +563,10 @@ class AdapterTransaction {
         try {
           const data = await adapter.load({ source });
           resolve(
-            restoreLibraryItems(
+            restoreLibraryItems(data?.libraryItems || [], "published", {
-              data?.libraryItems || [],
+              payloadSchemaVersion: data?.schemaVersion,
-              "published",
+              fallbackVersion: SCHEMA_VERSIONS.initial,
-              {
+            }),
-                payloadSchemaVersion: data?.schemaVersion,
-                fallbackVersion: SCHEMA_VERSIONS.initial,
-              },
-            ),
           );
         } catch (error: any) {
           reject(error);

packages/excalidraw/data/restore.ts

@@ -81,6 +81,7 @@ import {
   getNormalizedGridStep,
   getNormalizedZoom,
 } from "../scene";
+
 import {
   migrateLibraryElements,
   type SchemaVersionSource,
@@ -984,12 +985,15 @@ export const restoreLibraryItems = (
   for (const item of libraryItems) {
     // migrate older libraries
     if (Array.isArray(item)) {
-      const restoredItem = restoreLibraryItem({
+      const restoredItem = restoreLibraryItem(
-        status: defaultStatus,
+        {
-        elements: item,
+          status: defaultStatus,
-        id: randomId(),
+          elements: item,
-        created: Date.now(),
+          id: randomId(),
-      }, schemaVersionSource);
+          created: Date.now(),
+        },
+        schemaVersionSource,
+      );
       if (restoredItem) {
         restoredItems.push(restoredItem);
       }
@@ -998,12 +1002,15 @@ export const restoreLibraryItems = (
         LibraryItem,
         "id" | "status" | "created"
       >;
-      const restoredItem = restoreLibraryItem({
+      const restoredItem = restoreLibraryItem(
-        ..._item,
+        {
-        id: _item.id || randomId(),
+          ..._item,
-        status: _item.status || defaultStatus,
+          id: _item.id || randomId(),
-        created: _item.created || Date.now(),
+          status: _item.status || defaultStatus,
-      }, schemaVersionSource);
+          created: _item.created || Date.now(),
+        },
+        schemaVersionSource,
+      );
       if (restoredItem) {
         restoredItems.push(restoredItem);
       }

packages/excalidraw/data/schema.test.ts

@@ -1,6 +1,7 @@
 import { DEFAULT_ELEMENT_PROPS } from "@excalidraw/common";
 
 import { API } from "../tests/helpers/api";
+
 import {
   ALL_SCOPES,
   hasElementSchemaVersion,
@@ -194,13 +195,10 @@ describe("schema migration", () => {
       schemaVersion: SCHEMA_VERSIONS.latest,
     } as typeof modernFrame & { schemaVersion: number };
 
-    const migrated = migrateSceneElements(
+    const migrated = migrateSceneElements([legacyFrame, modernFrameWithHint], {
-      [legacyFrame, modernFrameWithHint],
+      payloadSchemaVersion: undefined,
-      {
+      fallbackVersion: SCHEMA_VERSIONS.initial,
-        payloadSchemaVersion: undefined,
+    })!;
-        fallbackVersion: SCHEMA_VERSIONS.initial,
-      },
-    )!;
 
     expect(migrated[0].backgroundColor).toBe(
       DEFAULT_ELEMENT_PROPS.backgroundColor,

packages/excalidraw/data/schema.ts

@@ -15,7 +15,7 @@ export const SCHEMA_MIGRATION_SCOPES = [
   "api",
 ] as const;
 
-export type SchemaMigrationScope = (typeof SCHEMA_MIGRATION_SCOPES)[number];
+export type SchemaMigrationScope = typeof SCHEMA_MIGRATION_SCOPES[number];
 
 export const ALL_SCOPES: readonly SchemaMigrationScope[] =
   SCHEMA_MIGRATION_SCOPES;
@@ -135,7 +135,9 @@ export const validateSchemaMigrations = (
       );
     }
     if (!migration.scope.length) {
-      errors.push(`Migration "${migration.title}" must declare at least one scope.`);
+      errors.push(
+        `Migration "${migration.title}" must declare at least one scope.`,
+      );
     }
     for (const scope of migration.scope) {
       if (!SCHEMA_MIGRATION_SCOPES.includes(scope)) {
@@ -155,12 +157,13 @@ export const validateSchemaMigrations = (
   return errors;
 };
 
-const schemaMigrationValidationErrors = validateSchemaMigrations(
+const schemaMigrationValidationErrors =
-  SCHEMA_MIGRATIONS,
+  validateSchemaMigrations(SCHEMA_MIGRATIONS);
-);
 if (schemaMigrationValidationErrors.length) {
   throw new Error(
-    `Invalid schema migration configuration:\n${schemaMigrationValidationErrors.join("\n")}`,
+    `Invalid schema migration configuration:\n${schemaMigrationValidationErrors.join(
+      "\n",
+    )}`,
   );
 }
 
@@ -235,23 +238,19 @@ const migrateElementsByScope = (
 export const migrateSceneElements = (
   elements: readonly ExcalidrawElement[] | null | undefined,
   source: SchemaVersionSource,
-) =>
+) => migrateElementsByScope(elements, "scene", source);
-  migrateElementsByScope(elements, "scene", source);
 
 export const migrateLibraryElements = (
   elements: readonly ExcalidrawElement[] | null | undefined,
   source: SchemaVersionSource,
-) =>
+) => migrateElementsByScope(elements, "library", source);
-  migrateElementsByScope(elements, "library", source);
 
 export const migrateClipboardElements = (
   elements: readonly ExcalidrawElement[] | null | undefined,
   source: SchemaVersionSource,
-) =>
+) => migrateElementsByScope(elements, "clipboard", source);
-  migrateElementsByScope(elements, "clipboard", source);
 
 export const migrateAPIElements = (
   elements: readonly ExcalidrawElement[] | null | undefined,
   source: SchemaVersionSource,
-) =>
+) => migrateElementsByScope(elements, "api", source);
-  migrateElementsByScope(elements, "api", source);

packages/excalidraw/tests/data/restore.test.ts

@@ -121,7 +121,8 @@ describe("restoreElements", () => {
     );
 
     expect(
-      (restoredLibraryItems[0].elements[0] as ExcalidrawElement).backgroundColor,
+      (restoredLibraryItems[0].elements[0] as ExcalidrawElement)
+        .backgroundColor,
     ).toBe("#a5d8ff");
   });
 
@@ -145,7 +146,8 @@ describe("restoreElements", () => {
     );
 
     expect(
-      (restoredLibraryItems[0].elements[0] as ExcalidrawElement).backgroundColor,
+      (restoredLibraryItems[0].elements[0] as ExcalidrawElement)
+        .backgroundColor,
     ).toBe(DEFAULT_ELEMENT_PROPS.backgroundColor);
   });