From 63b6a416f16ffc82ce43f4a29bce78f494fa0bd6 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Wed, 15 Oct 2025 02:00:43 +1100
Subject: [PATCH] allow host app to control form factor and ui mode

---
 packages/excalidraw/components/App.tsx | 10 +++++++++-
 packages/excalidraw/types.ts           |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 4eace5211b..ec62f7f406 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -753,8 +753,16 @@ class App extends React.Component<AppProps, AppState> {
     const userAgentDescriptor = createUserAgentDescriptor(
       typeof navigator !== "undefined" ? navigator.userAgent : "",
     );
+    // allow host app to control formFactor and desktopUIMode via props
     this.editorInterface = updateObject(this.editorInterface, {
-      desktopUIMode: storedDesktopUIMode ?? this.editorInterface.desktopUIMode,
+      desktopUIMode:
+        typeof props.desktopUIMode !== "undefined"
+          ? props.desktopUIMode
+          : storedDesktopUIMode ?? this.editorInterface.desktopUIMode,
+      formFactor:
+        typeof props.formFactor !== "undefined"
+          ? props.formFactor
+          : this.editorInterface.formFactor,
       userAgent: userAgentDescriptor,
     });
     this.stylesPanelMode = deriveStylesPanelMode(this.editorInterface);
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index cd4f75af2b..08be20f4b5 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -691,6 +691,12 @@ export type AppProps = Merge<
     isCollaborating: boolean;
     children?: React.ReactNode;
     aiEnabled: boolean;
+    /**
+     * Optionally control the editor form factor and desktop UI mode from the host app.
+     * If not provided, we will take care of it internally.
+     */
+    formFactor?: EditorInterface["formFactor"];
+    desktopUIMode?: EditorInterface["desktopUIMode"];
   }
 >;