ENG-1739: Insert active result as page link at cursor (#1058)

* ENG-1729: Add initial Roam advanced node search dialog.

Introduce a command-palette search dialog with debounced DG node queries, result excerpts, colored type badges, title highlighting, and a preview panel with metadata.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Address review feedback for advanced node search dialog.

Index discourse nodes once per open, search locally with MiniSearch, reuse getNodeTagStyles, pull content only for visible results, and switch layout styling to Tailwind.

Co-authored-by: Cursor <cursoragent@cursor.com>

* more fix. but need to figure out tailwindcss bug

* current state. still need more styling fix

* fix styling

* fix lint

* address some reviews

* use native Preview

* make the preview not interactable

* clean

* add metadata date

* Address PR review feedback for advanced node search.

Derive search results during render, dedupe indexed UIDs, surface total index failures, and align command palette registration with existing patterns.

Co-authored-by: Cursor <cursoragent@cursor.com>

* remove uncessary reset state

* Insert active search result as page link at cursor (ENG-1739).

Wire Advanced Node Search footer insert with block snapshot, shared cursor utilities, and Cmd+Enter so users can drop [[Page Title]] into the block they were editing.

Co-authored-by: Cursor <cursoragent@cursor.com>

* simplify

* refactor

* refactor util files

* make sure it adds wikilink to the right window

* fix lint

* clean up functions

* Address PR review feedback for insert footer.

Use Blueprint Button for footer shortcuts, default missing window-id to main-window, and drop unnecessary keywords memo.

Co-authored-by: Cursor <cursoragent@cursor.com>

* clean up

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: trangdoan982

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx

@@ -15,11 +15,17 @@ import {
   Tag,
 } from "@blueprintjs/core";
 import MiniSearch from "minisearch";
+import posthog from "posthog-js";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import renderOverlay, {
   RoamOverlayProps,
 } from "roamjs-components/util/renderOverlay";
+import {
+  insertPageRefAtRange,
+  snapshotInsertTarget,
+  type InsertTarget,
+} from "~/utils/advancedSearchFooterUtils";
 import { DiscourseNodeSortControl } from "~/components/DiscourseNodeSortControl";
 import getDiscourseNodes, {
   type DiscourseNode,
@@ -38,6 +44,7 @@ import {
   stripTypePrefix,
 } from "./utils";
 import { RenderRoamBlock, RenderRoamPage } from "~/utils/roamReactComponents";
+import { AdvancedSearchFooter } from "./AdvancedSearchFooter";
 
 type Props = Record<string, unknown>;
 
@@ -156,6 +163,7 @@ const AdvancedNodeSearchDialog = ({
   const allResultsRef = useRef<SearchResult[]>([]);
   const resultsPanelRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const [insertTarget, setInsertTarget] = useState<InsertTarget | null>(null);
 
   const nodeConfigByType = useMemo(() => {
     const discourseNodes = getDiscourseNodes().filter(
@@ -172,6 +180,8 @@ const AdvancedNodeSearchDialog = ({
   useEffect(() => {
     if (!isOpen) return;
 
+    setInsertTarget(snapshotInsertTarget());
+
     const focusInput = () => inputRef.current?.focus();
 
     focusInput();
@@ -270,6 +280,37 @@ const AdvancedNodeSearchDialog = ({
     activeRow?.scrollIntoView({ block: "nearest" });
   }, [activeIndex, activeResult?.uid, debouncedSearchTerm]);
 
+  const onInsert = useCallback(async () => {
+    if (!activeResult || !insertTarget) return;
+
+    const pageTitle =
+      getPageTitleByPageUid(activeResult.uid) ??
+      stripTypePrefix(activeResult.title);
+
+    await insertPageRefAtRange({
+      blockUid: insertTarget.blockUid,
+      pageTitle,
+      selectionEnd: insertTarget.selectionEnd,
+      selectionStart: insertTarget.selectionStart,
+      windowId: insertTarget.windowId,
+    });
+
+    posthog.capture("Advanced Node Search: Insert", {
+      uid: activeResult.uid,
+      pageTitle,
+    });
+    onClose();
+  }, [activeResult, insertTarget, onClose]);
+
+  const contentState = indexError
+    ? "error"
+    : isIndexLoading
+      ? "indexing"
+      : !debouncedSearchTerm
+        ? "initial"
+        : !results.length
+          ? "empty"
+          : "results";
   const handleSortChange = useCallback((nextSort: SortConfig): void => {
     setSort(nextSort);
   }, []);
@@ -282,24 +323,30 @@ const AdvancedNodeSearchDialog = ({
       } else if (event.key === "ArrowUp" && results.length) {
         event.preventDefault();
         setActiveIndex((index) => Math.max(index - 1, 0));
+      } else if (
+        event.key === "Enter" &&
+        (event.metaKey || event.ctrlKey) &&
+        contentState === "results" &&
+        activeResult &&
+        insertTarget
+      ) {
+        event.preventDefault();
+        void onInsert();
       } else if (event.key === "Escape") {
         event.preventDefault();
         onClose();
       }
     },
-    [onClose, results.length],
+    [
+      activeResult,
+      contentState,
+      insertTarget,
+      onClose,
+      onInsert,
+      results.length,
+    ],
   );
 
-  const contentState = indexError
-    ? "error"
-    : isIndexLoading
-      ? "indexing"
-      : !debouncedSearchTerm
-        ? "initial"
-        : !results.length
-          ? "empty"
-          : "results";
-
   const showSplitView = contentState === "results";
 
   return (
@@ -389,6 +436,12 @@ const AdvancedNodeSearchDialog = ({
             </div>
           )}
         </div>
+        <AdvancedSearchFooter
+          contentState={contentState}
+          hasActiveResult={!!activeResult}
+          insertTarget={insertTarget}
+          onInsert={() => void onInsert()}
+        />
       </div>
     </Dialog>
   );

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchFooter.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Button } from "@blueprintjs/core";
+import type { InsertTarget } from "~/utils/advancedSearchFooterUtils";
+
+export type AdvancedSearchContentState =
+  | "error"
+  | "indexing"
+  | "initial"
+  | "empty"
+  | "results";
+
+export type AdvancedSearchFooterProps = {
+  contentState: AdvancedSearchContentState;
+  hasActiveResult: boolean;
+  insertTarget: InsertTarget | null;
+  onInsert: () => void;
+};
+
+const footerKbdClassName =
+  "rounded border border-gray-300 bg-white px-1.5 py-0.5 font-mono text-xs text-gray-600";
+
+const footerLabelClassName =
+  "inline-flex shrink-0 items-center gap-1 text-xs lowercase text-gray-500";
+
+type FooterShortcutHintProps = {
+  disabled?: boolean;
+  keys: string[];
+  label: string;
+  onClick?: () => void;
+};
+
+export const FooterShortcutHint = ({
+  disabled = false,
+  keys,
+  label,
+  onClick,
+}: FooterShortcutHintProps) => (
+  <Button
+    className="inline-flex !min-h-0 items-center gap-2 p-0"
+    disabled={disabled}
+    minimal
+    onClick={onClick}
+    small
+  >
+    <span className={footerLabelClassName}>
+      {keys.map((key) => (
+        <kbd className={footerKbdClassName} key={key}>
+          {key}
+        </kbd>
+      ))}
+      {label}
+    </span>
+  </Button>
+);
+
+export const InsertFooterAction = ({
+  disabled,
+  onInsert,
+}: {
+  disabled: boolean;
+  onInsert: () => void;
+}) => (
+  <FooterShortcutHint
+    disabled={disabled}
+    keys={["⌘", "↵"]}
+    label="insert"
+    onClick={() => void onInsert()}
+  />
+);
+
+const CloseFooterHint = () => (
+  <span className={footerLabelClassName}>
+    <kbd className={footerKbdClassName}>esc</kbd>
+    close
+  </span>
+);
+
+export const AdvancedSearchFooter = ({
+  contentState,
+  hasActiveResult,
+  insertTarget,
+  onInsert,
+}: AdvancedSearchFooterProps) => {
+  const hasResults = contentState === "results";
+  const canInsert = !!insertTarget && hasActiveResult && hasResults;
+
+  return (
+    <div className="flex w-full flex-none items-center justify-between border-t border-gray-200 bg-gray-50 px-3 py-2">
+      <div className="inline-flex shrink-0 items-center gap-3">
+        {insertTarget && (
+          <InsertFooterAction disabled={!canInsert} onInsert={onInsert} />
+        )}
+      </div>
+      <CloseFooterHint />
+    </div>
+  );
+};

apps/roam/src/utils/advancedSearchFooterUtils.ts

@@ -0,0 +1,155 @@
+import getUids from "roamjs-components/dom/getUids";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import updateBlock from "roamjs-components/writes/updateBlock";
+
+export type BlockSelection = {
+  selectionStart: number;
+  selectionEnd: number;
+  selectedText: string;
+};
+
+export type InsertTarget = {
+  blockUid: string;
+  windowId: string;
+  selectionStart: number;
+  selectionEnd: number;
+};
+
+const DEFAULT_WINDOW_ID = "main-window";
+
+export const getBlockSelection = (uid: string): BlockSelection => {
+  const activeElement = document.activeElement;
+  const isFocusedTextarea =
+    activeElement instanceof HTMLTextAreaElement &&
+    activeElement.classList.contains("rm-block-input") &&
+    getUids(activeElement).blockUid === uid;
+  if (isFocusedTextarea) {
+    return {
+      selectionStart: activeElement.selectionStart,
+      selectionEnd: activeElement.selectionEnd,
+      selectedText: activeElement.value.substring(
+        activeElement.selectionStart,
+        activeElement.selectionEnd,
+      ),
+    };
+  }
+  const textareas = document.querySelectorAll("textarea.rm-block-input");
+  for (const el of textareas) {
+    const textarea = el as HTMLTextAreaElement;
+    if (getUids(textarea).blockUid === uid) {
+      return {
+        selectionStart: textarea.selectionStart,
+        selectionEnd: textarea.selectionEnd,
+        selectedText: textarea.value.substring(
+          textarea.selectionStart,
+          textarea.selectionEnd,
+        ),
+      };
+    }
+  }
+  const textLength = (getTextByBlockUid(uid) || "").length;
+  return {
+    selectionStart: textLength,
+    selectionEnd: textLength,
+    selectedText: "",
+  };
+};
+
+const insertTargetFromFocusedBlock = (): InsertTarget | null => {
+  const focusedBlock = window.roamAlphaAPI.ui.getFocusedBlock();
+  if (!focusedBlock?.["block-uid"]) return null;
+
+  const blockUid = focusedBlock["block-uid"];
+  const selection = getBlockSelection(blockUid);
+
+  return {
+    blockUid,
+    windowId: focusedBlock["window-id"] || DEFAULT_WINDOW_ID,
+    selectionStart: selection.selectionStart,
+    selectionEnd: selection.selectionEnd,
+  };
+};
+
+export const snapshotInsertTarget = (): InsertTarget | null => {
+  const fromApi = insertTargetFromFocusedBlock();
+  if (fromApi) return fromApi;
+
+  const activeElement = document.activeElement;
+  if (
+    activeElement instanceof HTMLTextAreaElement &&
+    activeElement.classList.contains("rm-block-input")
+  ) {
+    const { blockUid, windowId } = getUids(activeElement);
+    if (!blockUid) return null;
+
+    return {
+      blockUid,
+      windowId: windowId || DEFAULT_WINDOW_ID,
+      selectionStart: activeElement.selectionStart,
+      selectionEnd: activeElement.selectionEnd,
+    };
+  }
+
+  return null;
+};
+
+const findBlockTextarea = (blockUid: string): HTMLTextAreaElement | null => {
+  const textareas = document.querySelectorAll("textarea.rm-block-input");
+  for (const el of textareas) {
+    const textarea = el as HTMLTextAreaElement;
+    if (getUids(textarea).blockUid === blockUid) return textarea;
+  }
+  return null;
+};
+
+export const restoreBlockFocus = ({
+  blockUid,
+  newCursorPosition,
+  windowId,
+}: {
+  blockUid: string;
+  newCursorPosition: number;
+  windowId: string;
+}): void => {
+  if (window.roamAlphaAPI.ui.setBlockFocusAndSelection) {
+    void window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+      location: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "block-uid": blockUid,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "window-id": windowId,
+      },
+      selection: { start: newCursorPosition },
+    });
+    return;
+  }
+
+  setTimeout(() => {
+    const textarea = findBlockTextarea(blockUid);
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(newCursorPosition, newCursorPosition);
+  }, 50);
+};
+
+export const insertPageRefAtRange = async ({
+  blockUid,
+  pageTitle,
+  selectionEnd,
+  selectionStart,
+  windowId,
+}: {
+  blockUid: string;
+  pageTitle: string;
+  selectionEnd: number;
+  selectionStart: number;
+  windowId: string;
+}): Promise<void> => {
+  const pageRef = `[[${pageTitle}]]`;
+  const originalText = getTextByBlockUid(blockUid) || "";
+  const newText = `${originalText.substring(0, selectionStart)}${pageRef}${originalText.substring(selectionEnd)}`;
+  const newCursorPosition = selectionStart + pageRef.length;
+
+  await updateBlock({ uid: blockUid, text: newText });
+  restoreBlockFocus({ blockUid, newCursorPosition, windowId });
+};