ENG-607 - Handle canvas already upgraded (#289)

* Enhance Tldraw integration by adding isAlreadyUpgraded check in useRoamStore and updating TldrawCanvas to display upgrade message. This improves user experience by informing users about the latest canvas version.

* Fix typo in TldrawCanvas upgrade message for improved clarity.

* Update version to 0.14.3 in package.json and package-lock.json for roam

Author: mdroidian

apps/roam/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roam",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "description": "Discourse Graph Plugin for roamresearch.com",
   "scripts": {
     "postinstall": "patch-package",

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

@@ -689,7 +689,7 @@ const TldrawCanvas = ({ title }: Props) => {
   const lastInsertRef = useRef<Vec2dModel>();
   const containerRef = useRef<HTMLDivElement>(null);
   const [maximized, setMaximized] = useState(false);
-  const { store, instanceId, userId } = useRoamStore({
+  const { store, instanceId, userId, isAlreadyUpgraded } = useRoamStore({
     config: customTldrawConfig,
     title,
   });
@@ -873,6 +873,17 @@ const TldrawCanvas = ({ title }: Props) => {
       </style>
       {isLoading ? (
         <></>
+      ) : isAlreadyUpgraded || !store ? (
+        <div className="flex h-full items-center justify-center">
+          <div className="text-center">
+            <h2 className="mb-2 text-2xl font-semibold">Canvas Upgraded</h2>
+            <p className="mb-4 text-gray-600">
+              This canvas is using the latest version.
+              <br />
+              Please upgrade your Discourse Graph extension to view this canvas.
+            </p>
+          </div>
+        </div>
       ) : (
         <TldrawEditor
           baseUrl="https://samepage.network/assets/tldraw/"

apps/roam/src/utils/useRoamStore.ts

@@ -45,13 +45,18 @@ export const useRoamStore = ({
     }
     const instanceId = TLInstance.createCustomId(pageUid);
     const userId = TLUser.createCustomId(getCurrentUserUid());
+
     const props = getBlockProps(pageUid) as Record<string, unknown>;
     const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
     const data = rjsqb?.tldraw as Parameters<TLStore["deserialize"]>[0];
-    return { data, instanceId, userId };
+
+    const isAlreadyUpgraded = !!rjsqb?.legacyTldraw;
+
+    return { data, instanceId, userId, isAlreadyUpgraded };
   }, [tree, pageUid]);
 
   const store = useMemo(() => {
+    if (initialData.isAlreadyUpgraded) return null;
     const _store = config.createStore({
       initialData: initialData.data,
       instanceId: initialData.instanceId,
@@ -186,6 +191,7 @@ export const useRoamStore = ({
   };
 
   useEffect(() => {
+    if (initialData.isAlreadyUpgraded || !store) return;
     const pullWatchProps: Parameters<AddPullWatch> = [
       "[:edit/user :block/props :block/string {:block/children ...}]",
       `[:block/uid "${pageUid}"]`,
@@ -220,5 +226,6 @@ export const useRoamStore = ({
     store,
     instanceId: initialData.instanceId,
     userId: initialData.userId,
+    isAlreadyUpgraded: initialData.isAlreadyUpgraded,
   };
 };