@electerm/electerm-react 1.35.6 → 1.36.2

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

@@ -0,0 +1,494 @@
+import React, { Component } from 'react'
+import {
+  CodeOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import {
+  message,
+  Select,
+  Switch,
+  Input,
+  Upload,
+  InputNumber,
+  Button,
+  AutoComplete,
+  Tooltip
+} from 'antd'
+import deepCopy from 'json-deep-copy'
+import {
+  noTerminalBgValue,
+  rendererTypes
+} from '../../common/constants'
+import defaultSettings from '../../common/default-setting'
+import ShowItem from '../common/show-item'
+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 HelpIcon from '../common/help-icon'
+import './setting.styl'
+
+const { Option } = Select
+const { prefix } = window
+const e = prefix('setting')
+const s = prefix('ssh')
+const p = prefix('sftp')
+const t = prefix('terminalThemes')
+const f = prefix('form')
+
+export default class SettingTerminal extends Component {
+  state = {
+    ready: false
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  handleResetAll = () => {
+    this.saveConfig(
+      deepCopy(defaultSettings)
+    )
+  }
+
+  onChangeValue = (value, name) => {
+    if (name === 'useSystemTitleBar') {
+      message.info(e('useSystemTitleBarTip'), 5)
+    }
+    this.saveConfig({
+      [name]: value
+    })
+  }
+
+  handleChangeFont = (values) => {
+    this.onChangeValue(
+      values.join(', '),
+      'fontFamily'
+    )
+  }
+
+  handleChangeCursorStyle = (cursorStyle) => {
+    this.onChangeValue(
+      cursorStyle,
+      'cursorStyle'
+    )
+  }
+
+  saveConfig = async (ext) => {
+    const { config } = this.props
+    if (ext.hotkey && ext.hotkey !== config.hotkey) {
+      const res = await window.pre.runGlobalAsync('changeHotkey', ext.hotkey)
+      if (!res) {
+        message.warning(e('hotkeyNotOk'))
+        delete ext.hotkey
+      } else {
+        message.success(e('saved'))
+      }
+    }
+    this.props.store.setConfig(ext)
+  }
+
+  handleSubmitKeywords = (data) => {
+    return this.saveConfig(data)
+  }
+
+  renderToggle = (name, extra = null) => {
+    const checked = !!this.props.config[name]
+    return (
+      <div className='pd2b' key={'rt' + name}>
+        <Switch
+          checked={checked}
+          checkedChildren={e(name)}
+          unCheckedChildren={e(name)}
+          onChange={v => this.onChangeValue(v, name)}
+        />
+        {isNumber(extra) ? null : extra}
+      </div>
+    )
+  }
+
+  renderNumber = (name, options, title = '', width = 136) => {
+    let value = this.props.config[name]
+    if (options.valueParser) {
+      value = options.valueParser(value)
+    }
+    const defaultValue = defaultSettings[name]
+    const {
+      step = 1,
+      min,
+      max,
+      cls,
+      onChange = (v) => {
+        this.onChangeValue(v, name)
+      }
+    } = options
+    const opts = {
+      step,
+      value,
+      min,
+      max,
+      onChange,
+      placeholder: defaultValue
+    }
+    if (title) {
+      opts.formatter = v => `${title}${options.extraDesc || ''}: ${v}`
+      opts.parser = (v) => {
+        let vv = isNumber(v)
+          ? v
+          : Number(v.split(': ')[1], 10)
+        if (isNaN(vv)) {
+          vv = defaultValue
+        }
+        return vv
+      }
+      opts.style = {
+        width: width + 'px'
+      }
+    }
+    return (
+      <div className={`pd2b ${cls || ''}`}>
+        <InputNumber
+          {...opts}
+        />
+      </div>
+    )
+  }
+
+  renderText = (name, placeholder) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    return (
+      <div className='pd2b'>
+        <Input
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder || defaultValue}
+        />
+      </div>
+    )
+  }
+
+  renderBgOption = item => {
+    return {
+      value: item.value,
+      label: item.desc
+    }
+  }
+
+  renderTerminalBgSelect = (name) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (v) => this.onChangeValue(v, name)
+    const after = (
+      <Upload
+        beforeUpload={(file) => {
+          this.onChangeValue(file.path, name)
+          return false
+        }}
+        showUploadList={false}
+      >
+        <span>{e('chooseFile')}</span>
+      </Upload>
+    )
+    const dataSource = [
+      {
+        value: '',
+        desc: t('default')
+      },
+      {
+        value: noTerminalBgValue,
+        desc: e('noTerminalBg')
+      }
+    ]
+    const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
+
+    const renderFilter = () => {
+      if (this.props.config[name] === noTerminalBgValue) return
+
+      return (
+        <div>
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterOpacity',
+              numberOpts,
+              e('Opacity')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBlur',
+              { ...numberOpts, min: 0, max: 50, step: 0.5 },
+              e('Blur')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBrightness',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Brightness')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterGrayscale',
+              numberOpts,
+              e('Grayscale')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterContrast',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Contrast')
+            )
+          }
+        </div>
+      )
+    }
+
+    return (
+      <div className='pd2b'>
+        <div className='pd1b'>
+          <Tooltip
+            title='eg: https://xx.com/xx.png or /path/to/xx.png'
+          >
+            <AutoComplete
+              value={value}
+              onChange={onChange}
+              placeholder={defaultValue}
+              className='width-100'
+              options={dataSource.map(this.renderBgOption)}
+            >
+              <Input
+                addonAfter={after}
+              />
+            </AutoComplete>
+          </Tooltip>
+        </div>
+
+        {
+          renderFilter()
+        }
+      </div>
+    )
+  }
+
+  renderReset = () => {
+    return (
+      <div className='pd1b pd1t'>
+        <Button
+          onClick={this.handleResetAll}
+        >
+          {e('resetAllToDefault')}
+        </Button>
+      </div>
+    )
+  }
+
+  renderDefaultTerminalType = () => {
+    const opts = this.props.config.terminalTypes.map(mapper)
+    return (
+      <AutoComplete
+        options={opts}
+        style={{
+          width: '200px'
+        }}
+        value={this.props.config.terminalType}
+        onChange={(v) => this.onChangeValue(v, 'terminalType')}
+      />
+    )
+  }
+
+  renderCursorStyleSelect = () => {
+    const {
+      cursorStyle = 'block'
+    } = this.props.config
+    const sets = [
+      {
+        id: 'block',
+        title: '▊'
+      },
+      {
+        id: 'underline',
+        title: '_'
+      },
+      {
+        id: 'bar',
+        title: '|'
+      }
+    ]
+    const props = {
+      onChange: this.handleChangeCursorStyle,
+      value: cursorStyle,
+      style: {
+        width: '100px'
+      }
+    }
+    return (
+      <div className='pd1b'>
+        <span className='inline-title mg1r'>{e('cursorStyle')}</span>
+        <Select
+          {...props}
+          showSearch
+        >
+          {
+            sets.map(f => {
+              return (
+                <Option value={f.id} key={f.id}>
+                  <b>{f.title}</b>
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    )
+  }
+
+  renderFontFamily = () => {
+    const { fonts } = this.props.store
+    const { fontFamily } = this.props.config
+    const props = {
+      mode: 'multiple',
+      onChange: this.handleChangeFont,
+      value: fontFamily.split(/, */g)
+    }
+    return (
+      <Select
+        {...props}
+        showSearch
+      >
+        {
+          fonts.map(f => {
+            return (
+              <Option value={f} key={f}>
+                <span style={{
+                  fontFamily: f
+                }}
+                >{f}
+                </span>
+              </Option>
+            )
+          })
+        }
+      </Select>
+    )
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    const {
+      rendererType,
+      keywords = [{ color: 'red' }]
+    } = this.props.config
+    const {
+      appPath
+    } = this.props.store
+    const ps = {
+      formData: {
+        keywords
+      },
+      submit: this.handleSubmitKeywords
+    }
+    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
+    return (
+      <div className='form-wrap pd1y pd2x'>
+        <div className='pd1y font16 bold'>
+          <CodeOutlined className='mg1r' />
+          {s('terminal')} {e('settings')}
+        </div>
+        {
+          this.renderNumber('scrollback', {
+            step: 200,
+            min: 1000
+          }, e('scrollBackDesc'), 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('rendererType')}</span>
+          <Select
+            onChange={v => this.onChangeValue(v, 'rendererType')}
+            value={rendererType}
+            popupMatchSelectWidth={false}
+          >
+            {
+              Object.keys(rendererTypes).map(id => {
+                return (
+                  <Option key={id} value={id}>{id}</Option>
+                )
+              })
+            }
+          </Select>
+        </div>
+        {
+          this.renderNumber('fontSize', {
+            step: 1,
+            min: 9
+          }, `${t('default')} ${e('fontSize')}`, 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{t('default')} {e('fontFamily')}</span>
+          {
+            this.renderFontFamily()
+          }
+        </div>
+        <div className='pd2b'>
+          <div className='pd1b'>
+            <span className='inline-title mg1r'>{f('keywordsHighlight')}</span>
+            <HelpIcon
+              title={f('supportRegexp')}
+            />
+          </div>
+          <KeywordForm
+            {...ps}
+          />
+        </div>
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('defaultTerminalType')}</span>
+          {
+            this.renderDefaultTerminalType()
+          }
+        </div>
+        <div className='pd1b'>{e('terminalBackgroundImage')}</div>
+        {
+          this.renderTerminalBgSelect('terminalBackgroundImagePath')
+        }
+        <div className='pd1b'>{e('terminalWordSeparator')}</div>
+        {
+          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
+        }
+        {
+          this.renderCursorStyleSelect()
+        }
+        {
+          [
+            'cursorBlink',
+            'rightClickSelectsWord',
+            'pasteWhenContextMenu',
+            'copyWhenSelect',
+            'ctrlOrMetaOpenTerminalLink'
+          ].map(this.renderToggle)
+        }
+        {this.renderToggle('saveTerminalLogToFile', (
+          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
+        ))}
+        {this.renderReset()}
+      </div>
+    )
+  }
+}

package/client/components/setting-panel/tab-settings.jsx

@@ -1,4 +1,5 @@
-import Setting from './setting'
+import SettingCommon from './setting-common'
+import SettingTerminal from './setting-terminal'
 import SettingCol from './col'
 import SyncSetting from '../setting-sync/setting-sync'
 import Shortcuts from '../shortcuts/shortcuts'
@@ -6,6 +7,7 @@ import List from './list'
 import {
   settingMap,
   settingSyncId,
+  settingTerminalId,
   settingShortcutsId
 } from '../../common/constants'
 
@@ -25,10 +27,12 @@ export default function TabSettings (props) {
   const sid = settingItem.id
   if (sid === settingSyncId) {
     elem = <SyncSetting store={store} />
+  } else if (sid === settingTerminalId) {
+    elem = <SettingTerminal {...listProps} config={store.config} />
   } else if (sid === settingShortcutsId) {
     elem = <Shortcuts store={store} />
   } else {
-    elem = <Setting {...listProps} config={store.config} />
+    elem = <SettingCommon {...listProps} config={store.config} />
   }
   return (
     <div

package/client/components/sftp/list-table-ui.jsx

@@ -94,7 +94,7 @@ export default class FileListTable extends React.Component {
         style: {
           width: w + 'px',
           left: (w * i) + 'px',
-          zIndex: 3 + i
+          zIndex: 3 + i * 2
         }
       }
     })
@@ -110,7 +110,8 @@ export default class FileListTable extends React.Component {
           nextProp: properties[i + 1].name,
           style: {
             left: (w * (i + 1) - (splitDraggerWidth / 2)) + 'px',
-            width: splitDraggerWidth + 'px'
+            width: splitDraggerWidth + 'px',
+            zIndex: 4 + i * 2
           }
         }
       ]

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

@@ -0,0 +1,63 @@
+export class KeywordHighlighterAddon {
+  constructor (keywords) {
+    this.keywords = keywords
+  }
+
+  escape = str => {
+    return str.replace(/\\x1B/g, '\\x1B')
+      .replace(/\033/g, '\\033')
+  }
+
+  colorize = (color) => {
+    // Use a switch statement to map color names to ANSI codes
+    switch (color) {
+      case 'green':
+        return '\u001b[32m$&\u001b[0m'
+      case 'yellow':
+        return '\u001b[33m$&\u001b[0m'
+      case 'blue':
+        return '\u001b[34m$&\u001b[0m'
+      case 'magenta':
+        return '\u001b[35m$&\u001b[0m'
+      case 'cyan':
+        return '\u001b[36m$&\u001b[0m'
+      case 'white':
+        return '\u001b[37m$&\u001b[0m'
+      default:
+        return '\u001b[31m$&\u001b[0m'
+    }
+  }
+
+  highlightKeywords = (text) => {
+    console.log('this.keywords', this.keywords)
+    for (const obj of this.keywords) {
+      const {
+        keyword,
+        color = 'red'
+      } = obj || {}
+      if (keyword) {
+        const regex = new RegExp(`(${keyword})`, 'gi')
+        text = text.replace(regex, this.colorize(color))
+      }
+    }
+    return text
+  }
+
+  activate (terminal) {
+    this.terminal = terminal
+    // Override the write method to automatically highlight keywords
+    const originalWrite = terminal.write
+    terminal.write = (data) => {
+      originalWrite.call(
+        terminal,
+        terminal.displayRaw ? this.escape(data) : this.highlightKeywords(data)
+      )
+    }
+    this.originalWrite = originalWrite
+  }
+
+  dispose () {
+    // Restore the original write method when disposing the addon
+    this.terminal.write = this.originalWrite
+  }
+}

package/client/components/terminal/index.jsx

@@ -51,6 +51,7 @@ import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
 import createLsId from './build-ls-term-id'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
+import { KeywordHighlighterAddon } from './highlight-addon.js'
 
 const { prefix } = window
 const e = prefix('ssh')
@@ -820,10 +821,6 @@ class Term extends Component {
     term.onData(this.onData)
     this.term = term
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
-    term.onKey(this.onKey)
-    // if (host && !password && !privateKey) {
-    //   return this.promote()
-    // }
     await this.remoteInit(term)
   }
 
@@ -905,7 +902,13 @@ class Term extends Component {
     })
     const { cols, rows } = term
     const { config } = this.props
-    const { host, port, tokenElecterm, server = '' } = config
+    const {
+      host,
+      port,
+      tokenElecterm,
+      keywords = [],
+      server = ''
+    } = config
     const { sessionId, terminalIndex, id, logName } = this.props
     const tab = deepCopy(this.props.tab || {})
     const {
@@ -1025,46 +1028,14 @@ class Term extends Component {
         noTerminalWriteOutsideSession: true
       }, this)
     }
-
-    // this.decoder = new TextDecoder(encode)
-    if (displayRaw) {
-      const oldWrite = term.write
-      const th = this
-      term.write = function (data) {
-        // let str = ''
-        // if (typeof data === 'object') {
-        //   if (data instanceof ArrayBuffer) {
-        //     str = th.decoder.decode(data)
-        //     oldWrite.call(term, th.escape(str))
-        //   } else {
-        //     const fileReader = new FileReader()
-        //     fileReader.addEventListener('load', () => {
-        //       str = th.decoder.decode(fileReader.result)
-        //       oldWrite.call(term, th.escape(str))
-        //     })
-        //     fileReader.readAsArrayBuffer(new window.Blob([data]))
-        //   }
-        // } else if (typeof data === 'string') {
-        //   oldWrite.call(term, th.escape(data))
-        // } else {
-        //   throw Error(`Cannot handle ${typeof data} websocket message.`)
-        // }
-        oldWrite.call(term, th.escape(data))
-      }
-    }
+    term.displayRaw = displayRaw
+    term.loadAddon(
+      new KeywordHighlighterAddon(keywords)
+    )
     this.term = term
     window.store.triggerResize()
   }
 
-  escape = str => {
-    return str.replace(/\\x1B/g, '\\x1B')
-      .replace(/\033/g, '\\033')
-  }
-
-  onKey = (key, e) => {
-    // log.log('onKey', key, e)
-  }
-
   onResize = throttle(() => {
     const cid = this.props.currentTabId
     const tid = this.props.tab?.id