Add room ID generation for Cloudflare sync in Tldraw components

- Introduced `getSyncRoomId` function to create a unique room ID based on the page UID and graph name.
- Updated `useCloudflareSyncStore` to utilize the new room ID for WebSocket connections.
- Added comments in `Tldraw.tsx` to clarify canvas identity handling in Roam.

Author: mdroidian

apps/roam/src/components/canvas/Tldraw.tsx

@@ -149,6 +149,8 @@ export const isPageUid = (uid: string) =>
   ];
 
 const TldrawCanvas = ({ title }: { title: string }) => {
+  // In Roam, canvas identity is currently keyed by the page UID.
+  // Room sync is graphName/uid
   const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);
   const useCloudflareSync =
     TLDRAW_CLOUDFLARE_SYNC_ENABLED &&

apps/roam/src/components/canvas/TldrawCanvasCloudflareSync.tsx

@@ -22,6 +22,11 @@ export type CloudflareCanvasStoreAdapterResult = {
   isLoading: boolean;
 };
 
+const getSyncRoomId = ({ pageUid }: { pageUid: string }): string => {
+  const graphName = window.roamAlphaAPI.graph.name;
+  return `${graphName}/${pageUid}`;
+};
+
 const parseRoamUploadResponse = (value: string): string => {
   return value.replace(/^!\[\]\(/, "").replace(/\)$/, "");
 };
@@ -63,14 +68,15 @@ export const useCloudflareSyncStore = ({
   );
 
   const uri = useMemo(() => {
+    const roomId = encodeURIComponent(getSyncRoomId({ pageUid }));
     const query = new URLSearchParams();
     for (const shapeType of customShapeTypes) {
       query.append("shapeType", shapeType);
     }
     for (const bindingType of customBindingTypes) {
       query.append("bindingType", bindingType);
     }
-    return `${TLDRAW_CLOUDFLARE_SYNC_WS_BASE_URL}/connect/${pageUid}?${query.toString()}`;
+    return `${TLDRAW_CLOUDFLARE_SYNC_WS_BASE_URL}/connect/${roomId}?${query.toString()}`;
   }, [customShapeTypes, customBindingTypes, pageUid]);
 
   const store = useSync({