Updated EditableText component

src/components/EditableText.tsx

@@ -1,51 +1,38 @@
-import React, { createRef, Fragment, Component } from "react";
+import React, { Fragment, Component } from "react";
 
 type InputState = {
-  initialValue: string;
   value: string;
   edit: boolean;
 };
 
 type Props = {
   value: string;
-  updateName: (name: string) => void;
+  onChange: (value: string) => void;
 };
 
-export default class EditableInput extends Component<Props, InputState> {
+export default class EditableText extends Component<Props, InputState> {
   constructor(props: Props) {
     super(props);
-    const { value } = props;
 
     this.state = {
-      initialValue: value,
-      value,
+      value: props.value,
       edit: false
     };
   }
 
-  private inputRef = createRef<HTMLInputElement>();
-
   private handleEdit(e: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ value: e.target.value });
   }
 
   private handleBlur() {
-    const { value, initialValue } = this.state;
+    const { value } = this.state;
 
     if (!value) {
-      this.setState({ value: initialValue, edit: false });
+      this.setState({ value: this.props.value, edit: false });
       return;
     }
-    this.props.updateName(value);
-    this.setState({ edit: false, initialValue: value });
-  }
-
-  private focusInput() {
-    const input = this.inputRef.current;
-    if (input) {
-      input.focus();
-    }
-    this.setState({ edit: true });
+    this.props.onChange(value);
+    this.setState({ edit: false });
   }
 
   public render() {
@@ -61,10 +48,13 @@ export default class EditableInput extends Component<Props, InputState> {
             value={value}
             onChange={e => this.handleEdit(e)}
             onBlur={() => this.handleBlur()}
-            ref={this.inputRef}
+            autoFocus
           />
         ) : (
-          <span onClick={() => this.focusInput()} className="project-name">
+          <span
+            onClick={() => this.setState({ edit: true })}
+            className="project-name"
+          >
             {value}
           </span>
         )}

src/index.tsx

@@ -626,7 +626,7 @@ function exportAsPNG({
     }
   );
 
-  saveFile(name, tempCanvas.toDataURL("image/png"));
+  saveFile(`${name}.png`, tempCanvas.toDataURL("image/png"));
 
   // clean up the DOM
   if (tempCanvas !== canvas) tempCanvas.remove();
@@ -992,6 +992,7 @@ class App extends React.Component<{}, AppState> {
       this.setState(savedState);
     }
 
+    // set default name
     if (!(savedState && savedState.name)) {
       const name = `excalidraw-${getDateTime()}`;
       this.setState({ name });
@@ -1147,8 +1148,6 @@ class App extends React.Component<{}, AppState> {
     const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
     const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
 
-    const { name } = this.state;
-
     return (
       <div
         className="container"
@@ -1194,13 +1193,12 @@ class App extends React.Component<{}, AppState> {
       >
         <div className="sidePanel">
           <h4>Project name</h4>
-          {name && (
+          {this.state.name && (
             <EditableText
-              value={name}
-              updateName={(name: string) => this.updateProjectName(name)}
+              value={this.state.name}
+              onChange={(name: string) => this.updateProjectName(name)}
             />
           )}
-
           <h4>Shapes</h4>
           <div className="panelTools">
             {SHAPES.map(({ value, icon }) => (