@electerm/electerm-react 3.10.0 → 3.11.11

package/client/components/bookmark-form/config/serial.js

@@ -1,5 +1,5 @@
 import { formItemLayout } from '../../../common/form-layout.js'
-import { terminalSerialType, commonBaudRates, commonDataBits, commonStopBits, commonParities } from '../../../common/constants.js'
+import { terminalSerialType, commonBaudRates, commonDataBits, commonStopBits, commonParities, commonLineEndings } from '../../../common/constants.js'
 import defaultSettings from '../../../common/default-setting.js'
 import { createBaseInitValues, getTerminalBackgroundDefaults } from '../common/init-values.js'
 import { commonFields } from './common-fields.js'
@@ -57,6 +57,7 @@ const serialConfig = {
         { type: 'switch', name: 'xon', label: 'xon', valuePropName: 'checked' },
         { type: 'switch', name: 'xoff', label: 'xoff', valuePropName: 'checked' },
         { type: 'switch', name: 'xany', label: 'xany', valuePropName: 'checked' },
+        { type: 'select', name: 'lineEnding', label: 'lineEnding', options: commonLineEndings.map(d => ({ value: d.value, label: d.label })) },
         commonFields.runScripts,
         commonFields.description,
         { type: 'input', name: 'type', label: 'type', hidden: true }

package/client/components/common/font-select.jsx

@@ -0,0 +1,45 @@
+import React, { useMemo, useCallback } from 'react'
+import { Select } from 'antd'
+
+const e = window.translate
+
+export default function FontSelect ({
+  value,
+  onChange,
+  placeholder,
+  style
+}) {
+  const { fonts = [] } = window.et || {}
+
+  const options = useMemo(() => {
+    return fonts.map(f => ({
+      value: f,
+      label: (
+        <span
+          className='iblock'
+          style={{ fontFamily: f }}
+        >
+          {f}
+        </span>
+      )
+    }))
+  }, [fonts])
+
+  const handleChange = useCallback((vals) => {
+    onChange(vals)
+  }, [onChange])
+
+  return (
+    <Select
+      mode='tags'
+      value={value}
+      onChange={handleChange}
+      className='width-100'
+      placeholder={placeholder || e('selectFontFamily')}
+      showSearch
+      options={options}
+      filterOption={(input, option) =>
+        (option?.value ?? '').toLowerCase().includes(input.toLowerCase())}
+    />
+  )
+}

package/client/components/main/main.jsx

@@ -4,7 +4,7 @@ import Layout from '../layout/layout'
 import FileInfoModal from '../sftp/file-info-modal'
 import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
-import TextEditor from '../text-editor/text-editor'
+import TextEditor from '../text-editor/text-editor-entry'
 import Sidebar from '../sidebar'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
@@ -19,7 +19,6 @@ import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
-import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
 import InfoModal from '../sidebar/info-modal.jsx'
@@ -27,7 +26,7 @@ import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
-import AIChat from '../ai/ai-chat'
+import AIChat from '../ai/ai-chat-entry'
 import AIConfigModal from '../ai/ai-config-modal'
 import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
@@ -40,6 +39,7 @@ import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
+import TerminalInfo from '../terminal-info/terminal-info-entry'
 import './term-fullscreen.styl'
 
 export default auto(function Index (props) {

package/client/components/rdp/file-transfer.js

@@ -273,6 +273,9 @@ export class FileTransferManager {
       })
 
       this.log(`Downloaded ${fileInfo.name} (${filesize(fileInfo._totalSize)}) to ${fullPath}`, 'success')
+      this.hasRemoteFiles = false
+      this.pendingDownloads.clear()
+      this.notifyStateChange()
       if (this.onDownloadComplete) {
         this.onDownloadComplete(fullPath, fileInfo.name, fileInfo._totalSize)
       }

package/client/components/session/session.jsx

@@ -35,7 +35,7 @@ import {
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
-import safeName from '../../common/safe-name'
+import sanitizeFilename from '../../common/sanitize-filename.js'
 import { HeartbeatIcon } from '../icons/heartbeat'
 import './session.styl'
 
@@ -343,7 +343,7 @@ export default class SessionWrapper extends Component {
       height
     } = this.calcTermWidthHeight()
     const themeConfig = copy(window.store.getThemeConfig())
-    const logName = safeName(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${tab.id}`)
+    const logName = sanitizeFilename(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${tab.id}`)
     const pops = {
       ...this.props,
       sftpPathFollowSsh,

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

@@ -28,6 +28,7 @@ import { chooseSaveDirectory } from '../../common/choose-save-folder'
 import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
 import Link from '../common/external-link'
+import FontSelect from '../common/font-select'
 import HelpIcon from '../common/help-icon'
 import KeywordsTransport from './keywords-transport'
 import fs from '../../common/fs'
@@ -427,36 +428,13 @@ export default class SettingTerminal extends Component {
   }
 
   renderFontFamily = () => {
-    const { fonts = [] } = window.et
     const { fontFamily } = this.props.config
-    const props = {
-      mode: 'multiple',
-      onChange: this.handleChangeFont,
-      value: fontFamily.split(/, */g).filter(d => d.trim()),
-      style: { width: '100%' }
-    }
     return (
-      <Select
-        {...props}
-        showSearch
-      >
-        {
-          fonts.map(f => {
-            return (
-              <Option value={f} key={f}>
-                <span
-                  className='font-option'
-                  style={{
-                    fontFamily: f
-                  }}
-                >
-                  {f}
-                </span>
-              </Option>
-            )
-          })
-        }
-      </Select>
+      <FontSelect
+        onChange={this.handleChangeFont}
+        value={fontFamily.split(/, */g).filter(d => d.trim())}
+        style={{ width: '100%' }}
+      />
     )
   }
 

package/client/components/setting-panel/text-bg-modal.jsx

@@ -3,11 +3,11 @@ import {
   Input,
   InputNumber,
   Space,
-  Select,
   Button,
   Modal
 } from 'antd'
 import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
+import FontSelect from '../common/font-select'
 
 const { TextArea } = Input
 const e = window.translate
@@ -24,16 +24,16 @@ export default function TextBgModal ({
   const [text, setText] = useState(initialText)
   const [fontSize, setFontSize] = useState(initialSize)
   const [color, setColor] = useState(initialColor)
-  const [fontFamily, setFontFamily] = useState(initialFontFamily)
-
-  const { fonts = [] } = window.et || {}
+  const [fontFamily, setFontFamily] = useState(
+    initialFontFamily.split(/, */g).filter(d => d.trim())
+  )
 
   const handleOk = () => {
     onOk({
       text,
       fontSize,
       color,
-      fontFamily
+      fontFamily: fontFamily.join(', ')
     })
   }
 
@@ -43,7 +43,7 @@ export default function TextBgModal ({
     setText(initialText)
     setFontSize(initialSize)
     setColor(initialColor)
-    setFontFamily(initialFontFamily)
+    setFontFamily(initialFontFamily.split(/, */g).filter(d => d.trim()))
   }
 
   const footer = (
@@ -108,30 +108,11 @@ export default function TextBgModal ({
 
           <div>
             <b>{e('fontFamily')}</b>
-            <Select
+            <FontSelect
               value={fontFamily}
               onChange={setFontFamily}
-              style={{ width: '100%' }}
               placeholder={e('selectFontFamily')}
-              showSearch
-            >
-              {
-                fonts.map(f => {
-                  return (
-                    <Select.Option value={f} key={f}>
-                      <span
-                        className='font-option'
-                        style={{
-                          fontFamily: f
-                        }}
-                      >
-                        {f}
-                      </span>
-                    </Select.Option>
-                  )
-                })
-              }
-            </Select>
+            />
           </div>
         </Space>
       </div>

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

@@ -309,7 +309,7 @@ export default function SyncForm (props) {
     )
   }
   function createPasswordItem () {
-    if (syncType === syncTypes.cloud || syncType === syncTypes.webdav) {
+    if (syncType === syncTypes.cloud) {
       return null
     }
     return (

package/client/components/sftp/file-item.jsx

@@ -36,6 +36,7 @@ import time from '../../common/time'
 import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
+import sanitizeFilename from '../../common/sanitize-filename'
 import { refsStatic, refs, filesRef } from '../common/ref'
 import iconsMap from '../sys-menu/icons-map'
 
@@ -174,7 +175,7 @@ export default class FileSection extends React.Component {
         ? item.replace(/^remote:/, '')
         : item
       const { name } = getFolderFromFilePath(fromPath, isRemote)
-      const toPath = resolve(path, name)
+      const toPath = resolve(path, sanitizeFilename(name))
       res.push({
         typeFrom: isRemote ? typeMap.remote : typeMap.local,
         typeTo: type,
@@ -326,7 +327,7 @@ export default class FileSection extends React.Component {
         toFile = {
           ...toFile,
           ...getFolderFromFilePath(
-            resolve(toFile.path, toFile.name)
+            resolve(toFile.path, sanitizeFilename(toFile.name))
           ),
           id: undefined
         }
@@ -367,7 +368,7 @@ export default class FileSection extends React.Component {
     return this.doTransferSelected(
       null,
       files,
-      resolve(toFile.path, toFile.name),
+      resolve(toFile.path, sanitizeFilename(toFile.name)),
       toFile.type,
       operation
     )
@@ -784,7 +785,7 @@ export default class FileSection extends React.Component {
     if (toPathBase) {
       toPath = toPathBase
     }
-    toPath = resolve(toPath, name)
+    toPath = resolve(toPath, sanitizeFilename(name))
     const obj = {
       host: this.props.tab?.host,
       tabType: this.props.tab?.type,

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

@@ -54,6 +54,9 @@ export function handleTerminalSelectionReplace (event, ctx) {
   const isPrintable = key && key.length === 1
   if (!isBackspace && !isDelete && !isPrintable) return false
 
+  const info = getSelectionReplaceInfo(ctx.term)
+  if (!info) return false
+
   if (event && event.preventDefault) {
     event.preventDefault()
   }
@@ -61,9 +64,6 @@ export function handleTerminalSelectionReplace (event, ctx) {
     event.stopPropagation()
   }
 
-  const info = getSelectionReplaceInfo(ctx.term)
-  if (!info) return false
-
   const { startX, endX, cursorX } = info
   const move = startX - cursorX
   if (move > 0) {
@@ -146,6 +146,12 @@ export function shortcutExtend (Cls) {
     if (isInAntdInput()) {
       return
     }
+    // During IME composition, let xterm handle the event through its
+    // CompositionHelper. Intercepting here breaks composition (e.g. first
+    // char lost, closing bracket duplicated when typing Chinese inside brackets).
+    if (event.isComposing) {
+      return
+    }
     if (handleTerminalSelectionReplace(event, this)) {
       return false
     }
@@ -156,12 +162,6 @@ 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/terminal/terminal-error-handle.jsx

@@ -33,7 +33,7 @@ export default memo(function TerminalErrorHandle ({
   return (
     <Alert
       className='terminal-error-handle'
-      message={errorMessage}
+      title={errorMessage}
       type='error'
       showIcon
       banner

package/client/components/terminal/terminal-interactive-ui.jsx

@@ -0,0 +1,157 @@
+/**
+ * terminal interactive UI - renders a single interactive event modal
+ */
+
+import { Form, Button } from 'antd'
+import Modal from '../common/modal'
+import InputAutoFocus from '../common/input-auto-focus'
+
+const e = window.translate
+const FormItem = Form.Item
+
+export default function TermInteractiveUI ({
+  opts,
+  onSend,
+  onClose
+}) {
+  const [form] = Form.useForm()
+
+  function onCancel () {
+    onSend({
+      id: opts.id,
+      results: []
+    })
+    onClose()
+  }
+  function onOk () {
+    form.submit()
+  }
+  function onConfirm () {
+    onSend({
+      id: opts.id,
+      results: [opts.options.confirmResult || 'yes']
+    })
+    onClose()
+  }
+  function onIgnore () {
+    onSend({
+      id: opts.id,
+      results: Object.keys(opts.options.prompts).map(() => '')
+    })
+    onClose()
+  }
+  function onFinish (res) {
+    onSend({
+      id: opts.id,
+      results: Object.values(res)
+    })
+    onClose()
+  }
+  function renderFormItem (pro, i) {
+    const {
+      prompt,
+      echo
+    } = pro
+    const note = (opts.options.instructions || [])[i]
+    const type = echo
+      ? 'input'
+      : 'password'
+    return (
+      <FormItem
+        key={prompt + i}
+        label={prompt}
+        rules={[{
+          required: true, message: 'required'
+        }]}
+      >
+        <div>
+          <pre>{note}</pre>
+        </div>
+        <FormItem noStyle name={'item' + i}>
+          <InputAutoFocus
+            type={type}
+            placeholder={note}
+          />
+        </FormItem>
+      </FormItem>
+    )
+  }
+  function renderConfirmBody () {
+    const instructions = opts.options.instructions || []
+    return (
+      <div>
+        {
+          instructions.map((note, index) => {
+            return <pre key={note + index}>{note}</pre>
+          })
+        }
+        <FormItem>
+          <Button
+            type='primary'
+            onClick={onConfirm}
+          >
+            {opts.options.submitText || e('submit')}
+          </Button>
+          <Button
+            className='mg1l'
+            onClick={onCancel}
+          >
+            {opts.options.cancelText || e('cancel')}
+          </Button>
+        </FormItem>
+      </div>
+    )
+  }
+  const props = {
+    maskClosable: false,
+    okText: e('submit'),
+    onCancel,
+    onOk,
+    closable: false,
+    open: true,
+    title: opts.options?.name || '?',
+    footer: null
+  }
+  return (
+    <Modal
+      {...props}
+    >
+      {
+        opts.options?.mode === 'confirm'
+          ? renderConfirmBody()
+          : (
+            <Form
+              form={form}
+              layout='vertical'
+              onFinish={onFinish}
+            >
+              {
+                opts.options.prompts.map(renderFormItem)
+              }
+              <FormItem>
+                <Button
+                  type='primary'
+                  htmlType='submit'
+                >
+                  {e('submit')}
+                </Button>
+                <Button
+                  type='dashed'
+                  className='mg1l'
+                  onClick={onIgnore}
+                >
+                  {e('ignore')}
+                </Button>
+                <Button
+                  className='mg1l'
+                  onClick={onCancel}
+                >
+                  {e('cancel')}
+                </Button>
+              </FormItem>
+            </Form>
+            )
+      }
+    </Modal>
+  )
+}