@electerm/electerm-react 1.50.21 → 1.50.40

package/client/components/layout/layout-item.jsx

@@ -1,7 +1,13 @@
+import {
+  tabActions
+} from '../../common/constants'
+import postMsg from '../../common/post-msg'
+
 export default function LayoutItem (props) {
   const {
     children,
     i,
+    batch,
     ...itemProps
   } = props
   function handleClick (e) {
@@ -12,13 +18,75 @@ export default function LayoutItem (props) {
       }
       currentElement = currentElement.parentElement
     }
+    window.store.currentLayoutBatch = i
+  }
+
+  function getDom () {
+    return document.querySelector(`.layout-item.v${batch + 1}`)
+  }
+
+  function onDrop (e) {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    let currentElement = target
+    while (currentElement) {
+      if (currentElement.classList && currentElement.classList.contains('tab')) {
+        return
+      }
+      currentElement = currentElement.parentElement
+    }
+    // debug('target drop', target)
+    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    const onDropElem = getDom
+    if (!onDropElem || !fromTab || fromTab.batch === batch) {
+      return
+    }
+    const { store } = window
+    const { tabs } = store
+    const t = tabs.find(t => t.id === fromTab.id)
+    if (!t) {
+      return
+    }
+    t.batch = batch
+    postMsg({
+      action: tabActions.changeCurrentTabId,
+      currentTabId: store.currentTabId
+    })
+    store.setTabs(tabs)
+    clearCls()
+  }
+
+  function clearCls () {
+    getDom()?.classList.remove('drag-over')
+  }
+
+  function addCls () {
+    getDom()?.classList.add('drag-over')
+  }
+
+  function onDragEnter () {
+    addCls()
+  }
+
+  function onDragLeave (e) {
+    clearCls()
+  }
 
-    window.StorageEvent.currentLayoutBatch = i
+  function onDragEnd (e) {
+    clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
   }
   return (
     <div
       {...itemProps}
       onClick={handleClick}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragEnd={onDragEnd}
+      onDrop={onDrop}
     >
       {children}
     </div>

package/client/components/layout/layout.jsx

@@ -84,7 +84,7 @@ export default auto(function Layout (props) {
         batch: i,
         layout,
         ...v,
-        tabs: tabsBatch[i],
+        tabs: tabsBatch[i] || [],
         ...pick(store, [
           'isMaximized',
           'config',

package/client/components/layout/layout.styl

@@ -2,4 +2,7 @@
 .layout-wrap
 .layout-item
   position absolute
-  background main
+  background main
+  overflow hidden
+  &.drag-over
+    border 2px solid #08c

package/client/components/layout/layouts.jsx

@@ -37,7 +37,8 @@ export default memo(function LayoutWrap (props) {
           const itemProps = {
             i,
             style: pixed(wrapStyles[i]),
-            className: 'layout-item v' + (i + 1)
+            className: 'layout-item v' + (i + 1),
+            batch: i
           }
           return (
             <LayoutItem

package/client/components/main/css-overwrite.jsx

@@ -48,7 +48,6 @@ export default class CssOverwrite extends PureComponent {
 
     const styles = [
       `background-image: ${st}`,
-      'background-size: cover',
       'background-position: center'
     ]
 

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

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'custom-css'

package/client/components/main/main.jsx

@@ -23,20 +23,30 @@ import { isMac, isWin } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { LoadingUI } from './loading'
-import { ConfigProvider, notification } from 'antd'
+import { ConfigProvider, notification, message } from 'antd'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import { pick } from 'lodash-es'
 import './wrapper.styl'
 
+function setupGlobalMessageDismiss () {
+  document.addEventListener('click', (event) => {
+    const messageElement = event.target.closest('.ant-message-notice')
+    if (messageElement) {
+      message.destroy()
+    }
+  })
+}
+
 export default auto(function Index (props) {
   useEffect(() => {
     notification.config({
       placement: 'bottomRight'
     })
+    setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
-    store.onResize()
+    setTimeout(store.triggerResize, 200)
     store.initStoreEvents()
     const { ipcOnEvent } = window.pre
     ipcOnEvent('checkupdate', store.onCheckUpdate)
@@ -64,7 +74,7 @@ export default auto(function Index (props) {
     if (window.et.isWebApp) {
       window.onbeforeunload = store.beforeExit
     }
-    store.isSencondInstance = window.pre.runSync('isSencondInstance')
+    store.isSecondInstance = window.pre.runSync('isSecondInstance')
     store.initData()
     store.checkForDbUpgrade()
     window.pre.runGlobalAsync('registerDeepLink')
@@ -76,7 +86,7 @@ export default auto(function Index (props) {
     config,
     terminalFullScreen,
     pinned,
-    isSencondInstance,
+    isSecondInstance,
     pinnedQuickCommandBar,
     wsInited,
     upgradeInfo,
@@ -98,7 +108,7 @@ export default auto(function Index (props) {
     pinned,
     'qm-pinned': pinnedQuickCommandBar,
     'term-fullscreen': terminalFullScreen,
-    'is-main': !isSencondInstance
+    'is-main': !isSecondInstance
   })
   const ext1 = {
     className: cls

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

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'theme-css'

package/client/components/session/session.jsx

@@ -20,7 +20,6 @@ import generate from '../../common/uid'
 import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
-  termControlHeight,
   paneMap,
   terminalActions,
   connectionMap,
@@ -89,15 +88,6 @@ export default class SessionWrapper extends Component {
     })
   }
 
-  computeHeight = () => {
-    const {
-      tabsHeight
-    } = this.props
-    return this.props.height -
-      tabsHeight -
-      termControlHeight
-  }
-
   editTab = (up) => {
     const {
       tab,
@@ -131,7 +121,7 @@ export default class SessionWrapper extends Component {
 
   computePosition = (index) => {
     const windowWidth = this.getWidth()
-    const heightAll = this.computeHeight()
+    const heightAll = this.props.computeHeight()
     return {
       height: heightAll,
       width: windowWidth,
@@ -196,7 +186,7 @@ export default class SessionWrapper extends Component {
     const cls = pane === paneMap.terminal
       ? 'terms-box'
       : 'terms-box hide'
-    const height = this.computeHeight()
+    const height = this.props.computeHeight()
     const { tab } = this.props
     const width = this.getWidth()
     const themeConfig = copy(window.store.getThemeConfig())
@@ -246,7 +236,7 @@ export default class SessionWrapper extends Component {
     if (type === terminalRdpType) {
       return null
     }
-    const height = this.computeHeight(pane)
+    const height = this.props.computeHeight(pane)
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''

package/client/components/session/sessions.jsx

@@ -8,15 +8,13 @@ import copy from 'json-deep-copy'
 import wait from '../../common/wait.js'
 import Tabs from '../tabs/index.jsx'
 import {
-  commonActions,
   tabActions,
   paneMap,
   statusMap,
-  terminalWebType
+  terminalWebType,
+  termControlHeight
 } from '../../common/constants.js'
 import newTerm, { updateCount } from '../../common/new-terminal.js'
-import postMsg from '../../common/post-msg.js'
-
 import LogoElem from '../common/logo-elem.jsx'
 import { Button } from 'antd'
 import toSimpleObj from '../../common/to-simple-obj.js'
@@ -45,9 +43,7 @@ class Sessions extends Component {
       this.props.tabs &&
       !deepEqual(prevProps.tabs, this.props.tabs)
     ) {
-      this.setState({
-        tabs: copy(this.props.tabs)
-      })
+      this.updateTabs(this.props.tabs)
     }
   }
 
@@ -58,11 +54,29 @@ class Sessions extends Component {
     this.timer = null
   }
 
+  updateTabs = (propTabs) => {
+    const update = {
+      tabs: copy(propTabs)
+    }
+    const currentTab = propTabs.find(t => t.id === this.state.currentTabId)
+    if (!currentTab) {
+      update.currentTabId = propTabs[0]?.id
+    }
+    this.setState(update)
+  }
+
   initShortcuts () {
     window.addEventListener('keydown', this.bindHandleKeyboardEvent)
   }
 
+  notCurrentTab = (tab) => {
+    return this.state.currentTabId !== window.store.currentTabId
+  }
+
   closeCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.delTab(
       this.state.currentTabId
@@ -70,12 +84,23 @@ class Sessions extends Component {
   }
 
   reloadCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.reloadTab(
       this.getCurrentTab()
     )
   }
 
+  cloneToNextLayoutShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
+    e.stopPropagation()
+    window.store.cloneToNextLayout()
+  }
+
   watch = () => {
     window.addEventListener('message', this.onEvent)
   }
@@ -94,18 +119,8 @@ class Sessions extends Component {
         currentTabId: id
       })
     } else {
-      window.store.focus()
+      document.querySelector('.tab.active')?.click()
     }
-    postMsg({
-      action: commonActions.updateStore,
-      value: id,
-      prop: 'currentTabId'
-    })
-    postMsg({
-      action: commonActions.updateStore,
-      value: id,
-      prop: 'currentTabId' + this.props.batch
-    })
   }
 
   getCurrentTab = () => {
@@ -123,17 +138,15 @@ class Sessions extends Component {
       if (tab) {
         Object.assign(tab, update)
       }
-      this.updateStoreTabs(tabs)
       return {
         tabs
       }
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
     })
   }
 
-  addTab = (
-    _tab,
-    _index
-  ) => {
+  addTab = (_tab, _index) => {
     this.setState((oldState) => {
       const tabs = copy(oldState.tabs)
       const index = typeof _index === 'undefined'
@@ -147,15 +160,17 @@ class Sessions extends Component {
       }
       tab.batch = this.props.batch
       tabs.splice(index, 0, tab)
-      this.updateStoreTabs(tabs)
-      this.updateStoreCurrentTabId(tab.id)
       return {
         currentTabId: tab.id,
         tabs
       }
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
+      this.updateStoreCurrentTabId(this.state.currentTabId)
     })
   }
 
+  // After
   delTab = (id) => {
     this.setState((oldState) => {
       const tabs = copy(oldState.tabs)
@@ -168,13 +183,16 @@ class Sessions extends Component {
         i = i ? i - 1 : i + 1
         const next = tabs[i] || {}
         up.currentTabId = next.id || ''
-        this.updateStoreCurrentTabId(next.id)
       }
       up.tabs = tabs.filter(t => {
         return t.id !== id
       })
-      this.updateStoreTabs(up.tabs)
       return up
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
+      if (this.state.currentTabId !== id) {
+        this.updateStoreCurrentTabId(this.state.currentTabId)
+      }
     })
   }
 
@@ -185,6 +203,10 @@ class Sessions extends Component {
     this.addTab(tab)
   }
 
+  handleClick = () => {
+    window.store.currentTabId = this.state.currentTabId
+  }
+
   reloadTab = async (tabToReload) => {
     this.setState(async oldState => {
       const tab = copy(
@@ -228,11 +250,15 @@ class Sessions extends Component {
     if (!matchedTab) {
       return
     }
-    this.timer = setTimeout(window.store.triggerResize, 500)
-    this.updateStoreCurrentTabId(id)
+
+    // Batch the updates
     this.setState({
       currentTabId: id
-    }, this.postChange)
+    }, () => {
+      this.updateStoreCurrentTabId(id)
+      this.timer = setTimeout(window.store.triggerResize, 500)
+      this.postChange()
+    })
   }
 
   setTabs = tabs => {
@@ -347,6 +373,15 @@ class Sessions extends Component {
     )
   }
 
+  computeHeight = () => {
+    const {
+      tabsHeight
+    } = this.props
+    return this.props.height -
+      tabsHeight -
+      termControlHeight
+  }
+
   renderSessions () {
     const {
       config, width, height
@@ -389,6 +424,7 @@ class Sessions extends Component {
           'onChangeTabId',
           'onDuplicateTab',
           'reloadTab',
+          'computeHeight',
           'delTab',
           'addTab',
           'editTab'
@@ -396,7 +432,12 @@ class Sessions extends Component {
       }
       if (type === terminalWebType) {
         const webProps = {
-          tab
+          tab,
+          width,
+          height: this.computeHeight(),
+          ...pick(this, [
+            'reloadTab'
+          ])
         }
         return (
           <div className={cls} key={id}>
@@ -461,6 +502,7 @@ class Sessions extends Component {
       <div
         className='sessions'
         key='main-sess'
+        onClick={this.handleClick}
       >
         {this.renderSessions()}
       </div>

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

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, notification, Form } from 'antd'
 import Link from '../common/external-link'

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

@@ -56,6 +56,9 @@ export function shortcutExtend (Cls) {
       type,
       key
     } = event
+    if (this.cmdAddon) {
+      this.cmdAddon.handleKey(event)
+    }
     if (
       this.term &&
       key === 'Backspace' &&

package/client/components/shortcuts/shortcuts-defaults.js

@@ -10,6 +10,11 @@ export default () => {
       shortcut: 'alt+r',
       shortcutMac: 'alt+r'
     },
+    {
+      name: 'app_cloneToNextLayout',
+      shortcut: 'ctrl+/',
+      shortcutMac: 'meta+/'
+    },
     {
       name: 'app_newBookmark',
       shortcut: 'ctrl+n',
@@ -40,11 +45,6 @@ export default () => {
       shortcut: 'ctrl+tab',
       shortcutMac: 'ctrl+tab'
     },
-    {
-      name: 'terminal_split',
-      shortcut: 'ctrl+/',
-      shortcutMac: 'meta+/'
-    },
     {
       name: 'terminal_clear',
       shortcut: 'ctrl+l,ctrl+shift+l',

package/client/components/tabs/tab.jsx

@@ -9,7 +9,6 @@ import {
   Loading3QuartersOutlined,
   BorderlessTableOutlined
 } from '@ant-design/icons'
-import generate from '../../common/id-with-stamp'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
@@ -18,10 +17,7 @@ import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import {
-  terminalSshConfigType,
-  splitConfig,
-  paneMap,
-  statusMap
+  terminalSshConfigType
 } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
@@ -203,18 +199,7 @@ class Tab extends Component {
   }
 
   cloneToNextLayout = () => {
-    const defaultStatus = statusMap.processing
-    const { batch, layout } = this.props
-    const ntb = copy(this.state.tab)
-    Object.assign(ntb, {
-      id: generate(),
-      status: defaultStatus,
-      isTransporting: undefined,
-      pane: paneMap.terminal
-    })
-    const maxBatch = splitConfig[layout].children
-    ntb.batch = (batch + 1) % maxBatch
-    window.store.addTab(ntb)
+    window.store.cloneToNextLayout()
   }
 
   newTab = () => {
@@ -280,17 +265,20 @@ class Tab extends Component {
   }
 
   renderContext = () => {
-    const { tabs, tab, layout } = this.props
+    const { tabs, tab } = this.props
     const len = tabs.length
     const index = findIndex(tabs, t => t.id === tab.id)
     const noRight = index >= len - 1
     const isSshConfig = tab.type === terminalSshConfigType
     const res = []
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
+    const closeShortcut = this.getShortcut('app_closeCurrentTab')
+    const cloneToNextShortcut = this.getShortcut('app_cloneToNextLayout')
     res.push({
       func: 'handleClose',
       icon: 'CloseOutlined',
-      text: e('close')
+      text: e('close'),
+      subText: closeShortcut
     })
     res.push({
       func: 'closeOther',
@@ -314,13 +302,12 @@ class Tab extends Component {
       icon: 'CopyOutlined',
       text: e('duplicate')
     })
-    if (layout !== 'c1') {
-      res.push({
-        func: 'cloneToNextLayout',
-        icon: 'CopyOutlined',
-        text: e('cloneToNextLayout')
-      })
-    }
+    res.push({
+      func: 'cloneToNextLayout',
+      icon: 'CopyOutlined',
+      text: e('cloneToNextLayout'),
+      subText: cloneToNextShortcut
+    })
     res.push({
       disabled: isSshConfig,
       func: 'doRename',

package/client/components/tabs/tabs.styl

@@ -7,6 +7,8 @@
   ::-webkit-scrollbar
     width 0
     display none
+.not-system-ui.is-mac .layout-item.v1 .tabs-inner
+  margin-left 42px
 .not-system-ui.is-mac.not-webapp .layout-item.v1
   .tabs-inner
     margin-left 72px
@@ -25,8 +27,6 @@
   height 36px
   overflow-x scroll
   overflow-y hidden
-.layout-item.v1 .tabs-inner
-  margin-left 42px
 
 .tabs-wrapper
   z-index 3

package/client/components/terminal/attach-addon-custom.js

@@ -1,7 +1,7 @@
 /**
  * customize AttachAddon
  */
-import { AttachAddon } from 'xterm-addon-attach'
+import { AttachAddon } from '@xterm/addon-attach'
 import regEscape from 'escape-string-regexp'
 
 export default class AttachAddonCustom extends AttachAddon {

package/client/components/terminal/command-tracker-addon.js

@@ -0,0 +1,75 @@
+export class CommandTrackerAddon {
+  constructor () {
+    this.terminal = undefined
+    this.activeCommand = ''
+    this.currentCommand = ''
+    this.cursorPosition = 0
+    this.timeout = null
+    this.handleKey = this.debounce(this._handleKey, 200) // 10ms debounce
+  }
+
+  debounce = (func, wait) => {
+    return (...args) => {
+      const later = () => {
+        clearTimeout(this.timeout)
+        func.apply(this, args)
+      }
+
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(later, wait)
+    }
+  }
+
+  activate (terminal) {
+    this.terminal = terminal
+  }
+
+  dispose () {
+    this.term = null
+    if (this._disposables) {
+      this._disposables.forEach(d => d.dispose())
+      this._disposables.length = 0
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+      this.timeout = null
+    }
+  }
+
+  handleData = (data) => {
+    // Handle regular input
+    this.activeCommand = this.activeCommand.slice(0, this.cursorPosition) + data + this.activeCommand.slice(this.cursorPosition)
+    this.cursorPosition += data.length
+  }
+
+  // This is now our internal handler
+  _handleKey = (e) => {
+    const { key } = e
+    if (key === 'Enter') {
+      // Command executed, reset
+      this.currentCommand = this.activeCommand
+      this.activeCommand = ''
+      this.cursorPosition = 0
+    } else if (key === 'Backspace') {
+      // Handle backspace
+      if (this.cursorPosition > 0) {
+        this.activeCommand = this.activeCommand.slice(0, this.cursorPosition - 1) + this.activeCommand.slice(this.cursorPosition)
+        this.cursorPosition--
+      }
+    } else if (key === 'ArrowLeft') {
+      // Move cursor left
+      if (this.cursorPosition > 0) {
+        this.cursorPosition--
+      }
+    } else if (key === 'ArrowRight') {
+      // Move cursor right
+      if (this.cursorPosition < this.activeCommand.length) {
+        this.cursorPosition++
+      }
+    }
+  }
+
+  getCurrentCommand () {
+    return this.activeCommand || this.currentCommand
+  }
+}

package/client/components/terminal/index.jsx

@@ -31,25 +31,24 @@ import {
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, copy } from '../../common/clipboard'
-import { FitAddon } from 'xterm-addon-fit'
+import { FitAddon } from '@xterm/addon-fit'
 import AttachAddon from './attach-addon-custom'
-import { SearchAddon } from 'xterm-addon-search'
-import { WebLinksAddon } from 'xterm-addon-web-links'
-import { CanvasAddon } from 'xterm-addon-canvas'
-import { WebglAddon } from 'xterm-addon-webgl'
-import { LigaturesAddon } from 'xterm-addon-ligatures'
+import { SearchAddon } from '@xterm/addon-search'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { CanvasAddon } from '@xterm/addon-canvas'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { LigaturesAddon } from '@xterm/addon-ligatures'
 import getProxy from '../../common/get-proxy'
 import { AddonZmodem } from './xterm-zmodem'
-import { Unicode11Addon } from 'xterm-addon-unicode11'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
-import { Terminal } from 'xterm'
+import { Terminal } from '@xterm/xterm'
 import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
-import { SerializeAddon } from 'xterm-addon-serialize'
-import strip from '@electerm/strip-ansi'
+import { CommandTrackerAddon } from './command-tracker-addon.js'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
 
@@ -184,8 +183,13 @@ clear\r`
     this.fitAddon = null
     this.zmodemAddon = null
     this.searchAddon = null
-    this.serializeAddon = null
     this.fitAddon = null
+    this.cmdAddon = null
+    // Clear the notification if it exists
+    if (this.socketCloseWarning) {
+      notification.destroy(this.socketCloseWarning.key)
+      this.socketCloseWarning = null
+    }
   }
 
   terminalConfigProps = [
@@ -928,17 +932,8 @@ clear\r`
     return result
   }
 
-  // onKey = ({ key }) => {
-  //   if (key === '\r') {
-  //     this.getCmd()
-  //   }
-  // }
-
   getCmd = () => {
-    const str = this.serializeAddon.serialize()
-    const arr = strip(str).split(/ +/)
-    const len = arr.length
-    return arr[len - 1]
+    return this.cmdAddon.getCurrentCommand()
   }
 
   getCwd = () => {
@@ -963,13 +958,15 @@ clear\r`
   }
 
   onData = (d) => {
-    // runIdle(this.notifyOnData)
+    if (this.cmdAddon) {
+      this.cmdAddon.handleData(d)
+    }
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      const data = this.getCmd()
+      const data = this.getCmd().trim()
       if (this.term.buffer.active.type !== 'alternate') {
-        setTimeout(this.getCwd, 200)
+        this.timers.getCwd = setTimeout(this.getCwd, 200)
       }
       const exitCmds = [
         'exit',
@@ -1028,18 +1025,18 @@ clear\r`
 
     // term.on('keydown', this.handleEvent)
     this.fitAddon = new FitAddon()
+    this.cmdAddon = new CommandTrackerAddon()
     this.searchAddon = new SearchAddon()
     const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const unicode11Addon = new Unicode11Addon()
     term.loadAddon(unicode11Addon)
-    this.serializeAddon = new SerializeAddon()
-    term.loadAddon(this.serializeAddon)
     term.loadAddon(ligtureAddon)
     // activate the new version
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
+    term.loadAddon(this.cmdAddon)
     term.onData(this.onData)
     this.term = term
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
@@ -1056,6 +1053,7 @@ clear\r`
   }
 
   runInitScript = () => {
+    window.store.triggerResize()
     const {
       type,
       title,
@@ -1237,6 +1235,7 @@ clear\r`
       new KeywordHighlighterAddon(keywords)
     )
     window.store.triggerResize()
+    window.store.focus()
   }
 
   onResize = throttle(() => {

package/client/components/terminal/terminal.styl

@@ -34,7 +34,10 @@
 #container
   .xterm-viewport
     background-repeat no-repeat
-    background-position 50% 50%
+    background-position center
+    background-color: transparent !important
+    z-index 1
+
 
 .terminal-not-active .xterm-text-layer
   opacity .74

package/client/components/web/address-bar.jsx

@@ -0,0 +1,50 @@
+import {
+  Input,
+  Tooltip
+} from 'antd'
+import { copy } from '../../common/clipboard'
+import {
+  ReloadOutlined,
+  GlobalOutlined
+} from '@ant-design/icons'
+
+export default function AddressBar (props) {
+  const {
+    url,
+    onReload,
+    onOpen,
+    title,
+    description
+  } = props
+  const content = (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  )
+  function handleClick () {
+    copy(url)
+  }
+  return (
+    <div className='web-address-bar pd1'>
+      <Tooltip
+        title={content}
+      >
+        <Input
+          value={url}
+          onClick={handleClick}
+          addonBefore={
+            <ReloadOutlined
+              onClick={onReload}
+            />
+          }
+          addonAfter={
+            <GlobalOutlined
+              onClick={onOpen}
+            />
+          }
+        />
+      </Tooltip>
+    </div>
+  )
+}

package/client/components/web/web-session.jsx

@@ -1,19 +1,41 @@
-import { useEffect } from 'react'
-import Link from '../common/external-link'
+import AddressBar from './address-bar'
 
 export default function WebSession (props) {
   const {
-    tab
+    tab,
+    width,
+    height,
+    reloadTab
   } = props
-  useEffect(() => {
-    tab.url && window.openLink(tab.url)
-  }, [])
+  const addrProps = {
+    url: tab.url,
+    title: tab.title,
+    description: tab.description,
+    onOpen: () => {
+      window.openLink(tab.url)
+    },
+    onReload: () => {
+      reloadTab(
+        tab
+      )
+    }
+  }
+  const viewProps = {
+    src: tab.url,
+    style: {
+      width: (width - 10) + 'px',
+      height: (height - 12) + 'px'
+    },
+    disableblinkfeatures: 'true',
+    disablewebsecurity: 'true'
+  }
   return (
     <div className='web-session-wrap'>
-      <div className='pd3 aligncenter'>
-        <h1>{tab.title}</h1>
-        <p>{tab.description}</p>
-        <Link to={tab.url}>{tab.url}</Link>
+      <AddressBar {...addrProps} />
+      <div className='pd1'>
+        <webview
+          {...viewProps}
+        />
       </div>
     </div>
   )

package/client/entry/index.jsx

@@ -1,16 +1,11 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import 'antd/dist/reset.css'
-import 'xterm/css/xterm.css'
+import '@xterm/xterm/css/xterm.css'
 import '../common/trzsz'
 import 'firacode/distr/fira_code.css'
 import Main from '../components/main/index.jsx'
-import { notification } from 'antd'
-notification.config({
-  placement: 'bottomRight'
-})
 
-const rootElement = document.getElementById('container')
-render(
-  <Main />,
-  rootElement
+const rootElement = createRoot(document.getElementById('container'))
+rootElement.render(
+  <Main />
 )

package/client/store/db-upgrade.js

@@ -9,7 +9,7 @@ import initWatch from './watch'
 export default (Store) => {
   Store.prototype.checkForDbUpgrade = async function () {
     const { store } = window
-    if (store.isSencondInstance) {
+    if (store.isSecondInstance) {
       return false
     }
     const shouldUpgrade = await window.pre.runGlobalAsync('checkDbUpgrade')

package/client/store/event.js

@@ -63,6 +63,7 @@ export default Store => {
 
   Store.prototype.triggerResize = function () {
     window.store.resizeTrigger = window.store.resizeTrigger ? 0 : 1
+    window.dispatchEvent(new Event('resize'))
   }
 
   Store.prototype.toggleTermFullscreen = function (terminalFullScreen) {

package/client/store/quick-command.js

@@ -73,7 +73,7 @@ export default Store => {
         clickCount: ((qm.clickCount || 0) + 1)
       })
     }
-  }, 100)
+  }, 200)
 
   Store.prototype.setQmSortByFrequency = function (v) {
     window.store.qmSortByFrequency = v

package/client/store/setting.js

@@ -190,7 +190,7 @@ export default Store => {
 
   Store.prototype.openSettingModal = function () {
     const { store } = window
-    if (store.isSencondInstance) {
+    if (store.isSecondInstance) {
       return message.warning(
         e('sencondInstanceTip')
       )

package/client/store/tab.js

@@ -5,11 +5,14 @@
 import { uniq, debounce, findIndex } from 'lodash-es'
 import {
   tabActions,
-  splitConfig
+  splitConfig,
+  statusMap,
+  paneMap
 } from '../common/constants'
 import postMsg from '../common/post-msg'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
+import generate from '../common/id-with-stamp'
 
 export default Store => {
   Store.prototype.updateTabsStatus = function () {
@@ -63,7 +66,7 @@ export default Store => {
     postMsg({
       action: tabActions.addTab,
       tab,
-      batch: window.openTabBatch ?? window.store.currentLayoutBatch,
+      batch: tab?.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch,
       index
     })
   }
@@ -96,6 +99,28 @@ export default Store => {
     }
   }
 
+  Store.prototype.cloneToNextLayout = function () {
+    const { store } = window
+    const defaultStatus = statusMap.processing
+    const { currentTab, layout, currentLayoutBatch } = store
+    const ntb = deepCopy(currentTab)
+    Object.assign(ntb, {
+      id: generate(),
+      status: defaultStatus,
+      isTransporting: undefined,
+      pane: paneMap.terminal
+    })
+    let maxBatch = splitConfig[layout].children
+    if (maxBatch < 2) {
+      maxBatch = 2
+    }
+    ntb.batch = (currentLayoutBatch + 1) % maxBatch
+    store.addTab(ntb)
+    if (layout === 'c1') {
+      store.setLayout('c2')
+    }
+  }
+
   Store.prototype.setLayout = function (layout) {
     const {
       store

package/client/store/watch.js

@@ -99,11 +99,6 @@ export default store => {
     return store._checkedKeys
   }).start()
 
-  // autoRun(store, () => {
-  //   window.store.onLayoutChange()
-  //   return store.layout
-  // }).start()
-
   autoRun(store, () => {
     const tabs = store.getTabs()
     const { currentTabId } = store

package/client/views/index.pug

@@ -27,7 +27,7 @@ html
       }
     - if (!isDev)
       link(rel='stylesheet', href='css/' + version + '-basic.css')
-      link(rel='stylesheet', href='css/' + version + '-index.css')
+      link(rel='stylesheet', href='css/' + version + '-electerm.css')
       style(id='theme-css').
       style(id='custom-css').
   body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.50.21",
+  "version": "1.50.40",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",