use loadDocument for project link

packages/tldraw/src/Tldraw.tsx

@@ -313,6 +313,30 @@ export function Tldraw({
     }
   }, [app])
 
+  // In dev, we need to delete the prefixed
+  const entry =
+    window.location.port === '5420'
+      ? window.location.hash.replace('#/develop/', '')
+      : window.location.search
+  const urlSearchParams = new URLSearchParams(entry)
+
+  const encodedPage = urlSearchParams.get('d')
+
+  const decodedPage = JSONCrush.uncrush((encodedPage as string) ?? '')
+
+  React.useEffect(() => {
+    if (decodedPage.length) {
+      const state = JSON.parse(decodedPage) as Record<string, any>
+      if (Object.keys(state).length) {
+        if ('page' in state) {
+          app.loadDocumentFromURL(state.page, state.pageState)
+        } else {
+          app.loadDocument(state as TDDocument)
+        }
+      }
+    }
+  }, [app, decodedPage])
+
   // Use the `key` to ensure that new selector hooks are made when the id changes
   return (
     <TldrawContext.Provider value={app}>
@@ -365,29 +389,6 @@ const InnerTldraw = React.memo(function InnerTldraw({
   const app = useTldrawApp()
   const [dialogContainer, setDialogContainer] = React.useState<any>(null)
 
-  // In dev, we need to delete the prefixed
-  const entry =
-    process.env.NODE_ENV === 'development'
-      ? window.location.hash.replace('#/develop/', '')
-      : window.location.search
-  const urlSearchParams = new URLSearchParams(entry)
-  const encodedPage = urlSearchParams.get('d')
-
-  const decodedPage = JSONCrush.uncrush((encodedPage as string) ?? '')
-
-  React.useEffect(() => {
-    if (decodedPage.length) {
-      const state = JSON.parse(decodedPage) as Record<string, any>
-      if (Object.keys(state).length) {
-        if ('page' in state) {
-          app.loadDocumentFromURL(undefined, state.page, state.pageState)
-        } else {
-          app.loadDocumentFromURL(state as TDDocument)
-        }
-      }
-    }
-  }, [decodedPage, app])
-
   const rWrapper = React.useRef<HTMLDivElement>(null)
 
   const state = app.useStore()

packages/tldraw/src/state/TldrawApp.ts

@@ -1391,51 +1391,43 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
   /**
    * load content from URL
-   * @param document
    * @param page
    * @param pageState
    * @returns
    */
-  loadDocumentFromURL = (
-    document?: TDDocument,
-    page?: TDPage,
-    pageState?: Record<string, TLPageState>
-  ) => {
-    if (document) {
-      this.loadDocument(document)
-    } else {
-      const { currentPageId } = this
-      const state = {
-        id: 'create_page',
-        before: {
-          appState: {
-            currentPageId,
+  loadDocumentFromURL = (page: TDPage, pageState: Record<string, TLPageState>) => {
+    const { currentPageId } = this
+    const pageId = page.id
+    const state = {
+      id: 'create_page',
+      before: {
+        appState: {
+          currentPageId,
+        },
+        document: {
+          pages: {
+            [pageId]: undefined,
           },
-          document: {
-            pages: {
-              [page!.id]: undefined,
-            },
-            pageStates: {
-              [page!.id]: undefined,
-            },
+          pageStates: {
+            [pageId]: undefined,
           },
         },
-        after: {
-          appState: {
-            currentPageId: page!.id,
+      },
+      after: {
+        appState: {
+          currentPageId: page.id,
+        },
+        document: {
+          pages: {
+            [pageId]: page,
           },
-          document: {
-            pages: {
-              [page!.id]: page,
-            },
-            pageStates: {
-              [page!.id]: pageState,
-            },
+          pageStates: {
+            [pageId]: pageState,
           },
         },
-      }
-      this.setState(state)
+      },
     }
+    return this.setState(state)
   }
 
   // Should we move this to the app layer? onSave, onSaveAs, etc?