persist file name to LS

excalidraw-app/App.tsx

@@ -45,7 +45,6 @@ import {
   ResolvablePromise,
   resolvablePromise,
   isRunningInIframe,
-  getDateTime,
 } from "../packages/excalidraw/utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
@@ -105,6 +104,7 @@ import { openConfirmModal } from "../packages/excalidraw/components/OverwriteCon
 import { OverwriteConfirmDialog } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import { getFileName } from "../packages/excalidraw/data/filename";
 
 polyfill();
 
@@ -691,7 +691,6 @@ const ExcalidrawWrapper = () => {
       </div>
     );
   }
-
   return (
     <div
       style={{ height: "100%" }}
@@ -776,7 +775,7 @@ const ExcalidrawWrapper = () => {
                   excalidrawAPI.getSceneElements(),
                   excalidrawAPI.getAppState(),
                   excalidrawAPI.getFiles(),
-                  `${t("labels.untitled")}-${getDateTime()}`,
+                  getFileName(),
                 );
               }}
             >

excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -23,8 +23,9 @@ import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
 import { MIME_TYPES } from "../../packages/excalidraw/constants";
 import { trackEvent } from "../../packages/excalidraw/analytics";
-import { getDateTime, getFrame } from "../../packages/excalidraw/utils";
+import { getFrame } from "../../packages/excalidraw/utils";
 import { ExcalidrawLogo } from "../../packages/excalidraw/components/ExcalidrawLogo";
+import { getFileName } from "../../packages/excalidraw/data/filename";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -122,7 +123,7 @@ export const ExportToExcalidrawPlus: React.FC<{
               elements,
               appState,
               files,
-              `${t("labels.untitled")}-${getDateTime()}`,
+              getFileName(),
             );
             onSuccess();
           } catch (error: any) {

packages/excalidraw/actions/actionClipboard.tsx

@@ -13,7 +13,7 @@ import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
-import { getDateTime } from "../utils";
+import { getFileName } from "../data/filename";
 
 export const actionCopy = register({
   name: "copy",
@@ -139,7 +139,7 @@ export const actionCopyAsSvg = register({
         {
           ...appState,
           exportingFrame,
-          name: app.props.name || `${t("labels.untitled")}-${getDateTime()}`,
+          name: app.props.name || getFileName(),
         },
       );
       return {
@@ -186,7 +186,7 @@ export const actionCopyAsPng = register({
       await exportCanvas("clipboard", exportedElements, appState, app.files, {
         ...appState,
         exportingFrame,
-        name: app.props.name || `${t("labels.untitled")}-${getDateTime()}`,
+        name: app.props.name || getFileName(),
       });
       return {
         appState: {

packages/excalidraw/actions/actionExport.tsx

@@ -17,9 +17,9 @@ import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
+import { getFileName } from "../data/filename";
 
 import "../components/ToolIcon.scss";
-import { getDateTime } from "../utils";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -149,13 +149,13 @@ export const actionSaveToActiveFile = register({
             elements,
             appState,
             app.files,
-            app.props.name || `${t("labels.untitled")}-${getDateTime()}`,
+            app.props.name || getFileName(),
           )
         : await saveAsJSON(
             elements,
             appState,
             app.files,
-            app.props.name || `${t("labels.untitled")}-${getDateTime()}`,
+            app.props.name || getFileName(),
           );
 
       return {
@@ -201,7 +201,7 @@ export const actionSaveFileToDisk = register({
           fileHandle: null,
         },
         app.files,
-        app.props.name || `${t("labels.untitled")}-${getDateTime()}`,
+        app.props.name || getFileName(),
       );
       return {
         commitToHistory: false,

packages/excalidraw/components/App.tsx

@@ -270,7 +270,6 @@ import {
   updateStable,
   addEventListener,
   normalizeEOL,
-  getDateTime,
 } from "../utils";
 import {
   createSrcDoc,
@@ -410,6 +409,7 @@ import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
+import { getFileName } from "../data/filename";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -1724,7 +1724,7 @@ class App extends React.Component<AppProps, AppState> {
       this.files,
       {
         exportBackground: this.state.exportBackground,
-        name: this.props?.name || `${t("labels.untitled")}-${getDateTime()}`,
+        name: this.props?.name || getFileName(),
         viewBackgroundColor: this.state.viewBackgroundColor,
         exportingFrame: opts.exportingFrame,
       },

packages/excalidraw/components/ImageExportDialog.tsx

@@ -34,8 +34,9 @@ import { Tooltip } from "./Tooltip";
 import "./ImageExportDialog.scss";
 import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
-import { cloneJSON, getDateTime } from "../utils";
+import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
+import { getFileName } from "../data/filename";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -74,7 +75,7 @@ const ImageExportModal = ({
 
   const appProps = useAppProps();
   const [projectName, setProjectName] = useState(
-    appProps.name || `${t("labels.untitled")}-${getDateTime()}`,
+    appProps.name || getFileName(),
   );
   const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
   const [exportWithBackground, setExportWithBackground] = useState(

packages/excalidraw/components/ProjectName.tsx

@@ -1,12 +1,15 @@
 import "./TextInput.scss";
 
 import React, { useState } from "react";
-import { focusNearestParent, getDateTime } from "../utils";
+import { focusNearestParent } from "../utils";
 
 import "./ProjectName.scss";
 import { useExcalidrawContainer } from "./App";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
+import { EditorLocalStorage } from "../data/EditorLocalStorage";
+import { EDITOR_LS_KEYS } from "../constants";
+import { getFileName } from "../data/filename";
 
 type Props = {
   value?: string;
@@ -19,10 +22,12 @@ type Props = {
 export const ProjectName = (props: Props) => {
   const { id } = useExcalidrawContainer();
   const [fileName, setFileName] = useState<string>(
-    props.value || `${t("labels.untitled")}-${getDateTime()}`,
+    props.value || getFileName(),
   );
 
   const handleBlur = (event: any) => {
+    EditorLocalStorage.set(EDITOR_LS_KEYS.EXCALIDRAW_FILE_NAME, fileName);
+
     if (!props.ignoreFocus) {
       focusNearestParent(event.target);
     }

packages/excalidraw/constants.ts

@@ -380,4 +380,5 @@ export const EDITOR_LS_KEYS = {
   // legacy naming (non)scheme
   MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
   PUBLISH_LIBRARY: "publish-library-data",
+  EXCALIDRAW_FILE_NAME: "excalidraw-file-name",
 } as const;