ENG-1742 Add max height and scroll for node type menu (#1019)

* ENG-1742 Add max height and scroll to node type menu

Adds `max-h-[60vh] overflow-y-auto` to the node menu list so it doesn't
overflow off-screen when there are many node types. Also scrolls the
active item into view when navigating with arrow keys.

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

* fix max height for NodeMenu

* support keyboard-only flow

* use Blueprint flip: enabled to position Popover

---------

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

Author: trangdoan982

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -35,6 +35,7 @@ type Props = {
   extensionAPI: OnloadArgs["extensionAPI"];
   trigger?: JSX.Element;
   isShift?: boolean;
+  menuMaxHeight?: number;
 };
 
 const NodeMenu = ({
@@ -44,6 +45,7 @@ const NodeMenu = ({
   extensionAPI,
   trigger,
   isShift,
+  menuMaxHeight,
 }: { onClose: () => void } & Props) => {
   const isInitialTextSelected =
     !!textarea && textarea.selectionStart !== textarea.selectionEnd;
@@ -71,6 +73,23 @@ const NodeMenu = ({
   const [activeIndex, setActiveIndex] = useState(0);
   const [isOpen, setIsOpen] = useState(!trigger);
 
+  useEffect(() => {
+    const container = menuRef.current;
+    if (!container) return;
+    const activeItem = container.children[activeIndex] as
+      | HTMLElement
+      | undefined;
+    if (!activeItem) return;
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    if (
+      itemRect.bottom > containerRect.bottom ||
+      itemRect.top < containerRect.top
+    ) {
+      activeItem.scrollIntoView({ block: "nearest", behavior: "auto" });
+    }
+  }, [activeIndex]);
+
   const onSelect = useCallback(
     (index: number) => {
       const menuItem =
@@ -252,14 +271,18 @@ const NodeMenu = ({
       className="relative z-50"
       position={Position.BOTTOM_LEFT}
       modifiers={{
-        flip: { enabled: false },
+        flip: { enabled: true },
         preventOverflow: { enabled: false },
       }}
       autoFocus={false}
       enforceFocus={false}
       onInteraction={trigger ? handlePopoverInteraction : undefined}
       content={
-        <Menu ulRef={menuRef} data-active-index={activeIndex}>
+        <Menu
+          ulRef={menuRef}
+          data-active-index={activeIndex}
+          style={{ overflowY: "auto", maxHeight: menuMaxHeight }}
+        >
           {discourseNodes.map((item, i) => {
             const nodeColor =
               formatHexColor(item?.canvasSettings?.color) || "#000";
@@ -302,15 +325,25 @@ const NodeMenu = ({
 
 export const render = (props: Props) => {
   if (!props.textarea) return;
+  if (props.textarea.parentElement?.querySelector("[data-discourse-node-menu]"))
+    return;
   const parent = document.createElement("span");
+  parent.setAttribute("data-discourse-node-menu", "true");
   const coords = getCoordsFromTextarea(props.textarea);
   parent.style.position = "absolute";
   parent.style.left = `${coords.left}px`;
   parent.style.top = `${coords.top}px`;
   props.textarea.parentElement?.insertBefore(parent, props.textarea);
+  const parentTop =
+    props.textarea.parentElement?.getBoundingClientRect().top ?? 0;
+  const menuMaxHeight = Math.max(
+    window.innerHeight - (parentTop + coords.top) - 24,
+    100,
+  );
   ReactDOM.render(
     <NodeMenu
       {...props}
+      menuMaxHeight={menuMaxHeight}
       onClose={() => {
         ReactDOM.unmountComponentAtNode(parent);
         parent.remove();
@@ -355,13 +388,19 @@ export const TextSelectionNodeMenu = ({
     />
   );
 
+  const menuMaxHeight = Math.max(
+    window.innerHeight - textarea.getBoundingClientRect().bottom - 8,
+    100,
+  );
+
   return (
     <NodeMenu
       textarea={textarea}
       extensionAPI={extensionAPI}
       trigger={trigger}
       onClose={onClose}
       isShift
+      menuMaxHeight={menuMaxHeight}
     />
   );
 };