[ENG-1287] On canvas load, update key image

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

@@ -93,7 +93,6 @@ import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import { CanvasDrawerPanel } from "./CanvasDrawer";
 import { ClipboardPanel, ClipboardProvider } from "./Clipboard";
 import internalError from "~/utils/internalError";
-import { syncCanvasNodeTitlesOnLoad } from "~/utils/syncCanvasNodeTitlesOnLoad";
 import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
@@ -117,6 +116,7 @@ import {
 } from "./useCanvasStoreAdapterArgs";
 import posthog from "posthog-js";
 import { json, normalizeProps } from "~/utils/getBlockProps";
+import { syncCanvasNodesOnLoad } from "~/utils/syncCanvasNodesOnLoad";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -1003,14 +1003,15 @@ const TldrawCanvasShared = ({
 
               appRef.current = app;
 
-              void syncCanvasNodeTitlesOnLoad(
-                app,
-                allNodes.map((n) => n.type),
-                allRelationIds,
-              ).catch((error) => {
+              void syncCanvasNodesOnLoad({
+                editor: app,
+                nodeTypeIds: allNodes.map((n) => n.type),
+                relationShapeTypeIds: allRelationIds,
+                extensionAPI,
+              }).catch((error) => {
                 internalError({
                   error,
-                  type: "Canvas: Sync node titles on load",
+                  type: "Canvas: Sync nodes on load",
                 });
               });
 

apps/roam/src/utils/calcCanvasNodeSizeAndImg.ts

@@ -10,7 +10,7 @@ import { render as renderToast } from "roamjs-components/components/Toast";
 import { loadImage } from "./loadImage";
 import { DEFAULT_STYLE_PROPS } from "~/components/canvas/DiscourseNodeUtil";
 
-const extractFirstImageUrl = (text: string): string | null => {
+export const extractFirstImageUrl = (text: string): string | null => {
   const regex = /!\[.*?\]\((https:\/\/[^)]+)\)/;
   const result = text.match(regex) || resolveRefs(text).match(regex);
   return result ? result[1] : null;
@@ -19,7 +19,7 @@ const extractFirstImageUrl = (text: string): string | null => {
 // Matches embed, embed-path, and embed-children syntax:
 // {{[[embed]]: ((block-uid)) }}, {{[[embed-path]]: ((block-uid)) }}, {{[[embed-children]]: ((block-uid)) }}
 // Also handles multiple parentheses: {{[[embed]]: ((((block-uid)))) }}
-const EMBED_REGEX =
+export const EMBED_REGEX =
   /{{\[\[(?:embed|embed-path|embed-children)\]\]:\s*\(\(+([^)]+?)\)+\)\s*}}/i;
 
 const getBlockReferences = (
@@ -37,7 +37,7 @@ const getBlockReferences = (
   return result[":block/refs"] || [];
 };
 
-const findFirstImage = (
+export const findFirstImage = (
   node: TreeNode,
   visited = new Set<string>(),
 ): string | null => {
@@ -71,12 +71,20 @@ const findFirstImage = (
   return null;
 };
 
-const getFirstImageByUid = (uid: string): string | null => {
+export const getFirstImageByUid = (uid: string): string | null => {
   const tree = getFullTreeByParentUid(uid);
   return findFirstImage(tree);
 };
 
-const calcCanvasNodeSizeAndImg = async ({
+const getNodeCanvasSettings = (nodeType: string): Record<string, string> => {
+  const allNodes = getDiscourseNodes();
+  const canvasSettings = Object.fromEntries(
+    allNodes.map((n) => [n.type, { ...n.canvasSettings }]),
+  );
+  return canvasSettings[nodeType] || {};
+};
+
+export const getCanvasNodeKeyImageUrl = async ({
   nodeText,
   uid,
   nodeType,
@@ -86,26 +94,16 @@ const calcCanvasNodeSizeAndImg = async ({
   uid: string;
   nodeType: string;
   extensionAPI: OnloadArgs["extensionAPI"];
-}) => {
-  const allNodes = getDiscourseNodes();
-  const canvasSettings = Object.fromEntries(
-    allNodes.map((n) => [n.type, { ...n.canvasSettings }]),
-  );
+}): Promise<string> => {
   const {
     "query-builder-alias": qbAlias = "",
     "key-image": isKeyImage = "",
     "key-image-option": keyImageOption = "",
-  } = canvasSettings[nodeType] || {};
-
-  const { w, h } = measureCanvasNodeText({
-    ...DEFAULT_STYLE_PROPS,
-    maxWidth: MAX_WIDTH,
-    text: nodeText,
-  });
+  } = getNodeCanvasSettings(nodeType);
 
-  if (!isKeyImage) return { w, h, imageUrl: "" };
+  if (!isKeyImage) return "";
 
-  let imageUrl;
+  let imageUrl: string | null;
   if (keyImageOption === "query-builder") {
     const parentUid = resolveQueryBuilderRef({
       queryRef: qbAlias,
@@ -122,19 +120,54 @@ const calcCanvasNodeSizeAndImg = async ({
   } else {
     imageUrl = getFirstImageByUid(uid);
   }
+  return imageUrl ?? "";
+};
+
+const calcCanvasNodeSizeAndImg = async ({
+  nodeText,
+  uid,
+  nodeType,
+  extensionAPI,
+  imageUrl: preloadedImageUrl,
+}: {
+  nodeText: string;
+  uid: string;
+  nodeType: string;
+  extensionAPI: OnloadArgs["extensionAPI"];
+  /** Pre-fetched image URL. When provided, skips calling getCanvasNodeKeyImageUrl. */
+  imageUrl?: string;
+}) => {
+  const { w, h } = measureCanvasNodeText({
+    ...DEFAULT_STYLE_PROPS,
+    maxWidth: MAX_WIDTH,
+    text: nodeText,
+  });
+
+  const imageUrl =
+    preloadedImageUrl !== undefined
+      ? preloadedImageUrl
+      : await getCanvasNodeKeyImageUrl({
+          nodeText,
+          uid,
+          nodeType,
+          extensionAPI,
+        });
+
   if (!imageUrl) return { w, h, imageUrl: "" };
 
   try {
     const { width, height } = await loadImage(imageUrl);
-    if (!width || !height || !Number.isFinite(width) || !Number.isFinite(height)) {
+    if (
+      !width ||
+      !height ||
+      !Number.isFinite(width) ||
+      !Number.isFinite(height)
+    ) {
       return { w, h, imageUrl: "" };
     }
-
-    const aspectRatio = width / height;
-    const nodeImageHeight = w / aspectRatio;
-    const newHeight = h + nodeImageHeight;
 
-    return { w, h: newHeight, imageUrl };
+    const aspectRatio = width / height;
+    return { w, h: h + w / aspectRatio, imageUrl };
   } catch {
     renderToast({
       id: "tldraw-image-load-fail",