Make requested changes

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");

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`

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>

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 = {