feat: add context menu support for editable fields (#1870)

Author: jonathanlab

apps/code/src/main/window.ts

@@ -1,7 +1,13 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { createIPCHandler } from "@posthog/electron-trpc/main";
-import { BrowserWindow, screen, shell } from "electron";
+import {
+  BrowserWindow,
+  Menu,
+  type MenuItemConstructorOptions,
+  screen,
+  shell,
+} from "electron";
 import { container } from "./di/container";
 import { MAIN_TOKENS } from "./di/tokens";
 import { buildApplicationMenu } from "./menu";
@@ -97,6 +103,24 @@ function setupExternalLinkHandlers(window: BrowserWindow): void {
   });
 }
 
+function setupEditableContextMenu(window: BrowserWindow): void {
+  window.webContents.on("context-menu", (_event, params) => {
+    if (!params.isEditable) return;
+    const { editFlags } = params;
+    const template: MenuItemConstructorOptions[] = [
+      { role: "undo", enabled: editFlags.canUndo },
+      { role: "redo", enabled: editFlags.canRedo },
+      { type: "separator" },
+      { role: "cut", enabled: editFlags.canCut },
+      { role: "copy", enabled: editFlags.canCopy },
+      { role: "paste", enabled: editFlags.canPaste },
+      { type: "separator" },
+      { role: "selectAll", enabled: editFlags.canSelectAll },
+    ];
+    Menu.buildFromTemplate(template).popup({ window });
+  });
+}
+
 export function createWindow(): void {
   const isDev = isDevBuild();
   const savedState = getSavedWindowState();
@@ -187,6 +211,7 @@ export function createWindow(): void {
   });
 
   setupExternalLinkHandlers(mainWindow);
+  setupEditableContextMenu(mainWindow);
   buildApplicationMenu();
 
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {

apps/code/src/renderer/features/message-editor/components/PromptInput.tsx

@@ -224,6 +224,10 @@ export const PromptInput = forwardRef<EditorHandle, PromptInputProps>(
       [focus],
     );
 
+    const handleContextMenu = useCallback((e: React.MouseEvent) => {
+      e.stopPropagation();
+    }, []);
+
     const handleSubmitClick = (e: React.MouseEvent) => {
       e.stopPropagation();
       if (onSubmitClick) {
@@ -271,6 +275,7 @@ export const PromptInput = forwardRef<EditorHandle, PromptInputProps>(
       <Flex direction="column" gap="1">
         <InputGroup
           onClick={handleContainerClick}
+          onContextMenu={handleContextMenu}
           className={`h-auto bg-card ${isBashMode ? "ring-1 ring-blue-9" : ""}`}
           style={{ cursor: "text" }}
           {...(tourTarget && {

apps/code/src/renderer/features/sessions/components/SessionView.tsx

@@ -346,6 +346,15 @@ export function SessionView({
 
   useAutoFocusOnTyping(editorRef, !isActiveSession);
 
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (
+      target.closest('input, textarea, [contenteditable="true"], .ProseMirror')
+    ) {
+      e.stopPropagation();
+    }
+  }, []);
+
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
@@ -354,6 +363,7 @@ export function SessionView({
             direction="column"
             height="100%"
             className="relative bg-background"
+            onContextMenu={handleContextMenu}
           >
             <RawLogsView
               events={events}
@@ -366,6 +376,7 @@ export function SessionView({
             height="100%"
             className="relative bg-background"
             onClick={handlePaneClick}
+            onContextMenu={handleContextMenu}
             onDragEnter={handleDragEnter}
             onDragLeave={handleDragLeave}
             onDragOver={handleDragOver}