@electerm/electerm-react 2.2.0 → 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/bookmark-form/common/serial-path-selector.jsx

@@ -30,7 +30,7 @@ export default function SerialPathSelector ({
         />
       </FormItem>
       <Spin spinning={loaddingSerials}>
-        <span onClick={store.handleGetSerials}>
+        <span onClick={store.handleGetSerials} className='pointer'>
           <ReloadOutlined /> {e('reload')} serials
         </span>
       </Spin>

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/common/opacity.jsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import eq from 'fast-deep-equal'
+
+const opacityDomId = 'opacity-style'
+
+/**
+ * Opacity component
+ * Handles conditional CSS rendering based on opacity setting
+ * @param {Object} props
+ * @param {number} props.opacity - Opacity value from store.config
+ * @returns {null}
+ */
+export default function Opacity ({ opacity }) {
+  // Default to 1 if opacity is not provided
+  const currentOpacity = opacity !== undefined ? opacity : 1
+  const delta = useDelta(currentOpacity)
+
+  function applyOpacity () {
+    let styleElement = document.getElementById(opacityDomId)
+
+    // Create style element if it doesn't exist
+    if (!styleElement) {
+      styleElement = document.createElement('style')
+      styleElement.id = opacityDomId
+      document.head.appendChild(styleElement)
+    }
+
+    // Update style content based on opacity value
+    if (currentOpacity === 1) {
+      styleElement.innerHTML = ''
+      window.pre.runGlobalAsync('setBackgroundColor', '#333333')
+    } else {
+      window.pre.runGlobalAsync('setBackgroundColor', '#33333300')
+      styleElement.innerHTML = `
+        html {
+          background: transparent !important;
+        }
+        body {
+          background: transparent !important;
+        }
+        #outside-context {
+          opacity: ${currentOpacity} !important;
+        }
+      `
+    }
+  }
+
+  useEffect(() => {
+    applyOpacity()
+
+    // Cleanup function
+    return () => {
+      const styleElement = document.getElementById(opacityDomId)
+      if (styleElement) {
+        document.head.removeChild(styleElement)
+      }
+    }
+  }, [])
+
+  useConditionalEffect(() => {
+    applyOpacity()
+  }, delta && !eq(delta.prev, delta.curr))
+
+  return null
+}

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,8 +15,8 @@
   right 0
   overflow-y scroll
   z-index 11
-  background main
-  box-shadow 0px 0px 3px 3px alpha(main, .5)
+  background var(--main)
+
 .transports-wrap
   .transports-dd
     display none
@@ -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

@@ -28,6 +28,8 @@ 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 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'
@@ -152,11 +154,6 @@ export default auto(function Index (props) {
   const themeProps = {
     themeConfig: store.getUiThemeConfig()
   }
-  const outerProps = {
-    style: {
-      opacity: config.opacity
-    }
-  }
   const copiedTransfer = deepCopy(fileTransfers)
   const copiedHistory = deepCopy(transferHistory)
   const sidebarProps = {
@@ -252,6 +249,7 @@ export default auto(function Index (props) {
       theme={uiThemeConfig}
     >
       <div {...ext1}>
+        <InputContextMenu />
         <ShortcutControl config={config} />
         <TermFullscreenControl
           terminalFullScreen={terminalFullScreen}
@@ -260,10 +258,10 @@ export default auto(function Index (props) {
           {...confsCss}
           wsInited={wsInited}
         />
+        <Opacity opacity={config.opacity} />
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
-          buildTheme={store.buildTheme}
         />
         <CustomCss customCss={config.customCss} />
         <TextEditor />
@@ -277,7 +275,6 @@ export default auto(function Index (props) {
         <BatchOp {...batchOpProps} />
         <div
           id='outside-context'
-          {...outerProps}
         >
           <Sidebar {...sidebarProps} />
           <Layout

package/client/components/main/term-fullscreen.styl

@@ -13,7 +13,7 @@
     top 10px
     position fixed
     z-index 100
-    background rgba(45, 245, 108, 0.8)
+    background #2df56c
   // Hide all sessions first
   .session-wrap
     display none

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(() => {