fix(terminal): restore native copy menu

Author: skulidropek

packages/terminal/src/web/terminal-copy-interaction.ts

@@ -1,3 +1,9 @@
+import {
+  clearNativeBrowserCopyMenu,
+  prepareNativeBrowserCopyMenu,
+  type TerminalCopyTextarea,
+  type TerminalNativeCopyMenuHost
+} from "./terminal-copy-native-menu.js"
 import {
   createTerminalSelectionDragController,
   forceTerminalSelectionModifier,
@@ -37,6 +43,7 @@ export type TerminalCopyInteractionTerminal = TerminalSelectionTarget & {
     readonly mouseTrackingMode: TerminalMouseTrackingMode
   }
   readonly onSelectionChange?: (handler: () => void) => TerminalDisposable
+  readonly textarea?: TerminalCopyTextarea | undefined
 }
 
 type TerminalCopyClipboardData = {
@@ -54,7 +61,7 @@ type TerminalCopyListenerRegistration = {
   (type: TerminalCopyMouseEventType, listener: (event: TerminalCopyMouseEvent) => void, options: true): void
 }
 
-type TerminalCopyInteractionHost = {
+type TerminalCopyInteractionHost = TerminalNativeCopyMenuHost & {
   readonly ownerDocument?: TerminalSelectionDragTarget | null
   readonly addEventListener: TerminalCopyListenerRegistration
   readonly removeEventListener: TerminalCopyListenerRegistration
@@ -176,6 +183,8 @@ class TerminalSelectionContextSnapshot {
 
   readonly has = (): boolean => this.selection.length > 0
 
+  readonly read = (): string => this.selection
+
   readonly refresh = (): boolean => {
     const selection = this.terminal.getSelection()
     if (selection.length === 0) {
@@ -246,6 +255,18 @@ class TerminalCopyInteractionController {
     hasActiveMouseTracking(this.args.terminal) &&
     (this.selectionContext.has() || this.args.terminal.hasSelection())
 
+  private readonly prepareNativeBrowserCopyMenu = (event: TerminalCopyMouseEvent): boolean =>
+    prepareNativeBrowserCopyMenu({
+      event,
+      host: this.args.host,
+      selection: this.selectionContext.read(),
+      textarea: this.args.terminal.textarea
+    })
+
+  private readonly clearNativeBrowserCopyMenu = (): void => {
+    clearNativeBrowserCopyMenu(this.args.terminal.textarea)
+  }
+
   private readonly shouldProtectSelectionContext = (event: TerminalCopyMouseEvent): boolean =>
     isSecondaryMouseButton(event) && this.hasProtectedSelectionContext()
 
@@ -263,18 +284,23 @@ class TerminalCopyInteractionController {
   private readonly onMouseDown = (event: TerminalCopyMouseEvent): void => {
     if (isPrimaryMouseButton(event)) {
       this.selectionContext.clear()
+      this.clearNativeBrowserCopyMenu()
     }
     const forceBrowserSelection = shouldForceBrowserTerminalSelection(event, this.args.terminal)
-    const forceSelectionContext = shouldForceTerminalSelectionContext(event, this.args.terminal)
+    const forceSelectionContext = this.shouldProtectSelectionContext(event)
     if (!forceBrowserSelection && !forceSelectionContext) {
       if (isSecondaryMouseButton(event)) {
         this.selectionContext.clear()
+        this.clearNativeBrowserCopyMenu()
       }
       return
     }
     forceTerminalSelectionModifier(event)
     if (forceSelectionContext) {
-      this.selectionContext.refresh()
+      if (this.args.terminal.hasSelection()) {
+        this.selectionContext.refresh()
+      }
+      this.prepareNativeBrowserCopyMenu(event)
       suppressTerminalMouseReport(event)
       return
     }
@@ -307,6 +333,7 @@ class TerminalCopyInteractionController {
     if (this.args.terminal.hasSelection()) {
       this.selectionContext.refresh()
     }
+    this.prepareNativeBrowserCopyMenu(event)
     suppressTerminalMouseReport(event)
   }
 
@@ -317,6 +344,7 @@ class TerminalCopyInteractionController {
       return
     }
     this.selectionContext.clear()
+    this.clearNativeBrowserCopyMenu()
     event.preventDefault()
     event.stopPropagation()
   }
@@ -326,6 +354,7 @@ class TerminalCopyInteractionController {
     this.selectionChangeDisposable = null
     this.selectionDrag.dispose()
     this.selectionContext.clear()
+    this.clearNativeBrowserCopyMenu()
     this.args.host.removeEventListener("mousedown", this.onMouseDown, true)
     this.args.host.removeEventListener("mouseup", this.onMouseUp, true)
     this.args.host.removeEventListener("contextmenu", this.onContextMenu, true)

packages/terminal/src/web/terminal-copy-native-menu.ts

@@ -0,0 +1,83 @@
+import type { TerminalCopyMouseEvent } from "./terminal-copy-selection-drag.js"
+
+export type TerminalCopyTextarea = {
+  readonly focus: () => void
+  readonly select: () => void
+  readonly style: {
+    height: string
+    left: string
+    top: string
+    width: string
+    zIndex: string
+  }
+  value: string
+}
+
+type TerminalCopyScreenElement = {
+  readonly getBoundingClientRect: () => {
+    readonly left: number
+    readonly top: number
+  }
+}
+
+export type TerminalNativeCopyMenuHost = {
+  readonly getBoundingClientRect?: TerminalCopyScreenElement["getBoundingClientRect"]
+  readonly querySelector?: (selector: string) => TerminalCopyScreenElement | null
+}
+
+type PrepareNativeBrowserCopyMenuArgs = {
+  readonly event: TerminalCopyMouseEvent
+  readonly host: TerminalNativeCopyMenuHost
+  readonly selection: string
+  readonly textarea: TerminalCopyTextarea | undefined
+}
+
+const terminalContextMenuTextareaOffsetPx = 10
+const terminalContextMenuTextareaSizePx = 20
+const xtermScreenSelector = ".xterm-screen"
+
+const optionalNumber = (value: number | undefined): number => value ?? 0
+
+const resolveContextMenuHostScreenElement = (
+  host: TerminalNativeCopyMenuHost
+): TerminalCopyScreenElement | null => {
+  const getBoundingClientRect = host.getBoundingClientRect
+  if (getBoundingClientRect === undefined) {
+    return null
+  }
+  return {
+    getBoundingClientRect: () => getBoundingClientRect.call(host)
+  }
+}
+
+const resolveContextMenuScreenElement = (
+  host: TerminalNativeCopyMenuHost
+): TerminalCopyScreenElement | null =>
+  host.querySelector?.(xtermScreenSelector) ?? resolveContextMenuHostScreenElement(host)
+
+export const prepareNativeBrowserCopyMenu = (
+  { event, host, selection, textarea }: PrepareNativeBrowserCopyMenuArgs
+): boolean => {
+  const screenElement = resolveContextMenuScreenElement(host)
+  if (selection.length === 0 || textarea === undefined || screenElement === null) {
+    return false
+  }
+  const screenPosition = screenElement.getBoundingClientRect()
+  textarea.style.width = `${terminalContextMenuTextareaSizePx}px`
+  textarea.style.height = `${terminalContextMenuTextareaSizePx}px`
+  textarea.style.left = `${optionalNumber(event.clientX) - screenPosition.left - terminalContextMenuTextareaOffsetPx}px`
+  textarea.style.top = `${optionalNumber(event.clientY) - screenPosition.top - terminalContextMenuTextareaOffsetPx}px`
+  textarea.style.zIndex = "1000"
+  textarea.focus()
+  textarea.value = selection
+  textarea.select()
+  return true
+}
+
+export const clearNativeBrowserCopyMenu = (
+  textarea: TerminalCopyTextarea | undefined
+): void => {
+  if (textarea !== undefined) {
+    textarea.value = ""
+  }
+}

packages/terminal/tests/web/terminal-copy-redraw-interaction.test.ts

@@ -15,13 +15,58 @@ const keyboardCopyEvent: TerminalCopyKeyboardEvent = {
   type: "keydown"
 }
 
+class FakeTerminalCopyTextarea {
+  focusCalls = 0
+  selectCalls = 0
+  readonly style = {
+    height: "",
+    left: "",
+    top: "",
+    width: "",
+    zIndex: ""
+  }
+  value = ""
+
+  focus(): void {
+    this.focusCalls += 1
+  }
+
+  select(): void {
+    this.selectCalls += 1
+  }
+}
+
+class FakeTerminalCopyScreenHost extends FakeTerminalCopyHost {
+  constructor(
+    readonly screenLeft: number,
+    readonly screenTop: number
+  ) {
+    super(null)
+  }
+
+  querySelector(
+    selector: string
+  ): { readonly getBoundingClientRect: () => { readonly left: number; readonly top: number } } | null {
+    if (selector !== ".xterm-screen") {
+      return null
+    }
+    return {
+      getBoundingClientRect: () => ({
+        left: this.screenLeft,
+        top: this.screenTop
+      })
+    }
+  }
+}
+
 describe("terminal copy redraw interaction", () => {
   it("keeps selection snapshot copyable after terminal redraw clears live selection", () => {
     let terminalSelection = ""
     const keyHandlers: Array<(event: TerminalCopyKeyboardEvent) => boolean> = []
     const selectionChangeHandlers: Array<() => void> = []
     const clipboardWrites: Array<{ readonly data: string; readonly format: string }> = []
-    const host = new FakeTerminalCopyHost(null)
+    const host = new FakeTerminalCopyScreenHost(100, 200)
+    const textarea = new FakeTerminalCopyTextarea()
     const terminal: TerminalCopyInteractionTerminal = {
       attachCustomKeyEventHandler: (handler) => {
         keyHandlers.push(handler)
@@ -39,7 +84,8 @@ describe("terminal copy redraw interaction", () => {
             }
           }
         }
-      }
+      },
+      textarea
     }
     const disposable = attachTerminalCopyInteraction({ host, terminal })
 
@@ -53,21 +99,51 @@ describe("terminal copy redraw interaction", () => {
     const handleKey = keyHandlers[0] ?? expect.fail("Expected terminal copy key handler to be registered.")
     expect(handleKey(keyboardCopyEvent)).toBe(false)
 
-    const contextMenu = mouseEvent(0, "contextmenu")
+    const rightClick = mouseEvent(2, "mousedown", {
+      clientX: 150,
+      clientY: 260
+    })
+    const contextMenu = mouseEvent(0, "contextmenu", {
+      clientX: 155,
+      clientY: 265
+    })
     const copy = copyEvent({
       setData: (format: string, data: string) => {
         clipboardWrites.push({ data, format })
       }
     })
+    host.dispatchMouse("mousedown", rightClick)
+
+    expect(rightClick.shiftKey).toBe(true)
+    expect(rightClick.preventDefaultCalls).toBe(0)
+    expect(rightClick.stopImmediatePropagationCalls).toBe(1)
+    expect(textarea.value).toBe("selected before redraw")
+    expect(textarea.focusCalls).toBe(1)
+    expect(textarea.selectCalls).toBe(1)
+
     host.dispatchMouse("contextmenu", contextMenu)
-    host.dispatchCopy(copy)
 
     expect(contextMenu.shiftKey).toBe(true)
+    expect(contextMenu.preventDefaultCalls).toBe(0)
     expect(contextMenu.stopImmediatePropagationCalls).toBe(1)
     expect(contextMenu.stopPropagationCalls).toBeGreaterThanOrEqual(1)
+    expect(textarea.value).toBe("selected before redraw")
+    expect(textarea.focusCalls).toBe(2)
+    expect(textarea.selectCalls).toBe(2)
+    expect(textarea.style).toEqual({
+      height: "20px",
+      left: "45px",
+      top: "55px",
+      width: "20px",
+      zIndex: "1000"
+    })
+
+    host.dispatchCopy(copy)
+
     expect(clipboardWrites).toEqual([{ data: "selected before redraw", format: "text/plain" }])
     expect(copy.preventDefaultCalls).toBe(1)
     expect(copy.stopPropagationCalls).toBe(1)
+    expect(textarea.value).toBe("")
     expect(selectionChangeHandlers).toHaveLength(1)
     expect(handleKey(keyboardCopyEvent)).toBe(true)