From 1db286990649c4bcdd5bd58c67aac9fdae0a75a9 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 5 Feb 2024 19:26:52 +0530 Subject: [PATCH] persist file name to LS --- excalidraw-app/App.tsx | 5 ++--- excalidraw-app/components/ExportToExcalidrawPlus.tsx | 5 +++-- packages/excalidraw/actions/actionClipboard.tsx | 6 +++--- packages/excalidraw/actions/actionExport.tsx | 8 ++++---- packages/excalidraw/components/App.tsx | 4 ++-- packages/excalidraw/components/ImageExportDialog.tsx | 5 +++-- packages/excalidraw/components/ProjectName.tsx | 9 +++++++-- packages/excalidraw/constants.ts | 1 + 8 files changed, 25 insertions(+), 18 deletions(-) diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx index 2e750defa..3bdd7bc2f 100644 --- a/excalidraw-app/App.tsx +++ b/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 = () => { ); } - return (
{ excalidrawAPI.getSceneElements(), excalidrawAPI.getAppState(), excalidrawAPI.getFiles(), - `${t("labels.untitled")}-${getDateTime()}`, + getFileName(), ); }} > diff --git a/excalidraw-app/components/ExportToExcalidrawPlus.tsx b/excalidraw-app/components/ExportToExcalidrawPlus.tsx index 5127ac7f4..4b28e7de1 100644 --- a/excalidraw-app/components/ExportToExcalidrawPlus.tsx +++ b/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) { diff --git a/packages/excalidraw/actions/actionClipboard.tsx b/packages/excalidraw/actions/actionClipboard.tsx index 2ed936e65..878608afb 100644 --- a/packages/excalidraw/actions/actionClipboard.tsx +++ b/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: { diff --git a/packages/excalidraw/actions/actionExport.tsx b/packages/excalidraw/actions/actionExport.tsx index 7b07c1f73..a340a1c0e 100644 --- a/packages/excalidraw/actions/actionExport.tsx +++ b/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, diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index e99366239..c5b28602a 100644 --- a/packages/excalidraw/components/App.tsx +++ b/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(null!); const AppPropsContext = React.createContext(null!); @@ -1724,7 +1724,7 @@ class App extends React.Component { 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, }, diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx index 533adf648..526c37a2d 100644 --- a/packages/excalidraw/components/ImageExportDialog.tsx +++ b/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( diff --git a/packages/excalidraw/components/ProjectName.tsx b/packages/excalidraw/components/ProjectName.tsx index 8d50630a8..b355b49e3 100644 --- a/packages/excalidraw/components/ProjectName.tsx +++ b/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( - 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); } diff --git a/packages/excalidraw/constants.ts b/packages/excalidraw/constants.ts index 021c706a9..8ab228f20 100644 --- a/packages/excalidraw/constants.ts +++ b/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;