feat(packages/excalidraw): add props.className (#11839)

packages/excalidraw/components/App.tsx

@@ -2339,31 +2339,36 @@ class App extends React.Component<AppProps, AppState> {
     return (
       <div
         translate="no"
-        className={clsx("excalidraw excalidraw-container notranslate", {
-          "excalidraw--view-mode":
-            this.state.viewModeEnabled ||
-            this.state.openDialog?.name === "elementLinkSelector",
-          "excalidraw--mobile": this.editorInterface.formFactor === "phone",
-          "excalidraw--non-interactive": !this.isInteractionEnabled(),
-          "excalidraw--navigation":
-            !this.isInteractionEnabled() && this.isNavigationEnabled(),
-          "excalidraw--tools":
-            !this.isInteractionEnabled() &&
-            this.isToolSupported(this.state.activeTool.type),
-          "excalidraw--embeds":
-            !this.isInteractionEnabled() && this.isEmbedsEnabled(),
-          "excalidraw--allow-browser-zoom":
-            !this.isInteractionEnabled() && this.isBrowserZoomEnabled(),
-          "excalidraw--ui-hidden": !this.isDefaultUIEnabled(),
-          "excalidraw--mobile-toolbar":
-            this.editorInterface.formFactor === "phone" &&
-            this.isDefaultUIEnabled() &&
-            !this.state.viewModeEnabled,
-          "excalidraw--viewport-status-border":
-            !!this.props.viewportStatusFrame?.border,
-          "excalidraw--viewport-status-label":
-            !!this.props.viewportStatusFrame?.label,
-        })}
+        className={clsx(
+          "excalidraw excalidraw-container notranslate",
+          this.props.className,
+          {
+            "excalidraw--view-mode":
+              this.state.viewModeEnabled ||
+              this.state.openDialog?.name === "elementLinkSelector",
+            "excalidraw--mobile": this.editorInterface.formFactor === "phone",
+            "excalidraw--non-interactive": !this.isInteractionEnabled(),
+            "excalidraw--navigation":
+              !this.isInteractionEnabled() && this.isNavigationEnabled(),
+            "excalidraw--tools":
+              !this.isInteractionEnabled() &&
+              this.isToolSupported(this.state.activeTool.type),
+            "excalidraw--embeds":
+              !this.isInteractionEnabled() && this.isEmbedsEnabled(),
+            "excalidraw--allow-browser-zoom":
+              !this.isInteractionEnabled() && this.isBrowserZoomEnabled(),
+            "excalidraw--ui-hidden": !this.isDefaultUIEnabled(),
+            "excalidraw--mobile-toolbar":
+              this.editorInterface.formFactor === "phone" &&
+              this.isDefaultUIEnabled() &&
+              !this.state.viewModeEnabled,
+            "excalidraw--viewport-status-border":
+              !!this.props.viewportStatusFrame?.border,
+            "excalidraw--viewport-status-label":
+              !!this.props.viewportStatusFrame?.label,
+            "excalidraw--zen-mode": this.state.zenModeEnabled,
+          },
+        )}
         style={{
           ["--ui-pointerEvents" as any]: shouldBlockPointerEvents
             ? POINTER_EVENTS.disabled

packages/excalidraw/index.tsx

@@ -67,6 +67,7 @@ export const ExcalidrawAPIProvider = ({
 const ExcalidrawBase = (props: ExcalidrawProps) => {
   const {
     onExport,
+    className,
     onChange,
     onThemeChange,
     onIncrement,
@@ -207,6 +208,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
       <InitializeApp langCode={langCode} theme={theme}>
         <App
           onExport={onExport}
+          className={className}
           onChange={onChange}
           onThemeChange={onThemeChange}
           onIncrement={onIncrement}

packages/excalidraw/tests/excalidraw.test.tsx

@@ -42,6 +42,9 @@ describe("<Excalidraw/>", () => {
       const contextMenu = document.querySelector(".context-menu");
       fireEvent.click(queryByText(contextMenu as HTMLElement, "Zen mode")!);
       expect(h.state.zenModeEnabled).toBe(true);
+      expect(container.querySelector(".excalidraw")).toHaveClass(
+        "excalidraw--zen-mode",
+      );
       expect(
         container.getElementsByClassName("disable-zen-mode--visible").length,
       ).toBe(1);
@@ -484,4 +487,14 @@ describe("<Excalidraw/>", () => {
       expect(h.state.theme).toBe(THEME.LIGHT);
     });
   });
+
+  it("should apply a custom class name to the editor root", async () => {
+    const { container } = await render(
+      <Excalidraw className="custom-excalidraw" />,
+    );
+
+    expect(container.querySelector(".excalidraw")).toHaveClass(
+      "custom-excalidraw",
+    );
+  });
 });

packages/excalidraw/types.ts

@@ -769,6 +769,7 @@ export type UIConfig = {
 };
 
 export interface ExcalidrawProps {
+  className?: string;
   onChange?: (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,