@electerm/electerm-react 1.37.1 → 1.37.16

package/client/common/constants.js

@@ -307,6 +307,7 @@ export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
 export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
+export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
 export const modals = {
   hide: 0,
   setting: 1,

package/client/common/default-setting.js

@@ -39,5 +39,6 @@ export default {
   initDefaultTabOnStart: true,
   screenReaderMode: false,
   autoRefreshWhenSwitchToSftp: false,
-  hideSshConfig: false
+  hideSshConfig: false,
+  addTimeStampToTermLog: false
 }

package/client/common/resolve.js

@@ -6,7 +6,7 @@
  */
 
 export default (basePath, nameOrDot) => {
-  const sep = basePath.includes('\\') || basePath.includes(':')
+  const sep = basePath.includes('\\') || basePath.includes(':\\')
     ? '\\'
     : '/'
   if (nameOrDot === '..') {
@@ -18,7 +18,7 @@ export default (basePath, nameOrDot) => {
     const res = arr.slice(0, length - 1).join(sep)
     return res || '/'
   }
-  const pre = nameOrDot.includes(':') && basePath === '/'
+  const pre = nameOrDot.includes(':\\') && basePath === '/'
     ? ''
     : basePath
   return pre +

package/client/components/setting-panel/keywords-form.jsx

@@ -30,16 +30,31 @@ export default function KeywordForm (props) {
     props.submit(data)
   }
 
+  function checker (_, value) {
+    try {
+      return Promise.resolve(!!new RegExp(`(${value})`, 'gi'))
+    } catch (e) {
+      console.log(e)
+      return Promise.reject(e)
+    }
+  }
+
   function renderItem (field, i, add, remove) {
     return (
       <Space
         align='center'
         key={field.key}
+        className='mg3r'
       >
         <FormItem
           hasFeedback
         >
-          <FormItem noStyle required name={[field.name, 'keyword']}>
+          <FormItem
+            noStyle
+            required
+            name={[field.name, 'keyword']}
+            rules={[{ validator: checker }]}
+          >
             <Input
               addonBefore={renderBefore(field.name)}
             />

package/client/components/setting-panel/setting-terminal.jsx

@@ -17,7 +17,8 @@ import {
 import deepCopy from 'json-deep-copy'
 import {
   noTerminalBgValue,
-  rendererTypes
+  rendererTypes,
+  regexHelpLink
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
@@ -25,6 +26,7 @@ import { osResolve } from '../../common/resolve'
 import { isNumber, isNaN } from 'lodash-es'
 import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
+import Link from '../common/external-link'
 import HelpIcon from '../common/help-icon'
 import './setting.styl'
 
@@ -406,7 +408,15 @@ export default class SettingTerminal extends Component {
       },
       submit: this.handleSubmitKeywords
     }
-    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
+    const terminalLogPath = appPath
+      ? osResolve(appPath, 'electerm', 'session_logs')
+      : window.et.sessionLogPath
+    const tip = (
+      <div>
+        <span className='mg1r'>{f('supportRegexp')}</span>
+        <Link to={regexHelpLink}>wiki</Link>
+      </div>
+    )
     return (
       <div className='form-wrap pd1y pd2x'>
         <div className='pd1y font16 bold'>
@@ -451,7 +461,7 @@ export default class SettingTerminal extends Component {
           <div className='pd1b'>
             <span className='inline-title mg1r'>{f('keywordsHighlight')}</span>
             <HelpIcon
-              title={f('supportRegexp')}
+              title={tip}
             />
           </div>
           <KeywordForm
@@ -475,6 +485,9 @@ export default class SettingTerminal extends Component {
         {
           this.renderCursorStyleSelect()
         }
+        {this.renderToggle('saveTerminalLogToFile', (
+          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
+        ))}
         {
           [
             'cursorBlink',
@@ -484,9 +497,6 @@ export default class SettingTerminal extends Component {
             'ctrlOrMetaOpenTerminalLink'
           ].map(this.renderToggle)
         }
-        {this.renderToggle('saveTerminalLogToFile', (
-          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
-        ))}
         {this.renderReset()}
       </div>
     )

package/client/components/sftp/zip.js

@@ -12,17 +12,17 @@ const isRemote = true
 const temp = '/tmp'
 
 export async function zipCmd (pid, sessionId, filePath) {
-  // tar -czf bin.tar.gz bin
+  // tar -czf bin.tar bin
   const id = generate()
   const { path, name } = getFolderFromFilePath(filePath, isRemote)
-  const np = resolve(temp, `electerm-${id}.tar.gz`)
-  const cmd = `tar -C ${path} -czf ${np} ${name}`
+  const np = resolve(temp, `electerm-${id}.tar`)
+  const cmd = `tar -C ${path} -cf ${np} ${name}`
   await runCmd(pid, sessionId, cmd)
   return np
 }
 
 export function unzipCmd (pid, sessionId, from, to) {
-  const cmd = `tar -xzf "${from}" -C "${to}"`
+  const cmd = `tar -xf "${from}" -C "${to}"`
   return runCmd(pid, sessionId, cmd)
 }
 

package/client/components/shortcuts/shortcut-control.jsx

@@ -5,7 +5,6 @@
 
 import React from 'react'
 import { shortcutExtend } from './shortcut-handler.js'
-import { throttle } from 'lodash-es'
 
 class ShortcutControl extends React.PureComponent {
   componentDidMount () {
@@ -28,18 +27,18 @@ class ShortcutControl extends React.PureComponent {
     window.store.onNewSsh()
   }
 
-  togglefullscreenShortcut = throttle((e) => {
+  togglefullscreenShortcut = (e) => {
     e.stopPropagation()
     const x = document.querySelector('.term-fullscreen-control') ||
-    document.querySelector('.term-fullscreen-control1')
+    document.querySelector('.session-current .term-fullscreen-control1')
     x && x.click()
-  }, 300)
+  }
 
-  splitShortcut = throttle((e) => {
+  splitShortcut = (e) => {
     e.stopPropagation()
-    const x = document.querySelector('.icon-split')
+    const x = document.querySelector('.session-current .icon-split')
     x && x.click()
-  }, 300)
+  }
 
   zoominShortcut = (e) => {
     e.stopPropagation()

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

@@ -3,9 +3,10 @@ import shortcutsDefaultsGen from './shortcuts-defaults.js'
 import {
   isMacJs
 } from '../../common/constants'
+import { throttle } from 'lodash-es'
 
-function buildConfig (config) {
-  const defs = shortcutsDefaultsGen()
+function buildConfig (config, filter = d => d) {
+  const defs = shortcutsDefaultsGen().filter(filter)
   const { shortcuts = {} } = config
   return defs.reduce((p, c) => {
     const propName = isMacJs ? 'shortcutMac' : 'shortcut'
@@ -23,7 +24,7 @@ function buildConfig (config) {
 }
 
 export function shortcutExtend (Cls) {
-  Cls.prototype.handleKeyboardEvent = function (event) {
+  Cls.prototype.handleKeyboardEvent = throttle(function (event) {
     const {
       code,
       ctrlKey,
@@ -45,7 +46,7 @@ export function shortcutExtend (Cls) {
       (shiftKey ? 'shift+' : '') +
       (altKey ? 'alt+' : '') +
       codeK.toLowerCase()
-    const shortcutsConfig = buildConfig(this.props.config)
+    const shortcutsConfig = buildConfig(this.props.config, d => !d.readonly)
     const keys = Object.keys(shortcutsConfig)
     const len = keys.length
     for (let i = 0; i < len; i++) {
@@ -60,7 +61,7 @@ export function shortcutExtend (Cls) {
         }
       }
     }
-  }
+  }, 300)
   return Cls
 }
 

package/client/components/shortcuts/shortcuts.jsx

@@ -36,16 +36,18 @@ export default class Shortcuts extends Component {
 
   getData () {
     const { shortcuts = {} } = this.props.store.config
-    return shortcutsDefaults.map((c, i) => {
-      const propName = isMac ? 'shortcutMac' : 'shortcut'
-      const name = c.name + '_' + propName
-      return {
-        index: i + 1,
-        name,
-        readonly: c.readonly,
-        shortcut: c.readonly ? c[propName] : (shortcuts[name] || c[propName])
-      }
-    })
+    return shortcutsDefaults
+      .filter(g => !g.readonly)
+      .map((c, i) => {
+        const propName = isMac ? 'shortcutMac' : 'shortcut'
+        const name = c.name + '_' + propName
+        return {
+          index: i + 1,
+          name,
+          readonly: c.readonly,
+          shortcut: c.readonly ? c[propName] : (shortcuts[name] || c[propName])
+        }
+      })
   }
 
   getKeysTakenData = () => {

package/client/components/terminal/highlight-addon.js

@@ -35,8 +35,12 @@ export class KeywordHighlighterAddon {
         color = 'red'
       } = obj || {}
       if (keyword) {
-        const regex = new RegExp(`(${keyword})`, 'gi')
-        text = text.replace(regex, this.colorize(color))
+        try {
+          const regex = new RegExp(`(${keyword})`, 'gi')
+          text = text.replace(regex, this.colorize(color))
+        } catch (e) {
+          window.store.onError(e)
+        }
       }
     }
     return text

package/client/components/terminal/index.jsx

@@ -41,6 +41,7 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
 import { SerializeAddon } from 'xterm-addon-serialize'
 import { CanvasAddon } from 'xterm-addon-canvas'
 import { WebglAddon } from 'xterm-addon-webgl'
+import { LigaturesAddon } from 'xterm-addon-ligatures'
 import getProxy from '../../common/get-proxy'
 import { Zmodem, AddonZmodem } from './xterm-zmodem'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
@@ -78,6 +79,7 @@ class Term extends Component {
       promoteModalVisible: false,
       savePassword: false,
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
+      addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       tempPassword: '',
       passType: 'password',
       zmodemTransfer: null,
@@ -232,15 +234,15 @@ class Term extends Component {
     this.term.selectAll()
   }
 
-  copyShortcut = (e) => {
-    const sel = this.term.getSelection()
-    if (sel) {
-      e.stopPropagation()
-      e.preventDefault()
-      this.copySelectionToClipboard()
-      return false
-    }
-  }
+  // copyShortcut = (e) => {
+  //   const sel = this.term.getSelection()
+  //   if (sel) {
+  //     e.stopPropagation()
+  //     e.preventDefault()
+  //     this.copySelectionToClipboard()
+  //     return false
+  //   }
+  // }
 
   searchShortcut = (e) => {
     e.stopPropagation()
@@ -274,6 +276,7 @@ class Term extends Component {
       action,
       encode,
       saveTerminalLogToFile,
+      addTimeStampToTermLog,
       type,
       cmd,
       activeSplitId,
@@ -348,17 +351,10 @@ class Term extends Component {
     ) {
       postMessage({
         action: commonActions.returnTermLogState,
-        state: this.state.saveTerminalLogToFile,
-        pid: statePid
-      })
-      postMessage({
-        action: commonActions.returnTermLogState,
-        state: this.state.saveTerminalLogToFile,
-        pid: statePid
-      })
-      postMessage({
-        action: commonActions.returnTermLogState,
-        state: this.state.saveTerminalLogToFile,
+        state: {
+          saveTerminalLogToFile: this.state.saveTerminalLogToFile,
+          addTimeStampToTermLog: this.state.addTimeStampToTermLog
+        },
         pid: statePid
       })
     } else if (
@@ -366,6 +362,7 @@ class Term extends Component {
       pid === statePid
     ) {
       this.setState({
+        addTimeStampToTermLog,
         saveTerminalLogToFile
       })
     }
@@ -674,14 +671,6 @@ class Term extends Component {
     window.store.toggleTerminalSearch()
   }
 
-  // onLineFeed = e => {
-  //   // console.log(e, 'onLineFeed')
-  // }
-
-  onTitleChange = e => {
-    log.debug(e, 'title change')
-  }
-
   onSearchResultsChange = ({ resultIndex, resultCount }) => {
     window.store.storeAssign({
       termSearchMatchCount: resultCount,
@@ -779,12 +768,32 @@ class Term extends Component {
     }
   }
 
+  parse (rawText) {
+    let result = ''
+    const len = rawText.length
+    for (let i = 0; i < len; i++) {
+      if (rawText[i] === '\b') {
+        result = result.slice(0, -1)
+      } else {
+        result += rawText[i]
+      }
+    }
+    return result
+  }
+
+  onKey = ({ key }) => {
+    if (key === '\x7F') {
+      this.dataCache = this.dataCache.slice(0, -1)
+    } else {
+      this.dataCache += key
+    }
+  }
+
   onData = (d) => {
-    if (!d.includes('\r') && !d.includes('\r')) {
-      this.dataCache += d
+    if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      const data = this.dataCache.trim()
+      const data = this.parse(this.dataCache.trim())
       this.dataCache = ''
       if (data === 'exit') {
         this.userTypeExit = true
@@ -827,27 +836,31 @@ class Term extends Component {
       fontSize: tab.fontSize || config.fontSize,
       screenReaderMode: config.screenReaderMode
     })
+
+    // term.onLineFeed(this.onLineFeed)
+    // term.onTitleChange(this.onTitleChange)
+    term.onSelectionChange(this.onSelection)
+    this.loadState(term)
+    term.open(document.getElementById(id), true)
+    this.loadRenderer(term, config)
+    term.textarea.addEventListener('focus', this.setActive)
+    term.onKey(this.onKey)
+    // term.textarea.addEventListener('blur', this.onBlur)
+
+    // term.on('keydown', this.handleEvent)
     this.fitAddon = new FitAddon()
     this.searchAddon = new SearchAddon()
+    const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const unicode11Addon = new Unicode11Addon()
     this.serializeAddon = new SerializeAddon()
     term.loadAddon(this.serializeAddon)
     term.loadAddon(unicode11Addon)
+    term.loadAddon(ligtureAddon)
     // activate the new version
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
-    // term.onLineFeed(this.onLineFeed)
-    term.onTitleChange(this.onTitleChange)
-    term.onSelectionChange(this.onSelection)
-    this.loadState(term)
-    term.open(document.getElementById(id), true)
-    this.loadRenderer(term, config)
-    term.textarea.addEventListener('focus', this.setActive)
-    // term.textarea.addEventListener('blur', this.onBlur)
-
-    // term.on('keydown', this.handleEvent)
     term.onData(this.onData)
     this.term = term
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
@@ -963,6 +976,7 @@ class Term extends Component {
       ...extra,
       logName,
       ...pick(config, [
+        'addTimeStampToTermLog',
         'keepaliveInterval',
         'keepaliveCountMax',
         'execWindows',

package/client/components/terminal/terminal-apis.js

@@ -37,3 +37,11 @@ export function toggleTerminalLog (pid, sessionId) {
     action: 'toggle-terminal-log'
   })
 }
+
+export function toggleTerminalLogTimestamp (pid, sessionId) {
+  return fetch({
+    pid,
+    sessionId,
+    action: 'toggle-terminal-log-timestamp'
+  })
+}

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

@@ -11,14 +11,15 @@ import {
 } from 'antd'
 import ShowItem from '../common/show-item'
 import postMsg from '../../common/post-msg'
-import { toggleTerminalLog } from '../terminal/terminal-apis'
+import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 
 const { prefix } = window
 const st = prefix('setting')
 
 export default class TerminalInfoBase extends Component {
   state = {
-    saveTerminalLogToFile: false
+    saveTerminalLogToFile: false,
+    addTimeStampToTermLog: false
   }
 
   componentDidMount () {
@@ -30,8 +31,31 @@ export default class TerminalInfoBase extends Component {
     this.exit()
   }
 
+  handleToggleTimestamp = () => {
+    const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
+    const {
+      pid,
+      sessionId
+    } = this.props
+    toggleTerminalLogTimestamp(
+      pid,
+      sessionId
+    )
+    const nv = !addTimeStampToTermLog
+    this.setState({
+      addTimeStampToTermLog: nv
+    })
+    postMsg({
+      action: commonActions.setTermLogState,
+      pid,
+      addTimeStampToTermLog: nv,
+      saveTerminalLogToFile,
+      sessionId
+    })
+  }
+
   handleToggle = () => {
-    const { saveTerminalLogToFile } = this.state
+    const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
       pid,
       sessionId
@@ -48,6 +72,7 @@ export default class TerminalInfoBase extends Component {
       action: commonActions.setTermLogState,
       pid,
       saveTerminalLogToFile: nv,
+      addTimeStampToTermLog,
       sessionId
     })
   }
@@ -62,9 +87,7 @@ export default class TerminalInfoBase extends Component {
       action === commonActions.returnTermLogState &&
       this.props.pid === ppid
     ) {
-      this.setState({
-        saveTerminalLogToFile: state
-      })
+      this.setState(state)
       window.removeEventListener('message', this.onEvent)
     }
   }
@@ -85,6 +108,22 @@ export default class TerminalInfoBase extends Component {
     window.removeEventListener('message', this.onEvent)
   }
 
+  renderTimestamp () {
+    const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
+    if (!saveTerminalLogToFile) {
+      return null
+    }
+    const name = st('addTimeStampToTermLog')
+    return (
+      <Switch
+        checkedChildren={name}
+        unCheckedChildren={name}
+        checked={addTimeStampToTermLog}
+        onChange={this.handleToggleTimestamp}
+      />
+    )
+  }
+
   render () {
     const {
       id,
@@ -110,7 +149,11 @@ export default class TerminalInfoBase extends Component {
               unCheckedChildren={name}
               checked={saveTerminalLogToFile}
               onChange={this.handleToggle}
+              className='mg1r'
             />
+            {
+              this.renderTimestamp()
+            }
           </span>
         </div>
         <p><b>log:</b> {to}</p>

package/package.json

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