feat: Support LaTeX and AsciiMath via MathJax on stem.excalidraw.com

src/excalidraw-app/data/LocalData.ts

@@ -46,12 +46,15 @@ class LocalFileManager extends FileManager {
 const saveDataStateToLocalStorage = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  appStateOnly = false,
 ) => {
   try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-      JSON.stringify(clearElementsForLocalStorage(elements)),
-    );
+    if (!appStateOnly) {
+      localStorage.setItem(
+        STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
+        JSON.stringify(clearElementsForLocalStorage(elements)),
+      );
+    }
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
       JSON.stringify(clearAppStateForLocalStorage(appState)),
@@ -72,8 +75,12 @@ export class LocalData {
       appState: AppState,
       files: BinaryFiles,
       onFilesSaved: () => void,
+      appStateOnly = false,
     ) => {
-      saveDataStateToLocalStorage(elements, appState);
+      saveDataStateToLocalStorage(elements, appState, appStateOnly);
+      if (appStateOnly) {
+        return;
+      }
 
       await this.fileStorage.saveFiles({
         elements,
@@ -97,6 +104,14 @@ export class LocalData {
     }
   };
 
+  /** Saves the AppState, only if saving is paused. */
+  static saveAppState = (appState: AppState) => {
+    // we need to make the `isSavePaused` check synchronously (undebounced)
+    if (this.isSavePaused()) {
+      this._save([], appState, {}, () => {}, true);
+    }
+  };
+
   static flushSave = () => {
     this._save.flush();
   };

src/excalidraw-app/index.tsx

@@ -5,6 +5,7 @@ import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
+import { useExtensions } from "@excalidraw/extensions";
 import {
   APP_NAME,
   EVENT,
@@ -189,7 +190,7 @@ const initializeScene = async (opts: {
           ...restoreAppState(
             {
               ...scene?.appState,
-              theme: localDataState?.appState?.theme || scene?.appState?.theme,
+              ...localDataState?.appState,
             },
             excalidrawAPI.getAppState(),
           ),
@@ -252,6 +253,8 @@ const ExcalidrawWrapper = () => {
   const [excalidrawAPI, excalidrawRefCallback] =
     useCallbackRefState<ExcalidrawImperativeAPI>();
 
+  useExtensions(excalidrawAPI);
+
   const [collabAPI] = useAtom(collabAPIAtom);
   const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
   const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
@@ -538,6 +541,8 @@ const ExcalidrawWrapper = () => {
           }
         }
       });
+    } else {
+      LocalData.saveAppState(appState);
     }
   };