Add text field to rename the page (#629)

* Add text field to rename the page

* tweak appearance

Co-authored-by: judicael_ai <judicael@smartpredict.ai>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

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

@@ -4,9 +4,9 @@ import { styled } from '~styles'
 export const Divider = styled('hr', {
   height: 1,
   marginTop: '$1',
-  marginRight: '-$2',
+  marginRight: '-$0',
   marginBottom: '$1',
-  marginLeft: '-$2',
+  marginLeft: '-$0',
   border: 'none',
   borderBottom: '1px solid $hover',
 })

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { styled } from '~styles'
+
+export interface TextFieldProps {
+  value: string
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+}
+
+export const TextField = ({ value, onChange, placeholder = '' }: TextFieldProps) => {
+  return <StyledInput value={value} onChange={onChange} placeholder={placeholder} />
+}
+
+export const StyledInput = styled('input', {
+  color: '$text',
+  border: 'none',
+  textAlign: 'center',
+  width: '100%',
+  height: '32px',
+  outline: 'none',
+  fontFamily: '$ui',
+  fontSize: '$1',
+})

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

@@ -0,0 +1 @@
+export * from './TextField'

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

@@ -9,6 +9,7 @@ import { Divider } from '~components/Primitives/Divider'
 import { IconButton } from '~components/Primitives/IconButton/IconButton'
 import { SmallIcon } from '~components/Primitives/SmallIcon'
 import { breakpoints } from '~components/breakpoints'
+import { TextField } from '~components/Primitives/TextField'
 import { preventEvent } from '~components/preventEvent'
 
 const canDeleteSelector = (s: TDSnapshot) => {
@@ -25,6 +26,7 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr
   const app = useTldrawApp()
 
   const [isOpen, setIsOpen] = React.useState(false)
+  const [pageName, setPageName] = React.useState(page.name || 'Page')
 
   const canDelete = app.useStore(canDeleteSelector)
 
@@ -61,9 +63,9 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr
   }
 
   // TODO: Replace with text input
-  function handleRename() {
-    const nextName = window.prompt('New name:', page.name)
-    app.renamePage(page.id, nextName || page.name || 'Page')
+  function handleRename(event: React.ChangeEvent<HTMLInputElement>) {
+    setPageName(event.target.value)
+    app.renamePage(page.id, event.target.value || page.name || 'Page')
   }
 
   React.useEffect(() => {
@@ -92,7 +94,8 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr
       >
         <StyledDialogOverlay onPointerDown={close} />
         <StyledDialogContent dir="ltr" onKeyDown={stopPropagation} onKeyUp={stopPropagation}>
-          <DialogAction onSelect={handleRename}>Rename</DialogAction>
+          <TextField placeholder="Page name" value={pageName} onChange={handleRename} />
+          <Divider />
           <DialogAction onSelect={handleDuplicate}>Duplicate</DialogAction>
           <DialogAction disabled={!canDelete} onSelect={handleDelete}>
             Delete