add default value to file name, extension file

packages/tldraw/src/components/Primitives/AlertDialog/FilenameDialog.tsx

@@ -16,7 +16,7 @@ export const FilenameDialog = ({ isOpen, onClose }: FilenameDialogProps) => {
   const app = useTldrawApp()
   const container = useContainer()
   const intl = useIntl()
-  const [filename, setFilename] = React.useState('')
+  const [filename, setFilename] = React.useState(app.document.name)
 
   const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value.trimStart()
@@ -63,7 +63,9 @@ export const FilenameDialog = ({ isOpen, onClose }: FilenameDialogProps) => {
               <Button
                 css={{ backgroundColor: '#2F80ED', color: 'White' }}
                 onClick={() => {
-                  app.saveProjectAs(filename)
+                  // Remove the file extension if the user entered it
+                  const name = filename.trim().replace(/\.tldr$/, '')
+                  app.saveProjectAs(name)
                   onClose()
                 }}
               >

packages/tldraw/src/constants.ts

@@ -17,6 +17,8 @@ export const LABEL_POINT = [0.5, 0.5]
 
 export const PI2 = Math.PI * 2
 
+export const FILE_EXTENSION = '.tldr'
+
 export const EASINGS: Record<Easing, (t: number) => number> = {
   linear: (t) => t,
   easeInQuad: (t) => t * t,

packages/tldraw/src/state/data/filesystem.ts

@@ -1,7 +1,7 @@
 import { fileOpen, fileSave, supported } from 'browser-fs-access'
 import type { FileSystemHandle } from 'browser-fs-access'
 import { get as getFromIdb, set as setToIdb } from 'idb-keyval'
-import { IMAGE_EXTENSIONS, VIDEO_EXTENSIONS } from '~constants'
+import { FILE_EXTENSION, IMAGE_EXTENSIONS, VIDEO_EXTENSIONS } from '~constants'
 import type { TDDocument, TDFile } from '~types'
 
 const options = { mode: 'readwrite' as const }
@@ -54,9 +54,9 @@ export async function saveToFileSystem(
   const newFileHandle = await fileSave(
     blob,
     {
-      fileName: `${filename}.tldr`,
+      fileName: `${filename}${FILE_EXTENSION}`,
       description: 'Tldraw File',
-      extensions: [`.tldr`],
+      extensions: [`${FILE_EXTENSION}`],
     },
     fileHandle
   )
@@ -74,7 +74,7 @@ export async function openFromFileSystem(): Promise<null | {
   // Get the blob
   const blob = await fileOpen({
     description: 'Tldraw File',
-    extensions: [`.tldr`],
+    extensions: [`${FILE_EXTENSION}`],
     multiple: false,
   })