feat: introduce normalizeCanvasData utility for canvas data handling

- Added normalizeCanvasData function to standardize canvas data by removing width and height properties and resetting collaborators.
- Updated App and BackupsDialog components to utilize the new utility for consistent canvas data normalization during scene updates.

Author: atyrode

src/frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { ExcalidrawWrapper } from "./ExcalidrawWrapper";
 import { debounce } from "./utils/debounce";
 import { capture } from "./utils/posthog";
 import posthog from "./utils/posthog";
+import { normalizeCanvasData } from "./utils/canvasUtils";
 import { useSaveCanvas } from "./api/hooks";
 import type * as TExcalidraw from "@atyrode/excalidraw";
 import type { NonDeletedExcalidrawElement } from "@atyrode/excalidraw/element/types";
@@ -40,20 +41,6 @@ export default function App({
   useCustom(excalidrawAPI, customArgs);
   useHandleLibrary({ excalidrawAPI });
 
-  function normalizeCanvasData(data: any) {
-    if (!data) return data;
-    const appState = { ...data.appState };
-    appState.width = undefined;
-    if ("width" in appState) {
-      delete appState.width;
-    }
-    if ("height" in appState) {
-      delete appState.height;
-    }
-    appState.collaborators = new Map();
-    return { ...data, appState };
-  }
-
   useEffect(() => {
     if (excalidrawAPI && canvasData) {
       excalidrawAPI.updateScene(normalizeCanvasData(canvasData));

src/frontend/src/ui/BackupsDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from "react";
 import { Dialog } from "@atyrode/excalidraw";
 import { useCanvasBackups, CanvasBackup } from "../api/hooks";
+import { normalizeCanvasData } from "../utils/canvasUtils";
 import "../styles/BackupsDialog.scss";
 
 interface BackupsModalProps {
@@ -24,7 +25,8 @@ const BackupsModal: React.FC<BackupsModalProps> = ({
   const handleRestoreBackup = () => {
     if (selectedBackup && excalidrawAPI) {
       // Load the backup data into the canvas
-      excalidrawAPI.updateScene(selectedBackup.data);
+      const normalizedData = normalizeCanvasData(selectedBackup.data);
+      excalidrawAPI.updateScene(normalizedData);
       setSelectedBackup(null);
       handleClose();
     }

src/frontend/src/utils/canvasUtils.ts

@@ -0,0 +1,28 @@
+/**
+ * Normalizes canvas data by removing width and height properties from appState
+ * and resetting collaborators to an empty Map.
+ * 
+ * This is necessary when loading canvas data to ensure it fits properly in the current viewport
+ * and doesn't carry over collaborator information that might be stale.
+ * 
+ * @param data The canvas data to normalize
+ * @returns Normalized canvas data
+ */
+export function normalizeCanvasData(data: any) {
+  if (!data) return data;
+  
+  const appState = { ...data.appState };
+  
+  // Remove width and height properties
+  if ("width" in appState) {
+    delete appState.width;
+  }
+  if ("height" in appState) {
+    delete appState.height;
+  }
+  
+  // Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)
+  appState.collaborators = new Map();
+  
+  return { ...data, appState };
+}