@electerm/electerm-react 2.13.6 → 2.16.6

package/client/components/terminal/transfer-client-base.js

@@ -18,6 +18,7 @@ export class TransferClientBase {
     this.currentTransfer = null
     this.savePath = null
     this.messageHandler = null
+    this._prevProgressRows = 0
   }
 
   /**
@@ -107,6 +108,49 @@ export class TransferClientBase {
     this.writeToTerminal(`\x1b[32m\x1b[1m${this.getProtocolDisplayName()}::${type}::START\x1b[0m\r\n`)
   }
 
+  /**
+   * Write progress bar to terminal
+   * @param {Object} options - Progress options
+   * @param {string} options.name - File name
+   * @param {number} options.size - Total size in bytes
+   * @param {number} options.transferred - Transferred bytes
+   * @param {number} options.speed - Transfer speed in bytes/s
+   * @param {boolean} options.isComplete - Whether transfer is complete
+   * @param {Function} options.formatSize - Function to format size
+   * @returns {string} The progress string written to terminal
+   */
+  writeProgressBar ({ name, size, transferred, speed, isComplete = false, formatSize = (b) => b }) {
+    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
+    const barWidth = 30
+    const filledWidth = Math.floor(percent / 100 * barWidth)
+    const emptyWidth = barWidth - filledWidth
+
+    const bar = '\x1b[32m' + '\u2588'.repeat(filledWidth) + '\x1b[90m' + '\u2591'.repeat(emptyWidth) + '\x1b[0m'
+
+    const sizeStr = `${formatSize(transferred)}/${formatSize(size)}`
+    const speedStr = speed > 0 ? `, ${formatSize(speed)}/s` : ''
+    const doneStr = isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''
+
+    const str = `\x1b[32m${name}\x1b[0m: ${percent}% ${bar} ${sizeStr}${speedStr}${doneStr}`
+
+    // Calculate visible length (no ANSI codes) to detect line wrapping
+    const visibleLen = name.length + 2 + String(percent).length + 2 + barWidth + 1 + sizeStr.length + speedStr.length + (isComplete ? 7 : 0)
+    const cols = this.terminal?.term?.cols || 80
+    const currentRows = Math.max(1, Math.ceil(visibleLen / cols))
+
+    // Move cursor back up to the start of the previous progress block, then
+    // erase everything from there to end-of-display so wrapped lines are gone.
+    let clearSeq = '\r'
+    for (let i = 0; i < this._prevProgressRows; i++) {
+      clearSeq += '\x1b[A' // cursor up one row
+    }
+    clearSeq += '\x1b[J' // erase from cursor to end of display
+
+    this._prevProgressRows = currentRows - 1
+    this.writeToTerminal(clearSeq + str + '\r')
+    return str
+  }
+
   /**
    * Get protocol display name
    * Should be overridden by subclass

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

@@ -208,8 +208,9 @@ export class TrzszClient extends TransferClientBase {
       this.currentTransfer.path = path
       // Call directly to ensure 100% is displayed immediately
       this._doWriteProgress(true)
-      // Add newline after completion
+      // Add newline after completion and reset row tracker for next file
       this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
     }
     this.currentTransfer = null
   }
@@ -230,20 +231,18 @@ export class TrzszClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 
   /**

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

@@ -180,8 +180,9 @@ export class ZmodemClient extends TransferClientBase {
       this.currentTransfer.path = path
       // Call directly to ensure 100% is displayed immediately
       this._doWriteProgress(true)
-      // Add newline after completion
+      // Add newline after completion and reset row tracker for next file
       this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
     }
     this.currentTransfer = null
   }
@@ -212,20 +213,18 @@ export class ZmodemClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 }
 

package/client/components/text-editor/edit-with-custom-editor.jsx

@@ -0,0 +1,49 @@
+/**
+ * Edit with custom editor - input + button component
+ */
+
+import { useState } from 'react'
+import { Button, Input, Space } from 'antd'
+
+const LS_KEY = 'customEditorCommand'
+const e = window.translate
+
+export default function EditWithCustomEditor ({ loading, editWithCustom }) {
+  const [editorCommand, setEditorCommand] = useState(
+    () => window.localStorage.getItem(LS_KEY) || ''
+  )
+
+  function handleChange (ev) {
+    const val = ev.target.value
+    setEditorCommand(val)
+    window.localStorage.setItem(LS_KEY, val)
+  }
+
+  function handleClick () {
+    const cmd = editorCommand.trim()
+    if (cmd) {
+      editWithCustom(cmd)
+    }
+  }
+
+  if (window.et.isWebApp) {
+    return null
+  }
+
+  return (
+    <Space.Compact className='mg1b'>
+      <Button
+        type='primary'
+        disabled={loading || !editorCommand.trim()}
+        onClick={handleClick}
+      >
+        {e('editWith')}
+      </Button>
+      <Input
+        value={editorCommand}
+        onChange={handleChange}
+        disabled={loading}
+      />
+    </Space.Compact>
+  )
+}

package/client/components/text-editor/simple-editor.jsx

@@ -18,6 +18,11 @@ export default function SimpleEditor (props) {
 
   // When currentMatch changes, highlight the match in textarea
   useEffect(() => {
+    // Only process navigation when explicitly triggered (not when text changes)
+    if (!isNavigating) {
+      return
+    }
+
     if (currentMatch >= 0 && occurrences.length > 0) {
       const match = occurrences[currentMatch]
       if (editorRef.current) {
@@ -26,10 +31,8 @@ export default function SimpleEditor (props) {
         // Set selection range to select the matched text
         textarea.setSelectionRange(match.start, match.end)
 
-        // Only focus the textarea when explicitly navigating between matches
-        if (isNavigating) {
-          textarea.focus()
-        }
+        // Focus the textarea when explicitly navigating between matches
+        textarea.focus()
 
         // Scroll to the selection position
         // Use setTimeout to ensure the selection is rendered before scrolling
@@ -53,10 +56,17 @@ export default function SimpleEditor (props) {
     setIsNavigating(false)
   }, [currentMatch, occurrences])
 
-  // Auto-search when keyword changes
+  // Auto-search when keyword changes (but not when text is being edited)
   useEffect(() => {
+    // Set navigating to true so first match is highlighted when searching
+    setIsNavigating(true)
     findMatches()
-  }, [searchKeyword, props.value])
+  }, [searchKeyword])
+
+  // Update matches when text changes, but don't change currentMatch position
+  useEffect(() => {
+    updateMatchesOnly()
+  }, [props.value])
 
   // Copy the editor content to clipboard
   const copyEditorContent = () => {
@@ -87,6 +97,28 @@ export default function SimpleEditor (props) {
     setCurrentMatch(matches.length ? 0 : -1)
   }
 
+  // Update matches only (without changing currentMatch position)
+  const updateMatchesOnly = () => {
+    if (!searchKeyword) {
+      setOccurrences([])
+      return
+    }
+
+    const matches = []
+    const text = props.value || ''
+    const escapedKeyword = escapeRegExp(searchKeyword)
+    const regex = new RegExp(escapedKeyword, 'gi')
+    let match
+
+    while ((match = regex.exec(text)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + searchKeyword.length
+      })
+    }
+    setOccurrences(matches)
+  }
+
   // Handle search action when user presses enter or clicks the search button
   const handleSearch = (e) => {
     if (e && e.stopPropagation) {

package/client/components/text-editor/text-editor-form.jsx

@@ -5,6 +5,7 @@
 import { useEffect } from 'react'
 import { Form, Button } from 'antd'
 import SimpleEditor from './simple-editor'
+import EditWithCustomEditor from './edit-with-custom-editor'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -38,7 +39,7 @@ export default function TextEditorForm (props) {
   } = props
   const popsEdit = {
     type: 'primary',
-    className: 'mg3r mg1b',
+    className: 'mg1r mg1b',
     disabled: loading,
     onClick: props.editWith
   }
@@ -62,10 +63,6 @@ export default function TextEditorForm (props) {
         <SimpleEditor />
       </FormItem>
       <div className='pd1t pd2b'>
-        <Button
-          {...popsEdit}
-        >{e('editWithSystemEditor')}
-        </Button>
         <Button
           type='primary'
           className='mg1r mg1b'
@@ -85,6 +82,17 @@ export default function TextEditorForm (props) {
         >{e('cancel')}
         </Button>
       </div>
+      <div className='pd1t pd2b'>
+        <Button
+          {...popsEdit}
+        >
+          {e('editWithSystemEditor')}
+        </Button>
+        <EditWithCustomEditor
+          loading={loading}
+          editWithCustom={props.editWithCustom}
+        />
+      </div>
     </Form>
   )
 }

package/client/components/text-editor/text-editor.jsx

@@ -118,6 +118,24 @@ export default class TextEditor extends PureComponent {
     fileRef.editWithSystemEditor(text)
   }
 
+  editWithCustom = async (editorCommand) => {
+    this.setStateProxy({
+      loading: true
+    })
+    const {
+      id, text
+    } = this.state
+    const fileRef = refs.get(id)
+    if (!fileRef) {
+      return
+    }
+    await fileRef.editWithCustomEditor(text, editorCommand)
+      .catch(err => {
+        this.setStateProxy({ loading: false })
+        window.store.onError(err)
+      })
+  }
+
   cancel = () => {
     this.setStateProxy({
       id: '',
@@ -150,7 +168,8 @@ export default class TextEditor extends PureComponent {
       submit: this.handleSubmit,
       text,
       cancel: this.cancel,
-      editWith: this.editWith
+      editWith: this.editWith,
+      editWithCustom: this.editWithCustom
     }
     return (
       <Modal

package/client/components/vnc/vnc-session.jsx

@@ -373,6 +373,9 @@ export default class VncSession extends PureComponent {
     }
     rfb.scaleViewport = scaleViewport
     rfb.clipViewport = clipViewport
+    rfb.qualityLevel = qualityLevel
+    rfb.compressionLevel = compressionLevel
+    rfb.viewOnly = viewOnly
     this.rfb = rfb
   }
 

package/client/components/vnc/vnc.styl

@@ -14,4 +14,4 @@
       height: 100% !important
       object-fit: contain
   > div
-    background: transparent !important 
+    background: transparent !important

package/client/store/bookmark.js

@@ -33,18 +33,10 @@ export default Store => {
       return {
         term: 'xterm-256color',
         id: uid(),
-        type: 'local',
-        title: 'ssh config: ' + t.title,
+        type: 'ssh',
         color: '#0088cc',
-        runScripts: [
-          {
-            script: `ssh ${t.title}`,
-            delay: 500
-          }
-        ]
+        ...t
       }
-    }).filter(d => {
-      return !store.bookmarks.find(t => t.title === d.title)
     })
     const ids = bookmarksToAdd.map(d => d.id)
     let sshConfigGroup = store.bookmarkGroups.find(d => d.id === 'sshConfig')
@@ -61,7 +53,7 @@ export default Store => {
           ...ids,
           ...(sshConfigGroup.bookmarkIds || [])
         ]
-      })
+      }, 'bookmarkGroups')
     }
     return store.addItems(bookmarksToAdd, 'bookmarks')
   }

package/client/store/common.js

@@ -345,13 +345,40 @@ export default Store => {
       return
     }
     const { terminalCommandHistory } = window.store
-    terminalCommandHistory.add(cmd)
+    const existing = terminalCommandHistory.get(cmd)
+    if (existing) {
+      // Use set() to trigger reactivity
+      terminalCommandHistory.set(cmd, {
+        count: existing.count + 1,
+        lastUseTime: new Date().toISOString()
+      })
+    } else {
+      terminalCommandHistory.set(cmd, {
+        count: 1,
+        lastUseTime: new Date().toISOString()
+      })
+    }
     if (terminalCommandHistory.size > 100) {
       // Delete oldest 20 items when history exceeds 100
-      const values = Array.from(terminalCommandHistory.values())
-      for (let i = 0; i < 20 && i < values.length; i++) {
-        terminalCommandHistory.delete(values[i])
+      const entries = Array.from(terminalCommandHistory.entries())
+      entries.sort((a, b) => new Date(a[1].lastUseTime).getTime() - new Date(b[1].lastUseTime).getTime())
+      for (let i = 0; i < 20 && i < entries.length; i++) {
+        terminalCommandHistory.delete(entries[i][0])
       }
     }
   })
+
+  Store.prototype.deleteCmdHistory = function (cmd) {
+    const { terminalCommandHistory } = window.store
+    terminalCommandHistory.delete(cmd)
+  }
+
+  Store.prototype.clearAllCmdHistory = function () {
+    window.store.terminalCommandHistory = new Map()
+  }
+
+  Store.prototype.runCmdFromHistory = function (cmd) {
+    window.store.runQuickCommand(cmd)
+    window.store.addCmdHistory(cmd)
+  }
 }

package/client/store/init-state.js

@@ -74,7 +74,32 @@ export default () => {
     addressBookmarksLocal: ls.getItemJSON(localAddrBookmarkLsKey, []),
     openResolutionEdit: false,
     resolutions: ls.getItemJSON(resolutionsLsKey, []),
-    terminalCommandHistory: new Set(ls.getItemJSON(cmdHistoryKey, [])),
+    // terminalCommandHistory: Map<cmdString, {count: Number, lastUseTime: DateString}>
+    // Load from localStorage and migrate from old format (Set of strings) if needed
+    terminalCommandHistory: (() => {
+      const savedData = ls.getItemJSON(cmdHistoryKey, [])
+      const map = new Map()
+      if (Array.isArray(savedData)) {
+        // Check if old format (array of strings) or new format (array of objects)
+        if (savedData.length > 0 && typeof savedData[0] === 'string') {
+          // Old format: migrate to new format
+          savedData.forEach(cmd => {
+            map.set(cmd, { count: 1, lastUseTime: new Date().toISOString() })
+          })
+        } else {
+          // New format: array of {cmd, count, lastUseTime}
+          savedData.forEach(item => {
+            if (item.cmd) {
+              map.set(item.cmd, {
+                count: item.count || 1,
+                lastUseTime: item.lastUseTime || new Date().toISOString()
+              })
+            }
+          })
+        }
+      }
+      return map
+    })(),
 
     // workspaces
     workspaces: [],

package/client/store/store.js

@@ -176,7 +176,7 @@ class Store {
 
   get terminalCommandSuggestions () {
     const { store } = window
-    const historyCommands = Array.from(store.terminalCommandHistory)
+    const historyCommands = Array.from(store.terminalCommandHistory.keys())
     const batchInputCommands = store.batchInputs
     const quickCommands = store.quickCommands.reduce(
       (p, q) => {

package/client/store/sync.js

@@ -35,9 +35,8 @@ async function fetchData (type, func, args, token, proxy) {
 }
 
 function updateSyncServerStatusFromGist (store, gist, type) {
-  const status = parseJsonSafe(
-    get(gist, 'files["electerm-status.json"].content')
-  )
+  const statusContent = get(gist, 'files["electerm-status.json"].content')
+  const status = statusContent ? parseJsonSafe(statusContent) : undefined
   store.syncServerStatus[type] = status
 }
 

package/client/store/watch.js

@@ -145,7 +145,14 @@ export default store => {
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON(cmdHistoryKey, Array.from(store.terminalCommandHistory))
+    const history = store.terminalCommandHistory
+    // Save in new format: array of {cmd, count, lastUseTime}
+    const data = Array.from(history.entries()).map(([cmd, info]) => ({
+      cmd,
+      count: info.count,
+      lastUseTime: info.lastUseTime
+    }))
+    ls.setItemJSON(cmdHistoryKey, data)
     return store.terminalCommandHistory
   }).start()
 

package/package.json

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

package/client/components/ssh-config/ssh-config-item.jsx

@@ -1,24 +0,0 @@
-import { Tooltip } from 'antd'
-
-export default function SshConfigItem (props) {
-  const { item } = props
-
-  const generateTooltipContent = (item) => {
-    return Object.entries(item)
-      .filter(([key]) => key !== 'id')
-      .map(([key, value]) => (
-        <div key={key}>
-          <b className='mg1r'>{key}:</b>
-          <span>{value}</span>
-        </div>
-      ))
-  }
-
-  return (
-    <Tooltip title={generateTooltipContent(item)}>
-      <div className='elli pd1y pd2x'>
-        ssh {item.title}
-      </div>
-    </Tooltip>
-  )
-}