feat: translate page name when creating new page (#720)

* feat: translate page name when creating new page

* Update createPage.ts

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

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

@@ -9,7 +9,7 @@ import { DMContent, DMDivider } from '~components/Primitives/DropdownMenu'
 import { SmallIcon } from '~components/Primitives/SmallIcon'
 import { RowButton } from '~components/Primitives/RowButton'
 import { ToolButton } from '~components/Primitives/ToolButton'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 const sortedSelector = (s: TDSnapshot) =>
   Object.values(s.document.pages).sort((a, b) => (a.childIndex || 0) - (b.childIndex || 0))
@@ -59,13 +59,14 @@ export function PageMenu() {
 
 function PageMenuContent({ onClose }: { onClose: () => void }) {
   const app = useTldrawApp()
+  const intl = useIntl()
 
   const sortedPages = app.useStore(sortedSelector)
 
   const currentPageId = app.useStore(currentPageIdSelector)
 
   const handleCreatePage = React.useCallback(() => {
-    app.createPage()
+    app.createPage(undefined, intl.formatMessage({ id: 'new.page' }))
   }, [app])
 
   const handleChangePage = React.useCallback(

packages/tldraw/src/state/TldrawApp.ts

@@ -1666,10 +1666,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    * Create a new page.
    * @param pageId (optional) The new page's id.
    */
-  createPage = (id?: string): this => {
+  createPage = (id?: string, name?: string): this => {
     if (this.readOnly) return this
     const { width, height } = this.rendererBounds
-    return this.setState(Commands.createPage(this, [-width / 2, -height / 2], id))
+    return this.setState(Commands.createPage(this, [-width / 2, -height / 2], id, name))
   }
 
   /**
@@ -1758,7 +1758,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     e?.preventDefault()
 
     this.copy(ids, e)
-    
+
     if (!this.readOnly) {
       this.delete(ids)
     }
@@ -1772,7 +1772,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    */
   copy = (ids = this.selectedIds, e?: ClipboardEvent): this => {
     // Allow when in readOnly mode
-    
+
     e?.preventDefault()
 
     this.clipboard = this.getClipboard(ids)

packages/tldraw/src/state/commands/createPage/createPage.ts

@@ -5,7 +5,8 @@ import type { TldrawApp } from '~state'
 export function createPage(
   app: TldrawApp,
   center: number[],
-  pageId = Utils.uniqueId()
+  pageId = Utils.uniqueId(),
+  pageName = 'New page'
 ): TldrawCommand {
   const { currentPageId } = app
 
@@ -16,11 +17,10 @@ export function createPage(
   const nextChildIndex = topPage?.childIndex ? topPage?.childIndex + 1 : 1
 
   // TODO: Iterate the name better
-  const nextName = `New Page`
 
   const page: TDPage = {
     id: pageId,
-    name: nextName,
+    name: pageName,
     childIndex: nextChildIndex,
     shapes: {},
     bindings: {},