@electerm/electerm-react 5.5.6 → 5.5.9

package/client/components/terminal/mixins/term-context-menu.jsx

@@ -44,12 +44,23 @@ export const contextMenuMixin = {
         disabled: !hasSelection
       },
       {
-
         key: 'onSelectAll',
         icon: <iconsMap.CheckSquareOutlined />,
         label: e('selectall'),
         extra: selectAllShortcut
       },
+      // Touch only: a selection dragged out on the canvas can only ever be an
+      // approximation of a native one, so offer the overlay where the OS does
+      // the selecting (see term-touch.js / terminal-select-text.jsx).
+      ...(
+        this.isTouchMode()
+          ? [{
+              key: 'onSelectTextMode',
+              icon: <iconsMap.SelectOutlined />,
+              label: e('selectText')
+            }]
+          : []
+      ),
       ...(
         isAIDisabled()
           ? []
@@ -124,11 +135,25 @@ export const contextMenuMixin = {
     ) {
       return false
     }
+    // While a touch drag is still building the selection we copy once on
+    // release instead — otherwise every cell the finger crosses would write
+    // the clipboard and raise a toast.
+    if (this.dragSelect) {
+      return false
+    }
     this.copySelectionToClipboard()
   },
 
   copySelectionToClipboard () {
-    const txt = this.term.getSelection()
+    this.copyToClipboard(this.term.getSelection())
+  },
+
+  /**
+   * Shared clipboard write. Lives here rather than in term-touch.js so that
+   * the touch module stays free of imports (it is loaded directly by a
+   * node:test unit spec), and so every copy raises the same `copied` toast.
+   */
+  copyToClipboard (txt) {
     if (txt) {
       copy(txt)
     }
@@ -152,6 +177,9 @@ export const contextMenuMixin = {
   },
 
   pasteTextTooLong () {
+    if (this.props.config.disableConfirmForLargeClipboardContent) {
+      return false
+    }
     if (window.et.isWebApp) {
       return false
     }
@@ -180,7 +208,11 @@ export const contextMenuMixin = {
 
   async onPaste (skipTextLengthCheck) {
     let selected = await readClipboardAsync()
-    if (!skipTextLengthCheck && selected.length > 500) {
+    if (
+      !skipTextLengthCheck &&
+      !this.props.config.disableConfirmForLargeClipboardContent &&
+      selected.length > 500
+    ) {
       return this.askUserConfirm()
     }
     if (isWin && this.isRemote()) {

package/client/components/terminal/mixins/term-socket.js

@@ -18,9 +18,9 @@ import { XmodemClient } from '../xmodem-client.js'
 import { loadWebLinksAddon } from '../xterm-loader.js'
 import { KeywordHighlighterAddon } from '../highlight-addon.js'
 import {
-  createSshReloadState,
+  createTerminalReloadState,
   getAlternateBufferSnapshot,
-  shouldCaptureSshReloadState
+  shouldCaptureTerminalReloadState
 } from '../ssh-reload-state.js'
 
 // Expands \n \t \r \\ and \xHH hex byte escapes, used to let users type
@@ -58,7 +58,7 @@ function expandCloseSequence (text) {
 /**
  * Session lifecycle: opening the pty/ssh session over its websocket, error
  * and reconnect handling, input broadcast, and the screen snapshot used to
- * restore an ssh session after a reload.
+ * restore a shell session (ssh, local, telnet, serial) after a reload.
  */
 export const socketMixin = {
   buildWsUrl (port) {
@@ -392,7 +392,7 @@ export const socketMixin = {
   },
 
   getReloadState () {
-    if (!shouldCaptureSshReloadState(this.props.tab, this.props.config)) {
+    if (!shouldCaptureTerminalReloadState(this.props.tab, this.props.config)) {
       return undefined
     }
     let screen = ''
@@ -413,7 +413,7 @@ export const socketMixin = {
       console.warn('Failed to serialize terminal before reload', e)
     }
     const cwd = this.cmdAddon?.getCwd() || this.props.tab._reloadState?.cwd || ''
-    return createSshReloadState({ cwd, screen })
+    return createTerminalReloadState({ cwd, screen })
   },
 
   restoreReloadScreen (term) {

package/client/components/terminal/mixins/term-touch.js

@@ -1,15 +1,90 @@
 /**
- * Mobile touch support.
- * On touch devices, long-press should (1) select the word under the finger
- * and (2) open the context menu — mirroring desktop right-click behaviour.
- * xterm.js only uses touch events for scrolling, so we add explicit
- * long-press detection here.
+ * Mobile touch support — active only while `store.isTouchDevice` is true.
+ *
+ * `store.isTouchDevice` is flipped by main.jsx from the real pointer input
+ * (mouse → false, touch/pen → true), and a pointerdown always precedes the
+ * touch event it stands for, so by the time a touchstart reaches us the flag
+ * already reflects the device the user is actually operating. A mouse-driven
+ * desktop therefore never enters any of this code, and the whole gesture
+ * layer is gated at `onTouchStart` alone: every other handler needs the
+ * gesture state that only a touch start can create, so a stray event cannot
+ * strand a half-finished gesture when the flag flips mid-gesture.
+ *
+ * Why this exists at all: xterm.js has **no** touch text selection. Its touch
+ * layer maps gestures to scrolling only (`-xterm-gesturestart/-change`, see
+ * @xterm/xterm), and `-xterm-gesturetap` has no consumer in core. Every touch
+ * terminal therefore has to build selection itself; the previous version here
+ * could only ever select a single word, which is what made copying painful.
+ *
+ * Gesture map (touch mode only):
+ *   tap              → clear any selection, focus (opens the soft keyboard)
+ *   double tap       → select the word under the finger
+ *   triple tap       → select the whole line
+ *   long press       → select the word, then KEEP DRAGGING to extend it,
+ *                      auto-scrolling while the finger is past an edge
+ *   release, dragged → copy (copyWhenSelect on) or open the menu
+ *   release, no drag → open the menu, exactly as before
+ *   two fingers      → left alone: xterm's own pinch/scroll handling
+ *
+ * Dragging out a selection is only ever an approximation of what a phone user
+ * expects, so the menu also offers "select text" (see onSelectTextMode): it
+ * opens the whole buffer in a full-screen read-only textarea where the OS
+ * supplies real selection handles. That overlay is an ordinary DOM surface, so
+ * `onTouchStart` bails out of it — see isInsideSelectText().
+ *
+ * Two things that are easy to get wrong:
+ *  - `term.select()` takes a BUFFER-ABSOLUTE row, not a viewport row. Passing
+ *    the raw viewport row selects the wrong text as soon as the user has
+ *    scrolled back — that was a real bug in the single-word version.
+ *  - xterm registers its touch listeners on `document`, while React's root
+ *    container sits below it, so our `onTouchMove` runs first and a plain
+ *    `stopPropagation()` is enough to veto xterm's scroll for the duration of
+ *    the drag. `preventDefault()` is not an option: React listens to
+ *    `touchmove` passively, so it is ignored (with a console warning).
  */
+
+const DEFAULT_WORD_SEPARATOR = './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
+
+// the select-text overlay; its own native selection must stay out of the
+// terminal gesture layer
+const SELECT_TEXT_CLASS = '.terminal-select-text'
+
+// tap detection
+const DOUBLE_TAP_MS = 350
+const DOUBLE_TAP_PX = 24
+
+// edge auto-scroll: a short delay before it kicks in, then one scroll step
+// per interval
+const AUTOSCROLL_DELAY = 260
+const AUTOSCROLL_INTERVAL = 60
+
 export const touchMixin = {
+  isTouchMode () {
+    const store = window.store
+    return !!(store && store.isTouchDevice)
+  },
+
+  // ---- gesture entry points, wired up in terminal.jsx ----
+
   onTouchStart (e) {
+    // the one and only touch-mode gate — see the file header
+    if (!this.isTouchMode()) {
+      return
+    }
+    // the select-text overlay is a normal DOM surface: its native selection
+    // gestures must not be recycled into terminal gestures. Only a touchstart
+    // is checked, which is enough — the other handlers need gesture state that
+    // only a touchstart can create.
+    if (this.isInsideSelectText(e)) {
+      return
+    }
+    // two or more fingers mean zoom/scroll for xterm; abort whatever we were
+    // doing and stay out of the way
     if (e.touches.length !== 1) {
+      this.cancelTouchGesture()
       return
     }
+    this.cancelTouchGesture()
     const touch = e.touches[0]
     this.touchStartPos = {
       clientX: touch.clientX,
@@ -24,34 +99,138 @@ export const touchMixin = {
   },
 
   onTouchMove (e) {
-    if (!this.touchStartPos) {
+    // nothing in flight → not our gesture (this also covers touch mode being
+    // off, since only a gated onTouchStart can put state in flight)
+    if (!this.dragSelect && !this.touchStartPos) {
       return
     }
     const touch = e.touches[0]
+    if (!touch) {
+      return
+    }
+    if (this.dragSelect) {
+      // veto xterm's document-level gesture handler so the drag selects
+      // instead of scrolling
+      e.stopPropagation()
+      this.lastDragTouch = {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      }
+      this.dragSelect.moved = true
+      this.scheduleDragUpdate()
+      return
+    }
     const dx = touch.clientX - this.touchStartPos.clientX
     const dy = touch.clientY - this.touchStartPos.clientY
     if (Math.sqrt(dx * dx + dy * dy) > this.longPressMoveTolerance) {
-      clearTimeout(this.longPressTimer)
-      this.longPressTimer = null
-      this.touchStartPos = null
+      // it is a scroll/pan, not a long press — hand it back to xterm
+      this.cancelLongPress()
     }
   },
 
-  onTouchEnd () {
-    const wasTap = this.touchStartPos && !this.longPressFired
+  onTouchEnd (e) {
+    const gesture = this.dragSelect
+    const startPos = this.touchStartPos
+    const longPressed = this.longPressFired
+
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null
+
+    // touchmove is coalesced to one update per frame, so flush the pending
+    // frame here to make the final selection match where the finger lifted
+    if (gesture && gesture.moved && this.lastDragTouch) {
+      const coords = this.toBufferCoords(
+        this.lastDragTouch.clientX,
+        this.lastDragTouch.clientY
+      )
+      if (coords) {
+        this.applySelection(gesture.anchor, coords)
+      }
+    }
+    window.cancelAnimationFrame(this.dragFrame)
+    this.dragFrame = 0
+    this.stopAutoScroll()
+    this.dragSelect = null
+    this.lastDragTouch = null
     this.touchStartPos = null
-    // xterm's own touch (Gesture) handler calls preventDefault()/stopPropagation()
-    // on touchstart/touchend, which suppresses the synthesised mousedown xterm
-    // relies on to focus its hidden helper textarea. As a result a tap never
-    // focuses the terminal on touch devices, so the soft keyboard never opens
-    // and you cannot type. Focus explicitly on a clean tap (not a long-press,
-    // not a scroll) so mobile input works. The focus() runs synchronously inside
-    // this user-gesture handler, so iOS/Android will show the keyboard.
-    if (wasTap && this.term) {
+    this.longPressFired = false
+
+    if (gesture) {
+      if (gesture.moved && this.props.config.copyWhenSelect) {
+        // mobile has no Ctrl+C — copy on release and skip the menu; the
+        // selection stays visible so the user can still see what was copied
+        this.copySelectionToClipboard()
+        return
+      }
+      // no drag, or auto-copy off: the menu is the way to act on the
+      // selection, and its Copy item now covers a real multi-line range
+      // instead of a single word. Anchor it under the finger that lifted,
+      // which for a long drag is where the user is actually looking.
+      const endTouch = gesture.moved && e.changedTouches && e.changedTouches[0]
+      this.openContextMenuAt(
+        endTouch ? endTouch.clientX : gesture.clientX,
+        endTouch ? endTouch.clientY : gesture.clientY,
+        gesture.target
+      )
+      return
+    }
+    if (longPressed) {
+      // long pressed on a separator/blank cell, so nothing got selected —
+      // still offer the menu, as before
+      if (startPos) {
+        this.openContextMenuAt(startPos.clientX, startPos.clientY, startPos.target)
+      }
+      return
+    }
+    if (!startPos) {
+      // the gesture turned into a scroll, which is xterm's job
+      return
+    }
+    this.handleTap(e.changedTouches[0])
+  },
+
+  /**
+   * A tap that never became a drag: single → focus + drop the selection,
+   * double → select the word, triple → select the line.
+   */
+  handleTap (touch) {
+    if (!touch || !this.term) {
+      return
+    }
+    const { clientX, clientY } = touch
+    const now = Date.now()
+    const near = this.lastTapPos &&
+      Math.abs(clientX - this.lastTapPos.clientX) < DOUBLE_TAP_PX &&
+      Math.abs(clientY - this.lastTapPos.clientY) < DOUBLE_TAP_PX
+    this.tapCount = (now - this.lastTapTime < DOUBLE_TAP_MS && near)
+      ? this.tapCount + 1
+      : 1
+    this.lastTapTime = now
+    this.lastTapPos = { clientX, clientY }
+
+    if (this.tapCount === 2 && this.selectWordAt(clientX, clientY)) {
       this.term.focus()
+      return
+    }
+    if (this.tapCount >= 3) {
+      this.tapCount = 0
+      const coords = this.toBufferCoords(clientX, clientY)
+      if (coords) {
+        // selectLines() takes buffer-absolute line indices, same as select()
+        this.term.selectLines(coords.absRow, coords.absRow)
+        this.term.focus()
+        return
+      }
+    }
+    if (this.term.hasSelection()) {
+      this.term.clearSelection()
     }
+    // xterm's own touch handler calls preventDefault()/stopPropagation() on
+    // touchstart/touchend, which suppresses the synthesised mousedown xterm
+    // relies on to focus its hidden helper textarea — so a tap never focuses
+    // the terminal by itself and the soft keyboard would never open. Focusing
+    // here runs synchronously inside the user gesture, so iOS/Android show it.
+    this.term.focus()
   },
 
   handleLongPress () {
@@ -59,78 +238,286 @@ export const touchMixin = {
       return
     }
     this.longPressFired = true
+    // a long press is not part of any tap sequence
+    this.tapCount = 0
+    this.lastTapPos = null
     const { clientX, clientY, target } = this.touchStartPos
 
-    // Select the word at the touch position (same as desktop right-click word
-    // select) so the user can immediately copy or act on it.
-    this.selectWordAt(clientX, clientY)
+    const anchor = this.selectWordAt(clientX, clientY)
 
-    // Respect pasteWhenContextMenu: when enabled, long-press pastes instead
-    // of showing the menu (same as desktop right-click).
+    // pasteWhenContextMenu means "long press pastes" — honour that contract
+    // and never take over the gesture with a drag
     if (this.props.config.pasteWhenContextMenu) {
       this.onPaste()
       return
     }
-
-    // Dispatch a synthetic contextmenu event so antd Dropdown's contextMenu
-    // trigger opens the menu at the exact finger position.
-    const event = new MouseEvent('contextmenu', {
-      bubbles: true,
-      cancelable: true,
+    if (!anchor) {
+      return
+    }
+    this.dragSelect = {
+      anchor,
+      moved: false,
       clientX,
-      clientY
-    })
-    target.dispatchEvent(event)
+      clientY,
+      target
+    }
+    this.lastDragTouch = { clientX, clientY }
   },
 
-  selectWordAt (clientX, clientY) {
-    if (!this.term) {
+  isInsideSelectText (e) {
+    const target = e.target
+    return !!(target && target.closest && target.closest(SELECT_TEXT_CLASS))
+  },
+
+  // ---- select-text overlay ----
+  // The full-screen read-only textarea behind the menu's "select text" item.
+  // Dragging a selection out on the canvas is only ever an approximation of a
+  // native one, so this hands the whole buffer to the platform instead; the
+  // component itself is ./terminal-select-text.jsx.
+
+  onSelectTextMode () {
+    const text = this.getSelectableBufferText()
+    if (!text) {
       return
     }
-    const termElement = this.term.element
-    if (!termElement) {
+    this.setState({
+      selectTextVisible: true,
+      selectTextContent: text
+    })
+  },
+
+  handleSelectTextClose () {
+    this.setState({
+      selectTextVisible: false,
+      selectTextContent: ''
+    })
+  },
+
+  handleSelectTextAll () {
+    const el = this.selectTextRef.current
+    if (!el) {
       return
     }
-    const rect = termElement.getBoundingClientRect()
-    const x = clientX - rect.left
-    const y = clientY - rect.top
-    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+    // readOnly, so this does not raise the soft keyboard; the element still
+    // has to be focused or browsers will not paint the selection
+    el.focus({ preventScroll: true })
+    el.setSelectionRange(0, el.value.length)
+  },
+
+  handleSelectTextCopy () {
+    const el = this.selectTextRef.current
+    if (!el) {
       return
     }
+    const { value, selectionStart, selectionEnd } = el
+    // nothing selected by hand → "copy" means the whole buffer, which is what
+    // a phone user means after opening this panel
+    this.copyToClipboard(
+      selectionEnd > selectionStart
+        ? value.slice(selectionStart, selectionEnd)
+        : value
+    )
+  },
 
-    const cellWidth = rect.width / this.term.cols
-    const cellHeight = rect.height / this.term.rows
-    const col = Math.floor(x / cellWidth)
-    const row = Math.floor(y / cellHeight)
+  // ---- selection plumbing ----
 
-    const buffer = this.term.buffer.active
-    const line = buffer.getLine(row)
+  /**
+   * Selects the word under the point and returns the anchor a following drag
+   * extends from. The anchor is the word start, so a drag always keeps the
+   * whole word. Returns null when there is no usable coordinate mapping.
+   */
+  selectWordAt (clientX, clientY) {
+    if (!this.term) {
+      return null
+    }
+    const coords = this.toBufferCoords(clientX, clientY)
+    if (!coords) {
+      return null
+    }
+    const { col, absRow } = coords
+    const anchor = { col, absRow }
+    const line = this.term.buffer.active.getLine(absRow)
     if (!line) {
-      return
+      return anchor
     }
-
     const text = line.translateToString(true)
     const wordSeparator = this.props.config.terminalWordSeparator ||
-      ' ./\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
+      DEFAULT_WORD_SEPARATOR
 
-    // If the touched cell is empty or a separator, nothing to select
-    if (col >= text.length || wordSeparator.includes(text[col])) {
-      return
+    // touched a blank/separator cell: nothing to expand, but it is still a
+    // valid place to start dragging from
+    const char = col < text.length ? text[col] : ''
+    if (!char || wordSeparator.includes(char)) {
+      return anchor
     }
 
-    // Find word start
     let start = col
     while (start > 0 && !wordSeparator.includes(text[start - 1])) {
       start--
     }
-    // Find word end
     let end = col
     while (end < text.length && !wordSeparator.includes(text[end])) {
       end++
     }
-
     if (end > start) {
-      this.term.select(start, row, end - start)
+      this.term.select(start, absRow, end - start)
+    }
+    return { col: start, absRow }
+  },
+
+  /**
+   * Client point → buffer cell. `beyond` is -1/1 while the finger is above or
+   * below the screen area, which is what drives edge auto-scrolling.
+   */
+  toBufferCoords (clientX, clientY) {
+    const term = this.term
+    if (!term || !term.element || !term.cols || !term.rows) {
+      return null
+    }
+    // measure against the screen element (exactly cols × rows cells) rather
+    // than the whole `.xterm` box, whose padding and scrollbar would skew the
+    // mapping by a growing amount the further the finger moves
+    const screen = term.element.querySelector('.xterm-screen') || term.element
+    const rect = screen.getBoundingClientRect()
+    if (!rect.width || !rect.height) {
+      return null
+    }
+    const cellWidth = rect.width / term.cols
+    const cellHeight = rect.height / term.rows
+    const col = Math.min(
+      term.cols - 1,
+      Math.max(0, Math.floor((clientX - rect.left) / cellWidth))
+    )
+    const viewportRow = Math.min(
+      term.rows - 1,
+      Math.max(0, Math.floor((clientY - rect.top) / cellHeight))
+    )
+    return {
+      col,
+      beyond: clientY < rect.top ? -1 : (clientY > rect.bottom ? 1 : 0),
+      // the selection model stores buffer-absolute rows, not viewport rows
+      absRow: term.buffer.active.viewportY + viewportRow
+    }
+  },
+
+  /**
+   * Selects from `a` to `b`, in either direction.
+   *
+   * `term.select()` only accepts "start + length" — it clears any end point,
+   * so a backwards drag has to be normalised to min/max. The length is a
+   * linear character count across buffer rows, matching xterm's own
+   * `toSelectionLength = cols * (endY - startY) + (endX - startX + 1)` and the
+   * inverse in `finalSelectionEnd`, which is why a multi-line drag needs no
+   * private API.
+   */
+  applySelection (a, b) {
+    if (!this.term || !a || !b) {
+      return
+    }
+    const forward = a.absRow < b.absRow ||
+      (a.absRow === b.absRow && a.col <= b.col)
+    const start = forward ? a : b
+    const end = forward ? b : a
+    const length = this.term.cols * (end.absRow - start.absRow) +
+      (end.col - start.col + 1)
+    this.term.select(start.col, start.absRow, Math.max(1, length))
+  },
+
+  /**
+   * Coalesces touchmove to one update per frame: every `term.select()` fires
+   * `onSelectionChange`, and the terminal re-renders on that, so a raw
+   * per-event update makes the drag stutter on slower phones.
+   */
+  scheduleDragUpdate () {
+    if (this.dragFrame) {
+      return
+    }
+    this.dragFrame = window.requestAnimationFrame(() => {
+      this.dragFrame = 0
+      const gesture = this.dragSelect
+      const touch = this.lastDragTouch
+      if (!gesture || !touch) {
+        return
+      }
+      const coords = this.toBufferCoords(touch.clientX, touch.clientY)
+      if (!coords) {
+        return
+      }
+      this.applySelection(gesture.anchor, coords)
+      this.autoScrollFrom(coords.beyond)
+    })
+  },
+
+  /**
+   * Keeps scrolling while the finger is held past the top/bottom edge, and
+   * re-extends the selection as the buffer moves under it. The anchor is in
+   * absolute coordinates, so it stays put while the viewport scrolls.
+   */
+  autoScrollFrom (beyond) {
+    if (!beyond) {
+      this.stopAutoScroll()
+      return
+    }
+    if (this.autoScrollDir === beyond) {
+      return
+    }
+    this.stopAutoScroll()
+    this.autoScrollDir = beyond
+    const tick = () => {
+      if (!this.autoScrollDir || !this.dragSelect) {
+        return
+      }
+      this.term.scrollLines(this.autoScrollDir)
+      const touch = this.lastDragTouch
+      if (touch) {
+        const coords = this.toBufferCoords(touch.clientX, touch.clientY)
+        if (coords) {
+          this.applySelection(this.dragSelect.anchor, coords)
+        }
+      }
+      this.timers.touchAutoScroll = setTimeout(tick, AUTOSCROLL_INTERVAL)
+    }
+    this.timers.touchAutoScroll = setTimeout(tick, AUTOSCROLL_DELAY)
+  },
+
+  stopAutoScroll () {
+    this.autoScrollDir = 0
+    clearTimeout(this.timers.touchAutoScroll)
+    this.timers.touchAutoScroll = null
+  },
+
+  /**
+   * Opens the antd context-menu dropdown at the finger position by
+   * dispatching a synthetic `contextmenu` event, so the `contextMenu` trigger
+   * (and its positioning) is handled by antd exactly like a desktop
+   * right-click.
+   */
+  openContextMenuAt (clientX, clientY, target) {
+    if (!target || this.props.config.pasteWhenContextMenu) {
+      return
     }
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY
+    })
+    target.dispatchEvent(event)
+  },
+
+  cancelLongPress () {
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+    this.touchStartPos = null
+    this.longPressFired = false
+  },
+
+  cancelTouchGesture () {
+    this.cancelLongPress()
+    this.stopAutoScroll()
+    window.cancelAnimationFrame(this.dragFrame)
+    this.dragFrame = 0
+    this.dragSelect = null
+    this.lastDragTouch = null
   }
 }