Remove unused project name from export dialog (#2427)

* Remove unused project name from export dialog

* snaps

src/actions/actionExport.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { ProjectName } from "../components/ProjectName";
 import { saveAsJSON, loadFromJSON } from "../data";
 import { load, save, saveAs } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
@@ -9,20 +8,6 @@ import { register } from "./register";
 import { KEYS } from "../keys";
 import { muteFSAbortError } from "../utils";
 
-export const actionChangeProjectName = register({
-  name: "changeProjectName",
-  perform: (_elements, appState, value) => {
-    return { appState: { ...appState, name: value }, commitToHistory: false };
-  },
-  PanelComponent: ({ appState, updateData }) => (
-    <ProjectName
-      label={t("labels.fileTitle")}
-      value={appState.name || "Unnamed"}
-      onChange={(name: string) => updateData(name)}
-    />
-  ),
-});
-
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
   perform: (_elements, appState, value) => {

src/actions/index.ts

@@ -31,7 +31,6 @@ export {
 export { actionFinalize } from "./actionFinalize";
 
 export {
-  actionChangeProjectName,
   actionChangeExportBackground,
   actionSaveScene,
   actionSaveAsScene,

src/actions/types.ts

@@ -42,7 +42,6 @@ export type ActionName =
   | "undo"
   | "redo"
   | "finalize"
-  | "changeProjectName"
   | "changeExportBackground"
   | "changeExportEmbedScene"
   | "changeShouldAddWatermark"

src/appState.ts

@@ -1,7 +1,5 @@
 import oc from "open-color";
 import { AppState, FlooredNumber, NormalizedZoomValue } from "./types";
-import { getDateTime } from "./utils";
-import { t } from "./i18n";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
@@ -46,7 +44,6 @@ export const getDefaultAppState = (): Omit<
     cursorY: 0,
     cursorButton: "up",
     scrolledOutside: false,
-    name: `${t("labels.untitled")}-${getDateTime()}`,
     username: "",
     isBindingEnabled: true,
     isCollaborating: false,
@@ -128,7 +125,6 @@ const APP_STATE_STORAGE_CONF = (<
   isRotating: { browser: false, export: false },
   lastPointerDownWith: { browser: true, export: false },
   multiElement: { browser: false, export: false },
-  name: { browser: true, export: false },
   openMenu: { browser: true, export: false },
   previousSelectedElementIds: { browser: true, export: false },
   resizingElement: { browser: false, export: false },

src/components/ExportDialog.tsx

@@ -165,9 +165,6 @@ 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,7 +326,6 @@ 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

@@ -1,62 +0,0 @@
-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>
-    );
-  }
-}

src/data/index.ts

@@ -283,14 +283,12 @@ export const exportCanvas = async (
     exportBackground,
     exportPadding = 10,
     viewBackgroundColor,
-    name,
     scale = 1,
     shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
-    name: string;
     scale?: number;
     shouldAddWatermark: boolean;
   },
@@ -316,7 +314,6 @@ export const exportCanvas = async (
     });
     if (type === "svg") {
       await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
-        fileName: `${name}.svg`,
         extensions: [".svg"],
       });
       return;
@@ -337,7 +334,6 @@ export const exportCanvas = async (
   document.body.appendChild(tempCanvas);
 
   if (type === "png") {
-    const fileName = `${name}.png`;
     let blob = await canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = await (
@@ -349,7 +345,6 @@ export const exportCanvas = async (
     }
 
     await fileSave(blob, {
-      fileName: fileName,
       extensions: [".png"],
     });
   } else if (type === "clipboard") {

src/data/json.ts

@@ -36,7 +36,6 @@ export const saveAsJSON = async (
   const fileHandle = await fileSave(
     blob,
     {
-      fileName: appState.name,
       description: "Excalidraw file",
       extensions: [".excalidraw"],
     },

src/history.ts

@@ -24,7 +24,6 @@ const clearAppStatePropertiesForHistory = (appState: AppState) => {
     viewBackgroundColor: appState.viewBackgroundColor,
     editingLinearElement: appState.editingLinearElement,
     editingGroupId: appState.editingGroupId,
-    name: appState.name,
   };
 };
 

src/locales/en.json

@@ -54,7 +54,6 @@
     "architect": "Architect",
     "artist": "Artist",
     "cartoonist": "Cartoonist",
-    "fileTitle": "File title",
     "colorPicker": "Color picker",
     "canvasBackground": "Canvas background",
     "drawingCanvas": "Drawing canvas",
@@ -63,7 +62,6 @@
     "language": "Language",
     "createRoom": "Share a live-collaboration session",
     "duplicateSelection": "Duplicate",
-    "untitled": "Untitled",
     "name": "Name",
     "yourName": "Your name",
     "madeWithExcalidraw": "Made with Excalidraw",

src/types.ts

@@ -68,7 +68,6 @@ export type AppState = {
   cursorY: number;
   cursorButton: "up" | "down";
   scrolledOutside: boolean;
-  name: string;
   username: string;
   isCollaborating: boolean;
   isResizing: boolean;