Fix query embed rendering with Roam React components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.37.0",
+  "version": "1.37.1",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {
@@ -35,7 +35,7 @@
     "react-draggable": "^4.4.5",
     "react-in-viewport": "^1.0.0-alpha.20",
     "react-vertical-timeline-component": "^3.5.2",
-    "roamjs-components": "^0.83.4",
+    "roamjs-components": "^0.88.1",
     "signia-react": "^0.1.1"
   },
   "overrides": {

src/components/Export.tsx

@@ -423,7 +423,7 @@ const ExportDialog: ExportDialogComponent = ({
                 if (event.shiftKey) {
                   window.roamAlphaAPI.ui.rightSidebar.addWindow({
                     window: {
-                      "block-uid": uid,
+                      "page-uid": uid,
                       type: "outline",
                     },
                   });

src/components/Kanban.tsx

@@ -31,26 +31,18 @@ import { Sorts } from "../utils/parseResultSettings";
 import getRoamUrl from "roamjs-components/dom/getRoamUrl";
 
 const zPriority = z.record(z.number().min(0).max(1));
+const { Block: RenderRoamBlock } = window.roamAlphaAPI.ui.react;
 
 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,
-        // "open?": open, // waiting for roamAlphaAPI to add a open/close to renderBlock
-      });
-    }
-  }, [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>
   );
 };
 

src/components/ResultsTable.tsx

@@ -30,28 +30,15 @@ import { ContextContent } from "./DiscourseContext";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
+const { Block: RenderRoamBlock, Page: RenderRoamPage } =
+  window.roamAlphaAPI.ui.react;
 
 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,
-        hideMentions: true,
-      });
-    } else {
-      window.roamAlphaAPI.ui.components.renderBlock({
-        uid,
-        el: containerRef.current,
-        zoomPath: true,
-      });
-    }
-  }, [containerRef, uid]);
-
-  return <div ref={containerRef} />;
+  return getPageTitleByPageUid(uid) ? (
+    <RenderRoamPage uid={uid} hideMentions />
+  ) : (
+    <RenderRoamBlock uid={uid} zoomPath />
+  );
 };
 
 const dragImage = document.createElement("img");
@@ -166,25 +153,13 @@ const ResultHeader = React.forwardRef<
 
 const CellEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
   const title = getPageTitleByPageUid(uid);
-  const contentRef = useRef(null);
-  useEffect(() => {
-    const el = contentRef.current;
-    const open =
-      viewValue === "open" ? true : viewValue === "closed" ? false : null;
-    if (el) {
-      window.roamAlphaAPI.ui.components.renderBlock({
-        uid,
-        el,
-        // "open?": open, // waiting for roamAlphaAPI to add a open/close to renderBlock
-      });
-    }
-  }, [contentRef]);
+  const open =
+    viewValue === "open" ? true : viewValue === "closed" ? false : undefined;
   return (
     <div className="roamjs-query-embed">
-      <div
-        ref={contentRef}
-        className={!!title ? "page-embed" : "block-embed"}
-      />
+      <div className={!!title ? "page-embed" : "block-embed"}>
+        <RenderRoamBlock uid={uid} open={open} />
+      </div>
     </div>
   );
 };

src/index.ts

@@ -580,7 +580,6 @@ svg.rs-svg-container {
       ).then((blockUid) =>
         queryRender({
           blockUid,
-          clearOnClick,
           onloadArgs,
         })
       ),

src/utils/getExportTypes.ts

@@ -42,6 +42,9 @@ const pullBlockToTreeNode = (n: PullBlock, v: `:${ViewType}`): TreeNode => ({
   uid: n[":block/uid"] || "",
   heading: n[":block/heading"] || 0,
   viewType: (n[":children/view-type"] || v).slice(1) as ViewType,
+  blockViewType: (n[":block/view-type"] || ":vertical").slice(
+    1
+  ) as TreeNode["blockViewType"],
   editTime: new Date(n[":edit/time"] || 0),
   props: { imageResize: {}, iframe: {} },
   textAlign: n[":block/text-align"] || "left",