Create rootDocument before connection happens

apps/front-end/src/app/SideNavigation.tsx

@@ -19,7 +19,7 @@ import {
   sidebarState,
 } from "@/components/Sidebar/state";
 import Skeleton from "@/components/Skeleton";
-import { useIsSynced, useRootDocument } from "@/lib/collaboration";
+import { rootDocument, useIsSynced } from "@/lib/collaboration";
 import { atom, useAtom } from "jotai";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -106,11 +106,10 @@ function SideNavigation() {
 }
 
 function useYjs() {
-  const rootDocument = useRootDocument();
   const isSynced = useIsSynced();
   useEffect(() => {
     return bind(sidebarState, rootDocument.getArray("sidebar"));
-  }, [rootDocument]);
+  }, []);
 
   return isSynced;
 }

apps/front-end/src/lib/collaboration/StartCollaboration.tsx

@@ -5,7 +5,7 @@ import { useHydrateAtoms } from "jotai/utils";
 import { User } from "next-auth";
 import { useEffect, useState } from "react";
 import { accessTokenAtom, useConnection, useToken } from "../collaboration";
-import { createConnection, rootConnectionAtom } from "./store";
+import { createConnection, rootConnectionAtom, rootDocument } from "./store";
 
 type StartCollaborationProps = {
   user: User;
@@ -34,7 +34,11 @@ export function StartCollaboration({
     if (!token) {
       return;
     }
-    const connectionProvider = createConnection({ name, token: token.value });
+    const connectionProvider = createConnection({
+      name,
+      token: token.value,
+      document: rootDocument,
+    });
 
     setConnection(connectionProvider);
     return () => {

apps/front-end/src/lib/collaboration/store.ts

@@ -20,30 +20,30 @@ export type SharedState = {
 export type AwarenessState = { clientId: number } & SharedState;
 
 /**
- * The root connection represents the actual websocket connection to the collaborative servers.
+ * The main Yjs document for the entire application. Shared state should be
+ * part of this document whenever possible.
  */
-export const rootConnectionAtom = atom(
-  createConnection({ name: "default", connect: false, token: "" }),
-);
+export const rootDocument = new Doc();
 
 /**
- * The main Yjs document for the entire application. Shared state should be part of this
- * document whenever possible.
+ * The root connection represents the actual websocket connection to the
+ * collaboration servers.
  */
-const rootDocumentAtom = atom((get) => {
-  return get(rootConnectionAtom).document;
-});
+export const rootConnectionAtom = atom(
+  createConnection({
+    name: "default",
+    connect: false,
+    token: "",
+    document: rootDocument,
+  }),
+);
 
 export const accessTokenAtom = atom<Token | null>(null);
 
 export function useConnection() {
   return useAtomValue(rootConnectionAtom);
 }
 
-export function useRootDocument() {
-  return useAtomValue(rootDocumentAtom);
-}
-
 export function useToken() {
   return useAtomValue(accessTokenAtom);
 }