fix: editor crash because appState error

haydenull · Apr 26, 2023 · e71228a · e71228a
1 parent c76301b
commit e71228a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -7,7 +7,11 @@ import {
 } from "@excalidraw/excalidraw";
 import { debounce } from "lodash";
 import { TbLogout, TbBrandGithub } from "react-icons/tb";
-import { genBlockData, getExcalidrawInfoFromPage } from "../helper/util";
+import {
+  genBlockData,
+  getExcalidrawInfoFromPage,
+  getMinimalAppState,
+} from "@/helper/util";
 import { ExcalidrawData } from "@/type";
 
 const Editor: React.FC<React.PropsWithChildren<{ pageName: string }>> = ({
@@ -20,7 +24,7 @@ const Editor: React.FC<React.PropsWithChildren<{ pageName: string }>> = ({
     const blockData = genBlockData({
       ...excalidrawData,
       elements: excalidrawElements,
-      appState,
+      appState: getMinimalAppState(appState),
       files,
     });
     if (blockUUIDRef.current)
@@ -39,7 +43,9 @@ const Editor: React.FC<React.PropsWithChildren<{ pageName: string }>> = ({
         <Excalidraw
           initialData={{
             elements: excalidrawData?.elements || [],
-            appState: excalidrawData?.appState || {},
+            appState: excalidrawData?.appState
+              ? getMinimalAppState(excalidrawData.appState)
+              : {},
             files: excalidrawData?.files || undefined,
             scrollToContent: true,
           }}

diff --git a/src/helper/constants.ts b/src/helper/constants.ts
@@ -1,4 +1,5 @@
-import { ExcalidrawData } from "@/type";
+import { type AppState } from "@excalidraw/excalidraw/types/types";
+import { type ExcalidrawData } from "@/type";
 
 export const DEFAULT_EXCALIDRAW_DATA: ExcalidrawData = {
   elements: [],
@@ -56,3 +57,11 @@ export const NEW_FILE_EXCALIDRAW_DATA: ExcalidrawData = {
   ],
   files: null,
 };
+
+/**
+ * The appState properties that need to be stored
+ */
+export const APP_STATE_PROPERTIES: Array<keyof AppState> = [
+  "gridSize",
+  "viewBackgroundColor",
+];
diff --git a/src/helper/util.ts b/src/helper/util.ts
@@ -1,6 +1,11 @@
-import { ExcalidrawData } from "@/type";
-import { BlockEntity, PageIdentity } from "@logseq/libs/dist/LSPlugin.user";
-import { DEFAULT_EXCALIDRAW_DATA } from "./constants";
+import { pick } from "lodash";
+import type { ExcalidrawData } from "@/type";
+import type {
+  BlockEntity,
+  PageIdentity,
+} from "@logseq/libs/dist/LSPlugin.user";
+import { APP_STATE_PROPERTIES, DEFAULT_EXCALIDRAW_DATA } from "./constants";
+import type { AppState } from "@excalidraw/excalidraw/types/types";
 
 /**
  * get excalidraw data
@@ -51,3 +56,10 @@ export const createSVGElement = (svgString: string) => {
   const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
   return svgDoc.documentElement;
 };
+
+/**
+ * Extract some properties from appState
+ */
+export const getMinimalAppState = (appState: AppState) => {
+  return pick(appState, APP_STATE_PROPERTIES);
+};