From 489f45b910cc8cfa1040e814173ef48a9fbef76e Mon Sep 17 00:00:00 2001
From: Arun Kumar <arun4033622@gmail.com>
Date: Thu, 18 Mar 2021 16:36:12 +0530
Subject: [PATCH] Make requested changes

---
 src/components/App.tsx            | 16 ++++++++++++++++
 src/packages/excalidraw/README.md | 10 ++++++++++
 src/packages/excalidraw/index.tsx |  4 ++++
 src/types.ts                      |  2 ++
 4 files changed, 32 insertions(+)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7455e416a..96c7bf187 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -304,6 +304,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       zenModeEnabled = false,
       gridModeEnabled = false,
       theme = defaultAppState.theme,
+      exportName = defaultAppState.name,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -315,6 +316,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       viewModeEnabled,
       zenModeEnabled,
       gridSize: gridModeEnabled ? GRID_SIZE : null,
+      name: exportName,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -900,6 +902,20 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
       });
     }
+
+    if (
+      prevProps.exportName !== this.props.exportName &&
+      this.props.exportName
+    ) {
+      this.setState({
+        name: this.props.exportName,
+      });
+    }
+
+    if (this.props.onExportNameChange && prevState.name !== this.state.name) {
+      this.props.onExportNameChange(this.state.name);
+    }
+
     document
       .querySelector(".excalidraw")
       ?.classList.toggle("theme--dark", this.state.theme === "dark");
diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md
index 84abe27e5..0ba18fdd5 100644
--- a/src/packages/excalidraw/README.md
+++ b/src/packages/excalidraw/README.md
@@ -378,6 +378,8 @@ export default function IndexPage() {
 | [`gridModeEnabled`](#gridModeEnabled) | boolean |  | This implies if the grid mode is enabled |
 | [`libraryReturnUrl`](#libraryReturnUrl) | string |  | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `light` or `dark` |  | The theme of the Excalidraw component |
+| [`exportName`](#exportName) | string |  | Name of the drawing |
+| [`onExportNameChange`](#onExportNameChange) | Function |  | Callback triggered when name is updated |
 
 #### `width`
 
@@ -543,6 +545,14 @@ If supplied, this URL will be used when user tries to install a library from [li
 
 This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
+### `exportName`
+
+This prop sets the export name of the drawing. When supplied, the value takes precedence over `intialData.appState.name`.
+
+### `onExportNameChange`
+
+This callback is triggered when export name is updated.
+
 ### Extra API's
 
 #### `getSceneVersion`
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 868cf47cf..d48536814 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -31,6 +31,8 @@ const Excalidraw = (props: ExcalidrawProps) => {
     gridModeEnabled,
     libraryReturnUrl,
     theme,
+    exportName,
+    onExportNameChange,
   } = props;
 
   useEffect(() => {
@@ -73,6 +75,8 @@ const Excalidraw = (props: ExcalidrawProps) => {
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
           theme={theme}
+          exportName={exportName}
+          onExportNameChange={onExportNameChange}
         />
       </IsMobileProvider>
     </InitializeApp>
diff --git a/src/types.ts b/src/types.ts
index fbc7e94ba..40484a6f1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -191,6 +191,8 @@ export interface ExcalidrawProps {
   gridModeEnabled?: boolean;
   libraryReturnUrl?: string;
   theme?: "dark" | "light";
+  exportName?: string;
+  onExportNameChange?: (name: string) => void;
 }
 
 export type SceneData = {