@electerm/electerm-react 5.3.26 → 5.5.9

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

@@ -0,0 +1,126 @@
+/**
+ * Reading back what is on screen: search (xterm search addon + the result
+ * bar), the normal-buffer overlay used when an app owns the alt buffer, and
+ * plain text export of the current buffer.
+ */
+export const contentMixin = {
+  toggleSearch () {
+    window.store.toggleTerminalSearch()
+  },
+
+  onSearchResultsChange ({ resultIndex, resultCount }) {
+    window.store.storeAssign({
+      termSearchMatchCount: resultCount,
+      termSearchMatchIndex: resultIndex
+    })
+
+    this.updateSearchResults(resultIndex)
+  },
+
+  updateSearchResults (resultIndex) {
+    const matches = this.searchAddon._resultTracker.searchResults.map((result, i) => {
+      return result.row
+    })
+
+    this.setState({
+      searchResults: matches,
+      matchIndex: resultIndex,
+      totalLines: this.term.buffer.active.length
+    })
+  },
+
+  searchPrev (searchInput, options) {
+    this.searchAddon.findPrevious(
+      searchInput, options
+    )
+  },
+
+  searchNext (searchInput, options) {
+    this.searchAddon.findNext(
+      searchInput, options
+    )
+  },
+
+  openNormalBuffer () {
+    const normal = this.term.buffer.normal
+    const len = normal.length
+    const lines = new Array(len).fill('').map((x, i) => {
+      return normal.getLine(i).translateToString(false)
+    })
+    this.setState({
+      lines
+    })
+  },
+
+  closeNormalBuffer () {
+    this.setState({
+      lines: []
+    })
+    this.term.focus()
+  },
+
+  onBufferChange (buf) {
+    this.bufferMode = buf.type
+  },
+
+  getTerminalBufferText () {
+    const { addTimeStampToTermLog } = this.state
+    const buffer = this.term.buffer.active
+    const len = buffer.length
+    const rawLines = []
+    for (let i = 0; i < len; i++) {
+      const line = buffer.getLine(i)
+      rawLines.push(line ? line.translateToString(false) : '')
+    }
+    // trim trailing blank lines before applying timestamps
+    while (rawLines.length && !rawLines[rawLines.length - 1].trim()) {
+      rawLines.pop()
+    }
+    if (!addTimeStampToTermLog) {
+      return rawLines.join('\n')
+    }
+    return rawLines.map(text => {
+      const now = new Date()
+      const ts = `[${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}] `
+      return ts + text
+    }).join('\n')
+  },
+
+  /**
+   * The whole buffer as clean plain text, for the touch select-text overlay.
+   *
+   * Differs from getTerminalBufferText() on purpose: that one is for log files
+   * and keeps xterm's fixed-width padding (`translateToString(false)`), which
+   * would trail a screen-full of spaces into a textarea and make every line
+   * look wrapped. Here each row is right-trimmed, rows xterm reports as
+   * `isWrapped` are glued back so a line the shell printed as one line is
+   * copied as one line, and the blank rows scrollback starts out with are
+   * dropped so the panel opens on real output.
+   */
+  getSelectableBufferText () {
+    const buffer = this.term.buffer.active
+    const len = buffer.length
+    const lines = []
+    for (let i = 0; i < len; i++) {
+      const line = buffer.getLine(i)
+      if (!line) {
+        continue
+      }
+      const text = line.translateToString(true)
+      if (line.isWrapped && lines.length) {
+        lines[lines.length - 1] += text
+      } else {
+        lines.push(text)
+      }
+    }
+    let start = 0
+    let end = lines.length
+    while (start < end && !lines[start].trim()) {
+      start++
+    }
+    while (end > start && !lines[end - 1].trim()) {
+      end--
+    }
+    return lines.slice(start, end).join('\n')
+  }
+}

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

@@ -0,0 +1,323 @@
+import Modal from '../../common/modal'
+import { readClipboardAsync, readClipboard, copy } from '../../../common/clipboard.js'
+import { isWin, isMac, isMacJs, connectionMap } from '../../../common/constants.js'
+import iconsMap from '../../sys-menu/icons-map.jsx'
+import { refsStatic } from '../../common/ref.js'
+import AIIcon from '../../icons/ai-icon.jsx'
+import { isAIDisabled } from '../../../common/ai-feature.js'
+
+const e = window.translate
+
+/**
+ * The right-click (and long-press) menu plus the clipboard actions behind it.
+ * Menu item `key`s are method names, so `onContextMenu` just dispatches.
+ */
+export const contextMenuMixin = {
+  renderContextMenu () {
+    const { hasSelection, recording } = this.state
+    const copyed = true
+    const copyShortcut = this.getShortcut('terminal_copy')
+    const pasteShortcut = this.getShortcut('terminal_paste')
+    const clearShortcut = this.getShortcut('terminal_clear')
+    const searchShortcut = this.getShortcut('terminal_search')
+    const selectAllShortcut = isMacJs ? 'meta+a' : 'ctrl+shift+a'
+    const isSerial = this.props.tab?.type === connectionMap.serial
+    const items = [
+      {
+        key: 'onCopy',
+        icon: <iconsMap.CopyOutlined />,
+        label: e('copy'),
+        disabled: !hasSelection,
+        extra: copyShortcut
+      },
+      {
+        key: 'onPaste',
+        icon: <iconsMap.SwitcherOutlined />,
+        label: e('paste'),
+        disabled: !copyed,
+        extra: pasteShortcut
+      },
+      {
+        key: 'onPasteSelected',
+        icon: <iconsMap.SwitcherOutlined />,
+        label: e('pasteSelected'),
+        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()
+          ? []
+          : [{
+              key: 'explainWithAi',
+              icon: <AIIcon />,
+              label: e('explainWithAi'),
+              disabled: !hasSelection
+            }]
+      ),
+      {
+        key: 'onClear',
+        icon: <iconsMap.ReloadOutlined />,
+        label: e('clear'),
+        extra: clearShortcut
+      },
+      {
+        key: 'toggleSearch',
+        icon: <iconsMap.SearchOutlined />,
+        label: e('search'),
+        extra: searchShortcut
+      },
+      {
+        key: 'onSaveTerminalLog',
+        icon: <iconsMap.SaveOutlined />,
+        label: e('saveTerminalLogToFile')
+      },
+      {
+        key: recording ? 'onStopRecord' : 'onRecord',
+        icon: recording ? <iconsMap.StopOutlined /> : <iconsMap.PlayCircleFilled />,
+        label: e(recording ? 'stopRecord' : 'record')
+      }
+    ]
+    if (isSerial) {
+      items.push(
+        {
+          type: 'divider'
+        },
+        {
+          key: 'onXmodemSend',
+          icon: <iconsMap.CloudUploadOutlined />,
+          label: 'XMODEM Send'
+        },
+        {
+          key: 'onXmodemReceive',
+          icon: <iconsMap.CloudDownloadOutlined />,
+          label: 'XMODEM Receive'
+        }
+      )
+    }
+    return items
+  },
+
+  onContextMenu ({ key }) {
+    this[key]()
+  },
+
+  onContextMenuInner (e) {
+    e.preventDefault()
+    if (this.state.loading) {
+      return
+    }
+    if (this.props.config.pasteWhenContextMenu) {
+      return this.onPaste()
+    }
+  },
+
+  onSelection () {
+    if (
+      !this.props.config.copyWhenSelect ||
+      window.store.onOperation
+    ) {
+      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 () {
+    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)
+    }
+  },
+
+  tryInsertSelected () {
+    const txt = this.term.getSelection()
+    if (txt) {
+      this.attachAddon._sendData(txt)
+    }
+  },
+
+  onCopy () {
+    const selected = this.term.getSelection()
+    copy(selected)
+    this.term.focus()
+  },
+
+  onSelectAll () {
+    this.term.selectAll()
+  },
+
+  pasteTextTooLong () {
+    if (this.props.config.disableConfirmForLargeClipboardContent) {
+      return false
+    }
+    if (window.et.isWebApp) {
+      return false
+    }
+    const text = readClipboard()
+    return text.length > 500
+  },
+
+  askUserConfirm () {
+    Modal.confirm({
+      title: e('paste'),
+      content: (
+        <div>
+          <p>{e('paste')}:</p>
+          <div className='paste-text'>
+            <pre>
+              <code>{readClipboard()}</code>
+            </pre>
+          </div>
+        </div>
+      ),
+      okText: e('ok'),
+      cancelText: e('cancel'),
+      onOk: () => this.onPaste(true)
+    })
+  },
+
+  async onPaste (skipTextLengthCheck) {
+    let selected = await readClipboardAsync()
+    if (
+      !skipTextLengthCheck &&
+      !this.props.config.disableConfirmForLargeClipboardContent &&
+      selected.length > 500
+    ) {
+      return this.askUserConfirm()
+    }
+    if (isWin && this.isRemote()) {
+      selected = selected.replace(/\r\n/g, '\n')
+    }
+    this.term.paste(selected || '')
+    this.term.focus()
+  },
+
+  onPasteSelected () {
+    const selected = this.term.getSelection()
+    this.term.paste(selected || '')
+    this.term.focus()
+  },
+
+  onClear () {
+    const shouldClear = this.searchAddon &&
+      window.store.termSearchOpen &&
+      window.store.termSearch
+    if (
+      shouldClear
+    ) {
+      this.searchAddon.clearDecorations()
+    }
+    this.term.clear()
+    this.term.focus()
+    if (shouldClear) {
+      this.searchAddon._lineCache.clear()
+      this.timers.clearSearchTimer = setTimeout(() => {
+        refsStatic.get('term-search')?.next()
+      }, 100)
+    }
+  },
+
+  onXmodemSend () {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateSend()
+    }
+    this.term.focus()
+  },
+
+  onXmodemReceive () {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateReceive()
+    }
+    this.term.focus()
+  },
+
+  explainWithAi () {
+    window.store.explainWithAi(
+      this.term.getSelection()
+    )
+  },
+
+  // ---- shortcut handlers, wired up by shortcutExtend ----
+  clearShortcut (e) {
+    e.stopPropagation()
+    this.onClear()
+  },
+
+  // selectAllShortcut = (e) => {
+  //   e.stopPropagation()
+  //   this.term.selectAll()
+  // }
+
+  copyShortcut (e) {
+    const sel = this.term.getSelection()
+    if (sel) {
+      e.stopPropagation()
+      this.copySelectionToClipboard()
+      return false
+    }
+  },
+
+  pasteSelectedShortcut (e) {
+    e.stopPropagation()
+    this.tryInsertSelected()
+  },
+
+  searchShortcut (e) {
+    e.stopPropagation()
+    this.toggleSearch()
+  },
+
+  pasteShortcut (e) {
+    if (this.pasteTextTooLong()) {
+      this.askUserConfirm()
+      e.preventDefault()
+      e.stopPropagation()
+      return false
+    }
+    if (isMac) {
+      return true
+    }
+    if (!this.isRemote()) {
+      return true
+    }
+    if (this.term.buffer.active.type !== 'alternate') {
+      return false
+    }
+    return true
+  },
+
+  showNormalBufferShortcut (e) {
+    e.stopPropagation()
+    this.openNormalBuffer()
+  }
+}

package/client/components/terminal/mixins/term-file-drop.js

@@ -0,0 +1,149 @@
+import resolve from '../../../common/resolve.js'
+import message from '../../common/message'
+import { getFilePath, isUnsafeFilename } from '../../../common/file-drop-utils.js'
+import { connectionMap } from '../../../common/constants.js'
+
+/**
+ * Files dropped onto the terminal: either quoted paths typed into the shell,
+ * or an upload through trzsz / zmodem / xmodem for ssh and serial sessions.
+ */
+export const fileDropMixin = {
+  onDrop (e) {
+    const dt = e.dataTransfer
+    const fromFile = dt.getData('fromFile')
+    const notSafeMsg = 'File name contains unsafe characters'
+    const isSshTerminal = this.props.tab.type === connectionMap.ssh
+    const isSerialTerminal = this.props.tab.type === connectionMap.serial
+
+    if (fromFile) {
+      try {
+        const fileData = JSON.parse(fromFile)
+        const filePath = resolve(fileData.path, fileData.name)
+        if (isUnsafeFilename(filePath)) {
+          message.error(notSafeMsg)
+          return
+        }
+        if (isSshTerminal) {
+          const behavior = this.props.config.dragDropBehavior || 'ask'
+          if (behavior === 'ask') {
+            this.setState({
+              dropFileModalVisible: true,
+              droppedFiles: [{ path: filePath, isRemote: true }]
+            })
+          } else {
+            this.handleDropFileAction(behavior, [{ path: filePath, isRemote: true }])
+          }
+          return
+        }
+        if (isSerialTerminal) {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: [{ path: filePath, isRemote: false }]
+          })
+          return
+        }
+        this.attachAddon._sendData(`"${filePath}" `)
+        return
+      } catch (e) {
+        console.error('Failed to parse fromFile data:', e)
+      }
+    }
+
+    const files = dt.files
+    if (files && files.length) {
+      const arr = Array.from(files)
+      const filePaths = arr.map(f => getFilePath(f))
+
+      const hasUnsafeFilename = filePaths.some(path => isUnsafeFilename(path))
+      if (hasUnsafeFilename) {
+        message.error(notSafeMsg)
+        return
+      }
+
+      if (isSshTerminal) {
+        const behavior = this.props.config.dragDropBehavior || 'ask'
+        if (behavior === 'ask') {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+          })
+        } else {
+          this.handleDropFileAction(behavior, filePaths.map(path => ({ path, isRemote: false })))
+        }
+        return
+      }
+
+      if (isSerialTerminal) {
+        this.setState({
+          dropFileModalVisible: true,
+          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+        })
+        return
+      }
+
+      const filesAll = filePaths.map(path => `"${path}"`).join(' ')
+      this.attachAddon._sendData(filesAll)
+    }
+  },
+
+  handleDropFileModalCancel () {
+    this.setState({
+      dropFileModalVisible: false,
+      droppedFiles: []
+    })
+  },
+
+  handleDropFileAction (action, filesOverride) {
+    const droppedFiles = filesOverride || this.state.droppedFiles
+    if (!droppedFiles || !droppedFiles.length) {
+      this.handleDropFileModalCancel()
+      return
+    }
+
+    const filePaths = droppedFiles.map(f => f.path)
+
+    switch (action) {
+      case 'trz': {
+        if (this.trzszClient && this.trzszClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        window._apiControlSelectFile = filePaths
+        this.attachAddon._sendData('trz\r')
+        break
+      }
+      case 'rz':{
+        if (this.zmodemClient && this.zmodemClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        window._apiControlSelectFile = filePaths
+        this.attachAddon._sendData('rz\r')
+        break
+      }
+      case 'xmodem': {
+        if (this.xmodemClient && this.xmodemClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        // Use XMODEM send with the dropped files
+        window._apiControlSelectFile = filePaths
+        if (this.xmodemClient) {
+          this.xmodemClient.initiateSend()
+        }
+        break
+      }
+      case 'inputOnly':
+      default: {
+        const filesAll = filePaths.map(path => `"${path}"`).join(' ')
+        this.attachAddon._sendData(filesAll)
+        break
+      }
+    }
+
+    this.handleDropFileModalCancel()
+  }
+}