Make requested changes

src/actions/actionExport.tsx

@@ -23,6 +23,7 @@ export const actionChangeProjectName = register({
       label={t("labels.fileTitle")}
       value={appState.name || "Unnamed"}
       onChange={(name: string) => updateData(name)}
+      customName={appState.customName}
     />
   ),
 });

src/appState.ts

@@ -74,6 +74,7 @@ export const getDefaultAppState = (): Omit<
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
+    customName: false,
   };
 };
 
@@ -155,6 +156,7 @@ const APP_STATE_STORAGE_CONF = (<
   zenModeEnabled: { browser: true, export: false },
   zoom: { browser: true, export: false },
   viewModeEnabled: { browser: false, export: false },
+  customName: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/App.tsx

@@ -304,7 +304,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       zenModeEnabled = false,
       gridModeEnabled = false,
       theme = defaultAppState.theme,
-      exportName = defaultAppState.name,
+      name,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -316,7 +316,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       viewModeEnabled,
       zenModeEnabled,
       gridSize: gridModeEnabled ? GRID_SIZE : null,
-      name: exportName,
+      name: name ? name : defaultAppState.name,
+      customName: typeof name === "string",
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -525,6 +526,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
         let theme = actionResult?.appState?.theme || "light";
+        let name = actionResult?.appState?.name || this.state.name;
 
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
@@ -542,6 +544,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           theme = this.props.theme;
         }
 
+        if (typeof this.props.name !== "undefined") {
+          name = this.props.name;
+        }
+
         this.setState(
           (state) => {
             // using Object.assign instead of spread to fool TS 4.2.2+ into
@@ -558,6 +564,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
               zenModeEnabled,
               gridSize,
               theme,
+              name,
+              customName: typeof this.props.name === "string",
             });
           },
           () => {
@@ -903,19 +911,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    if (
-      prevProps.exportName !== this.props.exportName &&
-      this.props.exportName
-    ) {
+    if (prevProps.name !== this.props.name && this.props.name) {
       this.setState({
-        name: this.props.exportName,
+        name: this.props.name,
       });
     }
 
-    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/components/ProjectName.tsx

@@ -7,6 +7,7 @@ type Props = {
   value: string;
   onChange: (value: string) => void;
   label: string;
+  customName: boolean;
 };
 
 export class ProjectName extends Component<Props> {
@@ -43,7 +44,11 @@ export class ProjectName extends Component<Props> {
   };
 
   public render() {
-    return (
+    return this.props.customName ? (
+      <span className="TextInput" aria-label={this.props.label}>
+        {this.props.value}
+      </span>
+    ) : (
       <span
         suppressContentEditableWarning
         ref={this.makeEditable}

src/packages/excalidraw/README.md

@@ -378,8 +378,7 @@ 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 |
+| [`name`](#name) | string |  | Name of the drawing |
 
 #### `width`
 
@@ -545,14 +544,10 @@ 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`
+### `name`
 
 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,8 +31,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     gridModeEnabled,
     libraryReturnUrl,
     theme,
-    exportName,
-    onExportNameChange,
+    name,
   } = props;
 
   useEffect(() => {
@@ -75,8 +74,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
           theme={theme}
-          exportName={exportName}
-          onExportNameChange={onExportNameChange}
+          name={name}
         />
       </IsMobileProvider>
     </InitializeApp>

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -19,6 +19,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -480,6 +481,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -947,6 +949,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": "id10",
@@ -1723,6 +1726,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -1927,6 +1931,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -2385,6 +2390,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -2638,6 +2644,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -2802,6 +2809,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -3279,6 +3287,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -3587,6 +3596,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -3791,6 +3801,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -4035,6 +4046,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -4287,6 +4299,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -4648,6 +4661,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -4943,6 +4957,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -5250,6 +5265,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -5458,6 +5474,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -5644,6 +5661,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": "id3",
@@ -6097,6 +6115,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -6415,6 +6434,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -8449,6 +8469,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -8811,6 +8832,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -9066,6 +9088,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -9319,6 +9342,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -9634,6 +9658,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -9798,6 +9823,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -9962,6 +9988,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -10126,6 +10153,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -10320,6 +10348,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -10514,6 +10543,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -10708,6 +10738,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -10902,6 +10933,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -11066,6 +11098,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -11230,6 +11263,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -11424,6 +11458,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -11588,6 +11623,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -11782,6 +11818,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -12498,6 +12535,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -12751,6 +12789,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -12853,6 +12892,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -12953,6 +12993,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -13117,6 +13158,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -13425,6 +13467,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -13733,6 +13776,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -13897,6 +13941,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -14093,6 +14138,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -14342,6 +14388,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -14666,6 +14713,7 @@ Object {
   "currentItemStrokeWidth": 2,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -15505,6 +15553,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -15813,6 +15862,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -16121,6 +16171,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -16500,6 +16551,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -16667,6 +16719,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -16988,6 +17041,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -17227,6 +17281,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -17482,6 +17537,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -17809,6 +17865,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -17909,6 +17966,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -18073,6 +18131,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -18894,6 +18953,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -18994,6 +19054,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": "id3",
@@ -19726,6 +19787,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -20131,6 +20193,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
@@ -20426,6 +20489,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -20528,6 +20592,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -21026,6 +21091,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,
@@ -21126,6 +21192,7 @@ Object {
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "customName": false,
   "draggingElement": null,
   "editingElement": null,
   "editingGroupId": null,

src/types.ts

@@ -93,6 +93,7 @@ export type AppState = {
   theme: "light" | "dark";
   gridSize: number | null;
   viewModeEnabled: boolean;
+  customName: boolean;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };
@@ -191,8 +192,7 @@ export interface ExcalidrawProps {
   gridModeEnabled?: boolean;
   libraryReturnUrl?: string;
   theme?: "dark" | "light";
-  exportName?: string;
-  onExportNameChange?: (name: string) => void;
+  name?: string;
 }
 
 export type SceneData = {