feat: support props.className

dwelle · Jun 12, 2024 · 1d084f0 · 1d084f0
1 parent ab648b8
commit 1d084f0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
@@ -1493,11 +1493,15 @@ class App extends React.Component<AppProps, AppState> {
 
     return (
       <div
-        className={clsx("excalidraw excalidraw-container", {
-          "excalidraw--view-mode": this.state.viewModeEnabled,
-          "excalidraw--mobile": this.device.editor.isMobile,
-          "excalidraw--zen-mode": this.state.zenModeEnabled,
-        })}
+        className={clsx(
+          "excalidraw excalidraw-container",
+          this.props.className,
+          {
+            "excalidraw--view-mode": this.state.viewModeEnabled,
+            "excalidraw--mobile": this.device.editor.isMobile,
+            "excalidraw--zen-mode": this.state.zenModeEnabled,
+          },
+        )}
         style={{
           ["--ui-pointerEvents" as any]: shouldBlockPointerEvents
             ? POINTER_EVENTS.disabled

diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
@@ -22,6 +22,7 @@ polyfill();
 
 const ExcalidrawBase = (props: ExcalidrawProps) => {
   const {
+    className,
     onChange,
     initialData,
     excalidrawAPI,
@@ -115,6 +116,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
       <InitializeApp langCode={langCode} theme={theme}>
         <App
           id={id}
+          className={className}
           onChange={onChange}
           initialData={initialData}
           excalidrawAPI={excalidrawAPI}

diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
@@ -440,6 +440,7 @@ export type OnUserFollowedPayload = {
 
 export interface ExcalidrawProps {
   id?: string | null;
+  className?: string;
   onChange?: (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,