@electerm/electerm-react 1.72.48 → 1.80.2

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

@@ -0,0 +1,164 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Input, Button, Flex } from 'antd'
+import {
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  SearchOutlined,
+  CopyOutlined
+} from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+export default function SimpleEditor (props) {
+  const [searchKeyword, setSearchKeyword] = useState('')
+  const [occurrences, setOccurrences] = useState([])
+  const [currentMatch, setCurrentMatch] = useState(-1)
+  const [isNavigating, setIsNavigating] = useState(false)
+  const editorRef = useRef(null)
+
+  // When currentMatch changes, highlight the match in textarea
+  useEffect(() => {
+    if (currentMatch >= 0 && occurrences.length > 0) {
+      const match = occurrences[currentMatch]
+      if (editorRef.current) {
+        // Set selection range to select the matched text
+        editorRef.current.resizableTextArea.textArea.setSelectionRange(match.start, match.end)
+
+        // Only focus the textarea when explicitly navigating between matches
+        if (isNavigating) {
+          editorRef.current.resizableTextArea.textArea.focus()
+        }
+
+        // Scroll to the selection position
+        const textarea = editorRef.current.resizableTextArea.textArea
+        const textBeforeSelection = props.value.substring(0, match.start)
+        const lineBreaks = textBeforeSelection.split('\n').length - 1
+
+        // Estimate the scroll position
+        const lineHeight = 20 // Approximate line height in pixels
+        const scrollPosition = lineHeight * lineBreaks
+
+        textarea.scrollTop = Math.max(0, scrollPosition - textarea.clientHeight / 2)
+      }
+    }
+    // Reset navigating flag after using it
+    setIsNavigating(false)
+  }, [currentMatch, occurrences])
+  // Copy the editor content to clipboard
+  const copyEditorContent = () => {
+    copy(props.value || '')
+  }
+
+  // Find all matches of the search keyword in text
+  const findMatches = () => {
+    if (!searchKeyword) {
+      setOccurrences([])
+      setCurrentMatch(-1)
+      return
+    }
+
+    const matches = []
+    const text = props.value || ''
+    const regex = new RegExp(searchKeyword, 'gi')
+    let match
+
+    while ((match = regex.exec(text)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + searchKeyword.length
+      })
+    }
+    setOccurrences(matches)
+    setCurrentMatch(matches.length ? 0 : -1)
+  }
+
+  // Handle search action when user presses enter or clicks the search button
+  const handleSearch = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    findMatches()
+  }
+
+  // Navigate to next match
+  const goToNextMatch = () => {
+    setIsNavigating(true)
+    if (currentMatch < occurrences.length - 1) {
+      setCurrentMatch(currentMatch + 1)
+    } else {
+      setCurrentMatch(0) // Loop back to first match
+    }
+  }
+
+  // Navigate to previous match
+  const goToPrevMatch = () => {
+    setIsNavigating(true)
+    if (currentMatch > 0) {
+      setCurrentMatch(currentMatch - 1)
+    } else {
+      setCurrentMatch(occurrences.length - 1) // Loop to last match
+    }
+  }
+
+  // Render navigation buttons for search results
+  const renderNavigationButtons = () => {
+    if (occurrences.length === 0) {
+      return null
+    }
+    return (
+      <>
+        <Button onClick={goToPrevMatch}>
+          <ArrowUpOutlined />
+        </Button>
+        <Button onClick={goToNextMatch}>
+          <ArrowDownOutlined />
+        </Button>
+      </>
+    )
+  }
+
+  // Render search results counter
+  const renderSearchCounter = () => {
+    return occurrences.length
+      ? `${currentMatch + 1}/${occurrences.length}`
+      : '0/0'
+  }
+
+  function renderAfter () {
+    return (
+      <>
+        <b className='pd1x'>{renderSearchCounter()}</b>
+        {renderNavigationButtons()}
+      </>
+    )
+  }
+
+  return (
+    <div>
+      <Flex className='mg1b' justify='space-between'>
+        <Input.Search
+          value={searchKeyword}
+          onChange={e => setSearchKeyword(e.target.value)}
+          placeholder='Search in text...'
+          allowClear
+          enterButton={<SearchOutlined />}
+          onSearch={handleSearch}
+          onPressEnter={handleSearch}
+          addonAfter={renderAfter()}
+          style={{ width: 'auto' }}
+        />
+        <Button
+          onClick={copyEditorContent}
+          className='mg3l'
+        >
+          <CopyOutlined />
+        </Button>
+      </Flex>
+      <Input.TextArea
+        ref={editorRef}
+        value={props.value}
+        onChange={props.onChange}
+        rows={20}
+      />
+    </div>
+
+  )
+}

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

@@ -3,7 +3,8 @@
  */
 
 import { useEffect } from 'react'
-import { Input, Form, Button } from 'antd'
+import { Form, Button } from 'antd'
+import SimpleEditor from './simple-editor'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -23,9 +24,9 @@ export default function TextEditorForm (props) {
     props.submit(res)
   }
 
-  function onPressEnter (e) {
-    e.stopPropagation()
-  }
+  // function onPressEnter (e) {
+  //   e.stopPropagation()
+  // }
 
   function reset () {
     form.resetFields()
@@ -58,11 +59,7 @@ export default function TextEditorForm (props) {
       <FormItem
         name='text'
       >
-        <Input.TextArea
-          rows={20}
-          onPressEnter={onPressEnter}
-        >{text}
-        </Input.TextArea>
+        <SimpleEditor />
       </FormItem>
       <div className='pd1t pd2b'>
         <Button

package/client/css/includes/box.styl

@@ -1,10 +1,10 @@
 
 for $i, $index in 5 16 32
-  
+
   //padding
   .pd{$index+1}
     padding ($i)px
-    
+
   .pd{$index+1}x
     padding-left ($i)px
     padding-right ($i)px

package/client/store/tab.js

@@ -467,7 +467,11 @@ export default Store => {
       'status',
       'pane',
       'batch',
-      'tabCount'
+      'tabCount',
+      'sftpCreated',
+      'sshSftpSplitView',
+      'sshTunnelResults',
+      'displayRaw'
     ]
     const { history } = store
     const index = history.findIndex(d => {

package/client/store/transfer-list.js

@@ -1,6 +1,9 @@
 /**
  * file transfer list related functions
  */
+
+import uid from '../common/uid'
+
 const { assign } = Object
 
 export default Store => {
@@ -18,17 +21,13 @@ export default Store => {
   }
 
   Store.prototype.addTransferList = function (items) {
+    // console.log('addTransferList', JSON.stringify(items, null, 2))
     const { fileTransfers } = window.store
-    fileTransfers.push(...items)
-  }
-
-  Store.prototype.toggleTransfer = function (itemId) {
-    const { fileTransfers } = window.store
-    const index = fileTransfers.findIndex(t => t.id === itemId)
-    if (index < 0) {
-      return
-    }
-    fileTransfers[index].pausing = !fileTransfers[index].pausing
+    const transferBatch = uid()
+    fileTransfers.push(...items.map(t => {
+      t.transferBatch = transferBatch
+      return t
+    }))
   }
 
   Store.prototype.pauseAll = function () {
@@ -50,46 +49,6 @@ export default Store => {
   }
 
   Store.prototype.cancelAll = function () {
-    const { fileTransfers } = window.store
-    const len = fileTransfers.length
-    for (let i = len - 1; i >= 0; i--) {
-      fileTransfers[i].cancel = true
-      fileTransfers.splice(i, 1)
-    }
-  }
-
-  Store.prototype.cancelTransfer = function (itemId) {
-    const { fileTransfers } = window.store
-    const index = fileTransfers.findIndex(t => t.id === itemId)
-    if (index < 0) {
-      return
-    }
-    fileTransfers[index].cancel = true
-    fileTransfers.splice(index, 1)
-  }
-
-  Store.prototype.skipAllTransfersSinceIndex = function (index) {
-    window.store.fileTransfers.splice(index)
-  }
-
-  Store.prototype.updateTransfersFromIndex = function (index, update) {
-    const { fileTransfers } = window.store
-    if (index < 0 || index >= fileTransfers.length) {
-      return
-    }
-    const len = fileTransfers.length
-    for (let i = index; i < len; i++) {
-      assign(fileTransfers[i], update)
-    }
-  }
-
-  // Add a new method to find index by ID and then update
-  Store.prototype.updateTransfersFromId = function (id, update) {
-    const { fileTransfers } = window.store
-    const index = fileTransfers.findIndex(t => t.id === id)
-    if (index < 0) {
-      return
-    }
-    window.store.updateTransfersFromIndex(index, update)
+    window.store.fileTransfers = []
   }
 }

package/package.json

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

package/client/components/main/css-overwrite.jsx

@@ -1,91 +0,0 @@
-/**
- * btns
- */
-
-import { PureComponent } from 'react'
-import fs from '../../common/fs'
-import { noTerminalBgValue } from '../../common/constants'
-
-export default class CssOverwrite extends PureComponent {
-  // componentDidMount () {
-  //   setTimeout(this.writeCss, 3000)
-  // }
-
-  componentDidUpdate (prevProps) {
-    Object.keys(this.props).some(key => {
-      if (key.startsWith('terminalBackground') && prevProps[key] !== this.props[key]) {
-        this.updateCss()
-        return true
-      }
-      return false
-    })
-    if (!prevProps.wsInited && this.props.wsInited) {
-      this.writeCss()
-    }
-  }
-
-  createStyle = async () => {
-    const { terminalBackgroundImagePath } = this.props
-    let content = ''
-    let st = ''
-    const isWebImg = /^https?:\/\//.test(terminalBackgroundImagePath)
-    if (noTerminalBgValue === terminalBackgroundImagePath) {
-      st = 'none'
-    } else if (terminalBackgroundImagePath && !isWebImg) {
-      content = await fs.readFileAsBase64(terminalBackgroundImagePath)
-        .catch(log.error)
-      if (content) {
-        st = `url(data:image;base64,${content}) !important`
-      }
-    } else if (terminalBackgroundImagePath && isWebImg) {
-      st = `url(${terminalBackgroundImagePath}) !important`
-    }
-    if (!st) {
-      return `#container .session-batch-active .xterm-screen::before {
-        background-image: url("./images/electerm-watermark.png");
-      }`
-    }
-
-    const styles = [
-      `background-image: ${st}`,
-      'background-position: center'
-    ]
-
-    if (st !== 'none') {
-      styles.push(`filter: blur(${
-        this.props.terminalBackgroundFilterBlur
-      }px) opacity(${
-        +this.props.terminalBackgroundFilterOpacity
-      }) brightness(${
-        +this.props.terminalBackgroundFilterBrightness
-      }) contrast(${
-        +this.props.terminalBackgroundFilterContrast
-      }) grayscale(${
-        +this.props.terminalBackgroundFilterGrayscale
-      })`)
-    }
-
-    return `#container .session-batch-active .xterm-screen::before {
-      ${styles.join(';')} 
-    }`
-  }
-
-  writeCss = async () => {
-    const style = document.createElement('style')
-    style.type = 'text/css'
-    style.innerHTML = await this.createStyle()
-    style.id = 'css-overwrite'
-    document.getElementsByTagName('head')[0].appendChild(style)
-  }
-
-  updateCss = async () => {
-    const style = document.getElementById('css-overwrite')
-    if (style) {
-      style.innerHTML = await this.createStyle()
-    }
-  }
-
-  render () {
-    return null
-  }
-}

package/client/components/sftp/transfer-conflict-store.jsx

@@ -1,284 +0,0 @@
-/**
- * pass transfer list from props
- * when list changes, do transfer and other op
- */
-
-import { PureComponent } from 'react'
-import { typeMap } from '../../common/constants'
-import {
-  getLocalFileInfo,
-  getRemoteFileInfo,
-  getFolderFromFilePath,
-  getFileExt,
-  checkFolderSize
-} from './file-read'
-import { refsStatic, refs } from '../common/ref'
-import generate from '../../common/uid'
-import resolve from '../../common/resolve'
-import deepCopy from 'json-deep-copy'
-
-const { assign } = Object
-
-export default class TransferConflictStore extends PureComponent {
-  state = {
-    currentId: ''
-  }
-
-  componentDidMount () {
-    this.id = 'transfer-conflict'
-    refsStatic.add(this.id, this)
-    this.watchFile()
-  }
-
-  componentDidUpdate (prevProps) {
-    if (
-      prevProps.fileTransferChanged !== this.props.fileTransferChanged
-    ) {
-      this.watchFile()
-    }
-  }
-
-  localCheckExist = (path) => {
-    return getLocalFileInfo(path).catch(console.log)
-  }
-
-  remoteCheckExist = (path, sessionId) => {
-    const sftp = refs.get('sftp-' + sessionId).sftp
-    return getRemoteFileInfo(sftp, path)
-      .then(r => r)
-      .catch(() => false)
-  }
-
-  checkExist = (type, path, sessionId) => {
-    return this[type + 'CheckExist'](path, sessionId)
-  }
-
-  rename = (tr, action, _renameId) => {
-    const isRemote = tr.typeTo === typeMap.remote
-    const { path, name } = getFolderFromFilePath(tr.toPath, isRemote)
-    const { base, ext } = getFileExt(name)
-    const renameId = _renameId || generate()
-    const newName = ext
-      ? `${base}(rename-${renameId}).${ext}`
-      : `${base}(rename-${renameId})`
-    assign(tr, {
-      renameId,
-      newName,
-      oldName: base,
-      toPath: resolve(path, newName)
-    })
-    if (action) {
-      tr.action = action
-    }
-    return tr
-  }
-
-  updateTransferAction = (data) => {
-    const {
-      id,
-      action,
-      transfer
-    } = data
-    const {
-      fromFile
-    } = transfer
-    this.clear()
-
-    const { store } = window
-    const { fileTransfers } = store
-    const index = fileTransfers.findIndex(d => d.id === id)
-    if (index < 0) {
-      return
-    }
-    const tr = fileTransfers[index]
-    tr.fromFile = deepCopy(fromFile)
-    tr.action = action
-    tr.r = Math.random()
-    if (action === 'skip') {
-      return fileTransfers.splice(index, 1)
-    } else if (action === 'cancel') {
-      return store.skipAllTransfersSinceIndex(index)
-    }
-    if (action.includes('All')) {
-      return store.updateTransfersFromIndex(index, {
-        action: action.replace('All', '')
-      })
-    }
-    if (action.includes('rename')) {
-      return this.rename(tr)
-    }
-  }
-
-  tagTransferError = (id, errorMsg) => {
-    this.clear()
-    const { store } = window
-    const { fileTransfers } = store
-    const index = fileTransfers.findIndex(d => d.id === id)
-    if (index < 0) {
-      return
-    }
-
-    const [tr] = fileTransfers.splice(index, 1)
-    assign(tr, {
-      host: tr.host,
-      error: errorMsg,
-      finishTime: Date.now()
-    })
-    store.addTransferHistory(tr)
-  }
-
-  setConflict (tr) {
-    if (this.props.transferToConfirm.id) {
-      return
-    }
-    window.store.transferToConfirm = tr
-  }
-
-  onDecision = (data) => {
-    if (
-      data.id === this.currentId
-    ) {
-      this.currentId = ''
-      this.updateTransferAction(data)
-      this.onConfirm = false
-      window.removeEventListener('message', this.onDecision)
-    }
-  }
-
-  updateData = () => {
-    const {
-      store
-    } = window
-    const {
-      fileTransfers
-    } = store
-    if (fileTransfers.length > 0) {
-      fileTransfers[0].r = Math.random()
-    }
-  }
-
-  setCanTransfer = (fromFile, tr) => {
-    this.clear()
-    const {
-      store
-    } = window
-    const {
-      fileTransfers
-    } = store
-    const index = fileTransfers.findIndex(t => {
-      return t.id === tr.id
-    })
-    if (index < 0) {
-      setTimeout(this.updateData, 0)
-      return
-    }
-    const up = {
-      action: 'transfer',
-      fromFile
-    }
-    assign(fileTransfers[index], up)
-    // may have issue
-  }
-
-  clear = () => {
-    this.currentId = ''
-  }
-
-  watchFile = async () => {
-    const { store } = window
-    const {
-      fileTransfers
-    } = store
-    if (!fileTransfers.length) {
-      return this.clear()
-    }
-    const tr = fileTransfers
-      .find(t => {
-        return (
-          !t.action ||
-          !t.fromFile ||
-          t.fromFile.isDirectory
-        )
-      })
-    if (!tr) {
-      this.onConfirm = false
-      return this.clear()
-    }
-    if (this.currentId) {
-      return
-    }
-    this.currentId = tr.id
-    const {
-      typeFrom,
-      typeTo,
-      fromPath,
-      toPath,
-      id,
-      action,
-      renameId,
-      parentId,
-      skipConfirm,
-      sessionId
-    } = tr
-    const fromFile = tr.fromFile
-      ? tr.fromFile
-      : await this.checkExist(typeFrom, fromPath, sessionId)
-    if (!fromFile) {
-      return this.tagTransferError(id, 'file not exist')
-    }
-    let toFile = false
-    if (renameId || parentId) {
-      toFile = false
-    } else if (fromPath === toPath && typeFrom === typeTo) {
-      toFile = true
-    } else {
-      toFile = await this.checkExist(typeTo, toPath, sessionId)
-    }
-    if (fromFile.isDirectory && typeFrom !== typeTo) {
-      const props = {
-        sftp: refs.get('sftp-' + sessionId).sftp
-      }
-      const skip = await checkFolderSize(props, fromFile)
-        .then(d => d && typeFrom !== typeTo)
-      if (!skip) {
-        return this.tagTransferError(id, 'folder too big or too many files in folder')
-      }
-      tr.zip = true
-      tr.skipExpand = true
-    }
-    if (fromPath === toPath && typeFrom === typeTo) {
-      assign(tr, {
-        operation: 'cp',
-        fromFile
-      })
-      return this.updateTransferAction({
-        id,
-        action: 'rename',
-        transfer: tr
-      })
-    } else if (toFile && !action && !skipConfirm) {
-      if (!this.onConfirm) {
-        this.onConfirm = true
-        assign(tr, {
-          fromFile,
-          toFile
-        })
-        return this.setConflict(tr)
-      }
-    } else if (toFile && !tr.fromFile && action) {
-      assign(tr, {
-        fromFile
-      })
-      return this.updateTransferAction({
-        id,
-        action,
-        transfer: tr
-      })
-    }
-    this.setCanTransfer(fromFile, tr)
-  }
-
-  render () {
-    return null
-  }
-}