feat: add rename file dialog

packages/tldraw/src/Tldraw.tsx

@@ -467,6 +467,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
     <ContainerContext.Provider value={rWrapper}>
       <IntlProvider locale={translation.locale} messages={translation.messages}>
         <AlertDialog container={dialogContainer} />
+        {/* <FilenameDialog isOpen={true} onClose={() => {}} /> */}
         <StyledLayout ref={rWrapper} tabIndex={-0}>
           <Loading />
           <OneOff focusableRef={rWrapper} autofocus={autofocus} />

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

@@ -144,7 +144,7 @@ const StyledContent = styled(AlertDialogPrimitive.Content, {
   boxShadow: '$panel',
 })
 
-const Button = styled('button', {
+export const Button = styled('button', {
   all: 'unset',
   display: 'inline-flex',
   alignItems: 'center',

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

@@ -0,0 +1,118 @@
+import * as Dialog from '@radix-ui/react-alert-dialog'
+import { Pencil1Icon } from '@radix-ui/react-icons'
+import * as React from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
+import { useContainer, useTldrawApp } from '~hooks'
+import { styled } from '~styles'
+import { TextField } from '../TextField'
+import { Button } from './AlertDialog'
+
+interface FilenameDialogProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const FilenameDialog = ({ isOpen, onClose }: FilenameDialogProps) => {
+  const app = useTldrawApp()
+  const container = useContainer()
+  const intl = useIntl()
+  const [filename, setFilename] = React.useState('')
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trimStart()
+    setFilename(value)
+  }, [])
+
+  function stopPropagation(e: React.KeyboardEvent<HTMLDivElement>) {
+    e.stopPropagation()
+  }
+
+  const handleTextFieldKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (e.key) {
+      case 'Enter': {
+        app.saveProjectAs(filename)
+        onClose()
+        break
+      }
+      case 'Escape': {
+        onClose()
+        break
+      }
+    }
+  }, [])
+
+  return (
+    <Dialog.Root open={isOpen}>
+      <Dialog.Portal container={container.current}>
+        <StyledDialogOverlay onPointerDown={onClose} />
+        <StyledDialogContent dir="ltr" onKeyDown={stopPropagation} onKeyUp={stopPropagation}>
+          <Input
+            placeholder={intl.formatMessage({ id: 'enter.file.name' })}
+            value={filename}
+            onChange={handleChange}
+            onKeyDown={handleTextFieldKeyDown}
+            icon={<Pencil1Icon />}
+          />
+          <ActionWrapper>
+            <Dialog.Action asChild>
+              <Button onClick={onClose}>
+                <FormattedMessage id="cancel" />
+              </Button>
+            </Dialog.Action>
+            <Dialog.Action asChild>
+              <Button
+                css={{ backgroundColor: '#2F80ED', color: 'White' }}
+                onClick={() => {
+                  app.saveProjectAs(filename)
+                  onClose()
+                }}
+              >
+                <FormattedMessage id="save" />
+              </Button>
+            </Dialog.Action>
+          </ActionWrapper>
+        </StyledDialogContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+const StyledDialogContent = styled(Dialog.Content, {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 300,
+  maxWidth: 'fit-content',
+  maxHeight: '85vh',
+  marginTop: '-5vh',
+  pointerEvents: 'all',
+  backgroundColor: '$panel',
+  padding: '$3',
+  borderRadius: '$2',
+  font: '$ui',
+  zIndex: 999999,
+  '&:focus': {
+    outline: 'none',
+  },
+})
+
+const StyledDialogOverlay = styled(Dialog.Overlay, {
+  backgroundColor: 'rgba(0, 0, 0, .15)',
+  position: 'absolute',
+  pointerEvents: 'all',
+  inset: 0,
+  zIndex: 999998,
+})
+
+const ActionWrapper = styled('div', {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  justifyContent: 'flex-end',
+  marginTop: 10,
+})
+
+const Input = styled(TextField, {
+  background: '$hover',
+})

packages/tldraw/src/components/Primitives/AlertDialog/index.ts

@@ -1 +1,2 @@
 export * from './AlertDialog'
+export * from './FilenameDialog'

packages/tldraw/src/components/TopPanel/Menu/Menu.tsx

@@ -1,7 +1,9 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { HamburgerMenuIcon } from '@radix-ui/react-icons'
+import { supported } from 'browser-fs-access'
 import * as React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { FilenameDialog } from '~components/Primitives/AlertDialog'
 import { Divider } from '~components/Primitives/Divider'
 import { DMContent, DMItem, DMSubMenu, DMTriggerIcon } from '~components/Primitives/DropdownMenu'
 import { preventEvent } from '~components/preventEvent'
@@ -25,6 +27,7 @@ const disableAssetsSelector = (s: TDSnapshot) => {
 export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
   const app = useTldrawApp()
   const intl = useIntl()
+  const [openDialog, setOpenDialog] = React.useState(false)
 
   const numberOfSelectedIds = app.useStore(numberOfSelectedIdsSelector)
 
@@ -36,6 +39,14 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
 
   const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers()
 
+  const handleSaveProjectAs = React.useCallback(() => {
+    if (!supported) {
+      setOpenDialog(true)
+    } else {
+      app.saveProjectAs()
+    }
+  }, [app])
+
   const handleDelete = React.useCallback(() => {
     app.delete()
   }, [app])
@@ -110,6 +121,7 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
   const hasSelection = numberOfSelectedIds > 0
 
   return (
+    <>
       <DropdownMenu.Root dir="ltr">
         <DMTriggerIcon id="TD-MenuIcon">
           <HamburgerMenuIcon />
@@ -123,7 +135,10 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
           alignOffset={4}
         >
           {showFileMenu && (
-          <DMSubMenu label={`${intl.formatMessage({ id: 'menu.file' })}...`} id="TD-MenuItem-File">
+            <DMSubMenu
+              label={`${intl.formatMessage({ id: 'menu.file' })}...`}
+              id="TD-MenuItem-File"
+            >
               {app.callbacks.onNewProject && (
                 <DMItem onClick={onNewProject} kbd="#N" id="TD-MenuItem-File-New_Project">
                   <FormattedMessage id="new.project" />
@@ -141,7 +156,7 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
                 </DMItem>
               )}
               {app.callbacks.onSaveProjectAs && (
-              <DMItem onClick={onSaveProjectAs} kbd="#⇧S" id="TD-MenuItem-File-Save_As">
+                <DMItem onClick={handleSaveProjectAs} kbd="#⇧S" id="TD-MenuItem-File-Save_As">
                   <FormattedMessage id="save.as" />
                   ...
                 </DMItem>
@@ -258,7 +273,12 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
               <FormattedMessage id="select.none" />
             </DMItem>
             <Divider />
-          <DMItem onSelect={handleDelete} disabled={!hasSelection} kbd="⌫" id="TD-MenuItem-Delete">
+            <DMItem
+              onSelect={handleDelete}
+              disabled={!hasSelection}
+              kbd="⌫"
+              id="TD-MenuItem-Delete"
+            >
               <FormattedMessage id="delete" />
             </DMItem>
           </DMSubMenu>
@@ -308,5 +328,7 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
           <PreferencesMenu />
         </DMContent>
       </DropdownMenu.Root>
+      <FilenameDialog isOpen={openDialog} onClose={() => setOpenDialog(false)} />
+    </>
   )
 })

packages/tldraw/src/state/TldrawApp.ts

@@ -1416,9 +1416,9 @@ export class TldrawApp extends StateManager<TDSnapshot> {
   /**
    * Save the current project as a new file.
    */
-  saveProjectAs = async () => {
+  saveProjectAs = async (filename?: string) => {
     try {
-      const fileHandle = await saveToFileSystem(this.document, null)
+      const fileHandle = await saveToFileSystem(this.document, null, filename)
       this.fileSystemHandle = fileHandle
       this.persist({})
       this.isDirty = false

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

@@ -26,7 +26,8 @@ export async function saveFileHandle(fileHandle: FileSystemFileHandle | null) {
 
 export async function saveToFileSystem(
   document: TDDocument,
-  fileHandle: FileSystemFileHandle | null
+  fileHandle: FileSystemFileHandle | null,
+  name?: string
 ) {
   // Create the saved file data
   const file: TDFile = {
@@ -48,10 +49,7 @@ export async function saveToFileSystem(
     const hasPermissions = await checkPermissions(fileHandle)
     if (!hasPermissions) return null
   }
-  let filename = `${file.name}`
+  const filename = !supported && name?.length ? name : `${file.name}`
-  if (!supported) {
-    filename = prompt('Enter the desired file name!') ?? `${file.name}`
-  }
   // Save to file system
   const newFileHandle = await fileSave(
     blob,

packages/tldraw/src/translations/main.json

@@ -122,5 +122,6 @@
   "dialog.save.again": "Do you want to save changes to your current project?",
   "dialog.cancel": "Cancel",
   "dialog.no": "No",
-  "dialog.yes": "Yes"
+  "dialog.yes": "Yes",
+  "enter.file.name": "Enter file name"
 }