@electerm/electerm-react 2.3.6 → 2.3.18

package/client/common/constants.js

@@ -177,7 +177,7 @@ export const defaultTheme = {
     brightCyan: '#BCAAFE',
     brightWhite: '#E6E6E6'
   },
-  uiThemeConfig: getUiThemeConfig(window.et.stylus)
+  uiThemeConfig: getUiThemeConfig()
 }
 
 export const commonBaudRates = [

package/client/common/ui-theme.js

@@ -2,19 +2,32 @@
  * ui theme related
  */
 
-export function getUiThemeConfig (stylus) {
-  const reg = /[^\n]+ = [^\n]+\n/g
-  const arr = stylus.match(reg)
-  const sep = ' = '
-  return arr.reduce((p, x) => {
-    if (!x.includes(sep)) {
-      return p
-    }
-    const [k, v] = x.split(sep)
-    return {
-      ...p,
-      [k.trim()]: v.trim()
+const defaultUiThemeStylus = `
+  --main #141314
+  --main-dark #000
+  --main-light #2E3338
+  --text #ddd
+  --text-light #fff
+  --text-dark #888
+  --text-disabled #777
+  --primary #08c
+  --info #FFD166
+  --success #06D6A0
+  --error #EF476F
+  --warn #E55934
+`
+
+export function getUiThemeConfig (conf = defaultUiThemeStylus) {
+  const lines = conf.split('\n').filter(line => line.trim())
+  return lines.reduce((p, line) => {
+    const [k, v] = line.trim().replace('--', '').split(' ')
+    if (k && v) {
+      return {
+        ...p,
+        [k]: v
+      }
     }
+    return p
   }, {})
 }
 

package/client/components/ai/ai.styl

@@ -1,9 +1,7 @@
-@require '../../css/includes/theme-default'
 .ai-chat-container
   height 100%
   display flex
   flex-direction column
-  color text
 
 .ai-chat-history
   flex-grow 1
@@ -17,7 +15,7 @@
 
 .chat-history-item
   .code-block
-    border 1px dashed text
+    border 1px dashed var(--main-darker)
     padding 5px
     border-radius 3px
     pre

package/client/components/bg/custom-css.jsx

@@ -14,8 +14,8 @@ export default function CustomCss (props) {
   const delta = useDelta(customCss)
 
   async function applyTheme () {
-    const stylus = document.getElementById(themeDomId)
-    stylus.innerHTML = customCss
+    const style = document.getElementById(themeDomId)
+    style.innerHTML = customCss
   }
 
   useEffect(() => {

package/client/components/common/highlight.styl

@@ -1,3 +1,2 @@
-@require '../../css/includes/theme-default'
 .highlight
-  color error
+  color var(--error)

package/client/components/common/input-context-menu.jsx

@@ -0,0 +1,294 @@
+/**
+ * Standalone Input/TextArea Context Menu Module
+ * Automatically adds context menus to all input/textarea elements without code modification
+ * Just import this module and render <InputContextMenu /> in your React app to activate
+ */
+
+import React, { useState, useEffect, useRef } from 'react'
+import { Dropdown } from 'antd'
+import iconsMap from '../sys-menu/icons-map.jsx'
+import { copy, readClipboard, readClipboardAsync } from '../../common/clipboard.js'
+
+const e = window.translate
+
+/**
+ * Check if element is input or textarea
+ */
+function isInputElement (element) {
+  if (!element) return false
+  const tagName = element.tagName.toLowerCase()
+  return tagName === 'input' || tagName === 'textarea'
+}
+
+/**
+ * Get input element state
+ */
+function getInputState (element) {
+  if (!isInputElement(element)) return null
+
+  const hasText = element.value && element.value.length > 0
+  const hasSelection = element.selectionStart !== element.selectionEnd
+  const isReadOnly = element.readOnly || element.disabled
+
+  let hasClipboard = false
+  try {
+    const content = readClipboard()
+    hasClipboard = content && content.length > 0
+  } catch (error) {
+    hasClipboard = false
+  }
+
+  return {
+    hasText,
+    hasSelection,
+    hasClipboard,
+    isReadOnly
+  }
+}
+
+/**
+ * Handle copy operation
+ */
+function handleCopy (element) {
+  if (!isInputElement(element)) return
+
+  const selectedText = element.value.substring(element.selectionStart, element.selectionEnd)
+  if (selectedText) {
+    copy(selectedText)
+  }
+}
+
+/**
+ * Handle paste operation
+ */
+async function handlePaste (element) {
+  if (!isInputElement(element) || element.readOnly || element.disabled) return
+
+  element.focus()
+  const clipboardText = await readClipboardAsync()
+
+  if (clipboardText) {
+    insertTextAtCursor(element, clipboardText)
+  }
+}
+
+/**
+ * Insert text at cursor position in input/textarea
+ */
+function insertTextAtCursor (element, text) {
+  if (!isInputElement(element)) return
+
+  element.focus()
+
+  // Try modern approach first - using execCommand
+  if (document.execCommand && document.queryCommandSupported('insertText')) {
+    try {
+      element.setSelectionRange(element.selectionStart, element.selectionEnd)
+      const success = document.execCommand('insertText', false, text)
+      if (success) {
+        triggerInputEvents(element)
+      }
+    } catch (error) {
+      console.log('execCommand insertText failed:', error)
+    }
+  }
+}
+
+/**
+ * Trigger input events for React and other frameworks
+ */
+function triggerInputEvents (element) {
+  const inputEvent = new Event('input', { bubbles: true, cancelable: true })
+  element.dispatchEvent(inputEvent)
+
+  const changeEvent = new Event('change', { bubbles: true, cancelable: true })
+  element.dispatchEvent(changeEvent)
+
+  // Handle React's internal event handlers
+  const reactHandlers = Object.keys(element).find(key => key.startsWith('__reactProps') || key.startsWith('__reactEventHandlers'))
+  if (reactHandlers) {
+    const handler = element[reactHandlers]
+    if (handler?.onChange) {
+      handler.onChange({ target: element, currentTarget: element })
+    }
+  }
+}
+
+/**
+ * Handle cut operation
+ */
+function handleCut (element) {
+  if (!isInputElement(element) || element.readOnly || element.disabled) return
+
+  const { selectionStart, selectionEnd } = element
+  const selectedText = element.value.substring(selectionStart, selectionEnd)
+
+  if (selectedText) {
+    element.focus()
+    element.setSelectionRange(selectionStart, selectionEnd)
+
+    // Try using execCommand for cut
+    if (document.execCommand && document.queryCommandSupported('cut')) {
+      try {
+        const success = document.execCommand('cut')
+        if (success) {
+          triggerInputEvents(element)
+        }
+      } catch (error) {
+        console.log('execCommand cut failed:', error)
+      }
+    }
+  }
+}
+
+/**
+ * Handle select all operation
+ */
+function handleSelectAll (element) {
+  if (!isInputElement(element)) return
+  element.select()
+  element.focus()
+}
+
+/**
+ * Create context menu items based on input state
+ */
+function createContextMenuItems (element) {
+  const state = getInputState(element)
+  if (!state) return []
+
+  const { hasText, hasSelection, hasClipboard, isReadOnly } = state
+
+  return [
+    {
+      key: 'copy',
+      icon: 'CopyOutlined',
+      label: e('copy'),
+      disabled: !hasSelection
+    },
+    {
+      key: 'cut',
+      icon: 'FileExcelOutlined',
+      label: e('cut'),
+      disabled: !hasSelection || isReadOnly
+    },
+    {
+      key: 'paste',
+      icon: 'SwitcherOutlined',
+      label: e('paste'),
+      disabled: !hasClipboard || isReadOnly
+    },
+    {
+      key: 'selectAll',
+      icon: 'CheckSquareOutlined',
+      label: e('selectall'),
+      disabled: !hasText
+    }
+  ]
+}
+
+/**
+ * React Component for Input Context Menu
+ * Mount this component in your app to enable context menus on all input/textarea elements
+ */
+const InputContextMenu = () => {
+  const [visible, setVisible] = useState(false)
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  const [targetElement, setTargetElement] = useState(null)
+  const menuRef = useRef(null)
+
+  const handleMenuClick = async ({ key }) => {
+    // Keep reference to current element before closing menu
+    const currentElement = targetElement
+    // Close menu first
+    setVisible(false)
+    setTargetElement(null)
+    // Execute action with preserved element reference
+    if (currentElement) {
+      setTimeout(async () => {
+        try {
+          switch (key) {
+            case 'copy':
+              handleCopy(currentElement)
+              break
+            case 'cut':
+              handleCut(currentElement)
+              break
+            case 'paste':
+              await handlePaste(currentElement)
+              break
+            case 'selectAll':
+              handleSelectAll(currentElement)
+              break
+            default:
+              console.warn('Unknown menu action:', key)
+          }
+        } catch (error) {
+          console.error('Menu action failed:', error)
+        }
+      }, 10) // Small delay to ensure menu is closed
+    }
+  }
+
+  useEffect(() => {
+    const handleContextMenu = (event) => {
+      const target = event.target
+      if (isInputElement(target)) {
+        event.preventDefault()
+        event.stopPropagation()
+        setPosition({ x: event.clientX, y: event.clientY })
+        setTargetElement(target)
+        setVisible(true)
+      } else {
+        setVisible(false)
+        setTargetElement(null)
+      }
+    }
+
+    const handleClick = (event) => {
+      if (visible && menuRef.current && !menuRef.current.contains(event.target)) {
+        setVisible(false)
+        setTargetElement(null)
+      }
+    }
+
+    document.addEventListener('contextmenu', handleContextMenu, true)
+    document.addEventListener('click', handleClick, true)
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu, true)
+      document.removeEventListener('click', handleClick, true)
+    }
+  }, [visible])
+  const items = createContextMenuItems(targetElement) || []
+  const menuItems = items.map(item => {
+    const IconComponent = item.icon && iconsMap[item.icon]
+    return {
+      ...item,
+      icon: IconComponent ? <IconComponent /> : null
+    }
+  })
+  return (
+    <div
+      ref={menuRef}
+      style={{
+        position: 'fixed',
+        left: position.x,
+        top: position.y,
+        zIndex: 9999
+      }}
+    >
+      <Dropdown
+        menu={{
+          items: menuItems,
+          onClick: handleMenuClick
+        }}
+        open={visible}
+        placement='bottomLeft'
+      >
+        <div style={{ width: 1, height: 1 }} />
+      </Dropdown>
+    </div>
+  )
+}
+
+export default InputContextMenu

package/client/components/file-transfer/transfer.styl

@@ -1,11 +1,10 @@
-@require '../../css/includes/theme-default'
 .transports-wrap
   position absolute
   left 60px
   top 3px
   right 60px
   height 36px
-  color text
+
 .transports-circle-wrap
   text-align center
   position relative
@@ -16,7 +15,7 @@
   right 0
   overflow-y scroll
   z-index 11
-  background main
+  background var(--main)
 
 .transports-wrap
   .transports-dd
@@ -25,7 +24,7 @@
     display block
 
 .transports-title
-  border-bottom 1px solid primary
+  border-bottom 1px solid var(--primary)
   padding 10px 15px
 .transports-content
   max-height 200px
@@ -34,11 +33,9 @@
   display flex
   padding 8px 5px
   &:hover
-    background main-dark
+    background var(--main-darker)
 .sftp-transport .transfer-control-icon:hover
-  color primary
-.transports-count
-  color text
+  color var(--primary)
 
 .flex-child + .flex-child
   margin-left 5px

package/client/components/footer/footer.styl

@@ -1,13 +1,10 @@
-@require '../../css/includes/theme-default'
-
 .main-footer
-  background main
+  background var(--main)
   height 36px
   position absolute
   left 44px
   right 0
   bottom 0
-  color text
   z-index 200
 .pinned
   .main-footer
@@ -52,4 +49,4 @@
       right 0
       bottom 0
       z-index 100
-      background main
+      background var(--main)

package/client/components/layout/layout.styl

@@ -1,8 +1,7 @@
-@require '../../css/includes/theme-default'
 .layout-wrap
 .layout-item
   position absolute
-  background main
+  background var(--main)
   overflow hidden
   &.drag-over
-    border 2px solid #08c
+    border 2px solid var(--primary)

package/client/components/main/error-wrapper.jsx

@@ -20,9 +20,9 @@ const troubleshootContent = {
     windows: 'path\\to\\electerm.exe'
   },
   clearConfig: {
-    mac: 'rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm.data.nedb',
-    linux: 'rm -rf ~/.config/electerm/users/default_user/electerm.data.nedb',
-    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm.data.nedb'
+    mac: 'rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm_data.db && rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm.data.nedb',
+    linux: 'rm -rf ~/.config/electerm/users/default_user/electerm_data.db && rm -rf ~/.config/electerm/users/default_user/electerm.data.nedb',
+    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm_data.db && Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm.data.nedb'
   },
   clearData: {
     mac: 'rm -rf ~/Library/Application\\ Support/electerm*',

package/client/components/main/main.jsx

@@ -29,6 +29,7 @@ import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import AIChat from '../ai/ai-chat'
 import Opacity from '../common/opacity'
+import InputContextMenu from '../common/input-context-menu'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -248,6 +249,7 @@ export default auto(function Index (props) {
       theme={uiThemeConfig}
     >
       <div {...ext1}>
+        <InputContextMenu />
         <ShortcutControl config={config} />
         <TermFullscreenControl
           terminalFullScreen={terminalFullScreen}
@@ -260,7 +262,6 @@ export default auto(function Index (props) {
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
-          buildTheme={store.buildTheme}
         />
         <CustomCss customCss={config.customCss} />
         <TextEditor />

package/client/components/main/ui-theme.jsx

@@ -5,20 +5,60 @@
 import { useEffect } from 'react'
 import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
+import isColorDark from '../../common/is-color-dark'
 
 const themeDomId = 'theme-css'
 
+function darker (color, amount = 0.1) {
+  let usePound = false
+
+  if (color[0] === '#') {
+    color = color.slice(1)
+    usePound = true
+  }
+
+  const num = parseInt(color, 16)
+
+  let r = (num >> 16) - Math.round(255 * amount)
+  if (r < 0) r = 0
+  let b = ((num >> 8) & 0x00FF) - Math.round(255 * amount)
+  if (b < 0) b = 0
+  let g = (num & 0x0000FF) - Math.round(255 * amount)
+  if (g < 0) g = 0
+
+  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+}
+
+function buildTheme (themeConfig) {
+  const keys = Object.keys(themeConfig || {})
+  const themeCss = keys.map(key => {
+    const val = themeConfig[key]
+    if (key === 'primary') {
+      const contrast = isColorDark(val) ? '#fff' : '#000'
+      return `--${key}-contrast: ${contrast};\n--${key}: ${val};`
+    } else if (key === 'main') {
+      const darkerMain = darker(val, 0.3)
+      const lighterMain = darker(val, -0.3)
+      return `--${key}-darker: ${darkerMain};\n--${key}-lighter: ${lighterMain};\n--${key}: ${val};`
+    }
+    return `--${key}: ${val};`
+  }).join('\n')
+  if (themeCss) {
+    const css = `:root {\n${themeCss}\n}\n`
+    return Promise.resolve(css)
+  }
+  return Promise.resolve('')
+}
+
 export default function UiTheme (props) {
-  const { themeConfig, buildTheme } = props
+  const { themeConfig } = props
 
   const delta = useDelta(themeConfig)
 
   async function applyTheme () {
-    const stylus = document.getElementById(themeDomId)
-    const {
-      stylusCss
-    } = await buildTheme(themeConfig)
-    stylus.innerHTML = stylusCss
+    const style = document.getElementById(themeDomId)
+    const css = await buildTheme(themeConfig)
+    style.innerHTML = css
   }
 
   useEffect(() => {

package/client/components/main/upgrade.styl

@@ -1,13 +1,11 @@
-@require '../../css/includes/theme-default'
 .upgrade-panel
   position fixed
   right 10px
   bottom 10px
   z-index 9999
-  background main
-  color text
+  background var(--main)
   border-radius 5px
-  border 1px solid darken(main, 30%)
+  border 1px solid var(--main-darker)
   padding 0
   width 440px
 .upgrade-panel-hide
@@ -17,12 +15,12 @@
   bottom auto
 .close-upgrade-panel
   &:hover
-    color success
+    color var(--success)
 .upgrade-panel-title
 .upgrade-panel-body
   padding 10px 15px
 .upgrade-panel-title
-  border-bottom 1px solid darken(main, 30%)
+  border-bottom 1px solid var(--main-darker)
 .markdown-wrap
   max-height 40vh
   overflow-y auto

package/client/components/main/wrapper.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 .common-err-desc
   &:hover
     text-overflow clip
@@ -6,43 +5,22 @@
     white-space pre
     max-height 300px
     overflow scroll
-// .pinned .sessions
-//   margin-left 343px
+
 .error-wrapper
-  background main
+  background var(--main)
   height 100%
   position fixed
-  color text
   overflow-y scroll
-.init-wrap
-.loading-data
-  position fixed
-  left 0
-  top 0
-  width 100%
-  height 100%
-  background-color main-light
-.loading-data
-  text-align center
-  font-size 30px
-  color text
-  padding 50px
-  z-index 210
-  .ant-tag
-    border-radius 3px
-    padding 4px
-    font-size 14px
-.loaded
-  .loading-data
-    display none
 
 #container
+  .xterm
+    padding 10px
   .session-batch-active
     .xterm-screen
       &::before
         font-size 30vmin
         font-weight bold
-        color lighten(text, 15%)
+        color var(--text)
         display flex
         justify-content center
         align-items center

package/client/components/quick-commands/qm.styl

@@ -1,13 +1,11 @@
-@require '../../css/includes/theme-default'
 .qm-list-wrap
   max-height calc(100vh - 100px)
   overflow-y scroll
 .qm-wrap-tooltip
-  background main
+  background var(--main)
   position absolute
   left 43px
   right 0
-  color text
   z-index 89
   height auto
   bottom 36px
@@ -21,7 +19,7 @@
 .fil-keyword
 .fil-label
   .qm-item
-    color lighten(text, 30%)
+    color var(--text-light)
   .qm-item
     &.name-match
     &.label-match
@@ -31,4 +29,4 @@
     width 100px
 
 .item-list-unit.dragover
-  border: 1px dashed primary
+  border: 1px dashed var(--primary)