@electerm/electerm-react 1.37.80 → 1.37.88

package/client/common/clipboard.js

@@ -14,6 +14,14 @@ export const readClipboard = () => {
   return window.pre.readClipboard()
 }
 
+export const readClipboardAsync = () => {
+  const {
+    readClipboardSync,
+    readClipboard
+  } = window.pre
+  return readClipboardSync ? readClipboardSync() : Promise.resolve(readClipboard())
+}
+
 export const copy = (str) => {
   message.success({
     content: 'Copied',

package/client/common/constants.js

@@ -336,3 +336,4 @@ export const instSftpKeys = [
   'readFile',
   'writeFile'
 ]
+export const cwdId = '=__+__'

package/client/common/default-setting.js

@@ -40,5 +40,7 @@ export default {
   screenReaderMode: false,
   autoRefreshWhenSwitchToSftp: false,
   hideSshConfig: false,
-  addTimeStampToTermLog: false
+  addTimeStampToTermLog: false,
+  sftpPathFollowSsh: false,
+  keepaliveInterval: 0
 }

package/client/components/footer/footer-entry.jsx

@@ -1,6 +1,5 @@
 import { Component } from '../common/react-subx'
 import {
-  Tooltip,
   Select
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
@@ -109,14 +108,10 @@ export default class SystemMenu extends Component {
     }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
-        <Tooltip
-          title='Terminal Info'
-        >
-          <InfoCircleOutlined
-            onClick={this.handleInfoPanel}
-            className='pointer font18 terminal-info-icon'
-          />
-        </Tooltip>
+        <InfoCircleOutlined
+          onClick={this.handleInfoPanel}
+          className='pointer font18 terminal-info-icon'
+        />
       </div>
     )
   }

package/client/components/session/session.jsx

@@ -9,9 +9,12 @@ import {
   BorderHorizontalOutlined,
   CloseSquareFilled,
   SearchOutlined,
-  FullscreenOutlined
+  FullscreenOutlined,
+  PaperClipOutlined
 } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import {
+  Tooltip
+} from 'antd'
 import { last, findIndex, pick } from 'lodash-es'
 import generate from '../../common/uid'
 import copy from 'json-deep-copy'
@@ -72,6 +75,8 @@ export default class SessionWrapper extends Component {
     this.state = {
       pid: null,
       enableSftp: false,
+      cwd: '',
+      sftpPathFollowSsh: !!props.config.sftpPathFollowSsh,
       splitDirection: terminalSplitDirectionMap.horizontal,
       activeSplitId,
       infoPanelPinned: false,
@@ -89,14 +94,22 @@ export default class SessionWrapper extends Component {
     // this.initEvent()
   }
 
-  // isActive () {
-  //   const {
-  //     tab,
-  //     currentTabId
-  //   } = this.props
-  //   return currentTabId === tab.id &&
-  //     tab.pane === paneMap.terminal
-  // }
+  setCwd = (cwd, tid) => {
+    this.setState(old => {
+      return {
+        cwd,
+        terminals: old.terminals.map(t => {
+          if (t.id === tid) {
+            return {
+              ...t,
+              cwd
+            }
+          }
+          return t
+        })
+      }
+    })
+  }
 
   handleShowInfo = (infoPanelProps) => {
     this.setState({
@@ -111,6 +124,12 @@ export default class SessionWrapper extends Component {
     })
   }
 
+  toggleCheckSftpPathFollowSsh = () => {
+    this.setState({
+      sftpPathFollowSsh: !this.state.sftpPathFollowSsh
+    })
+  }
+
   hideInfoPanel = () => {
     this.setState({
       showInfo: false
@@ -266,7 +285,8 @@ export default class SessionWrapper extends Component {
       activeSplitId,
       splitDirection,
       sessionOptions,
-      sessionId
+      sessionId,
+      sftpPathFollowSsh
     } = this.state
     const {
       pane
@@ -297,6 +317,7 @@ export default class SessionWrapper extends Component {
                 ...this.props,
                 ...t,
                 activeSplitId,
+                sftpPathFollowSsh,
                 themeConfig,
                 pane,
                 ...pick(
@@ -308,7 +329,8 @@ export default class SessionWrapper extends Component {
                     'setSessionState',
                     'handleShowInfo',
                     'onChangePane',
-                    'hideInfoPanel'
+                    'hideInfoPanel',
+                    'setCwd'
                   ]),
                 ...this.computePosition(t.position / 10)
               }
@@ -330,22 +352,34 @@ export default class SessionWrapper extends Component {
   }
 
   renderSftp = () => {
-    const { sessionOptions, sessionId, pid, enableSftp } = this.state
+    const {
+      sessionOptions,
+      sessionId,
+      pid,
+      enableSftp,
+      sftpPathFollowSsh,
+      cwd
+    } = this.state
     const { pane } = this.props.tab
     const height = this.computeHeight()
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''
+    const exts = {
+      sftpPathFollowSsh,
+      cwd,
+      pid,
+      enableSftp,
+      sessionOptions,
+      height,
+      sessionId,
+      pane,
+      ...this.props
+    }
     return (
       <div className={cls}>
         <Sftp
-          pid={pid}
-          enableSftp={enableSftp}
-          sessionOptions={sessionOptions}
-          height={height}
-          sessionId={sessionId}
-          pane={pane}
-          {...this.props}
+          {...exts}
         />
       </div>
     )
@@ -365,7 +399,7 @@ export default class SessionWrapper extends Component {
   renderSearchIcon = () => {
     const title = e('search')
     return (
-      <Tooltip title={title}>
+      <Tooltip title={title} placement='bottomLeft'>
         <SearchOutlined
           className='mg1r icon-info font16 iblock pointer spliter'
           onClick={this.handleOpenSearch}
@@ -377,7 +411,7 @@ export default class SessionWrapper extends Component {
   fullscreenIcon = () => {
     const title = e('fullscreen')
     return (
-      <Tooltip title={title}>
+      <Tooltip title={title} placement='bottomLeft'>
         <FullscreenOutlined
           className='mg1r icon-info font16 iblock pointer spliter term-fullscreen-control1'
           onClick={this.handleFullscreen}
@@ -387,7 +421,7 @@ export default class SessionWrapper extends Component {
   }
 
   renderControl = () => {
-    const { splitDirection, terminals } = this.state
+    const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
     const { pane } = props.tab
     const termType = props.tab?.type
@@ -413,6 +447,16 @@ export default class SessionWrapper extends Component {
     if (isSsh || isLocal) {
       controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
     }
+    const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
+    const checkProps = {
+      onClick: this.toggleCheckSftpPathFollowSsh,
+      className: classnames(
+        'sftp-follow-ssh-icon',
+        {
+          active: sftpPathFollowSsh
+        }
+      )
+    }
     return (
       <div
         className='terminal-control fix'
@@ -442,6 +486,17 @@ export default class SessionWrapper extends Component {
             })
           }
         </div>
+        {
+          isSsh || isLocal
+            ? (
+              <Tooltip title={checkTxt}>
+                <span {...checkProps}>
+                  <PaperClipOutlined />
+                </span>
+              </Tooltip>
+              )
+            : null
+        }
         {
           pane === paneMap.terminal
             ? (
@@ -461,6 +516,7 @@ export default class SessionWrapper extends Component {
                 }
                 <Tooltip
                   title={`${e('split')}`}
+                  placement='bottomLeft'
                 >
                   <Icon1
                     className={cls1}
@@ -469,6 +525,7 @@ export default class SessionWrapper extends Component {
                 </Tooltip>
                 <Tooltip
                   title={e('changeDirection')}
+                  placement='bottomLeft'
                 >
                   <Icon2
                     className={cls2}

package/client/components/session/session.styl

@@ -16,6 +16,7 @@
   position relative
   display inline-block
 
+.sftp-follow-ssh-icon
 .type-tab
   display inline-block
   vertical-align middle
@@ -31,6 +32,7 @@
   &.active
     .type-tab-line
       display inline-block
+
 .is-transporting
   .type-tab.sftp
     .type-tab-line

package/client/components/sftp/sftp-entry.jsx

@@ -111,6 +111,12 @@ export default class Sftp extends Component {
         selectedFiles: []
       })
     }
+    if (
+      this.props.sftpPathFollowSsh &&
+      prevProps.cwd !== this.props.cwd
+    ) {
+      this.updateCwd(this.props.cwd)
+    }
   }
 
   componentWillUnmount () {
@@ -196,7 +202,42 @@ export default class Sftp extends Component {
       this.props.pane === paneMap.fileManager
   }
 
+  getCwdLocal = () => {
+    if (
+      !this.shouldRenderRemote() &&
+      this.props.sftpPathFollowSsh &&
+      this.props.cwd
+    ) {
+      return this.props.cwd
+    }
+  }
+
+  updateCwd = (cwd) => {
+    if (!this.state.inited) {
+      return
+    }
+    const type = this.shouldRenderRemote()
+      ? typeMap.remote
+      : typeMap.local
+    // this.setState({
+    //   [`${type}PathTemp`]: cwd
+    // }, () => {
+    //   this.onGoto(
+    //     type
+    //   )
+    // })
+    const n = `${type}Path`
+    const nt = n + 'Temp'
+    this.setState({
+      [n]: cwd,
+      [nt]: cwd
+    }, () => this[`${type}List`]())
+  }
+
   getPwd = async (username) => {
+    if (this.props.sftpPathFollowSsh && this.props.cwd) {
+      return this.props.cwd
+    }
     const home = await runCmd(
       this.props.pid,
       this.props.sessionId,
@@ -427,16 +468,19 @@ export default class Sftp extends Component {
   }
 
   initData = async () => {
-    const { props } = this
-    const host = props.tab?.host &&
-      props.tab?.type !== terminalSshConfigType &&
-      props.tab?.type !== terminalSerialType
-    if (host) {
+    if (this.shouldRenderRemote()) {
       this.initRemoteAll()
     }
     this.initLocalAll()
   }
 
+  shouldRenderRemote = () => {
+    const { props } = this
+    return props.tab?.host &&
+      props.tab?.type !== terminalSshConfigType &&
+      props.tab?.type !== terminalSerialType
+  }
+
   initLocalAll = () => {
     this.localListOwner()
     this.localList()
@@ -699,7 +743,10 @@ export default class Sftp extends Component {
     )
     try {
       const noPathInit = localPathReal || this.state.localPath
-      const localPath = noPathInit || this.props.tab.startDirectoryLocal || window.pre.homeOrtmp
+      const localPath = noPathInit ||
+        this.getCwdLocal() ||
+        this.props.tab.startDirectoryLocal ||
+        window.pre.homeOrTmp
       const locals = await fs.readdirAsync(localPath)
       const local = []
       for (const name of locals) {
@@ -1010,8 +1057,7 @@ export default class Sftp extends Component {
     const {
       height, width
     } = this.props
-    const shouldRenderRemote = this.props.tab?.authType &&
-      this.props.tab?.enableSftp !== false
+    const shouldRenderRemote = this.shouldRenderRemote()
     if (!shouldRenderRemote) {
       return (
         this.renderSection(arr[0], {

package/client/components/shortcuts/shortcut-handler.js

@@ -53,21 +53,17 @@ export function shortcutExtend (Cls) {
       shiftKey,
       metaKey,
       altKey,
-      wheelDeltaY
+      wheelDeltaY,
+      type,
+      key
     } = event
-    if (this.isTerm) {
-      const keymap = [
-        { key: 'Backspace', shiftKey: false, mapCode: 8 },
-        { key: 'Backspace', shiftKey: true, mapCode: 127 }
-      ]
-      if (event.type === 'keydown') {
-        for (const i in keymap) {
-          if (keymap[i].key === event.key && keymap[i].shiftKey === shiftKey) {
-            this.socket.send(String.fromCharCode(keymap[i].mapCode))
-            return false
-          }
-        }
-      }
+    if (key === 'Backspace' && this.isTerm && type === 'keydown') {
+      this.socket.send(
+        String.fromCharCode(
+          shiftKey ? 127 : 8
+        )
+      )
+      return false
     }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')

package/client/components/terminal/attach-addon-custom.js

@@ -2,6 +2,7 @@
  * customize AttachAddon
  */
 import { AttachAddon } from 'xterm-addon-attach'
+import strip from '@electerm/strip-ansi'
 
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, options, encode, isWindowsShell) {
@@ -22,7 +23,31 @@ export default class AttachAddonCustom extends AttachAddon {
       const fileReader = new FileReader()
       fileReader.addEventListener('load', () => {
         const str = this.decoder.decode(fileReader.result)
-        terminal.write(str)
+        if (terminal.parent.props.sftpPathFollowSsh && terminal.buffer.active.type !== 'alternate') {
+          const {
+            cwdId
+          } = terminal
+          const nss = str.split('\r')
+          const nnss = []
+          for (const str1 of nss) {
+            const ns = strip(str1).trim()
+            if (ns.includes(cwdId) && ns.includes('$PWD')) {
+              nnss.push(str1.replace(`echo "${cwdId}$PWD"`, ''))
+            } else if (
+              (cwdId && ns.startsWith(cwdId))
+            ) {
+              delete terminal.cwdId
+              const cwd = ns.replace(cwdId, '').trim()
+              terminal.parent.setCwd(cwd)
+              nnss.push('\x1b[2A\x1b[0J')
+            } else {
+              nnss.push(str1)
+            }
+          }
+          terminal.write(nnss.join('\r'))
+        } else {
+          terminal.write(str)
+        }
       })
       fileReader.readAsArrayBuffer(new window.Blob([data]))
     }

package/client/components/terminal/index.jsx

@@ -25,10 +25,11 @@ import {
   transferTypeMap,
   terminalActions,
   commonActions,
-  rendererTypes
+  rendererTypes,
+  cwdId
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
-import { readClipboard, copy } from '../../common/clipboard'
+import { readClipboardAsync, copy } from '../../common/clipboard'
 import { FitAddon } from 'xterm-addon-fit'
 import AttachAddon from './attach-addon-custom'
 import { SearchAddon } from 'xterm-addon-search'
@@ -76,8 +77,6 @@ class Term extends Component {
 
   isTerm = true
 
-  dataCache = ''
-
   componentDidMount () {
     this.initTerminal()
     this.initEvt()
@@ -130,6 +129,7 @@ class Term extends Component {
   }
 
   componentWillUnmount () {
+    delete this.term.parent
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
     })
@@ -646,12 +646,12 @@ class Term extends Component {
     this.props.tab?.type !== terminalSshConfigType
   }
 
-  onPaste = () => {
-    let selected = readClipboard()
+  onPaste = async () => {
+    let selected = await readClipboardAsync()
     if (isWin && this.isRemote()) {
       selected = selected.replace(/\r\n/g, '\n')
     }
-    this.term.paste(selected)
+    this.term.paste(selected || '')
     this.term.focus()
   }
 
@@ -680,7 +680,7 @@ class Term extends Component {
 
   renderContext = () => {
     const hasSlected = this.term.hasSelection()
-    const copyed = readClipboard()
+    const copyed = true
     const copyShortcut = this.getShortcut('terminal_copy')
     const pasteShortcut = this.getShortcut('terminal_paste')
     const clearShortcut = this.getShortcut('terminal_clear')
@@ -762,8 +762,22 @@ class Term extends Component {
     const str = this.serializeAddon.serialize()
     const arr = strip(str).split(/ +/)
     const len = arr.length
-    const last = arr[len - 1]
-    this.dataCache = last
+    return arr[len - 1]
+  }
+
+  getCwd = () => {
+    if (
+      this.props.sftpPathFollowSsh &&
+      this.term.buffer.active.type !== 'alternate'
+    ) {
+      const cmd = `\recho "${cwdId}$PWD"\r`
+      this.term.cwdId = cwdId
+      this.socket.send(cmd)
+    }
+  }
+
+  setCwd = (cwd) => {
+    this.props.setCwd(cwd, this.state.id)
   }
 
   onData = (d) => {
@@ -771,9 +785,10 @@ class Term extends Component {
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      this.getCmd()
-      const data = this.dataCache
-      this.dataCache = ''
+      const data = this.getCmd()
+      if (this.term.buffer.active.type !== 'alternate') {
+        setTimeout(this.getCwd, 200)
+      }
       const exitCmds = [
         'exit',
         'logout'
@@ -822,6 +837,7 @@ class Term extends Component {
 
     // term.onLineFeed(this.onLineFeed)
     // term.onTitleChange(this.onTitleChange)
+    term.parent = this
     term.onSelectionChange(this.onSelection)
     term.open(document.getElementById(id), true)
     this.loadRenderer(term, config)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.37.80",
+  "version": "1.37.88",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",

package/client/components/terminal-info/index.jsx

@@ -1,25 +0,0 @@
-/**
- * show terminal info
- * inluding id log path, and system info for remote session
- */
-
-import { InfoCircleOutlined } from '@ant-design/icons'
-
-import { Tooltip } from 'antd'
-import './terminal-info.styl'
-
-export default function TerminalInfoIndex (props) {
-  const pops = {
-    onClick: props.showInfoPanel,
-    className: 'pointer font18 terminal-info-icon'
-  }
-  return (
-    <Tooltip
-      title='Terminal Info'
-    >
-      <InfoCircleOutlined
-        {...pops}
-      />
-    </Tooltip>
-  )
-}