Fix duplicate page

packages/core/src/hooks/useStyle.tsx

@@ -108,6 +108,11 @@ const tlcss = css`
       U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
 
+  html,
+  * {
+    box-sizing: border-box;
+  }
+
   :root {
     --tl-zoom: 1;
     --tl-scale: calc(1 / var(--tl-zoom));

packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx

@@ -18,7 +18,12 @@ const canDeleteSelector = (s: Data) => {
   return Object.keys(s.document.pages).length > 1
 }
 
-export function PageOptionsDialog({ page }: { page: TLDrawPage }): JSX.Element {
+interface PageOptionsDialogProps {
+  page: TLDrawPage
+  onOpen?: () => void
+}
+
+export function PageOptionsDialog({ page, onOpen }: PageOptionsDialogProps): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const [isOpen, setIsOpen] = React.useState(false)
@@ -46,6 +51,7 @@ export function PageOptionsDialog({ page }: { page: TLDrawPage }): JSX.Element {
       setIsOpen(isOpen)
 
       if (isOpen) {
+        onOpen?.()
         return
       }
 

packages/tldraw/src/components/shared/menu.tsx

@@ -56,6 +56,7 @@ export const MenuTextInput = styled('input', {
   outline: 'none',
   background: '$input',
   borderRadius: '4px',
-  font: '$ui',
+  fontFamily: '$ui',
   fontSize: '$1',
+  userSelect: 'all',
 })

packages/tldraw/src/state/command/duplicate-page/duplicate-page.command.ts

@@ -1,10 +1,67 @@
-import type { TLDrawShape, Data, Command } from '~types'
-import { TLDR } from '~state/tldr'
+import type { Data, Command } from '~types'
+import { Utils } from '@tldraw/core'
+
+export function duplicatePage(data: Data, pageId: string): Command {
+  const newId = Utils.uniqueId()
+  const { currentPageId } = data.appState
+
+  console.log('duplicating')
+
+  const page = data.document.pages[pageId]
+
+  const nextPage = {
+    ...page,
+    id: newId,
+    ...Object.fromEntries(
+      Object.entries(page.shapes).map(([id, shape]) => {
+        return [
+          id,
+          {
+            ...shape,
+            parentId: shape.parentId === pageId ? newId : shape.parentId,
+          },
+        ]
+      })
+    ),
+  }
 
-export function duplicatePage(data: Data, id: string): Command {
   return {
     id: 'duplicate_page',
-    before: {},
-    after: {},
+    before: {
+      appState: {
+        currentPageId,
+      },
+      document: {
+        pages: {
+          [newId]: undefined,
+        },
+        pageStates: {
+          [newId]: undefined,
+        },
+      },
+    },
+    after: {
+      appState: {
+        currentPageId: newId,
+      },
+      document: {
+        pages: {
+          [newId]: nextPage,
+        },
+        pageStates: {
+          [newId]: {
+            ...page,
+            id: newId,
+            selectedIds: [],
+            camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
+            currentParentId: newId,
+            editingId: undefined,
+            bindingId: undefined,
+            hoveredId: undefined,
+            pointedId: undefined,
+          },
+        },
+      },
+    },
   }
 }

packages/tldraw/src/state/tlstate.ts

@@ -173,7 +173,7 @@ export class TLDrawState implements TLCallbacks {
           })
 
           const changedShapeIds = Object.values(page.shapes)
-            .filter((shape) => prevPage.shapes[shape.id] !== shape)
+            .filter((shape) => prevPage?.shapes[shape.id] !== shape)
             .map((shape) => shape.id)
 
           this.data.document.pages[pageId] = page