Merge origin/main (ENG-1403, ENG-1508) into migration-block-init-staging-branch

Resolved 2 import conflicts in canvas files — keep both sides (accessor
imports + new canvas sync/posthog imports).

Author: sid597

apps/obsidian/src/components/canvas/utils/tldraw.ts

@@ -14,6 +14,7 @@ import {
   TLDATA_DELIMITER_END,
   TLDATA_DELIMITER_START,
   TLDRAW_VERSION,
+  VIEW_TYPE_TLDRAW_DG_PREVIEW,
 } from "~/constants";
 import DiscourseGraphPlugin from "~/index";
 import { checkAndCreateFolder, getNewUniqueFilepath } from "~/utils/file";
@@ -178,8 +179,7 @@ export const createCanvas = async (plugin: DiscourseGraphPlugin) => {
   try {
     const filename = `Canvas-${format(new Date(), "yyyy-MM-dd-HHmm")}`;
     const folderpath = plugin.settings.canvasFolderPath;
-    const attachmentsFolder =
-      plugin.settings.canvasAttachmentsFolderPath;
+    const attachmentsFolder = plugin.settings.canvasAttachmentsFolderPath;
 
     await checkAndCreateFolder(folderpath, plugin.app.vault);
     await checkAndCreateFolder(attachmentsFolder, plugin.app.vault);
@@ -193,6 +193,10 @@ export const createCanvas = async (plugin: DiscourseGraphPlugin) => {
     const file = await plugin.app.vault.create(fname, content);
     const leaf = plugin.app.workspace.getLeaf(false);
     await leaf.openFile(file);
+    await leaf.setViewState({
+      type: VIEW_TYPE_TLDRAW_DG_PREVIEW,
+      state: { file: file.path },
+    });
 
     return file;
   } catch (e) {

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

@@ -10,7 +10,7 @@ import { Icon } from "@blueprintjs/core";
 import ExtensionApiContextProvider, {
   useExtensionAPI,
 } from "roamjs-components/components/ExtensionApiContext";
-import { OnloadArgs } from "roamjs-components/types";
+import { OnloadArgs, PullBlock } from "roamjs-components/types";
 import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 
 import {
@@ -102,9 +102,12 @@ import { BLOCK_REF_REGEX } from "roamjs-components/dom";
 import { defaultHandleExternalTextContent } from "./defaultHandleExternalTextContent";
 import {
   CanvasSyncMode,
+  getCanvasSyncMigrationState,
+  getReadyCanvasStore,
   ensureCanvasSyncMode,
   getEffectiveCanvasSyncMode,
-  setCanvasSyncMode,
+  migrateLocalCanvasToCloud,
+  setCanvasSyncSettings,
 } from "./canvasSyncMode";
 import {
   CanvasStoreAdapterArgs,
@@ -113,6 +116,7 @@ import {
 import posthog from "posthog-js";
 import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
+import { json, normalizeProps } from "~/utils/getBlockProps";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -171,9 +175,44 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     setCanvasSyncModeState(ensureCanvasSyncMode({ pageUid }));
   }, [pageUid]);
 
+  // Convert from local to sync when the block props change
+  // EG: When UserA sets the canvas sync mode to sync
+  // UserB's canvas should be converted to sync
+  useEffect(() => {
+    if (!pageUid || canvasSyncMode !== "local") return;
+
+    const pullWatchProps = [
+      "[:block/props]",
+      `[:block/uid "${pageUid}"]`,
+      (_before: PullBlock | null, after: PullBlock | null) => {
+        const blockProps = normalizeProps(
+          (after?.[":block/props"] || {}) as json,
+        ) as Record<string, json>;
+        const rjsqb = blockProps?.["roamjs-query-builder"] as Record<
+          string,
+          unknown
+        >;
+        if (rjsqb?.canvasSyncMode !== "sync") return;
+        setCanvasSyncModeState("sync");
+      },
+    ] as const;
+
+    window.roamAlphaAPI.data.addPullWatch(...pullWatchProps);
+    return () => {
+      window.roamAlphaAPI.data.removePullWatch(...pullWatchProps);
+    };
+  }, [canvasSyncMode, pageUid]);
+
   const onCanvasSyncModeChange = useCallback(
     (mode: CanvasSyncMode) => {
-      setCanvasSyncMode({ pageUid, mode });
+      const currentMigrationState = getCanvasSyncMigrationState({ pageUid });
+      const nextMigrationState =
+        mode === "sync" && !currentMigrationState ? "pending" : undefined;
+      setCanvasSyncSettings({
+        pageUid,
+        mode,
+        migrationState: nextMigrationState,
+      });
       setCanvasSyncModeState(mode);
     },
     [pageUid],
@@ -254,6 +293,7 @@ const useCloudflareCanvasStore = ({
     performUpgrade: () => {},
   };
 };
+
 const TldrawCanvasRoam = ({
   title,
   pageUid,
@@ -632,7 +672,6 @@ const TldrawCanvasShared = ({
     allRelationNames,
     allAddReferencedNodeActions,
     canvasSyncMode,
-    onCanvasSyncModeChange,
   });
 
   const storeAdapterArgs = useCanvasStoreAdapterArgs({
@@ -643,6 +682,7 @@ const TldrawCanvasShared = ({
     allAddReferencedNodeByAction,
   });
   const {
+    migrations,
     customShapeUtils,
     customBindingUtils,
     customShapeTypes,
@@ -671,6 +711,8 @@ const TldrawCanvasShared = ({
     allNodes,
     allRelationNames,
     allAddReferencedNodeByAction,
+    canvasSyncMode,
+    onCanvasSyncModeChange,
     toggleMaximized: handleMaximizedChange,
     setConvertToDialogOpen,
     discourseContext,
@@ -685,6 +727,55 @@ const TldrawCanvasShared = ({
   }, [pageUid]);
   const { store, needsUpgrade, performUpgrade, error, isLoading } =
     useStoreAdapter(storeAdapterArgs);
+  const migratedCloudStoreRef = useRef<string | null>(null);
+
+  // Migrate local canvas to cloud sync
+  useEffect(() => {
+    if (!isCloudflareSync || canvasSyncMode !== "sync") return;
+    if (getCanvasSyncMigrationState({ pageUid }) !== "pending") return;
+
+    const readyStore = getReadyCanvasStore(store);
+    if (!readyStore) return;
+
+    const storeId = `${pageUid}:${readyStore.id}`;
+    if (migratedCloudStoreRef.current === storeId) return;
+    migratedCloudStoreRef.current = storeId;
+
+    try {
+      const { migrated } = migrateLocalCanvasToCloud({
+        pageUid,
+        store: readyStore,
+        migrations,
+        customShapeUtils,
+        customBindingUtils,
+      });
+      if (migrated)
+        renderToast({
+          id: "tldraw-cloud-migration",
+          intent: "success",
+          content: "Migrated local canvas to cloud sync.",
+        });
+    } catch (migrationError) {
+      migratedCloudStoreRef.current = null;
+      internalError({
+        error: migrationError,
+        type: "Canvas: Local to cloud migration failed",
+        context: {
+          pageUid,
+          title,
+        },
+      });
+    }
+  }, [
+    canvasSyncMode,
+    customBindingUtils,
+    customShapeUtils,
+    isCloudflareSync,
+    migrations,
+    pageUid,
+    store,
+    title,
+  ]);
 
   // ASSETS
   const assetLoading = usePreloadAssets(defaultEditorAssetUrls);