@electerm/electerm-react 5.5.6 → 5.5.9

package/client/common/default-setting.js

@@ -95,6 +95,7 @@ export default {
   switchTabOnHover: false,
   disableTabIndex: false,
   disableShortcutBar: false,
+  disableConfirmForLargeClipboardContent: false,
   leftSideBarIcons: [
     'newBookmark',
     'quickConnect',

package/client/components/footer/cmd-history.jsx

@@ -3,13 +3,24 @@
  */
 
 import { useState, useEffect } from 'react'
-import { Button, Empty, Popover } from 'antd'
+import { Button, Empty, Popover, Dropdown } from 'antd'
 import { auto } from 'manate/react'
 import SwitchLabel from '../common/switch'
 import { copy } from '../../common/clipboard'
-import { HistoryOutlined, DeleteOutlined, CopyOutlined, UnorderedListOutlined } from '@ant-design/icons'
+import {
+  HistoryOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  UnorderedListOutlined,
+  MoreOutlined,
+  PlusOutlined,
+  CodeOutlined
+} from '@ant-design/icons'
 import InputAutoFocus from '../common/input-auto-focus'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+import QuickCommandCreateModal from '../quick-commands/quick-command-create-modal'
+import MultiTabRunModal from './multi-tab-run-modal'
+import classNames from 'classnames'
 import './cmd-history.styl'
 
 const e = window.translate
@@ -20,6 +31,10 @@ export default auto(function CmdHistory (props) {
   const [sortByFrequency, setSortByFrequency] = useState(() => {
     return getItemJSON(SORT_BY_FREQ_KEY, false)
   })
+  // cmd of the item whose action menu is open / being acted on
+  const [menuOpenCmd, setMenuOpenCmd] = useState('')
+  const [quickCommandCmd, setQuickCommandCmd] = useState('')
+  const [multiTabCmd, setMultiTabCmd] = useState('')
   const { terminalCommandHistory } = props.store
 
   useEffect(() => {
@@ -30,11 +45,6 @@ export default auto(function CmdHistory (props) {
     window.store.runCmdFromHistory(cmd)
   }
 
-  function handleDeleteCommand (cmd, ev) {
-    ev.stopPropagation()
-    window.store.deleteCmdHistory(cmd)
-  }
-
   function handleCopyCommand (cmd, ev) {
     ev.stopPropagation()
     copy(cmd)
@@ -44,6 +54,46 @@ export default auto(function CmdHistory (props) {
     window.store.clearAllCmdHistory()
   }
 
+  function handleMenuAction (key, cmd) {
+    if (key === 'delete') {
+      window.store.deleteCmdHistory(cmd)
+    } else if (key === 'quickCommand') {
+      setQuickCommandCmd(cmd)
+    } else if (key === 'multiTab') {
+      window.store.filterBatchInputSelectedTabIds()
+      setMultiTabCmd(cmd)
+    }
+  }
+
+  function getMenuProps (cmd) {
+    return {
+      items: [
+        {
+          key: 'delete',
+          icon: <DeleteOutlined />,
+          label: e('del'),
+          danger: true
+        },
+        {
+          key: 'quickCommand',
+          icon: <PlusOutlined />,
+          label: e('addQuickCommands')
+        },
+        {
+          key: 'multiTab',
+          icon: <CodeOutlined />,
+          label: e('runInAllTerminals')
+        }
+      ],
+      onClick: ({ key, domEvent }) => {
+        // the menu renders in a portal but React events still bubble through
+        // the row, which would run the command
+        domEvent.stopPropagation()
+        handleMenuAction(key, cmd)
+      }
+    }
+  }
+
   function filterArray (array, keyword) {
     if (!keyword) {
       return array
@@ -76,34 +126,46 @@ export default auto(function CmdHistory (props) {
         />
       )
     }
-    return filtered.map((item, index) => (
-      <div
-        key={index}
-        className='cmd-history-item'
-        onClick={() => handleRunCommand(item.cmd)}
-      >
-        <span className='cmd-history-item-text' title={item.cmd}>{item.cmd}</span>
-        <div className='cmd-history-item-actions'>
-          <span className='cmd-history-item-count' title={e('count') + ': ' + item.count}>
-            {item.count}
-          </span>
-          <Button
-            type='text'
-            size='small'
-            icon={<CopyOutlined />}
-            className='cmd-history-item-copy'
-            onClick={(ev) => handleCopyCommand(item.cmd, ev)}
-          />
-          <Button
-            type='text'
-            size='small'
-            icon={<DeleteOutlined />}
-            className='cmd-history-item-delete'
-            onClick={(ev) => handleDeleteCommand(item.cmd, ev)}
-          />
+    return filtered.map((item, index) => {
+      const cls = classNames(
+        'cmd-history-item',
+        { 'menu-open': menuOpenCmd === item.cmd }
+      )
+      return (
+        <div
+          key={index}
+          className={cls}
+          onClick={() => handleRunCommand(item.cmd)}
+        >
+          <span className='cmd-history-item-text' title={item.cmd}>{item.cmd}</span>
+          <div className='cmd-history-item-actions'>
+            <span className='cmd-history-item-count' title={e('count') + ': ' + item.count}>
+              {item.count}
+            </span>
+            <Button
+              type='text'
+              size='small'
+              icon={<CopyOutlined />}
+              className='cmd-history-item-copy'
+              onClick={(ev) => handleCopyCommand(item.cmd, ev)}
+            />
+            <Dropdown
+              menu={getMenuProps(item.cmd)}
+              trigger={['click']}
+              onOpenChange={(open) => setMenuOpenCmd(open ? item.cmd : '')}
+            >
+              <Button
+                type='text'
+                size='small'
+                icon={<MoreOutlined />}
+                className='cmd-history-item-more'
+                onClick={(ev) => ev.stopPropagation()}
+              />
+            </Dropdown>
+          </div>
         </div>
-      </div>
-    ))
+      )
+    })
   }
 
   function renderHeader () {
@@ -148,16 +210,41 @@ export default auto(function CmdHistory (props) {
   )
 
   return (
-    <Popover
-      content={content}
-      trigger='click'
-      placement='topLeft'
-    >
-      <Button
-        size='small'
-        type='text'
-        icon={<HistoryOutlined />}
-      />
-    </Popover>
+    <>
+      <Popover
+        content={content}
+        trigger='click'
+        placement='topLeft'
+      >
+        <Button
+          size='small'
+          type='text'
+          icon={<HistoryOutlined />}
+        />
+      </Popover>
+      {
+        quickCommandCmd
+          ? (
+            <QuickCommandCreateModal
+              key={quickCommandCmd}
+              store={props.store}
+              command={quickCommandCmd}
+              onClose={() => setQuickCommandCmd('')}
+            />
+            )
+          : null
+      }
+      {
+        multiTabCmd
+          ? (
+            <MultiTabRunModal
+              store={props.store}
+              cmd={multiTabCmd}
+              onClose={() => setMultiTabCmd('')}
+            />
+            )
+          : null
+      }
+    </>
   )
 })

package/client/components/footer/cmd-history.styl

@@ -4,7 +4,6 @@
   overflow hidden
   display flex
   flex-direction column
-
 .cmd-history-search
   flex-shrink 0
   position sticky
@@ -46,6 +45,13 @@
   cursor pointer
   &:hover
     background var(--main-lighter)
+  // keep the row actions visible while its action menu is open, otherwise the
+  // menu trigger would be hidden (display none) and the popup would lose its
+  // anchor when the mouse moves onto the menu
+  &.menu-open
+    background var(--main-lighter)
+    .cmd-history-item-actions
+      display flex
 
 .cmd-history-item-text
   overflow hidden
@@ -68,14 +74,46 @@
   .cmd-history-item:hover &
     display flex
 
-.cmd-history-item-delete
+.cmd-history-item-more
   cursor pointer
   padding 2px 4px
-  &:hover
-    color red
 
 .cmd-history-item-copy
   cursor pointer
   padding 2px 4px
   &:hover
     color blue
+
+.multi-tab-run-cmd
+  font-size 12px
+  padding 6px 8px
+  margin-bottom 10px
+  border-radius 4px
+  background var(--main-lighter)
+  word-break break-all
+  max-height 96px
+  overflow-y auto
+
+// Narrow screens: the popup is aligned to the history trigger (placement
+// topLeft) and is 324px wide, while the footer trigger sits within the first
+// ~96px of the screen (43px icon bar + footer margin + the icons before it), so
+// below ~420px the popup's right edge would fall outside the window. antd's
+// auto-shift does not correct it, so pin the popup to the viewport instead.
+// Matched by its content: the popup lives in a body-level portal, so neither
+// the component tree nor an antd popup class reaches it reliably.
+@media (max-width: 420px)
+  .ant-popover:has(.cmd-history-popover-content)
+    // rc-trigger writes `inset: auto auto 40px <trigger left>px` inline
+    left 0px !important
+    // pinned to the viewport, the arrow no longer points at the trigger
+    .ant-popover-arrow
+      display none
+  .cmd-history-popover-content
+    // popup = content + 24px container padding; keep 8px on both sides
+    width 100%
+
+// Touch devices have no hover, so the row actions (count / copy / ⋯ menu)
+// would never be reachable — feature-detect instead of sniffing the UA
+@media (pointer: coarse)
+  .cmd-history-item-actions
+    display flex

package/client/components/footer/multi-tab-run-modal.jsx

@@ -0,0 +1,83 @@
+/**
+ * Run one command (usually picked from the command history) in several
+ * terminals at once.
+ *
+ * Reuses the footer batch input tab panel (`TabSelectList`) for picking the
+ * target terminals, and the same selection state + `batchInput` terminal API
+ * the footer batch input uses, so both entry points stay consistent.
+ */
+
+import { auto } from 'manate/react'
+import {
+  Button,
+  Modal
+} from 'antd'
+import { TabSelectList } from './tab-select'
+import { refs } from '../common/ref'
+import {
+  terminalWebType,
+  terminalRdpType,
+  terminalVncType
+} from '../../common/constants'
+
+const e = window.translate
+
+export default auto(function MultiTabRunModal (props) {
+  const { store, cmd, onClose } = props
+  const selectedTabIds = store.batchInputSelectedTabIds
+  const tabs = store.tabs.filter(tab => {
+    return tab.type !== terminalWebType &&
+      tab.type !== terminalRdpType &&
+      tab.type !== terminalVncType
+  }).sort((a, b) => {
+    // current tab goes first
+    if (a.id === store.activeTabId) return -1
+    if (b.id === store.activeTabId) return 1
+    return 0
+  })
+  const listProps = {
+    tabs,
+    activeTabId: store.activeTabId,
+    selectedTabIds,
+    onSelect: store.onSelectBatchInputSelectedTabId,
+    onSelectAll: store.selectAllBatchInputTabs,
+    onSelectNone: store.selectNoneBatchInputTabs
+  }
+  function handleRun () {
+    selectedTabIds.map(id => {
+      return refs.get('term-' + id)
+    }).forEach(term => {
+      term?.batchInput(cmd)
+    })
+    store.addCmdHistory(cmd)
+    onClose()
+  }
+  return (
+    <Modal
+      open
+      title={e('runInAllTerminals')}
+      onCancel={onClose}
+      destroyOnHidden
+      width={520}
+      footer={[
+        <Button
+          key='cancel'
+          onClick={onClose}
+        >
+          {e('cancel')}
+        </Button>,
+        <Button
+          key='run'
+          type='primary'
+          disabled={!selectedTabIds.length}
+          onClick={handleRun}
+        >
+          {e('ok')}
+        </Button>
+      ]}
+    >
+      <div className='multi-tab-run-cmd'>{cmd}</div>
+      <TabSelectList {...listProps} />
+    </Modal>
+  )
+})

package/client/components/footer/tab-select.jsx

@@ -6,15 +6,28 @@ import {
   CodeOutlined
 } from '@ant-design/icons'
 
-export default function TabSelect (props) {
-  const { selectedTabIds, tabs, activeTabId } = props
+/**
+ * The multi terminal selection panel: select-all/none plus one toggle button
+ * per terminal tab.
+ * Extracted so it can be reused outside the batch input popover (e.g. run a
+ * command from the history panel in several terminals at once).
+ */
+export function TabSelectList (props) {
+  const {
+    selectedTabIds = [],
+    tabs = [],
+    activeTabId,
+    onSelect,
+    onSelectAll,
+    onSelectNone
+  } = props
   function renderTabs () {
     return tabs.map(tab => {
       const selected = selectedTabIds.includes(tab.id)
       const itemProps = {
         tab,
         selected,
-        onSelect: window.store.onSelectBatchInputSelectedTabId,
+        onSelect,
         id: tab.id,
         isCurrent: tab.id === activeTabId
       }
@@ -26,12 +39,6 @@ export default function TabSelect (props) {
       )
     })
   }
-  function onSelectAll () {
-    window.store.selectAllBatchInputTabs()
-  }
-  function onSelectNone () {
-    window.store.selectNoneBatchInputTabs()
-  }
   function renderBtns () {
     return (
       <div className='pd1t pd2b font12'>
@@ -50,17 +57,27 @@ export default function TabSelect (props) {
       </div>
     )
   }
-  function renderContent () {
-    return (
-      <div className='pd1x alignright'>
-        {renderBtns()}
-        {renderTabs()}
-      </div>
-    )
+  return (
+    <div className='pd1x alignright'>
+      {renderBtns()}
+      {renderTabs()}
+    </div>
+  )
+}
+
+export default function TabSelect (props) {
+  const { selectedTabIds, tabs, activeTabId } = props
+  const listProps = {
+    selectedTabIds,
+    tabs,
+    activeTabId,
+    onSelect: window.store.onSelectBatchInputSelectedTabId,
+    onSelectAll: window.store.selectAllBatchInputTabs,
+    onSelectNone: window.store.selectNoneBatchInputTabs
   }
   return (
     <Popover
-      content={renderContent()}
+      content={<TabSelectList {...listProps} />}
       trigger='click'
     >
       <span className='pointer iblock pd1x'>

package/client/components/quick-commands/quick-command-create-modal.jsx

@@ -0,0 +1,60 @@
+/**
+ * Create a quick command from outside the settings panel (e.g. from the
+ * command history action menu), reusing the very same form the settings panel
+ * uses — no fork of the form, so fields/validation stay in sync.
+ *
+ * The form is heavy (form, shortcuts editor, templates), and it otherwise only
+ * lives inside the lazily loaded quick commands setting tab, so lazy load it
+ * here as well.
+ */
+
+import { lazy, Suspense } from 'react'
+import {
+  Modal,
+  Spin
+} from 'antd'
+import LazyBoundary from '../common/lazy-boundary'
+import generate from '../../common/uid'
+
+const QuickCommandForm = lazy(() => import('./quick-commands-form'))
+
+const e = window.translate
+
+export default function QuickCommandCreateModal (props) {
+  const { store, command, onClose } = props
+  const formData = {
+    id: '',
+    name: e('newQuickCommand'),
+    commands: [{
+      command,
+      id: generate(),
+      delay: 100
+    }]
+  }
+  return (
+    <Modal
+      open
+      title={e('addQuickCommands')}
+      onCancel={onClose}
+      destroyOnHidden
+      footer={null}
+      width={560}
+    >
+      <LazyBoundary>
+        <Suspense
+          fallback={(
+            <div className='pd3 aligncenter'>
+              <Spin />
+            </div>
+          )}
+        >
+          <QuickCommandForm
+            store={store}
+            formData={formData}
+            onSaved={onClose}
+          />
+        </Suspense>
+      </LazyBoundary>
+    </Modal>
+  )
+}

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -73,12 +73,18 @@ export default function QuickCommandForm (props) {
       store.editQuickCommand(formData.id, update)
     } else {
       store.addQuickCommand(update1)
-      store.setSettingItem({
-        id: '',
-        name: e('newQuickCommand')
-      })
+      // resetting the settings panel form only makes sense there; when the
+      // form is hosted elsewhere (e.g. the command history modal) the caller
+      // decides what happens next
+      if (!props.onSaved) {
+        store.setSettingItem({
+          id: '',
+          name: e('newQuickCommand')
+        })
+      }
     }
     message.success(e('saved'))
+    props.onSaved?.()
   }
   const initialValues = formData
   if (!initialValues.labels) {

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

@@ -571,6 +571,7 @@ export default class SettingTerminal extends Component {
             'rightClickSelectsWord',
             'pasteWhenContextMenu',
             'copyWhenSelect',
+            'disableConfirmForLargeClipboardContent',
             'ctrlOrMetaOpenTerminalLink',
             'sftpPathFollowSsh',
             'sshSftpSplitView',

package/client/components/sftp/sftp-entry.jsx

@@ -104,8 +104,12 @@ export default class Sftp extends Component {
     refs.remove(this.id)
     this.sftp && this.sftp.destroy()
     this.sftp = null
+    clearTimeout(this.timer)
+    this.timer = null
     clearTimeout(this.timer4)
     this.timer4 = null
+    clearTimeout(this.retryHandler)
+    this.retryHandler = null
     // Clear sort cache to prevent memory leaks
     this._sortCache?.clear()
     this._lastSortArgs = null

package/client/components/sidebar/side-panel.jsx

@@ -19,7 +19,7 @@ export default function SidePanel (props) {
     }
   }, [props.leftSidePanelWidth, props.leftSideBarWidth])
   const dragProps = {
-    min: 343,
+    min: 200,
     max: 600,
     width: props.leftSidePanelWidth,
     onDragEnd,

package/client/components/terminal/mixins/term-content.js

@@ -84,5 +84,43 @@ export const contentMixin = {
       const ts = `[${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}] `
       return ts + text
     }).join('\n')
+  },
+
+  /**
+   * The whole buffer as clean plain text, for the touch select-text overlay.
+   *
+   * Differs from getTerminalBufferText() on purpose: that one is for log files
+   * and keeps xterm's fixed-width padding (`translateToString(false)`), which
+   * would trail a screen-full of spaces into a textarea and make every line
+   * look wrapped. Here each row is right-trimmed, rows xterm reports as
+   * `isWrapped` are glued back so a line the shell printed as one line is
+   * copied as one line, and the blank rows scrollback starts out with are
+   * dropped so the panel opens on real output.
+   */
+  getSelectableBufferText () {
+    const buffer = this.term.buffer.active
+    const len = buffer.length
+    const lines = []
+    for (let i = 0; i < len; i++) {
+      const line = buffer.getLine(i)
+      if (!line) {
+        continue
+      }
+      const text = line.translateToString(true)
+      if (line.isWrapped && lines.length) {
+        lines[lines.length - 1] += text
+      } else {
+        lines.push(text)
+      }
+    }
+    let start = 0
+    let end = lines.length
+    while (start < end && !lines[start].trim()) {
+      start++
+    }
+    while (end > start && !lines[end - 1].trim()) {
+      end--
+    }
+    return lines.slice(start, end).join('\n')
   }
 }