@electerm/electerm-react 2.16.9 → 2.17.8

package/client/common/constants.js

@@ -203,6 +203,7 @@ export const settingTerminalId = 'setting-terminal'
 export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
+export const settingPasswordsId = 'setting-passwords'
 export const defaultEnvLang = 'en_US.UTF-8'
 export const fileActions = {
   cancel: 'cancel',

package/client/common/default-setting.js

@@ -47,7 +47,7 @@ export default {
   autoRefreshWhenSwitchToSftp: false,
   addTimeStampToTermLog: false,
   sftpPathFollowSsh: false,
-  keepaliveInterval: 0,
+  keepaliveInterval: 10000,
   backspaceMode: '^?',
   showHiddenFilesOnSftpStart: true,
   terminalInfos: [

package/client/common/setting-list.js

@@ -2,7 +2,8 @@ import {
   settingSyncId,
   settingShortcutsId,
   settingTerminalId,
-  settingAiId
+  settingAiId,
+  settingPasswordsId
 } from '../common/constants'
 
 const e = window.translate
@@ -23,5 +24,9 @@ export default () => ([
   {
     id: settingAiId,
     title: 'AI'
+  },
+  {
+    id: settingPasswordsId,
+    title: e('password')
   }
 ])

package/client/components/common/input-confirm.jsx

@@ -4,8 +4,8 @@ import InputConfirmCommon from './input-confirm-common'
 export default function InputConfirm (props) {
   return (
     <InputConfirmCommon
-      {...props}
       inputComponent={Input}
+      {...props}
     />
   )
 }

package/client/components/main/error-wrapper.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
+import { FrownOutlined, ReloadOutlined, CopyOutlined } from '@ant-design/icons'
 import { Button } from 'antd'
-import message from '../common/message'
 import {
   logoPath1,
   packInfo,
@@ -9,11 +8,20 @@ import {
   isWin
 } from '../../common/constants'
 import Link from '../common/external-link'
-import fs from '../../common/fs'
 import { copy } from '../../common/clipboard'
+import compare from '../../common/version-compare'
 
 const e = window.translate
+const version = packInfo.version
 const os = isMac ? 'mac' : isWin ? 'windows' : 'linux'
+const isVersion2OrAbove = compare(version, '2.0.0') >= 0
+
+const userDataPath = {
+  mac: '~/Library/Application\\ Support/electerm/users/default_user',
+  linux: '~/.config/electerm/users/default_user',
+  windows: 'C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user'
+}
+
 const troubleshootContent = {
   runInCommandLine: {
     mac: '/Applications/electerm.app/Contents/MacOS/electerm',
@@ -21,14 +29,20 @@ const troubleshootContent = {
     windows: 'path\\to\\electerm.exe'
   },
   clearConfig: {
-    mac: 'rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm_data.db && rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm.data.nedb',
-    linux: 'rm -rf ~/.config/electerm/users/default_user/electerm_data.db && rm -rf ~/.config/electerm/users/default_user/electerm.data.nedb',
-    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm_data.db && Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm.data.nedb'
+    mac: isVersion2OrAbove
+      ? `rm -rf ${userDataPath.mac}/electerm_data.db`
+      : `rm -rf ${userDataPath.mac}/electerm.data.nedb`,
+    linux: isVersion2OrAbove
+      ? `rm -rf ${userDataPath.linux}/electerm_data.db`
+      : `rm -rf ${userDataPath.linux}/electerm.data.nedb`,
+    windows: isVersion2OrAbove
+      ? `Delete ${userDataPath.windows}\\electerm_data.db`
+      : `Delete ${userDataPath.windows}\\electerm.data.nedb`
   },
-  clearData: {
-    mac: 'rm -rf ~/Library/Application\\ Support/electerm*',
-    linux: 'rm -rf ~/.config/electerm',
-    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm'
+  backupData: {
+    mac: `cp -r ${userDataPath.mac} ~/Desktop/electerm_backup_${Date.now()}`,
+    linux: `cp -r ${userDataPath.linux} ~/Desktop/electerm_backup_${Date.now()}`,
+    windows: `xcopy "${userDataPath.windows}\\*" "%USERPROFILE%\\Desktop\\electerm_backup_${Date.now()}" /E /I`
   }
 }
 
@@ -53,56 +67,12 @@ export default class ErrorBoundary extends React.PureComponent {
     window.location.reload()
   }
 
-  handleClearData = async () => {
-    await fs.rmrf(troubleshootContent.clearData[os])
-      .then(
-        () => {
-          message.success('Data cleared')
-        }
-      )
-  }
-
-  handleClearConfig = async () => {
-    await fs.rmrf(troubleshootContent.clearConfig[os])
-      .then(
-        () => {
-          message.success('Config cleared')
-        }
-      )
-  }
-
-  handleCopy = () => {
-    copy(troubleshootContent.runInCommandLine[os])
-  }
-
-  renderButton = type => {
-    if (type === 'clearData') {
-      return (
-        <Button
-          className='mg1l'
-          onClick={this.handleClearData}
-        >
-          {e('clearData')}
-        </Button>
-      )
-    }
-    if (type === 'runInCommandLine') {
-      return (
-        <Button
-          className='mg1l'
-          onClick={this.handleCopy}
-        >
-          {e('copy')}
-        </Button>
-      )
-    }
+  renderIconCopy = (cmd) => {
     return (
-      <Button
-        className='mg1l'
-        onClick={this.handleClearConfig}
-      >
-        {e('clearConfig')}
-      </Button>
+      <CopyOutlined
+        className='mg2l pointer'
+        onClick={() => copy(cmd)}
+      />
     )
   }
 
@@ -123,7 +93,7 @@ export default class ErrorBoundary extends React.PureComponent {
             const cmd = v[os]
             return (
               <div className='pd1b' key={k}>
-                <h3>{e(k)} {this.renderButton(k)}</h3>
+                <h3>{e(k)} {this.renderIconCopy(cmd)}</h3>
                 <p><code>{cmd}</code></p>
               </div>
             )
@@ -132,6 +102,10 @@ export default class ErrorBoundary extends React.PureComponent {
         <div className='pd1b'>
           <Link to={bugUrl}>{e('bugReport')}</Link>
         </div>
+        <div className='pd1b'>
+          <span>Contact author: </span>
+          <Link to='mailto:zxdong@gmail.com'>zxdong@gmail.com</Link>
+        </div>
         <div className='pd3y'>
           <img
             src='https://electerm.html5beta.com/electerm-wechat-group-qr.jpg'

package/client/components/session/session.jsx

@@ -14,7 +14,8 @@ import {
   FullscreenOutlined,
   PaperClipOutlined,
   CloseOutlined,
-  ApartmentOutlined
+  ApartmentOutlined,
+  HeartOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -52,7 +53,8 @@ export default class SessionWrapper extends Component {
       splitSize: [50, 50],
       sessionOptions: null,
       delKeyPressed: false,
-      broadcastInput: false
+      broadcastInput: false,
+      keepaliveEnabled: false
     }
     props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
   }
@@ -482,6 +484,15 @@ export default class SessionWrapper extends Component {
     })
   }
 
+  toggleKeepalive = () => {
+    const term = refs.get('term-' + this.props.tab.id)
+    if (!term) {
+      return
+    }
+    const enabled = term.toggleKeepalive()
+    this.setState({ keepaliveEnabled: enabled })
+  }
+
   handleOpenSearch = () => {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
@@ -525,6 +536,25 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  renderKeepaliveIcon = () => {
+    if (this.isSshDisabled() || !this.props.tab.authType) {
+      return null
+    }
+    const { keepaliveEnabled } = this.state
+    const title = e('keepalive')
+    const iconProps = {
+      className: classnames('sess-icon pointer keepalive-icon', {
+        active: keepaliveEnabled
+      }),
+      onClick: this.toggleKeepalive
+    }
+    return (
+      <Tooltip title={title}>
+        <HeartOutlined {...iconProps} />
+      </Tooltip>
+    )
+  }
+
   renderBroadcastIcon = () => {
     if (
       this.isSshDisabled()
@@ -711,6 +741,7 @@ export default class SessionWrapper extends Component {
         {this.renderPaneControl()}
         {this.renderSftpPathFollowControl()}
         {this.renderSplitToggle()}
+        {this.renderKeepaliveIcon()}
         {this.renderBroadcastIcon()}
         {this.renderTermControls()}
       </div>

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

@@ -0,0 +1,304 @@
+/**
+ * Passwords management component
+ * Allows grouping bookmarks by password, changing passwords, and copying passwords
+ */
+import React, { Component } from 'react'
+import {
+  CopyOutlined,
+  EditOutlined,
+  KeyOutlined,
+  LaptopOutlined
+} from '@ant-design/icons'
+import {
+  Button,
+  Modal,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+  Input
+} from 'antd'
+import Search from '../common/search'
+import InputConfirm from '../common/input-confirm'
+import createTitle from '../../common/create-title'
+import { copy as copyToClipboard } from '../../common/clipboard'
+import { settingMap } from '../../common/constants'
+import './setting.styl'
+
+const { Text: TextAnt } = Typography
+const e = window.translate
+
+export default class SettingPasswords extends Component {
+  state = {
+    passwordGroups: [],
+    newPassword: '',
+    editModalVisible: false,
+    selectedBookmarks: [],
+    search: '',
+    pagination: {
+      current: 1,
+      pageSize: 10
+    }
+  }
+
+  componentDidMount () {
+    this.groupBookmarksByPassword()
+  }
+
+  groupBookmarksByPassword = () => {
+    const { bookmarks = [] } = this.props
+    const passwordMap = new Map()
+
+    bookmarks.forEach(bookmark => {
+      const pwd = bookmark.password || ''
+      if (!pwd) {
+        return
+      }
+      if (!passwordMap.has(pwd)) {
+        passwordMap.set(pwd, [])
+      }
+      passwordMap.get(pwd).push(bookmark)
+    })
+
+    const groups = []
+    passwordMap.forEach((bookmarksList, password) => {
+      groups.push({
+        password,
+        count: bookmarksList.length,
+        bookmarks: bookmarksList,
+        titles: bookmarksList.map(b => createTitle(b))
+      })
+    })
+
+    // Sort by count descending
+    groups.sort((a, b) => b.count - a.count)
+
+    this.setState({ passwordGroups: groups })
+  }
+
+  handleCopyPassword = (password) => {
+    copyToClipboard(password)
+  }
+
+  showEditModal = (record) => {
+    this.setState({
+      newPassword: record.password,
+      editModalVisible: true,
+      selectedBookmarks: record.bookmarks
+    })
+  }
+
+  handleEditConfirm = () => {
+    const { newPassword, selectedBookmarks } = this.state
+    if (!newPassword) {
+      return
+    }
+
+    const { editItem } = this.props
+    selectedBookmarks.forEach(bookmark => {
+      editItem(bookmark.id, { password: newPassword }, settingMap.bookmarks)
+    })
+
+    this.setState({
+      editModalVisible: false,
+      newPassword: ''
+    })
+
+    this.groupBookmarksByPassword()
+  }
+
+  handleEditCancel = () => {
+    this.setState({
+      editModalVisible: false,
+      newPassword: ''
+    })
+  }
+
+  handlePasswordChange = (newPwd) => {
+    this.setState({ newPassword: newPwd }, this.handleEditConfirm)
+  }
+
+  handleSearchChange = (evt) => {
+    this.setState({
+      search: evt.target.value,
+      pagination: { ...this.state.pagination, current: 1 }
+    })
+  }
+
+  handleTableChange = (pagination) => {
+    this.setState({ pagination })
+  }
+
+  getFilteredData = () => {
+    const { passwordGroups, search } = this.state
+    if (!search) {
+      return passwordGroups
+    }
+    const keyword = search.toLowerCase()
+    return passwordGroups.filter(group => {
+      return group.titles.some(title =>
+        title.toLowerCase().includes(keyword)
+      )
+    })
+  }
+
+  getColumns = () => {
+    const columns = [
+      {
+        title: e('password'),
+        dataIndex: 'password',
+        key: 'password',
+        render: () => {
+          const props0 = {
+            children: [
+              <KeyOutlined key='icon' />,
+              <TextAnt keyboard key='text'>********</TextAnt>
+            ]
+          }
+          return <Space>{props0.children}</Space>
+        }
+      },
+      {
+        title: e('count'),
+        dataIndex: 'count',
+        key: 'count',
+        width: 80,
+        render: (count) => {
+          const props0 = {
+            color: 'blue',
+            children: count
+          }
+          return <Tag {...props0} />
+        }
+      },
+      {
+        title: e('host'),
+        dataIndex: 'titles',
+        key: 'host',
+        render: (titles) => {
+          const display = titles.length > 2
+            ? `${titles.slice(0, 2).join(', ')}... (+${titles.length - 2})`
+            : titles.join(', ')
+          const props0 = {
+            title: titles.join('\n'),
+            children: <span>{display}</span>
+          }
+          return <Tooltip {...props0} />
+        }
+      },
+      {
+        title: e('actions'),
+        key: 'actions',
+        width: 80,
+        render: (_, record) => {
+          const copyProps0 = {
+            type: 'text',
+            icon: <CopyOutlined />,
+            onClick: () => this.handleCopyPassword(record.password)
+          }
+          const editProps0 = {
+            type: 'text',
+            icon: <EditOutlined />,
+            onClick: () => this.showEditModal(record)
+          }
+          const copyTooltipProps = {
+            title: e('copy'),
+            children: <Button {...copyProps0} />
+          }
+          const editTooltipProps = {
+            title: e('changePassword'),
+            children: <Button {...editProps0} />
+          }
+          const spaceProps0 = {
+            children: [
+              <Tooltip key='copy' {...copyTooltipProps} />,
+              <Tooltip key='edit' {...editTooltipProps} />
+            ]
+          }
+          return <Space>{spaceProps0.children}</Space>
+        }
+      }
+    ]
+    return columns
+  }
+
+  renderContent () {
+    const { search, pagination } = this.state
+    const data = this.getFilteredData()
+
+    if (data.length === 0) {
+      return (
+        <div className='setting-passwords-empty'>
+          <LaptopOutlined style={{ fontSize: 48, color: '#ccc' }} />
+          <p>{e('noPasswordsFound')}</p>
+        </div>
+      )
+    }
+
+    const searchProps0 = {
+      value: search,
+      onChange: this.handleSearchChange,
+      placeholder: e('search')
+    }
+    const tableProps0 = {
+      dataSource: data,
+      columns: this.getColumns(),
+      rowKey: 'password',
+      pagination: { ...pagination, showSizeChanger: true },
+      onChange: this.handleTableChange,
+      size: 'small'
+    }
+
+    return (
+      <div>
+        <Search {...searchProps0} />
+        <Table {...tableProps0} />
+      </div>
+    )
+  }
+
+  render () {
+    const { editModalVisible, newPassword, selectedBookmarks } = this.state
+
+    const modalProps0 = {
+      title: e('changePassword'),
+      open: editModalVisible,
+      onCancel: this.handleEditCancel,
+      footer: null
+    }
+
+    return (
+      <div className='setting-passwords'>
+        <div className='setting-passwords-header'>
+          <h3>
+            <KeyOutlined /> {e('passwords')}
+          </h3>
+        </div>
+
+        {this.renderContent()}
+
+        <Modal {...modalProps0}>
+          <div className='password-edit-form'>
+            <InputConfirm
+              value={newPassword}
+              onChange={this.handlePasswordChange}
+              placeholder={e('newPassword')}
+              inputComponent={Input.Password}
+            />
+            <div className='affected-bookmarks pd2y'>
+              <h3>{e('bookmarks')}</h3>
+              {
+                selectedBookmarks.map(b => (
+                  <p key={b.id}>
+                    # {createTitle(b)}
+                  </p>
+                ))
+              }
+            </div>
+          </div>
+        </Modal>
+      </div>
+    )
+  }
+}

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

@@ -6,13 +6,15 @@ import SettingCol from './col'
 import SettingAi from '../ai/ai-config'
 import SyncSetting from '../setting-sync/setting-sync'
 import Shortcuts from '../shortcuts/shortcuts'
+import SettingPasswords from './setting-passwords'
 import List from './list'
 import {
   settingMap,
   settingSyncId,
   settingTerminalId,
   settingAiId,
-  settingShortcutsId
+  settingShortcutsId,
+  settingPasswordsId
 } from '../../common/constants'
 import { aiConfigsArr } from '../ai/ai-config-props'
 import { pick } from 'lodash-es'
@@ -71,6 +73,13 @@ export default auto(function TabSettings (props) {
       config: store.config
     }
     elem = <Shortcuts {...shortcutsProps} />
+  } else if (sid === settingPasswordsId) {
+    const passwordsProps = {
+      bookmarks: store.bookmarks,
+      editItem: store.editItem,
+      copyToClipboard: window.copyToClipboard
+    }
+    elem = <SettingPasswords {...passwordsProps} />
   } else {
     elem = (
       <SettingCommon

package/client/components/setting-sync/setting-sync-form.jsx

@@ -78,9 +78,9 @@ export default function SyncForm (props) {
         description: test.stack || 'Request failed'
       })
     }
-    if (!res.gistId && syncType !== syncTypes.custom && syncType !== syncTypes.cloud) {
-      window.store.createGist(syncType)
-    }
+    // if (!res.gistId && syncType !== syncTypes.custom && syncType !== syncTypes.cloud) {
+    //   window.store.createGist(syncType)
+    // }
   }
 
   function upload () {
@@ -217,6 +217,7 @@ export default function SyncForm (props) {
       <FormItem
         label={gistLabel}
         name='gistId'
+        required
         normalize={trim}
         rules={[{
           max: 100, message: '100 chars max'

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

@@ -156,6 +156,12 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !ctrlKey
     ) {
+      // If IME is composing, let the browser delete the composition char only
+      // Returning false tells xterm not to process the event (and not to call
+      // preventDefault), so the native textarea backspace still works for IME.
+      if (event.isComposing) {
+        return false
+      }
       this.props.onDelKeyPressed()
       const delKey = this.props.config.backspaceMode === '^?' ? 8 : 127
       const altDelDelKey = delKey === 8 ? 127 : 8

package/client/components/shortcuts/shortcuts-defaults.js

@@ -23,8 +23,8 @@ export default () => {
     },
     {
       name: 'app_cloneToNextLayout',
-      shortcut: 'ctrl+/',
-      shortcutMac: 'meta+/'
+      shortcut: 'alt+/',
+      shortcutMac: 'alt+/'
     },
     {
       name: 'app_duplicateTab',

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

@@ -15,6 +15,10 @@ export default class AttachAddonCustom {
     this._disposables = []
     this._socket = socket
     this.decoder = new TextDecoder('utf-8')
+    this._lastDataTime = Date.now()
+    this._lastInputTime = Date.now()
+    this._keepaliveTimer = null
+    this._keepaliveInterval = 3000
   }
 
   _initBase = async () => {
@@ -31,13 +35,15 @@ export default class AttachAddonCustom {
     }
   }
 
-  startOutputSuppression = (timeout = 3000, onEnd = null) => {
+  startOutputSuppression = (timeout = 3000, onEnd = null, discardOnTimeout = false) => {
     this.outputSuppressed = true
     this.suppressedData = []
     this.onSuppressionEndCallback = onEnd
     this.suppressTimeout = setTimeout(() => {
-      console.warn('[AttachAddon] Output suppression timeout reached, resuming')
-      this.stopOutputSuppression(false)
+      if (!discardOnTimeout) {
+        console.warn('[AttachAddon] Output suppression timeout reached, resuming')
+      }
+      this.stopOutputSuppression(discardOnTimeout)
     }, timeout)
   }
 
@@ -82,6 +88,7 @@ export default class AttachAddonCustom {
   }
 
   onMsg = (ev) => {
+    this._lastDataTime = Date.now()
     if (typeof ev.data === 'string') {
       try {
         const msg = JSON.parse(ev.data)
@@ -163,9 +170,50 @@ export default class AttachAddonCustom {
   }
 
   sendToServer = (data) => {
+    this._lastInputTime = Date.now()
     this._sendData(data)
   }
 
+  _startKeepalive = () => {
+    this._stopKeepalive()
+    this._keepaliveTimer = setInterval(this._checkKeepalive, this._keepaliveInterval)
+  }
+
+  _stopKeepalive = () => {
+    if (this._keepaliveTimer) {
+      clearInterval(this._keepaliveTimer)
+      this._keepaliveTimer = null
+    }
+  }
+
+  _checkKeepalive = () => {
+    if (this.outputSuppressed) {
+      return
+    }
+    const now = Date.now()
+    const idleSinceData = now - this._lastDataTime
+    const idleSinceInput = now - this._lastInputTime
+    if (idleSinceData >= this._keepaliveInterval && idleSinceInput >= this._keepaliveInterval) {
+      // Tell the server to write \n to the PTY so bash's read() wakes up and
+      // resets the TMOUT alarm. The user has explicitly enabled keepalive and
+      // accepts the side-effect of an occasional echoed newline / re-prompt.
+      // Start output suppression to hide the echoed prompt.
+      const sock = this._socket
+      if (sock && sock.readyState === 1 /* OPEN */) {
+        this.startOutputSuppression(500, null, true)
+        sock.send(JSON.stringify({ action: 'keepalive' }))
+      }
+    }
+  }
+
+  setKeepalive = (enabled) => {
+    if (enabled) {
+      this._startKeepalive()
+    } else {
+      this._stopKeepalive()
+    }
+  }
+
   addSocketListener = (socket, type, handler) => {
     socket.addEventListener(type, handler)
     return {
@@ -179,6 +227,7 @@ export default class AttachAddonCustom {
   }
 
   dispose = () => {
+    this._stopKeepalive()
     this.term = null
     this._disposables.forEach(d => d.dispose())
     this._disposables.length = 0

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

@@ -79,17 +79,52 @@ export class KeywordHighlighterAddon {
       segments.push({ type: 'text', content: text.slice(lastIndex) })
     }
 
-    // Highlight only plain text segments
+    // Highlight only plain text segments using two-phase approach
+    // to prevent patterns from interfering with each other's ANSI codes
     const result = segments.map(seg => {
       if (seg.type === 'ansi') {
         return seg.content
       }
-      let content = seg.content
+      const content = seg.content
+      // Phase 1: collect all match positions from all patterns on original text
+      const matches = []
       for (const { regex, colorCode } of this.compiledPatterns) {
         regex.lastIndex = 0
-        content = content.replace(regex, (m) => `${colorCode}${m}\u001b[0m`)
+        let m
+        while ((m = regex.exec(content)) !== null) {
+          if (m[0].length === 0) {
+            regex.lastIndex++
+            continue
+          }
+          matches.push({
+            start: m.index,
+            end: m.index + m[0].length,
+            text: m[0],
+            colorCode
+          })
+        }
+      }
+      if (matches.length === 0) {
+        return content
+      }
+      // Phase 2: sort by position, remove overlaps (first pattern wins)
+      matches.sort((a, b) => a.start - b.start || a.end - b.end)
+      const filtered = [matches[0]]
+      for (let i = 1; i < matches.length; i++) {
+        if (matches[i].start >= filtered[filtered.length - 1].end) {
+          filtered.push(matches[i])
+        }
+      }
+      // Build result with ANSI codes inserted at correct positions
+      let highlighted = ''
+      let pos = 0
+      for (const m of filtered) {
+        highlighted += content.slice(pos, m.start)
+        highlighted += m.colorCode + m.text + '\u001b[0m'
+        pos = m.end
       }
-      return content
+      highlighted += content.slice(pos)
+      return highlighted
     }).join('')
 
     return result

package/client/components/terminal/terminal.jsx

@@ -22,7 +22,8 @@ import {
   typeMap,
   isWin,
   rendererTypes,
-  isMac
+  isMac,
+  isMacJs
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
@@ -479,9 +480,9 @@ class Term extends Component {
     this.term.focus()
   }
 
-  // onSelectAll = () => {
-  //   this.term.selectAll()
-  // }
+  onSelectAll = () => {
+    this.term.selectAll()
+  }
 
   onClear = () => {
     this.term.clear()
@@ -515,6 +516,15 @@ class Term extends Component {
     window.store.toggleTerminalSearch()
   }
 
+  toggleKeepalive = () => {
+    if (!this.attachAddon) {
+      return false
+    }
+    this._keepaliveEnabled = !this._keepaliveEnabled
+    this.attachAddon.setKeepalive(this._keepaliveEnabled)
+    return this._keepaliveEnabled
+  }
+
   onSearchResultsChange = ({ resultIndex, resultCount }) => {
     window.store.storeAssign({
       termSearchMatchCount: resultCount,
@@ -561,7 +571,7 @@ class Term extends Component {
     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'
     return [
       {
         key: 'onCopy',
@@ -583,6 +593,13 @@ class Term extends Component {
         label: e('pasteSelected'),
         disabled: !hasSelection
       },
+      {
+
+        key: 'onSelectAll',
+        icon: <iconsMap.CheckSquareOutlined />,
+        label: e('selectall'),
+        extra: selectAllShortcut
+      },
       {
         key: 'explainWithAi',
         icon: <AIIcon />,
@@ -1100,6 +1117,7 @@ class Term extends Component {
         }
       }
     }
+    const keepaliveInterval = tab.keepaliveInterval || config.keepaliveInterval
     const opts = clone({
       cols,
       rows,
@@ -1112,12 +1130,11 @@ class Term extends Component {
       sessionLogPath: config.sessionLogPath || createDefaultLogPath(),
       ...pick(config, [
         'addTimeStampToTermLog',
-        'keepaliveInterval',
         'keepaliveCountMax',
         'keyword2FA',
         'debug'
       ]),
-      keepaliveInterval: tab.keepaliveInterval || config.keepaliveInterval,
+      keepaliveInterval,
       tabId: id,
       uid: id,
       srcTabId: tab.id,

package/client/components/widgets/widget-form.jsx

@@ -1,13 +1,30 @@
 /**
  * Widget form component
  */
-import React from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, Tooltip } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
 
 export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInstance }) {
   const [form] = Form.useForm()
+  const [showDownloadWarning, setShowDownloadWarning] = useState(false)
+
+  useEffect(() => {
+    let timer
+    if (loading) {
+      timer = setTimeout(() => {
+        setShowDownloadWarning(true)
+      }, 3000)
+    } else {
+      setShowDownloadWarning(false)
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [loading])
 
   if (!widget) {
     return null
@@ -76,6 +93,20 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
     )
   }
 
+  function renderWarn () {
+    if (!showDownloadWarning) {
+      return null
+    }
+    return (
+      <Alert
+        message='Downloading package may take some time on first use...'
+        type='warning'
+        showIcon
+        className='mg1b'
+      />
+    )
+  }
+
   const initialValues = configs.reduce((acc, config) => {
     acc[config.name] = config.default
     return acc
@@ -92,6 +123,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
         </h4>
         <p>{info.description}</p>
       </div>
+      {renderWarn()}
       <Form
         form={form}
         onFinish={handleSubmit}

package/client/store/sync.js

@@ -101,32 +101,32 @@ export default (Store) => {
     return gist
   }
 
-  Store.prototype.createGist = async function (type) {
-    const { store } = window
-    store.isSyncingSetting = true
-    const token = store.getSyncToken(type)
-    const data = {
-      description: 'sync electerm data',
-      files: {
-        'placeholder.js': {
-          content: 'placeholder'
-        }
-      },
-      public: false
-    }
-    const res = await fetchData(
-      type, 'create', [data], token, store.getSyncProxy(type)
-    ).catch(
-      store.onError
-    )
-    if (res && type !== syncTypes.custom) {
-      store.updateSyncSetting({
-        [type + 'GistId']: res.id,
-        [type + 'Url']: res.html_url
-      })
-    }
-    store.isSyncingSetting = false
-  }
+  // Store.prototype.createGist = async function (type) {
+  //   const { store } = window
+  //   store.isSyncingSetting = true
+  //   const token = store.getSyncToken(type)
+  //   const data = {
+  //     description: 'sync electerm data',
+  //     files: {
+  //       'placeholder.js': {
+  //         content: 'placeholder'
+  //       }
+  //     },
+  //     public: false
+  //   }
+  //   const res = await fetchData(
+  //     type, 'create', [data], token, store.getSyncProxy(type)
+  //   ).catch(
+  //     store.onError
+  //   )
+  //   if (res && type !== syncTypes.custom) {
+  //     store.updateSyncSetting({
+  //       [type + 'GistId']: res.id,
+  //       [type + 'Url']: res.html_url
+  //     })
+  //   }
+  //   store.isSyncingSetting = false
+  // }
 
   Store.prototype.handleClearSyncSetting = async function () {
     const { store } = window
@@ -196,11 +196,11 @@ export default (Store) => {
   Store.prototype.uploadSettingAction = async function (type) {
     const { store } = window
     const token = store.getSyncToken(type)
-    let gistId = store.getSyncGistId(type)
-    if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
-      await store.createGist(type)
-      gistId = store.getSyncGistId(type)
-    }
+    const gistId = store.getSyncGistId(type)
+    // if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
+    //   await store.createGist(type)
+    //   gistId = store.getSyncGistId(type)
+    // }
     if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud) {
       return
     }
@@ -280,11 +280,11 @@ export default (Store) => {
   Store.prototype.downloadSettingAction = async function (type) {
     const { store } = window
     const token = store.getSyncToken(type)
-    let gistId = store.getSyncGistId(type)
-    if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
-      await store.createGist(type)
-      gistId = store.getSyncGistId(type)
-    }
+    const gistId = store.getSyncGistId(type)
+    // if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
+    //   await store.createGist(type)
+    //   gistId = store.getSyncGistId(type)
+    // }
     if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud) {
       return
     }

package/package.json

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