fileHandle refactor & fixes (excalidraw#2252)

package.json

@@ -28,7 +28,7 @@
     "@types/react": "16.9.52",
     "@types/react-dom": "16.9.8",
     "@types/socket.io-client": "1.4.34",
-    "browser-nativefs": "0.10.3",
+    "browser-nativefs": "0.11.0",
     "firebase": "7.23.0",
     "i18next-browser-languagedetector": "6.0.1",
     "lodash.throttle": "4.1.1",

src/actions/actionCanvas.tsx

@@ -59,8 +59,6 @@ export const actionClearCanvas = register({
       showAriaLabel={useIsMobile()}
       onClick={() => {
         if (window.confirm(t("alerts.clearReset"))) {
-          // TODO: Make this part of `AppState`.
-          (window as any).handle = null;
           updateData(null);
         }
       }}

src/actions/actionExport.tsx

@@ -85,12 +85,16 @@ export const actionChangeShouldAddWatermark = register({
 
 export const actionSaveScene = register({
   name: "saveScene",
-  perform: (elements, appState, value) => {
-    // TODO: Make this part of `AppState`.
-    saveAsJSON(elements, appState, (window as any).handle)
-      .catch(muteFSAbortError)
-      .catch((error) => console.error(error));
-    return { commitToHistory: false };
+  perform: async (elements, appState, value) => {
+    try {
+      const { fileHandle } = await saveAsJSON(elements, appState);
+      return { commitToHistory: false, appState: { ...appState, fileHandle } };
+    } catch (error) {
+      if (error?.name !== "AbortError") {
+        console.error(error);
+      }
+      return { commitToHistory: false };
+    }
   },
   keyTest: (event) => {
     return event.key === "s" && event[KEYS.CTRL_OR_CMD] && !event.shiftKey;
@@ -109,11 +113,19 @@ export const actionSaveScene = register({
 
 export const actionSaveAsScene = register({
   name: "saveAsScene",
-  perform: (elements, appState, value) => {
-    saveAsJSON(elements, appState, null)
-      .catch(muteFSAbortError)
-      .catch((error) => console.error(error));
-    return { commitToHistory: false };
+  perform: async (elements, appState, value) => {
+    try {
+      const { fileHandle } = await saveAsJSON(elements, {
+        ...appState,
+        fileHandle: null,
+      });
+      return { commitToHistory: false, appState: { ...appState, fileHandle } };
+    } catch (error) {
+      if (error?.name !== "AbortError") {
+        console.error(error);
+      }
+      return { commitToHistory: false };
+    }
   },
   keyTest: (event) => {
     return event.key === "s" && event.shiftKey && event[KEYS.CTRL_OR_CMD];

src/actions/manager.tsx

@@ -5,6 +5,7 @@ import {
   UpdaterFn,
   ActionFilterFn,
   ActionName,
+  ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
@@ -13,7 +14,7 @@ import { t } from "../i18n";
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
 
-  updater: UpdaterFn;
+  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
 
   getAppState: () => Readonly<AppState>;
 
@@ -24,7 +25,15 @@ export class ActionManager implements ActionsManagerInterface {
     getAppState: () => AppState,
     getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
   ) {
-    this.updater = updater;
+    this.updater = (actionResult) => {
+      if (actionResult && "then" in actionResult) {
+        actionResult.then((actionResult) => {
+          return updater(actionResult);
+        });
+      } else {
+        return updater(actionResult);
+      }
+    };
     this.getAppState = getAppState;
     this.getElementsIncludingDeleted = getElementsIncludingDeleted;
   }

src/actions/types.ts

@@ -16,9 +16,9 @@ type ActionFn = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
   formData: any,
-) => ActionResult;
+) => ActionResult | Promise<ActionResult>;
 
-export type UpdaterFn = (res: ActionResult, commitToHistory?: boolean) => void;
+export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
 
 export type ActionName =

src/appState.ts

@@ -69,6 +69,7 @@ export const getDefaultAppState = (): Omit<
     width: window.innerWidth,
     height: window.innerHeight,
     isLibraryOpen: false,
+    fileHandle: null,
   };
 };
 
@@ -145,6 +146,7 @@ const APP_STATE_STORAGE_CONF = (<
   zoom: { browser: true, export: false },
   offsetTop: { browser: false, export: false },
   offsetLeft: { browser: false, export: false },
+  fileHandle: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/clipboard.ts

@@ -160,7 +160,7 @@ export const parseClipboard = async (
 export const copyCanvasToClipboardAsPng = async (canvas: HTMLCanvasElement) =>
   new Promise((resolve, reject) => {
     try {
-      canvas.toBlob(async (blob: any) => {
+      canvas.toBlob(async (blob) => {
         try {
           await navigator.clipboard.write([
             new window.ClipboardItem({ "image/png": blob }),

src/components/App.tsx

@@ -558,7 +558,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             return;
           }
           const fileHandle = launchParams.files[0];
-          const blob = await fileHandle.getFile();
+          const blob: Blob = await fileHandle.getFile();
           blob.handle = fileHandle;
           loadFromBlob(blob, this.state)
             .then(({ elements, appState }) =>
@@ -3845,7 +3845,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           // but can be safely ignored on older releases.
           const item = event.dataTransfer.items[0];
           // TODO: Make this part of `AppState`.
-          (window as any).handle = await (item as any).getAsFileSystemHandle();
+          (file as any).handle = await (item as any).getAsFileSystemHandle();
         } catch (error) {
           console.warn(error.name, error.message);
         }

src/data/blob.ts

@@ -4,6 +4,7 @@ import { t } from "../i18n";
 import { AppState } from "../types";
 import { LibraryData, ImportedDataState } from "./types";
 import { calculateScrollCenter } from "../scene";
+import { MIME_TYPES } from "../constants";
 
 export const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
@@ -53,16 +54,22 @@ export const parseFileContents = async (blob: Blob | File) => {
   return contents;
 };
 
+const getMimeType = (blob: Blob): string => {
+  if (blob.type) {
+    return blob.type;
+  }
+  const name = blob.name || "";
+  if (/\.(excalidraw|json)$/.test(name)) {
+    return "application/json";
+  }
+  return "";
+};
+
 export const loadFromBlob = async (
-  blob: any,
+  blob: Blob,
   /** @see restore.localAppState */
   localAppState: AppState | null,
 ) => {
-  if (blob.handle) {
-    // TODO: Make this part of `AppState`.
-    (window as any).handle = blob.handle;
-  }
-
   const contents = await parseFileContents(blob);
   try {
     const data: ImportedDataState = JSON.parse(contents);
@@ -74,6 +81,13 @@ export const loadFromBlob = async (
         elements: data.elements,
         appState: {
           appearance: localAppState?.appearance,
+          fileHandle:
+            blob.handle &&
+            ["application/json", MIME_TYPES.excalidraw].includes(
+              getMimeType(blob),
+            )
+              ? blob.handle
+              : null,
           ...cleanAppStateForExport(data.appState || {}),
           ...(localAppState
             ? calculateScrollCenter(data.elements || [], localAppState, null)

src/data/index.ts

@@ -66,9 +66,6 @@ export type SocketUpdateDataIncoming =
       type: "INVALID_RESPONSE";
     };
 
-// TODO: Make this part of `AppState`.
-(window as any).handle = null;
-
 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);
 
 const generateRandomID = async () => {

src/data/json.ts

@@ -27,23 +27,23 @@ export const serializeAsJSON = (
 export const saveAsJSON = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-  fileHandle: any,
 ) => {
   const serialized = serializeAsJSON(elements, appState);
   const blob = new Blob([serialized], {
     type: "application/json",
   });
-  const name = `${appState.name}.excalidraw`;
-  // TODO: Make this part of `AppState`.
-  (window as any).handle = await fileSave(
+
+  const fileHandle = await fileSave(
     blob,
     {
-      fileName: name,
+      fileName: appState.name,
       description: "Excalidraw file",
       extensions: [".excalidraw"],
     },
-    fileHandle || null,
+    appState.fileHandle,
   );
+
+  return { fileHandle };
 };
 
 export const loadFromJSON = async (localAppState: AppState) => {

src/data/library.ts

@@ -4,7 +4,7 @@ import { loadLibrary, saveLibrary } from "./localStorage";
 
 export class Library {
   /** imports library (currently merges, removing duplicates) */
-  static async importLibrary(blob: any) {
+  static async importLibrary(blob: Blob) {
     const libraryFile = await loadLibraryFromBlob(blob);
     if (!libraryFile || !libraryFile.library) {
       return;

src/global.d.ts

@@ -76,3 +76,10 @@ type CallableType<T extends (...args: any[]) => any> = (
 type ForwardRef<T, P = any> = Parameters<
   CallableType<React.ForwardRefRenderFunction<T, P>>
 >[1];
+
+// --------------------------------------------------------------------------—
+
+interface Blob {
+  handle?: import("browser-nativefs").FileSystemHandle;
+  name?: string;
+}