@electerm/electerm-react 5.0.7 → 5.1.6

package/client/components/terminal/shortcut-bar-edit.jsx

@@ -0,0 +1,205 @@
+/**
+ * edit modal for the shortcut bar.
+ *
+ * - tap a candidate to append it to the active list (order = click order)
+ * - tap the × on an active item to remove it
+ * - build a custom button (label + literal text to send)
+ * - search filters the candidate library
+ *
+ * Rendered through a portal to document.body so it isn't trapped inside the
+ * bar's (z-index 400, 44px tall) stacking context — otherwise higher-z app
+ * layers would paint over it on mobile.
+ */
+
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Input } from 'antd'
+import {
+  CloseOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined
+} from '@ant-design/icons'
+import classnames from 'classnames'
+import Modal from '../common/modal'
+import { defaultActive } from './shortcut-bar-defs'
+
+const e = window.translate
+
+export default function ShortcutBarEdit (props) {
+  const {
+    active,
+    candidates: allCandidates,
+    isMobile,
+    onCancel,
+    onSave
+  } = props
+
+  const [draft, setDraft] = useState(() => active.map(b => ({ ...b })))
+  const [keyword, setKeyword] = useState('')
+  const [customLabel, setCustomLabel] = useState('')
+  const [customData, setCustomData] = useState('')
+
+  const activeIds = new Set(draft.map(b => b.id))
+
+  function handleAddCandidate (btn) {
+    if (activeIds.has(btn.id)) {
+      return
+    }
+    setDraft(prev => [...prev, { ...btn }])
+  }
+
+  function handleRemoveActive (id) {
+    setDraft(prev => prev.filter(b => b.id !== id))
+  }
+
+  function handleAddCustom () {
+    const label = customLabel.trim()
+    const data = customData
+    if (!label) {
+      return
+    }
+    const id = 'custom-' + label + '-' + Date.now()
+    setDraft(prev => [...prev, { id, label, data, custom: true }])
+    setCustomLabel('')
+    setCustomData('')
+  }
+
+  function handleReset () {
+    setDraft(defaultActive())
+  }
+
+  function handleSave () {
+    onSave(draft)
+  }
+
+  const kw = keyword.trim().toLowerCase()
+  const filtered = allCandidates.filter(b => {
+    if (!kw) {
+      return true
+    }
+    return b.label.toLowerCase().includes(kw) || b.id.includes(kw)
+  })
+
+  function renderActive (b) {
+    return (
+      <div
+        key={b.id}
+        className='shortcut-active-item'
+      >
+        <span className='shortcut-active-label'>{b.label}</span>
+        <button
+          type='button'
+          className='shortcut-active-remove'
+          onClick={() => handleRemoveActive(b.id)}
+        >
+          <CloseOutlined />
+        </button>
+      </div>
+    )
+  }
+
+  function renderCandidate (b) {
+    const added = activeIds.has(b.id)
+    return (
+      <button
+        type='button'
+        key={b.id}
+        className={classnames('shortcut-candidate-item', { added })}
+        onClick={() => handleAddCandidate(b)}
+      >
+        {b.label}
+      </button>
+    )
+  }
+
+  const footer = (
+    <div className='custom-modal-footer-buttons shortcut-edit-footer'>
+      <button
+        type='button'
+        className='custom-modal-cancel-btn'
+        onClick={handleReset}
+      >
+        <ReloadOutlined /> {e('reset')}
+      </button>
+      <button
+        type='button'
+        className='custom-modal-cancel-btn'
+        onClick={onCancel}
+      >
+        {e('cancel')}
+      </button>
+      <button
+        type='button'
+        className='custom-modal-ok-btn'
+        onClick={handleSave}
+      >
+        {e('save')}
+      </button>
+    </div>
+  )
+  const sst = e('keyboardShortcuts')
+  return createPortal(
+    <Modal
+      open
+      title={e('edit')}
+      onCancel={onCancel}
+      footer={footer}
+      width={560}
+      zIndex={1100}
+      wrapClassName={classnames('shortcut-edit-wrap', { 'is-mobile': isMobile })}
+    >
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-edit-section-title'>{sst}</div>
+        <div className='shortcut-active-list'>
+          {draft.length === 0 && (
+            <div className='shortcut-active-empty'>0 {sst}</div>
+          )}
+          {draft.map(renderActive)}
+        </div>
+      </div>
+
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-custom-form'>
+          <Input
+            prefix={<SearchOutlined />}
+            value={keyword}
+            onChange={ev => setKeyword(ev.target.value)}
+            placeholder={e('search')}
+            className='shortcut-search-input'
+            allowClear
+          />
+        </div>
+        <div className='shortcut-candidate-list'>
+          {filtered.map(renderCandidate)}
+        </div>
+      </div>
+
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-edit-section-title'>+ {sst}</div>
+        <div className='shortcut-custom-form'>
+          <Input
+            value={customLabel}
+            onChange={ev => setCustomLabel(ev.target.value)}
+            placeholder={e('label')}
+            className='shortcut-custom-input'
+          />
+          <Input
+            value={customData}
+            onChange={ev => setCustomData(ev.target.value)}
+            placeholder={e('edit')}
+            className='shortcut-custom-input'
+          />
+          <button
+            type='button'
+            className='custom-modal-ok-btn shortcut-custom-add'
+            onClick={handleAddCustom}
+          >
+            <PlusOutlined /> {e('add')}
+          </button>
+        </div>
+      </div>
+    </Modal>,
+    document.body
+  )
+}

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -0,0 +1,34 @@
+/**
+ * lazy entry for shortcut-bar.
+ *
+ * The bar only makes sense on touch devices (it exists to compensate for the
+ * lack of a physical keyboard when the system input panel is shown). On
+ * non-touch devices we render nothing AND never import the real component, so
+ * its code (and the antd/icon deps it pulls in) stays out of the main bundle.
+ */
+
+import { lazy, Suspense } from 'react'
+
+const ShortcutBar = lazy(() => import('./shortcut-bar'))
+
+export function isTouchDevice () {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return false
+  }
+  const coarse = typeof window.matchMedia === 'function' &&
+    window.matchMedia('(pointer: coarse)').matches
+  const hasTouch = (navigator.maxTouchPoints || 0) > 0 ||
+    ('ontouchstart' in window)
+  return Boolean(coarse || hasTouch)
+}
+
+export default function ShortcutBarEntry (props) {
+  if (!isTouchDevice()) {
+    return null
+  }
+  return (
+    <Suspense fallback={null}>
+      <ShortcutBar {...props} />
+    </Suspense>
+  )
+}

package/client/components/terminal/shortcut-bar.jsx

@@ -0,0 +1,150 @@
+/**
+ * shortcut-bar
+ *
+ * On touch devices, tapping a terminal pops the system input panel.
+ * Without a physical keyboard, modifier / function keys are hard to type, so
+ * this renders a slim, horizontally-scrollable bar pinned just outside the
+ * page content (its space is reserved by layout.jsx, so it never overlaps the
+ * terminal, footer or any other UI).
+ *
+ *   - first (fixed) button collapses the bar
+ *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
+ *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *
+ * Only loaded on touch devices — see shortcut-bar-entry.jsx.
+ * Data + persistence live in shortcut-bar-defs.js.
+ */
+
+import { auto } from 'manate/react'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { DownOutlined, EditOutlined } from '@ant-design/icons'
+import { refs } from '../common/ref'
+import { shortcutBarHeight } from '../../common/constants'
+import ShortcutBarEdit from './shortcut-bar-edit'
+import { candidates, loadActive, saveActive } from './shortcut-bar-defs'
+import './shortcut-bar.styl'
+
+const e = window.translate
+
+function sendToTerminal (data) {
+  const { store } = window
+  const term = refs.get('term-' + store.activeTabId)
+  if (term && typeof term.runQuickCommand === 'function') {
+    term.runQuickCommand(data, true)
+  }
+}
+
+function ShortcutBar (props) {
+  const { store } = props
+  const [buttons, setButtons] = useState(loadActive)
+  const [editing, setEditing] = useState(false)
+
+  // show the bar whenever a terminal becomes active / gets focused,
+  // hide it when the active tab is not a terminal.
+  useEffect(() => {
+    store.shortcutBarVisible = !!store.inActiveTerminal
+  }, [store.activeTabId, store.inActiveTerminal])
+
+  useEffect(() => {
+    function onTerminalFocus (ev) {
+      const el = ev.target
+      if (el && el.closest && el.closest('.term-wrap')) {
+        if (window.store.inActiveTerminal) {
+          window.store.shortcutBarVisible = true
+        }
+      }
+    }
+    document.addEventListener('focusin', onTerminalFocus)
+    document.addEventListener('pointerdown', onTerminalFocus)
+    return () => {
+      document.removeEventListener('focusin', onTerminalFocus)
+      document.removeEventListener('pointerdown', onTerminalFocus)
+    }
+  }, [])
+
+  // reserve layout space + lift the footer while the bar is shown.
+  // expose the bar height as a CSS var so the .styl + footer-lift rule stay
+  // in sync with the shortcutBarHeight constant consumed by layout.jsx.
+  useEffect(() => {
+    const on = !!store.shortcutBarVisible
+    document.body.classList.toggle('shortcut-bar-on', on)
+    if (on) {
+      document.documentElement.style.setProperty(
+        '--shortcut-bar-h',
+        shortcutBarHeight + 'px'
+      )
+    }
+    return () => {
+      document.body.classList.remove('shortcut-bar-on')
+      document.documentElement.style.removeProperty('--shortcut-bar-h')
+    }
+  }, [store.shortcutBarVisible])
+
+  function handleClose () {
+    store.shortcutBarVisible = false
+  }
+
+  function handleSave (next) {
+    setButtons(next)
+    saveActive(next)
+    setEditing(false)
+  }
+
+  function renderButton (b, i) {
+    return (
+      <button
+        type='button'
+        key={b.id + '-' + i}
+        className='shortcut-bar-btn'
+        onClick={() => sendToTerminal(b.data)}
+      >
+        {b.label}
+      </button>
+    )
+  }
+
+  if (!store.shortcutBarVisible) {
+    return null
+  }
+
+  return createPortal(
+    <div className='shortcut-bar' role='toolbar'>
+      <div className='shortcut-bar-fixed'>
+        <button
+          type='button'
+          className='shortcut-bar-icon-btn'
+          title={e('close')}
+          onClick={handleClose}
+        >
+          <DownOutlined />
+        </button>
+        <button
+          type='button'
+          className='shortcut-bar-icon-btn'
+          title={e('edit')}
+          onClick={() => setEditing(true)}
+        >
+          <EditOutlined />
+        </button>
+      </div>
+      <div className='shortcut-bar-scroll'>
+        {buttons.map(renderButton)}
+      </div>
+      {
+        editing && (
+          <ShortcutBarEdit
+            active={buttons}
+            candidates={candidates}
+            isMobile={store.isMobile}
+            onCancel={() => setEditing(false)}
+            onSave={handleSave}
+          />
+        )
+      }
+    </div>,
+    document.body
+  )
+}
+
+export default auto(ShortcutBar)

package/client/components/terminal/shortcut-bar.styl

@@ -0,0 +1,186 @@
+// shortcut-bar
+// sits in reserved space at the bottom of the viewport (see layout.jsx +
+// .shortcut-bar-on rule below). Height tracks --shortcut-bar-h which the
+// component sets from the shortcutBarHeight constant.
+
+.shortcut-bar
+  position fixed
+  left 0
+  right 0
+  bottom 0
+  height var(--shortcut-bar-h, 44px)
+  z-index 400
+  display flex
+  align-items stretch
+  background var(--main)
+  border-top 1px solid var(--main-lighter)
+  user-select none
+  -webkit-user-select none
+
+.shortcut-bar-fixed
+  display flex
+  align-items stretch
+  flex-shrink 0
+  border-right 1px solid var(--main-lighter)
+
+.shortcut-bar-icon-btn
+  width 44px
+  display flex
+  align-items center
+  justify-content center
+  background transparent
+  border none
+  color var(--text)
+  cursor pointer
+  font-size 16px
+  &:active
+    background var(--main-lighter)
+  &:hover
+    color var(--text-light)
+
+.shortcut-bar-scroll
+  flex 1
+  display flex
+  align-items center
+  gap 6px
+  padding 0 8px
+  overflow-x auto
+  overflow-y hidden
+  scrollbar-width none
+  -webkit-overflow-scrolling touch
+  &::-webkit-scrollbar
+    display none
+
+.shortcut-bar-btn
+  flex-shrink 0
+  height 32px
+  min-width 32px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main-light)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  white-space nowrap
+  &:active
+    background var(--primary)
+    color var(--primary-contrast)
+  &:hover
+    color var(--text-light)
+
+// while the bar is visible, lift the footer + reserve space so nothing is
+// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible)
+.shortcut-bar-on
+  .main-footer
+    bottom var(--shortcut-bar-h, 44px)
+
+// --- edit modal -----------------------------------------------------------
+
+.shortcut-edit-wrap
+  .custom-modal-content
+    max-width 92vw
+.shortcut-edit-section
+  margin-bottom 16px
+  &:last-child
+    margin-bottom 0
+.shortcut-edit-section-title
+  margin-bottom 8px
+  color var(--text)
+  font-weight bold
+  font-size 13px
+
+.shortcut-active-list
+  display flex
+  flex-wrap wrap
+  gap 6px
+  min-height 48px
+  padding 8px
+  border 1px dashed var(--main-lighter)
+  border-radius 6px
+  background var(--main-dark)
+.shortcut-active-empty
+  color var(--text-dark)
+  font-size 12px
+  width 100%
+  text-align center
+  line-height 32px
+
+.shortcut-active-item
+  display inline-flex
+  align-items center
+  gap 4px
+  height 30px
+  padding 0 4px 0 10px
+  border-radius 6px
+  background var(--main-light)
+  border 1px solid var(--main-lighter)
+  color var(--text)
+  font-size 13px
+.shortcut-active-label
+  white-space nowrap
+.shortcut-active-remove
+  display flex
+  align-items center
+  justify-content center
+  width 20px
+  height 20px
+  border none
+  background transparent
+  color var(--text-dark)
+  border-radius 4px
+  cursor pointer
+  font-size 11px
+  &:hover
+    color var(--error)
+    background var(--main-lighter)
+
+.shortcut-candidate-list
+  display flex
+  flex-wrap wrap
+  gap 6px
+  max-height 180px
+  overflow-y auto
+  padding 4px
+.shortcut-candidate-item
+  height 30px
+  min-width 34px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  &:active
+    background var(--main-lighter)
+  &:hover
+    color var(--text-light)
+  &.added
+    opacity 0.45
+    cursor default
+
+.shortcut-custom-form
+  display flex
+  gap 8px
+  align-items center
+  flex-wrap wrap
+.shortcut-search-input
+  flex 1
+  min-width 160px
+.shortcut-custom-input
+  flex 1
+  min-width 120px
+.shortcut-custom-add
+  height 32px
+  white-space nowrap
+
+.shortcut-edit-footer
+  justify-content space-between
+  width 100%

package/client/components/terminal/terminal-color-query.mjs

@@ -104,6 +104,53 @@ export function colorToOscRgb (color) {
   return `rgb:${rgb.map(toHexByte).join('/')}`
 }
 
+/**
+ * Blend a (possibly translucent) selection color over an opaque background,
+ * producing the colour in xterm's internal format ({ css, rgba } where
+ * rgba = r<<24 | g<<16 | b<<8 | a).
+ *
+ * xterm derives its DOM selection colour as blend(theme.background,
+ * selectionBackground). When the terminal background is forced transparent
+ * (DOM renderer keeps the real background behind via CSS), that blend runs
+ * over transparent-black and a light selection turns into dark gray. This
+ * helper recomputes it over the real visible background instead.
+ *
+ * `selectionColor` is an xterm color object ({ css, rgba }) e.g.
+ * colors.selectionBackgroundTransparent; `visibleBackground` is an opaque
+ * colour string.
+ */
+export function blendSelectionOverBackground (visibleBackground, selectionColor) {
+  const bgRgb = parseColorToRgb(visibleBackground)
+  const sel = selectionColor?.rgba
+  if (!bgRgb || typeof sel !== 'number') {
+    return null
+  }
+  const [br, bg, bb] = bgRgb
+  const a = (sel & 255) / 255
+  if (a <= 0) {
+    return null
+  }
+  const toCss = (r, g, b, alpha) =>
+    `#${[r, g, b, alpha].map(toHexByte).join('')}`
+  const sr = sel >> 24 & 255
+  const sg = sel >> 16 & 255
+  const sb = sel >> 8 & 255
+  if (a >= 1) {
+    return {
+      css: toCss(sr, sg, sb, 255),
+      rgba: ((sel & 0xffffff) | 0xff000000) >>> 0
+    }
+  }
+  const r = br + Math.round((sr - br) * a)
+  const g = bg + Math.round((sg - bg) * a)
+  const b = bb + Math.round((sb - bb) * a)
+  const alpha = Math.round(a * 255)
+  return {
+    css: toCss(r, g, b, alpha),
+    rgba: (r << 24 | g << 16 | b << 8 | alpha) >>> 0
+  }
+}
+
 export function buildOscColorResponse (identifier, color, fallbackColor) {
   const oscColor = colorToOscRgb(color) || colorToOscRgb(fallbackColor)
   return oscColor

package/client/components/terminal/terminal.jsx

@@ -71,7 +71,8 @@ import {
 } from './xterm-loader.js'
 import {
   createRendererThemeConfig,
-  handleTerminalColorQuery
+  handleTerminalColorQuery,
+  blendSelectionOverBackground
 } from './terminal-color-query.mjs'
 
 const e = window.translate
@@ -1456,6 +1457,7 @@ class Term extends Component {
       return
     }
     term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+    this.fixSelectionColors(term)
     term.refresh(0, term.rows - 1)
     if (deferred && this.props.config.rendererType === rendererTypes.webGL) {
       window.cancelAnimationFrame(this.timers.themeRaf)
@@ -1464,11 +1466,46 @@ class Term extends Component {
           return
         }
         this.term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+        this.fixSelectionColors(this.term)
         this.term.refresh(0, this.term.rows - 1)
       })
     }
   }
 
+  /**
+   * xterm computes its DOM selection colour as blend(theme.background,
+   * selectionBackground). The DOM renderer keeps the terminal background
+   * transparent (rgba(0,0,0,0)) so electerm's own CSS background / image
+   * shows through, which makes a light selection blend over transparent-black
+   * and render as dark gray. Recompute the selection over the real visible
+   * background so terminal:selectionBackground=rgba(...) is applied as the
+   * configured semi-transparent colour.
+   */
+  fixSelectionColors = (term) => {
+    const themeService = term?._core?._themeService
+    if (!themeService?.modifyColors) {
+      return
+    }
+    const visibleBackground = this.getVisibleTerminalBackground()
+    const colors = themeService.colors
+    themeService.modifyColors((c) => {
+      const active = blendSelectionOverBackground(
+        visibleBackground,
+        colors.selectionBackgroundTransparent
+      )
+      if (active) {
+        c.selectionBackgroundOpaque = active
+      }
+      const inactive = blendSelectionOverBackground(
+        visibleBackground,
+        colors.selectionInactiveBackgroundTransparent
+      )
+      if (inactive) {
+        c.selectionInactiveBackgroundOpaque = inactive
+      }
+    })
+  }
+
   initTerminal = async () => {
     const { themeConfig, tab = {}, config = {} } = this.props
     const tc = this.getRendererThemeConfig(themeConfig)
@@ -1492,6 +1529,7 @@ class Term extends Component {
     term.open(this.domRef.current, true)
     this.registerTerminalColorQueryHandlers(term, themeConfig)
     await this.loadRenderer(term, config)
+    this.fixSelectionColors(term)
     // Re-apply the theme after the renderer is loaded. The Terminal was
     // constructed before UiTheme's useEffect ran, so the initial theme
     // may have a stale background. Pass `term` directly because this.term