Fix multiplayer room

example/src/multiplayer/multiplayer.tsx

@@ -22,21 +22,23 @@ export function Multiplayer() {
   return (
     <LiveblocksProvider client={client}>
       <RoomProvider id={roomId}>
-        <TldrawWrapper />
+        <Editor roomId={roomId} />
       </RoomProvider>
     </LiveblocksProvider>
   )
 }
 
-function TldrawWrapper() {
+function Editor({ roomId }: { roomId: string }) {
   const [docId] = React.useState(() => Utils.uniqueId())
 
-  const [error, setError] = React.useState<Error>()
-
   const [app, setApp] = React.useState<TldrawApp>()
 
+  const [error, setError] = React.useState<Error>()
+
   useErrorListener((err) => setError(err))
 
+  // Setup document
+
   const doc = useObject<{ uuid: string; document: TDDocument }>('doc', {
     uuid: docId,
     document: {
@@ -46,13 +48,10 @@ function TldrawWrapper() {
   })
 
   // Put the state into the window, for debugging.
-  const handleMount = React.useCallback(
-    (app: TldrawApp) => {
+  const handleMount = React.useCallback((app: TldrawApp) => {
     window.app = app
     setApp(app)
-    },
-    [roomId]
-  )
+  }, [])
 
   React.useEffect(() => {
     const room = client.getRoom(roomId)
@@ -80,8 +79,7 @@ function TldrawWrapper() {
 
     function handleDocumentUpdates() {
       if (!doc) return
-      if (!app) return
-      if (!app.room) return
+      if (!app?.room) return
 
       const docObject = doc.toObject()
 
@@ -101,7 +99,7 @@ function TldrawWrapper() {
     }
 
     function handleExit() {
-      if (!(app && app.room)) return
+      if (!app?.room) return
       room?.broadcastEvent({ name: 'exit', userId: app.room.userId })
     }
 

packages/tldraw/src/state/TldrawApp.ts

@@ -922,7 +922,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    * Load a fresh room into the state.
    * @param roomId
    */
-  loadRoom = (roomId: string) => {
+  loadRoom = (roomId: string): this => {
     this.patchState({
       room: {
         id: roomId,
@@ -938,6 +938,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         },
       },
     })
+    return this
   }
 
   /**

www/components/MultiplayerEditor.tsx

@@ -29,7 +29,7 @@ export default function MultiplayerEditor({
 }) {
   return (
     <LiveblocksProvider client={client}>
-      <RoomProvider id={roomId}>
+      <RoomProvider id={roomId} defaultStorageRoot={TldrawApp.defaultDocument}>
         <Editor roomId={roomId} isSponsor={isSponsor} isUser={isUser} />
       </RoomProvider>
     </LiveblocksProvider>
@@ -57,6 +57,12 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
     },
   })
 
+  // Put the state into the window, for debugging.
+  const handleMount = React.useCallback((app: TldrawApp) => {
+    window.app = app
+    setApp(app)
+  }, [])
+
   // Setup client
 
   React.useEffect(() => {
@@ -64,12 +70,9 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
 
     if (!room) return
     if (!doc) return
-    if (!app?.room) return
+    if (!app) return
 
-    // Update the user's presence with the user from state
-    const { users, userId } = app.room
-
-    room.updatePresence({ id: userId, user: users[userId] })
+    app.loadRoom(roomId)
 
     // Subscribe to presence changes; when others change, update the state
     room.subscribe<TDUserPresence>('others', (others) => {
@@ -124,6 +127,13 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
 
     if (newDocument) {
       app.loadDocument(newDocument)
+      app.loadRoom(roomId)
+
+      // Update the user's presence with the user from state
+      if (app.state.room) {
+        const { users, userId } = app.state.room
+        room.updatePresence({ id: userId, user: users[userId] })
+      }
     }
 
     return () => {
@@ -132,15 +142,6 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
     }
   }, [doc, docId, app, roomId])
 
-  const handleMount = React.useCallback(
-    (app: TldrawApp) => {
-      window.app = app
-      app.loadRoom(roomId)
-      setApp(app)
-    },
-    [roomId]
-  )
-
   const handlePersist = React.useCallback(
     (app: TldrawApp) => {
       doc?.update({ uuid: docId, document: app.document })