@electerm/electerm-react 5.5.6 → 5.5.9

package/client/components/terminal/shortcut-bar-defs.js

@@ -100,9 +100,17 @@ const modifierOptions = [
   { id: 'meta', label: 'Meta' }
 ]
 
+const MODIFIER_IDS = new Set(modifierOptions.map(m => m.id))
+
+// the builder's second slot accepts either a modifier (Ctrl/Alt/Shift/Meta)
+// or a bare key, so we need to tell them apart.
+function isModifier (id) {
+  return MODIFIER_IDS.has(id)
+}
+
 // compose the bytes to send for a (mods, key) combo.
 // Ctrl+letter -> the control byte; Alt -> ESC prefix; Shift+letter -> uppercase
-function buildComboData (mods, key) {
+function applyMods (mods, key) {
   const ctrl = mods.includes('ctrl')
   const alt = mods.includes('alt')
   const shift = mods.includes('shift')
@@ -118,10 +126,27 @@ function buildComboData (mods, key) {
   return data
 }
 
-// human-readable label, e.g. mods ['ctrl','shift'] + key A -> "Ctrl+Shift+A"
-function buildComboLabel (mods, key) {
+// `prefix` is an optional first key typed BEFORE `key` — that's how you build
+// two-step combos such as tmux's Ctrl+A then D: the modifiers apply to the
+// prefix only, the trailing key is sent plain.
+//   mods [ctrl], prefix A, key D -> Ctrl+A then D
+//   mods [ctrl, shift], key D    -> Ctrl+Shift+D
+function buildComboData (mods, key, prefix) {
+  if (prefix) {
+    return applyMods(mods, prefix) + key.data
+  }
+  return applyMods(mods, key)
+}
+
+// human-readable label, e.g.
+//   mods ['ctrl','shift'] + key A        -> "Ctrl+Shift+A"
+//   mods ['ctrl'] + prefix A + key D     -> "Ctrl+A D"
+function buildComboLabel (mods, key, prefix) {
   const byId = new Map(modifierOptions.map(m => [m.id, m.label]))
-  return [...mods.map(m => byId.get(m) || m), key.label].join('+')
+  const head = mods.map(m => byId.get(m) || m)
+  return prefix
+    ? [...head, prefix.label].join('+') + ' ' + key.label
+    : [...head, key.label].join('+')
 }
 
 // full library, de-duplicated by id
@@ -196,6 +221,7 @@ export {
   candidates,
   keyOptions,
   modifierOptions,
+  isModifier,
   buildComboData,
   buildComboLabel
 }

package/client/components/terminal/shortcut-bar-edit.jsx

@@ -26,6 +26,7 @@ import {
   defaultActive,
   keyOptions,
   modifierOptions,
+  isModifier,
   buildComboData,
   buildComboLabel
 } from './shortcut-bar-defs'
@@ -43,6 +44,9 @@ export default function ShortcutBarEdit (props) {
 
   const [keyword, setKeyword] = useState('')
   const [customMod1, setCustomMod1] = useState(undefined)
+  // second slot takes a modifier OR a bare key: a modifier stacks onto the
+  // first one (Ctrl+Shift+D), a key becomes a prefix typed before the third
+  // slot's key (Ctrl+A then D).
   const [customMod2, setCustomMod2] = useState(undefined)
   const [customKey, setCustomKey] = useState(undefined)
 
@@ -70,13 +74,21 @@ export default function ShortcutBarEdit (props) {
     if (!customKey) {
       return
     }
-    const mods = [customMod1, customMod2].filter(Boolean)
     const key = keyOptions.find(k => k.id === customKey)
     if (!key) {
       return
     }
-    const label = buildComboLabel(mods, key)
-    const data = buildComboData(mods, key)
+    const mods = [customMod1].filter(Boolean)
+    let prefix
+    if (customMod2) {
+      if (isModifier(customMod2)) {
+        mods.push(customMod2)
+      } else {
+        prefix = keyOptions.find(k => k.id === customMod2)
+      }
+    }
+    const label = buildComboLabel(mods, key, prefix)
+    const data = buildComboData(mods, key, prefix)
     const id = 'custom-' + label + '-' + Date.now()
     onSave([...active, { id, label, data, custom: true }])
     setCustomMod1(undefined)
@@ -88,6 +100,26 @@ export default function ShortcutBarEdit (props) {
     onSave(defaultActive())
   }
 
+  // second slot option list: modifiers first, then the same bare-key list the
+  // third slot offers (so Ctrl+A then D is expressible).
+  const secondOptions = [
+    {
+      label: e('modifier'),
+      options: modifierOptions.map(m => ({
+        value: m.id,
+        label: m.label,
+        disabled: m.id === customMod1
+      }))
+    },
+    {
+      label: e('key'),
+      options: keyOptions.map(k => ({
+        value: k.id,
+        label: k.label
+      }))
+    }
+  ]
+
   const kw = keyword.trim().toLowerCase()
   const filtered = allCandidates.filter(b => {
     if (!kw) {
@@ -195,15 +227,13 @@ export default function ShortcutBarEdit (props) {
           <Select
             value={customMod2}
             onChange={setCustomMod2}
-            placeholder={e('modifier') + ' (' + e('optional') + ')'}
+            placeholder={e('modifier') + '/' + e('key') + ' (' + e('optional') + ')'}
             className='shortcut-custom-select'
             allowClear
+            showSearch
+            optionFilterProp='label'
             getPopupContainer={popupContainer}
-            options={modifierOptions.map(m => ({
-              value: m.id,
-              label: m.label,
-              disabled: m.id === customMod1
-            }))}
+            options={secondOptions}
           />
           <Select
             value={customKey}
@@ -212,6 +242,7 @@ export default function ShortcutBarEdit (props) {
             className='shortcut-custom-select shortcut-custom-key'
             allowClear
             showSearch
+            optionFilterProp='label'
             getPopupContainer={popupContainer}
             options={keyOptions.map(k => ({
               value: k.id,

package/client/components/terminal/shortcut-bar.jsx

@@ -56,11 +56,20 @@ function sendToTerminal (data) {
   }
 }
 
-// honor the active terminal's DECCKM state for the cursor / Home / End keys
+// honor the active terminal's DECCKM state for the cursor / Home / End keys.
+// custom combos can be multi-key sequences (Ctrl+A then ↑), so match the
+// trailing key too — not only the whole payload.
 function resolveCursorMode (data, term) {
-  const app = appCursorMap[data]
-  if (app && term?.term?.modes?.applicationCursorKeysMode) {
-    return app
+  if (!term?.term?.modes?.applicationCursorKeysMode) {
+    return data
+  }
+  for (const normal in appCursorMap) {
+    if (data === normal) {
+      return appCursorMap[normal]
+    }
+    if (data.length > normal.length && data.endsWith(normal)) {
+      return data.slice(0, data.length - normal.length) + appCursorMap[normal]
+    }
   }
   return data
 }

package/client/components/terminal/ssh-reload-state.js

@@ -1,9 +1,28 @@
 const maxCwdLength = 4096
 
+// Shell-backed terminal types whose cwd + screen can be restored on reload.
+// Graphical / file-transfer tabs (rdp, vnc, web, ftp, spice, sftp, ...) are
+// intentionally excluded: they have no shell cwd to `cd` back to.
+export const restorableTerminalTypes = new Set([
+  'ssh',
+  'local',
+  'telnet',
+  'serial'
+])
+
 export function isSshTab (tab = {}) {
   return !!tab.host && (!tab.type || tab.type === 'ssh')
 }
 
+export function isRestorableTerminalTab (tab = {}) {
+  if (!tab.type) {
+    // Legacy tabs without an explicit type are ssh (host set) or local
+    // (no host) - both are shell terminals.
+    return true
+  }
+  return restorableTerminalTypes.has(tab.type)
+}
+
 export function sanitizeSshCwd (cwd) {
   if (typeof cwd !== 'string' || !cwd || cwd.length > maxCwdLength) {
     return ''
@@ -14,6 +33,8 @@ export function sanitizeSshCwd (cwd) {
   return cwd
 }
 
+export const sanitizeTerminalCwd = sanitizeSshCwd
+
 export function quotePosixShellArg (value) {
   const quote = '\''
   const escapedQuote = quote + '"' + quote + '"' + quote
@@ -25,8 +46,25 @@ export function createRestoreCwdCommand (cwd) {
   return safeCwd ? `cd -- ${quotePosixShellArg(safeCwd)}` : ''
 }
 
+export function createWindowsRestoreCwdCommand (cwd) {
+  const safeCwd = sanitizeSshCwd(cwd)
+  if (!safeCwd) {
+    return ''
+  }
+  // Strip control chars already handled by sanitize; escape embedded double
+  // quotes for cmd/powershell (`""` is accepted by both as a literal quote).
+  const escaped = safeCwd.replace(/"/g, '""')
+  return `cd /d "${escaped}"`
+}
+
+export function shouldCaptureTerminalReloadState (tab, config = {}) {
+  return !!config.restoreTerminalSessionOnReload && isRestorableTerminalTab(tab)
+}
+
+// Kept for backward compatibility - now covers all shell terminals
+// (ssh, local, telnet, serial), not just ssh.
 export function shouldCaptureSshReloadState (tab, config = {}) {
-  return !!config.restoreTerminalSessionOnReload && isSshTab(tab)
+  return shouldCaptureTerminalReloadState(tab, config)
 }
 
 export function createSshReloadState ({ cwd, screen } = {}) {
@@ -41,6 +79,8 @@ export function createSshReloadState ({ cwd, screen } = {}) {
   }
 }
 
+export const createTerminalReloadState = createSshReloadState
+
 export function getAlternateBufferSnapshot (buffer) {
   if (!buffer || buffer.type !== 'alternate') {
     return ''

package/client/components/terminal/startup-queue.js

@@ -22,7 +22,11 @@ import {
   getShellIntegrationCommand,
   detectShellType
 } from './shell.js'
-import { createRestoreCwdCommand } from './ssh-reload-state.js'
+import {
+  createRestoreCwdCommand,
+  createWindowsRestoreCwdCommand,
+  isRestorableTerminalTab
+} from './ssh-reload-state.js'
 import { isMac, isWin } from '../../common/platform.js'
 
 // Pacing: `settleIdleMs` of silence counts as "the shell is done",
@@ -77,11 +81,49 @@ export class StartupQueue {
   }
 
   isSsh = () => {
-    return this.term.isSsh()
+    return this.term.isSsh ? this.term.isSsh() : this.getTabType() === 'ssh'
   }
 
   isLocal = () => {
-    return this.term.isLocal()
+    return this.term.isLocal ? this.term.isLocal() : this.getTabType() === 'local'
+  }
+
+  getTabType = () => {
+    return this.term.props?.tab?.type
+  }
+
+  isTelnet = () => {
+    if (this.term.isTelnet) {
+      return this.term.isTelnet()
+    }
+    return this.getTabType() === 'telnet'
+  }
+
+  isSerial = () => {
+    if (this.term.isSerial) {
+      return this.term.isSerial()
+    }
+    return this.getTabType() === 'serial'
+  }
+
+  isRemoteShell = () => {
+    return this.isSsh() || this.isTelnet() || this.isSerial()
+  }
+
+  isRestorable = () => {
+    const tab = this.term.props?.tab || {}
+    if (typeof this.term.isShellTerminal === 'function') {
+      return this.term.isShellTerminal()
+    }
+    return isRestorableTerminalTab(tab)
+  }
+
+  isWindowsLocal = () => {
+    return this.isLocal() && isWin
+  }
+
+  isPosixShell = () => {
+    return this.isRemoteShell() || (this.isLocal() && !isWin)
   }
 
   sleep = (ms) => {
@@ -108,13 +150,16 @@ export class StartupQueue {
     } = term.props.tab
 
     const scripts = runScripts ? [...runScripts] : []
-    const reloadCwd = term.props.config.restoreTerminalSessionOnReload && this.isSsh()
+    const reloadCwd = term.props.config.restoreTerminalSessionOnReload && this.isRestorable()
       ? term.props.tab._reloadState?.cwd
       : ''
     const startFolder = reloadCwd || startDirectory || window.initFolder
-    const cwdCommand = this.isSsh()
-      ? createRestoreCwdCommand(startFolder)
-      : startFolder ? `cd "${startFolder}"` : ''
+    let cwdCommand = ''
+    if (startFolder) {
+      cwdCommand = this.isPosixShell()
+        ? createRestoreCwdCommand(startFolder)
+        : createWindowsRestoreCwdCommand(startFolder) || `cd "${startFolder}"`
+    }
     if (cwdCommand) {
       scripts.unshift({ script: cwdCommand, delay: 0 })
     }
@@ -277,10 +322,12 @@ export class StartupQueue {
     return (
       config.showCmdSuggestions ||
       sftpPathFollowSsh ||
-      (config.restoreTerminalSessionOnReload && this.isSsh())
+      (config.restoreTerminalSessionOnReload && this.isRestorable())
     ) &&
     (
       this.isSsh() ||
+      this.isTelnet() ||
+      this.isSerial() ||
       (this.isLocal() && !isWin)
     )
   }
@@ -305,8 +352,8 @@ export class StartupQueue {
     if (this.isLocal()) {
       const { config } = this.term.props
       const localShell = isMac ? config.execMac : config.execLinux
-      shellType = detectShellType(localShell)
-    } else if (this.isSsh()) {
+      shellType = detectShellType(localShell || '')
+    } else if (this.isRemoteShell()) {
       shellType = await Promise.race([
         this.detectRemoteShell(this.term.pid),
         new Promise(resolve => {
@@ -317,8 +364,15 @@ export class StartupQueue {
 
     this.shellType = shellType
 
-    // Don't inject for sh type shells unless sftpPathFollowSsh is true
-    if (shellType === 'sh' && !this.term.props.sftpPathFollowSsh) {
+    // sh/ash only reports cwd via PS1 (no command tracking), so it is only
+    // worth injecting when something actually needs the cwd: sftp follow or
+    // session restore. Command suggestions alone stay disabled on sh.
+    const { config, sftpPathFollowSsh } = this.term.props
+    if (
+      shellType === 'sh' &&
+      !sftpPathFollowSsh &&
+      !config.restoreTerminalSessionOnReload
+    ) {
       return
     }
 
@@ -331,7 +385,7 @@ export class StartupQueue {
     }
 
     const integrationCmd = getShellIntegrationCommand(shellType)
-    const suppressionTimeout = this.isSsh() ? 5000 : 3000
+    const suppressionTimeout = this.isRemoteShell() ? 5000 : 3000
 
     return new Promise((resolve) => {
       let done = false

package/client/components/terminal/terminal-select-text.jsx

@@ -0,0 +1,69 @@
+/**
+ * Full-screen plain-text view of the buffer, for touch devices.
+ *
+ * Selecting inside a canvas-rendered terminal on a phone is hopeless: there is
+ * no system selection to lean on, so every touch terminal ends up
+ * re-implementing magnifiers, draggable handles and edge auto-scroll. This
+ * takes the other route — hand the text to an ordinary read-only <textarea>
+ * and let iOS/Android supply the whole native toolbox (long-press word select,
+ * resizable handles, the Copy callout) for free.
+ *
+ * Rendered through a portal onto <body> rather than in place: `.term-wrap` is
+ * a positioned element with its own z-index, so anything inside it is trapped
+ * in that stacking context and would still be covered by the touch shortcut
+ * bar (z-index 400). The portal also keeps these styles away from
+ * `.term-wrap`, which switches off -webkit-touch-callout and user-select for
+ * the terminal's own gestures — `-webkit-touch-callout` is inherited, so
+ * without the reset in terminal.styl the native callout would never appear.
+ *
+ * React events still bubble along the React tree, not the DOM one, so the
+ * parent's touch handlers and the antd Dropdown's `contextMenu` trigger both
+ * still see events from here. Two guards in response:
+ *  - term-touch.js bails out of any touch start whose target is this overlay;
+ *  - the contextmenu handler below stops the event, which would otherwise open
+ *    the terminal menu on top of the selection. Only propagation is stopped,
+ *    never the default action, since that default action *is* the native
+ *    callout being relied on.
+ *
+ * The content is a snapshot taken when the panel opens: output arriving
+ * afterwards keeps going to the terminal underneath and cannot disturb a
+ * selection the user is in the middle of making.
+ */
+
+import { memo } from 'react'
+import { createPortal } from 'react-dom'
+
+const e = window.translate
+
+export default memo(function TerminalSelectText (props) {
+  if (!props.visible) {
+    return null
+  }
+  const blockMenu = ev => ev.stopPropagation()
+  return createPortal(
+    <div
+      className='terminal-select-text'
+      onContextMenu={blockMenu}
+    >
+      <div className='terminal-select-text-bar'>
+        <span>{e('selectText')}</span>
+        <span className='terminal-select-text-btns'>
+          <a onClick={props.onSelectAll}>{e('selectall')}</a>
+          <a onClick={props.onCopy}>{e('copy')}</a>
+          <a onClick={props.onClose}>{e('close')}</a>
+        </span>
+      </div>
+      <textarea
+        className='terminal-select-text-area'
+        ref={props.textareaRef}
+        value={props.text}
+        readOnly
+        spellCheck={false}
+        autoComplete='off'
+        autoCorrect='off'
+        autoCapitalize='off'
+      />
+    </div>,
+    document.body
+  )
+})

package/client/components/terminal/terminal.jsx

@@ -22,6 +22,7 @@ import RemoteFloatControl from '../common/remote-float-control'
 import ReconnectOverlay from './reconnect-overlay.jsx'
 import TerminalErrorHandle from './terminal-error-handle.jsx'
 import DropFileModal from './drop-file-modal.jsx'
+import TerminalSelectText from './terminal-select-text.jsx'
 import { StartupQueue } from './startup-queue.js'
 import { detectRemoteShell } from './shell-detect.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
@@ -79,7 +80,10 @@ class Term extends Component {
       terminalError: null,
       dropFileModalVisible: false,
       droppedFiles: [],
-      fontSizeChanged: false
+      fontSizeChanged: false,
+      // touch-only: the buffer snapshot shown by the select-text overlay
+      selectTextVisible: false,
+      selectTextContent: ''
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -109,12 +113,28 @@ class Term extends Component {
     }
   ]
 
-  // ---- Mobile touch support ----
+  // ---- Mobile touch support (behaviour lives in mixins/term-touch.js) ----
+  // Only used while store.isTouchDevice is true, so a mouse-driven desktop
+  // never touches any of it. Per-instance state has to stay a class field
+  // here — a mixin may only export functions, see ./mixins/index.js.
   longPressTimer = null
   touchStartPos = null
   longPressFired = false
   longPressThreshold = 500 // ms
-  longPressMoveTolerance = 10 // px
+  // a finger drifts further than a mouse while holding still, so the tolerance
+  // is looser than the old 10px to stop long presses being read as scrolls
+  longPressMoveTolerance = 12 // px
+  // { anchor: {col, absRow}, moved, clientX, clientY, target } while a
+  // long-press selection is being dragged out
+  dragSelect = null
+  lastDragTouch = null
+  autoScrollDir = 0
+  dragFrame = 0
+  tapCount = 0
+  lastTapTime = 0
+  lastTapPos = null
+  // the read-only textarea of the select-text overlay
+  selectTextRef = createRef()
 
   terminalColorQueryDisposables = []
 
@@ -196,6 +216,12 @@ class Term extends Component {
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null
     this.touchStartPos = null
+    this.stopAutoScroll()
+    window.cancelAnimationFrame(this.dragFrame)
+    this.dragFrame = 0
+    this.dragSelect = null
+    this.lastDragTouch = null
+    this.lastTapPos = null
     if (window.store.activeTerminalId === this.props.tab.id) {
       window.store.activeTerminalId = ''
     }
@@ -204,10 +230,15 @@ class Term extends Component {
     }
     this.disposeTerminalColorQueryHandlers()
     this.startupQueue?.dispose()
+    try {
+      this._notifyOnDataDebounced?.cancel?.()
+    } catch (_) {}
+    this._notifyOnDataDebounced = null
     window.cancelAnimationFrame(this.timers.themeRaf)
     this.timers.themeRaf = null
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
+      clearInterval(this.timers[k])
       this.timers[k] = null
     })
     this.onClose = true
@@ -215,11 +246,16 @@ class Term extends Component {
       this.socket.close()
       this.socket = null
     }
+    if (this.attachAddon) {
+      try {
+        this.attachAddon.dispose?.()
+      } catch (_) {}
+      this.attachAddon = null
+    }
     if (this.term) {
       this.term.dispose()
       this.term = null
     }
-    this.attachAddon = null
     this.disposeTriggerManager?.()
     this.fitAddon = null
     this.zmodemClient = null
@@ -232,6 +268,9 @@ class Term extends Component {
     this.imageAddon = null
     this.webglContextLossDisposable?.dispose?.()
     this.webglContextLossDisposable = null
+    try {
+      this.webglAddon?.dispose?.()
+    } catch (_) {}
     this.webglAddon = null
     this.webglRecovering = false
   }
@@ -262,6 +301,27 @@ class Term extends Component {
       (type === 'local' || type === undefined)
   }
 
+  isTelnet () {
+    return this.props.tab?.type === connectionMap.telnet
+  }
+
+  isSerial () {
+    return this.props.tab?.type === connectionMap.serial
+  }
+
+  isShellTerminal () {
+    const { type } = this.props.tab || {}
+    if (!type) {
+      return true
+    }
+    return (
+      type === connectionMap.ssh ||
+      type === connectionMap.local ||
+      type === connectionMap.telnet ||
+      type === connectionMap.serial
+    )
+  }
+
   setStatus = status => {
     const id = this.props.tab?.id
     this.props.editTab(id, {
@@ -377,6 +437,14 @@ class Term extends Component {
             onCancel={this.handleDropFileModalCancel}
           />
           {spin}
+          <TerminalSelectText
+            visible={this.state.selectTextVisible}
+            text={this.state.selectTextContent}
+            textareaRef={this.selectTextRef}
+            onSelectAll={this.handleSelectTextAll}
+            onCopy={this.handleSelectTextCopy}
+            onClose={this.handleSelectTextClose}
+          />
         </div>
       </Dropdown>
     )

package/client/components/terminal/terminal.styl

@@ -53,6 +53,67 @@
     background-position center
     background-color transparent !important
 
+// Full-screen plain-text view of the buffer, opened from the touch context
+// menu (see terminal-select-text.jsx) so the platform's own selection handles
+// and Copy callout can be used instead of xterm's canvas.
+//
+// 900 clears the touch shortcut bar (400) and the terminal panes, while
+// staying below antd's modal (1000) and message (1010) layers so a "copied"
+// toast still shows up over this panel.
+//
+// The callout/user-select resets are load-bearing, not decoration: the
+// component is portalled onto <body>, but `.term-wrap` switches off
+// -webkit-touch-callout for the terminal's own gestures and the property is
+// inherited — if this panel is ever rendered in place again, without the
+// resets the native Copy callout would never appear on the textarea.
+.terminal-select-text
+  position fixed
+  left 0
+  top 0
+  width 100%
+  height 100%
+  z-index 900
+  display flex
+  flex-direction column
+  background var(--main)
+  color var(--text)
+  -webkit-touch-callout default
+  -webkit-user-select text
+  user-select text
+
+.terminal-select-text-bar
+  flex-shrink 0
+  display flex
+  align-items center
+  justify-content space-between
+  height 40px
+  padding 0 10px
+  font-size 14px
+  background var(--main-lighter)
+  .terminal-select-text-btns
+    a
+      margin-left 16px
+      color var(--text)
+      &:hover
+        color var(--text-light)
+
+.terminal-select-text-area
+  flex 1
+  width 100%
+  margin 0
+  padding 8px 10px
+  border 0
+  outline none
+  resize none
+  background var(--main)
+  color var(--text)
+  font-family monospace
+  font-size 13px
+  line-height 1.4
+  -webkit-touch-callout default
+  -webkit-user-select text
+  user-select text
+
 .terminal-normal-buffer
   position absolute
   left 0