ENG-1348 Update render block to the new Render React Components API (#871)

* Update roamjs-components to version 0.87.0 and refactor component rendering in ResultsView and Discourse settings. Replace direct API calls with RenderRoamBlock for improved rendering consistency across components.

* Enhance exportUtils by adding BlockViewType to pullBlockToTreeNode function for improved block handling.

* format

Author: mdroidian

apps/roam/package.json

@@ -71,7 +71,7 @@
     "react-draggable": "4.4.5",
     "react-in-viewport": "1.0.0-alpha.20",
     "react-vertical-timeline-component": "3.5.2",
-    "roamjs-components": "0.86.4",
+    "roamjs-components": "0.87.0",
     "tldraw": "2.4.6",
     "use-sync-external-store": "1.5.0",
     "xregexp": "^5.0.0",

apps/roam/src/components/results-view/Kanban.tsx

@@ -22,30 +22,20 @@ import getSubTree from "roamjs-components/util/getSubTree";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { Sorts } from "~/utils/parseResultSettings";
 import getRoamUrl from "roamjs-components/dom/getRoamUrl";
+import { RenderRoamBlock } from "~/utils/roamReactComponents";
 
 const zPriority = z.record(z.number().min(0).max(1));
 
 type Reprioritize = (args: { uid: string; x: number; y: number }) => void;
 
 const BlockEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
   const title = getPageTitleByPageUid(uid);
-  const contentRef = useRef(null);
   const open =
-    viewValue === "open" ? true : viewValue === "closed" ? false : null;
-  useEffect(() => {
-    const el = contentRef.current;
-    if (el) {
-      window.roamAlphaAPI.ui.components.renderBlock({
-        uid,
-        el,
-        // @ts-expect-error - add to roamjs-components
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        "open?": open,
-      });
-    }
-  }, [uid, open, contentRef]);
+    viewValue === "open" ? true : viewValue === "closed" ? false : undefined;
   return (
-    <div ref={contentRef} className={title ? "page-embed" : "block-embed"} />
+    <div className={title ? "page-embed" : "block-embed"}>
+      <RenderRoamBlock uid={uid} open={open} />
+    </div>
   );
 };
 

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -25,50 +25,21 @@ import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections";
 import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 import { strictQueryForReifiedBlocks } from "~/utils/createReifiedBlock";
-import internalError from "~/utils/internalError";
+import {
+  RenderRoamBlock,
+  RenderRoamPage,
+  RenderRoamBlockString,
+} from "~/utils/roamReactComponents";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
 
 const ExtraContextRow = ({ uid }: { uid: string }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    if (getPageTitleByPageUid(uid)) {
-      window.roamAlphaAPI.ui.components
-        .renderPage({
-          uid,
-          el: containerRef.current,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          "hide-mentions?": true,
-        })
-        .catch((error) => {
-          internalError({
-            error,
-            type: "Results Table: Extra Context Row",
-            context: { uid },
-          });
-        });
-    } else {
-      window.roamAlphaAPI.ui.components
-        .renderBlock({
-          uid,
-          el: containerRef.current,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          "zoom-path?": true,
-        })
-        .catch((error) => {
-          internalError({
-            error,
-            type: "Results Table: Extra Context Row",
-            context: { uid },
-          });
-        });
-    }
-  }, [containerRef, uid]);
-
-  return <div ref={containerRef} />;
+  return getPageTitleByPageUid(uid) ? (
+    <RenderRoamPage uid={uid} hideMentions />
+  ) : (
+    <RenderRoamBlock uid={uid} zoomPath />
+  );
 };
 
 const dragImage = document.createElement("img");
@@ -181,30 +152,12 @@ export const CellEmbed = ({
   viewValue?: string;
 }) => {
   const title = getPageTitleByPageUid(uid);
-  const contentRef = useRef(null);
-  useEffect(() => {
-    const el = contentRef.current;
-    const open =
-      viewValue === "open" ? true : viewValue === "closed" ? false : undefined;
-    if (el) {
-      window.roamAlphaAPI.ui.components
-        .renderBlock({
-          uid,
-          el,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          "open?": open,
-        })
-        .catch((error) => {
-          internalError({
-            error,
-            type: "Results Table: Cell Embed",
-            context: { uid },
-          });
-        });
-    }
-  }, [contentRef, uid, viewValue]);
+  const open =
+    viewValue === "open" ? true : viewValue === "closed" ? false : undefined;
   return (
-    <div ref={contentRef} className={title ? "page-embed" : "block-embed"} />
+    <div className={title ? "page-embed" : "block-embed"}>
+      <RenderRoamBlock uid={uid} open={open} />
+    </div>
   );
 };
 
@@ -215,29 +168,14 @@ export const CellRender = ({
   content: string;
   uid: string;
 }) => {
-  const contentRef = useRef<HTMLSpanElement>(null);
   const isPage = !!getPageTitleByPageUid(uid);
   const displayString = isPage ? `[[${content}]]` : content;
 
-  useEffect(() => {
-    const el = contentRef.current;
-    if (el && displayString) {
-      window.roamAlphaAPI.ui.components
-        .renderString({
-          el,
-          string: displayString,
-        })
-        .catch((error) => {
-          internalError({
-            error,
-            type: "Results Table: Cell Render",
-            context: { displayString },
-          });
-        });
-    }
-  }, [displayString]);
-
-  return <span ref={contentRef} className="roamjs-query-link-cell" />;
+  return (
+    <span className="roamjs-query-link-cell">
+      <RenderRoamBlockString string={displayString} />
+    </span>
+  );
 };
 
 type ResultRowProps = {

apps/roam/src/components/results-view/Timeline.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect } from "react";
+import React, { useMemo } from "react";
 import {
   VerticalTimeline,
   VerticalTimelineElement,
@@ -7,6 +7,7 @@ import "react-vertical-timeline-component/style.min.css";
 import { Icon } from "@blueprintjs/core";
 import PageLink from "roamjs-components/components/PageLink";
 import { Result } from "roamjs-components/types/query-builder";
+import { RenderRoamBlock } from "~/utils/roamReactComponents";
 
 type TimelineProps = { timelineElements: Result[] };
 
@@ -45,14 +46,6 @@ const TimelineElement = ({
   color: string;
   t: Result & { date: Date };
 }) => {
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    window.roamAlphaAPI.ui.components.renderBlock({
-      uid: t.uid,
-      el: containerRef.current,
-    });
-  }, [t.uid, containerRef]);
   return (
     <VerticalTimelineElement
       contentStyle={{
@@ -79,7 +72,9 @@ const TimelineElement = ({
       <h4 className="vertical-timeline-element-title">
         <PageLink uid={t.uid}>{t.text}</PageLink>
       </h4>
-      <p className="vertical-timeline-element-body" ref={containerRef} />
+      <div className="vertical-timeline-element-body">
+        <RenderRoamBlock uid={t.uid} />
+      </div>
     </VerticalTimelineElement>
   );
 };

apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect, useRef } from "react";
+import React, { useState, useMemo } from "react";
 import { Button, Intent } from "@blueprintjs/core";
 import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import getSubTree from "roamjs-components/util/getSubTree";
@@ -11,27 +11,10 @@ import {
   DiscourseNodeFlagPanel,
   DiscourseNodeTextPanel,
 } from "./components/BlockPropSettingPanels";
+import { RenderRoamBlock } from "~/utils/roamReactComponents";
 
 const TEMPLATE_SETTING_KEYS = ["template"];
 
-const BlockRenderer = ({ uid }: { uid: string }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container) {
-      container.innerHTML = "";
-
-      window.roamAlphaAPI.ui.components.renderBlock({
-        uid: uid,
-        el: container,
-      });
-    }
-  }, [uid]);
-
-  return <div ref={containerRef} className="my-2 rounded border p-2" />;
-};
-
 const DiscourseNodeSuggestiveRules = ({
   node,
   parentUid,
@@ -107,7 +90,9 @@ const DiscourseNodeSuggestiveRules = ({
       {blockUidToRender && (
         <div>
           <div className="mb-1 text-sm text-gray-600">Preview:</div>
-          <BlockRenderer uid={blockUidToRender} />
+          <div className="my-2 rounded border p-2">
+            <RenderRoamBlock uid={blockUidToRender} />
+          </div>
         </div>
       )}
 

apps/roam/src/components/settings/DiscourseRelationConfigPanel.tsx

@@ -55,6 +55,7 @@ import {
   setGlobalSetting,
   getGlobalSettings,
 } from "~/components/settings/utils/accessors";
+import { RenderRoamBlock } from "~/utils/roamReactComponents";
 
 const DEFAULT_SELECTED_RELATION = {
   display: "none",
@@ -64,21 +65,6 @@ const DEFAULT_SELECTED_RELATION = {
   id: "",
 };
 
-const RelationEditPreview = ({ previewUid }: { previewUid: string }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (el)
-      window.roamAlphaAPI.ui.components.renderBlock({
-        el,
-        uid: previewUid,
-      });
-  }, [previewUid, containerRef]);
-  return (
-    <div ref={containerRef} className={"roamjs-discourse-editor-preview"}></div>
-  );
-};
-
 const edgeDisplayByUid = (uid: string) =>
   uid === "*"
     ? "Any"
@@ -857,7 +843,11 @@ export const RelationEditPanel = ({
                 }
               }}
             />
-            {isPreview && <RelationEditPreview previewUid={previewUid} />}
+            {isPreview && (
+              <div className={"roamjs-discourse-editor-preview"}>
+                <RenderRoamBlock uid={previewUid} />
+              </div>
+            )}
             <Menu
               style={{
                 position: "absolute",

apps/roam/src/utils/exportUtils.ts

@@ -1,5 +1,10 @@
 import type { Result } from "roamjs-components/types/query-builder";
-import { PullBlock, TreeNode, ViewType } from "roamjs-components/types";
+import {
+  BlockViewType,
+  PullBlock,
+  TreeNode,
+  ViewType,
+} from "roamjs-components/types";
 import type { DiscourseNode } from "./getDiscourseNodes";
 import matchDiscourseNode from "./matchDiscourseNode";
 
@@ -126,6 +131,8 @@ export const pullBlockToTreeNode = (
   uid: n[":block/uid"] || "",
   heading: n[":block/heading"] || 0,
   viewType: (n[":children/view-type"] || v).slice(1) as ViewType,
+  blockViewType: (n[":block/view-type"]?.slice(1) ??
+    "outline") as BlockViewType,
   editTime: new Date(n[":edit/time"] || 0),
   props: { imageResize: {}, iframe: {} },
   textAlign: n[":block/text-align"] || "left",

apps/roam/src/utils/roamReactComponents.ts

@@ -0,0 +1,11 @@
+/**
+ * Single access point for Roam's render React components (Block, Page, BlockString).
+ * Use these instead of reading window.roamAlphaAPI.ui.react in each component.
+ */
+const {
+  Block: RenderRoamBlock,
+  Page: RenderRoamPage,
+  BlockString: RenderRoamBlockString,
+} = window.roamAlphaAPI.ui.react;
+
+export { RenderRoamBlock, RenderRoamPage, RenderRoamBlockString };