Revert "Remove unused project name from export dialog (#2427)" (#2436)

src/components/ExportDialog.tsx

@@ -165,6 +165,9 @@ const ExportModal = ({
               onClick={() => onExportToBackend(exportedElements)}
             />
           </Stack.Row>
+          <div className="ExportDialog__name">
+            {actionManager.renderAction("changeProjectName")}
+          </div>
           <Stack.Row gap={2}>
             {scales.map((s) => {
               const [width, height] = getExportSize(

src/components/LayerUI.tsx

@@ -326,6 +326,7 @@ const LayerUI = ({
       if (canvas) {
         await exportCanvas(type, exportedElements, appState, canvas, {
           exportBackground: appState.exportBackground,
+          name: appState.name,
           viewBackgroundColor: appState.viewBackgroundColor,
           scale,
           shouldAddWatermark: appState.shouldAddWatermark,

src/components/ProjectName.tsx

@@ -0,0 +1,62 @@
+import "./TextInput.scss";
+
+import React, { Component } from "react";
+import { selectNode, removeSelection } from "../utils";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+};
+
+export class ProjectName extends Component<Props> {
+  private handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+    selectNode(event.currentTarget);
+  };
+
+  private handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+    const value = event.currentTarget.innerText.trim();
+    if (value !== this.props.value) {
+      this.props.onChange(value);
+    }
+    removeSelection();
+  };
+
+  private handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (event.nativeEvent.isComposing || event.keyCode === 229) {
+        return;
+      }
+      event.currentTarget.blur();
+    }
+  };
+  private makeEditable = (editable: HTMLSpanElement | null) => {
+    if (!editable) {
+      return;
+    }
+    try {
+      editable.contentEditable = "plaintext-only";
+    } catch {
+      editable.contentEditable = "true";
+    }
+  };
+
+  public render() {
+    return (
+      <span
+        suppressContentEditableWarning
+        ref={this.makeEditable}
+        data-type="wysiwyg"
+        className="TextInput"
+        role="textbox"
+        aria-label={this.props.label}
+        onBlur={this.handleBlur}
+        onKeyDown={this.handleKeyDown}
+        onFocus={this.handleFocus}
+      >
+        {this.props.value}
+      </span>
+    );
+  }
+}