add editor interface event listener

packages/excalidraw/components/App.tsx

@@ -2533,23 +2533,35 @@ class App extends React.Component<AppProps, AppState> {
         ? this.props.UIOptions.dockedSidebarBreakpoint
         : MQ_RIGHT_SIDEBAR_MIN_WIDTH;
 
+    // if host doesn't control formFactor, we'll update it ourselves
+    if (!this.props.formFactor) {
+      const nextEditorInterface = updateObject(this.editorInterface, {
+        formFactor: deriveFormFactor(editorWidth, editorHeight, {
+          isMobile: (width, height) => this.isMobileBreakpoint(width, height),
+          isTablet: (width, height) => this.isTabletBreakpoint(width, height),
+        }),
+        canFitSidebar: editorWidth > sidebarBreakpoint,
+        isLandscape: editorWidth > editorHeight,
+      });
+      const didChange = nextEditorInterface !== this.editorInterface;
+      if (didChange) {
+        this.editorInterface = nextEditorInterface;
+        this.reconcileStylesPanelMode(nextEditorInterface);
+        this.props.onEditorInterfaceChange?.(nextEditorInterface);
+      }
+      return didChange;
+    }
+
+    // host controls formFactor, just update sidebar/landscape for context
     const nextEditorInterface = updateObject(this.editorInterface, {
-      formFactor: deriveFormFactor(editorWidth, editorHeight, {
-        isMobile: (width, height) => this.isMobileBreakpoint(width, height),
-        isTablet: (width, height) => this.isTabletBreakpoint(width, height),
-      }),
       canFitSidebar: editorWidth > sidebarBreakpoint,
       isLandscape: editorWidth > editorHeight,
     });
-
     const didChange = nextEditorInterface !== this.editorInterface;
-
     if (didChange) {
       this.editorInterface = nextEditorInterface;
+      this.reconcileStylesPanelMode(nextEditorInterface);
     }
-
-    this.reconcileStylesPanelMode(nextEditorInterface);
-
     return didChange;
   };
 

packages/excalidraw/types.ts

@@ -697,6 +697,11 @@ export type AppProps = Merge<
      */
     formFactor?: EditorInterface["formFactor"];
     desktopUIMode?: EditorInterface["desktopUIMode"];
+    /**
+     * Listener called when the editor interface is refreshed and
+     * form factor is not controlled by host.
+     */
+    onEditorInterfaceChange?: (editorInterface: EditorInterface) => void;
   }
 >;