@electerm/electerm-react 5.3.15 → 5.5.6

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

@@ -0,0 +1,88 @@
+/**
+ * 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')
+  }
+}

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

@@ -0,0 +1,291 @@
+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
+      },
+      ...(
+        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
+    }
+    this.copySelectionToClipboard()
+  },
+
+  copySelectionToClipboard () {
+    const txt = this.term.getSelection()
+    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 (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 && 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()
+  }
+}

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

@@ -0,0 +1,122 @@
+import {
+  loadTerminal,
+  loadFitAddon,
+  loadSerializeAddon,
+  loadSearchAddon,
+  loadLigaturesAddon,
+  loadUnicode11Addon,
+  loadImageAddon
+} from '../xterm-loader.js'
+import { CommandTrackerAddon } from '../command-tracker-addon.js'
+import { Osc52Addon } from '../osc52-addon.js'
+import { rendererTypes } from '../../../common/constants.js'
+import { refsStatic } from '../../common/ref.js'
+import keyControlPressed from '../../../common/key-control-pressed.js'
+
+/**
+ * Terminal bootstrap: create the xterm instance, load every addon and wire
+ * the handlers that must exist before the connection is opened. Connection
+ * setup continues in `socketMixin.remoteInit`.
+ */
+export const initMixin = {
+  async initTerminal () {
+    const { themeConfig, tab = {}, config = {} } = this.props
+    const tc = this.getRendererThemeConfig(themeConfig)
+    const Terminal = await loadTerminal()
+    const term = new Terminal({
+      allowProposedApi: true,
+      scrollback: config.scrollback,
+      rightClickSelectsWord: config.rightClickSelectsWord || false,
+      fontFamily: tab.fontFamily || config.fontFamily,
+      theme: tc,
+      allowTransparency: true,
+      wordSeparator: config.terminalWordSeparator,
+      cursorStyle: config.cursorStyle,
+      cursorBlink: config.cursorBlink,
+      fontSize: tab.fontSize || config.fontSize,
+      screenReaderMode: config.screenReaderMode
+    })
+
+    term.parent = this
+    term.onSelectionChange(this.onSelection)
+    term.open(this.domRef.current, true)
+    this.registerTerminalColorQueryHandlers(term, themeConfig)
+    await this.loadRenderer(term, config)
+    this.fixSelectionColors(term)
+    // Re-apply the theme after the renderer is loaded. The Terminal was
+    // constructed before UiTheme's useEffect ran, so the initial theme
+    // may have a stale background. Pass `term` directly because this.term
+    // is not assigned yet. Use deferred=true so a second repaint picks up
+    // any CSS --main changes applied by UiTheme's useEffect.
+    if (config.rendererType === rendererTypes.webGL) {
+      this.applyTerminalTheme(true, term)
+    }
+
+    const FitAddon = await loadFitAddon()
+    this.fitAddon = new FitAddon()
+    this.cmdAddon = new CommandTrackerAddon()
+    const SerializeAddon = await loadSerializeAddon()
+    this.serializeAddon = new SerializeAddon()
+    this.cmdAddon.onCommandExecuted((cmd) => {
+      if (cmd && cmd.trim()) {
+        window.store.addCmdHistory(cmd.trim())
+      }
+    })
+    this.cmdAddon.onCwdChanged((cwd) => {
+      this.setCwd(cwd)
+    })
+    const SearchAddon = await loadSearchAddon()
+    this.searchAddon = new SearchAddon()
+    const LigaturesAddon = await loadLigaturesAddon()
+    const ligtureAddon = new LigaturesAddon()
+    this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
+    const Unicode11Addon = await loadUnicode11Addon()
+    const unicode11Addon = new Unicode11Addon()
+    term.loadAddon(unicode11Addon)
+    term.loadAddon(ligtureAddon)
+    term.unicode.activeVersion = '11'
+    term.loadAddon(this.fitAddon)
+    term.loadAddon(this.searchAddon)
+    term.loadAddon(this.cmdAddon)
+    term.loadAddon(this.serializeAddon)
+    this.osc52Addon = new Osc52Addon()
+    term.loadAddon(this.osc52Addon)
+    if (tab.enableTerminalImage) {
+      const ImageAddon = await loadImageAddon()
+      this.imageAddon = new ImageAddon({
+        pixelLimit: 33554432
+      })
+      term.loadAddon(this.imageAddon)
+    }
+    term.onData(this.onData)
+    this.term = term
+    term.onSelectionChange(this.onSelectionChange)
+    term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
+    // 容器不可见（隐藏标签 display:none）时不 fit，避免算出 0 列把 shell
+    // 提示符逐字符错误换行；待标签激活可见后由 fitAndRefresh 重新适配。
+    if (this.isElementVisible()) {
+      this.fitAddon.fit()
+    }
+    await this.restoreReloadScreen(term)
+    await this.remoteInit(term)
+  },
+
+  onSelectionChange () {
+    const hasSelection = this.term.hasSelection()
+    const txt = hasSelection ? this.term.getSelection().trim() : ''
+    this.setState({ hasSelection })
+    refsStatic.get('unix-timestamp-tooltip')?.onSelection(txt)
+  },
+
+  webLinkHandler (event, url) {
+    if (event?.button === 2) {
+      return false
+    }
+    if (!this.props.config.ctrlOrMetaOpenTerminalLink) {
+      return window.openLink(url, '_blank')
+    }
+    if (keyControlPressed(event)) {
+      window.openLink(url, '_blank')
+    }
+  }
+}