Refine room ID generation for Cloudflare sync in Tldraw components

- Updated `getSyncRoomId` to encode the room ID as a base64url token, enhancing security and compatibility.
- Clarified comments in `Tldraw.tsx` regarding canvas identity handling in Roam.

Author: mdroidian

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

@@ -150,7 +150,7 @@ 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
+  // Room sync is graph/page encoded as an opaque base64url token.
   const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);
   const useCloudflareSync =
     TLDRAW_CLOUDFLARE_SYNC_ENABLED &&

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

@@ -24,7 +24,17 @@ export type CloudflareCanvasStoreAdapterResult = {
 
 const getSyncRoomId = ({ pageUid }: { pageUid: string }): string => {
   const graphName = window.roamAlphaAPI.graph.name;
-  return `${graphName}/${pageUid}`;
+  const payload = JSON.stringify({ graphName, pageUid });
+  const bytes = new TextEncoder().encode(payload);
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+
+  return btoa(binary)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/g, "");
 };
 
 const parseRoamUploadResponse = (value: string): string => {
@@ -68,7 +78,7 @@ export const useCloudflareSyncStore = ({
   );
 
   const uri = useMemo(() => {
-    const roomId = encodeURIComponent(getSyncRoomId({ pageUid }));
+    const roomId = getSyncRoomId({ pageUid });
     const query = new URLSearchParams();
     for (const shapeType of customShapeTypes) {
       query.append("shapeType", shapeType);