Rebuilding code block menus (#5569)

app/components/ContextMenu/MenuItem.tsx

@@ -8,6 +8,7 @@ import breakpoint from "styled-components-breakpoint";
 import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
+  id?: string;
   onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
   active?: boolean;
   selected?: boolean;
@@ -37,34 +38,26 @@ const MenuItem = (
   }: Props,
   ref: React.Ref<HTMLAnchorElement>
 ) => {
-  const handleClick = React.useCallback(
-    async (ev) => {
-      hide?.();
+  const content = React.useCallback(
+    (props) => {
+      const handleClick = async (ev: React.MouseEvent) => {
+        hide?.();
 
-      if (onClick) {
+        if (onClick) {
+          ev.preventDefault();
+          await onClick(ev);
+        }
+      };
+
+      // Preventing default mousedown otherwise menu items do not work in Firefox,
+      // which triggers the hideOnClickOutside handler first via mousedown – hiding
+      // and un-rendering the menu contents.
+      const handleMouseDown = (ev: React.MouseEvent) => {
         ev.preventDefault();
-        await onClick(ev);
-      }
-    },
-    [onClick, hide]
-  );
+        ev.stopPropagation();
+      };
 
-  // Preventing default mousedown otherwise menu items do not work in Firefox,
-  // which triggers the hideOnClickOutside handler first via mousedown – hiding
-  // and un-rendering the menu contents.
-  const handleMouseDown = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }, []);
-
-  return (
-    <BaseMenuItem
-      onClick={disabled ? undefined : onClick}
-      disabled={disabled}
-      hide={hide}
-      {...rest}
-    >
-      {(props) => (
+      return (
         <MenuAnchor
           {...props}
           $active={active}
@@ -85,7 +78,19 @@ const MenuItem = (
           {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
-      )}
+      );
+    },
+    [active, as, hide, icon, onClick, ref, selected]
+  );
+
+  return (
+    <BaseMenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      hide={hide}
+      {...rest}
+    >
+      {content}
     </BaseMenuItem>
   );
 };

app/components/ContextMenu/Template.tsx

@@ -135,6 +135,7 @@ function Template({ items, actions, context, ...menu }: Props) {
           return (
             <MenuItem
               as={Link}
+              id={`${item.title}-${index}`}
               to={item.to}
               key={index}
               disabled={item.disabled}
@@ -150,6 +151,7 @@ function Template({ items, actions, context, ...menu }: Props) {
         if (item.type === "link") {
           return (
             <MenuItem
+              id={`${item.title}-${index}`}
               href={item.href}
               key={index}
               disabled={item.disabled}
@@ -168,6 +170,7 @@ function Template({ items, actions, context, ...menu }: Props) {
           return (
             <MenuItem
               as="button"
+              id={`${item.title}-${index}`}
               onClick={item.onClick}
               disabled={item.disabled}
               selected={item.selected}
@@ -186,6 +189,7 @@ function Template({ items, actions, context, ...menu }: Props) {
             <BaseMenuItem
               key={index}
               as={SubMenu}
+              id={`${item.title}-${index}`}
               templateItems={item.items}
               parentMenuState={menu}
               title={<Title title={item.title} icon={item.icon} />}

app/components/ContextMenu/index.tsx

@@ -149,7 +149,7 @@ const ContextMenu: React.FC<Props> = ({
                   style={
                     maxHeight && topAnchor
                       ? {
-                          maxHeight,
+                          maxHeight: `min(${maxHeight}px, 75vh)`,
                         }
                       : undefined
                   }