Support page input

package.json

@@ -21,6 +21,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "roam-client": "^1.79.1",
-    "roamjs-components": "^0.18.1"
+    "roamjs-components": "^0.18.2"
   }
 }

src/Prompt.tsx

@@ -1,13 +1,17 @@
+import { Alert, Classes, H3, InputGroup, Label } from "@blueprintjs/core";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { extractTag } from "roam-client";
 import {
-  Alert,
-  Classes,
-  Dialog,
-  H3,
-  InputGroup,
-  Label,
-} from "@blueprintjs/core";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { createOverlayRender, MenuItemSelect } from "roamjs-components";
+  createOverlayRender,
+  MenuItemSelect,
+  PageInput,
+} from "roamjs-components";
 
 type Props = {
   display?: string;
@@ -23,11 +27,27 @@ const Prompt = ({
   initialValue = "",
   resolve,
 }: { onClose: () => void } & Props) => {
-  const [value, setValue] = useState(initialValue);
+  const formattedDisplay = useMemo(
+    () => display.replace("{page}", "").trim(),
+    [display]
+  );
+  const isPageInput = useMemo(
+    () => display.trim() !== formattedDisplay,
+    [display, formattedDisplay]
+  );
+  const formattedOptions = useMemo(
+    () => (isPageInput ? options.map(extractTag) : options),
+    [options, isPageInput]
+  );
+  const formattedInitialValue = useMemo(
+    () => (isPageInput ? extractTag(initialValue) : initialValue),
+    [initialValue, isPageInput]
+  );
+  const [value, setValue] = useState(formattedInitialValue);
   const [loaded, setLoaded] = useState(false);
   const resolveAndClose = useCallback(
     (s: string) => {
-      resolve(s);
+      resolve(isPageInput && s ? `[[${s}]]` : s);
       onClose();
     },
     [resolve, onClose]
@@ -56,13 +76,20 @@ const Prompt = ({
       <H3>SmartBlocks Input</H3>
       <div className={Classes.ALERT_BODY} ref={contentRef}>
         <Label>
-          {display}
-          {options.length ? (
+          {formattedDisplay}
+          {formattedOptions.length ? (
             <MenuItemSelect
               activeItem={value}
               onItemSelect={(v) => setValue(v)}
-              items={[initialValue, ...options]}
+              items={[formattedInitialValue, ...formattedOptions]}
               popoverProps={{ portalClassName: "roamjs-prompt-dropdown" }}
+              ButtonProps={{ autoFocus: true }}
+            />
+          ) : isPageInput ? (
+            <PageInput
+              value={value}
+              setValue={setValue}
+              onConfirm={() => resolveAndClose(value)}
             />
           ) : (
             <InputGroup

src/index.ts

@@ -37,8 +37,8 @@ addStyle(`.rm-page-ref--tag[data-tag="42SmartBlock"]:before, .rm-page-ref--tag[d
   background-size: auto 14px;
 }
 
-.roamjs-prompt-dropdown {
-  z-index: 1020;
+.bp3-portal {
+  z-index: 1000;
 }
 
 .roamjs-smartblocks-store-item {

src/smartblocks.ts

@@ -418,7 +418,17 @@ export const sbBomb = ({
   const childNodes = PREDEFINED_REGEX.test(srcUid)
     ? predefinedChildrenByUid[srcUid]
     : getTreeByBlockUid(srcUid).children;
-  return Promise.all(childNodes.map((n) => proccessBlockWithSmartness(n)))
+  return childNodes
+    .reduce(
+      (prev, cur) =>
+        prev.then((r) =>
+          proccessBlockWithSmartness(cur).then((c) => {
+            r.push(c);
+            return r;
+          })
+        ),
+      Promise.resolve([] as InputTextNode[][])
+    )
     .then((results) => results.flatMap((r) => r))
     .then(([firstChild, ...tree]) => {
       const startingOrder = getOrderByBlockUid(uid);