@electerm/electerm-react 1.34.63 → 1.35.0

package/client/components/terminal/term-search.jsx

@@ -8,22 +8,20 @@ import {
   ArrowRightOutlined,
   CloseCircleOutlined
 } from '@ant-design/icons'
-import { paneMap, terminalActions, isMac } from '../../common/constants'
+import { paneMap, terminalActions } from '../../common/constants'
 import postMessage from '../../common/post-msg'
 import { MatchCaseIcon } from '../icons/match-case'
 import { MatchWholWordIcon } from '../icons/match-whole-word'
 import { RegularExpIcon } from '../icons/regular-exp'
 import classNames from 'classnames'
 import copy from 'json-deep-copy'
-import keyShiftPressed from '../../common/key-shift-pressed'
-import keyControlPressed from '../../common/key-control-pressed'
-import keyPressed from '../../common/key-pressed'
+import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
 import './term-search.styl'
 
 const { prefix } = window
 const s = prefix('ssh')
 
-export default class TermSearch extends Component {
+class TermSearch extends Component {
   searchControls = [{
     id: 'matchCase',
     icon: MatchCaseIcon,
@@ -53,11 +51,7 @@ export default class TermSearch extends Component {
   }]
 
   componentDidMount () {
-    window.addEventListener('keydown', this.handleEvent)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('keydown', this.handleEvent)
+    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
   }
 
   toggleSearch = () => {
@@ -65,17 +59,9 @@ export default class TermSearch extends Component {
     setTimeout(window.store.focus, 100)
   }
 
-  handleEvent = (e) => {
-    if (
-      keyPressed(e, 'f') && keyControlPressed(e) &&
-      (
-        isMac ||
-        (!isMac && keyShiftPressed(e))
-      )
-    ) {
-      e.stopPropagation()
-      this.toggleSearch()
-    }
+  searchShortcut = (e) => {
+    e.stopPropagation()
+    this.toggleSearch()
   }
 
   prev = () => {
@@ -222,3 +208,5 @@ export default class TermSearch extends Component {
     )
   }
 }
+
+export default shortcutExtend(TermSearch)

package/client/components/terminal-theme/index.jsx

@@ -164,7 +164,7 @@ export default function ThemeForm (props) {
   }
 
   const {
-    readOnly,
+    readonly,
     id,
     type,
     name: themeName
@@ -175,7 +175,7 @@ export default function ThemeForm (props) {
   }
   const { autofocustrigger } = props.store
   const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
-  const disabled = readOnly || isDefaultTheme
+  const disabled = readonly || isDefaultTheme
   return (
     <Form
       onFinish={handleSubmit}
@@ -226,7 +226,8 @@ export default function ThemeForm (props) {
           rules={[{
             max: 1000, message: '1000 chars max'
           }, {
-            required: true, message: 'theme Config required'
+            required: true,
+            message: 'theme config required'
           }, {
             validator: validateInput
           }]}

package/client/store/index.js

@@ -33,13 +33,19 @@ import {
   settingMap,
   sidebarWidth,
   sidebarPanelWidth,
-  paneMap
+  paneMap,
+  settingSyncId,
+  settingShortcutsId
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import {
   theme
 } from 'antd'
 
+const { prefix } = window
+const ss = prefix('settingSync')
+const s = prefix('setting')
+
 function getReverseColor (hex) {
   // Check if the input is a valid hex color code
   if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
@@ -240,7 +246,16 @@ class Store {
   }
 
   get setting () {
-    return JSON.parse(window.store._setting || '[]')
+    return [
+      {
+        id: settingSyncId,
+        title: ss('settingSync')
+      },
+      {
+        id: settingShortcutsId,
+        title: s('settingShortcuts')
+      }
+    ]
   }
 
   get config () {

package/client/store/init-state.js

@@ -8,7 +8,6 @@ import {
   newBookmarkIdPrefix,
   fileOperationsMap,
   syncTypes,
-  settingSyncId,
   infoTabs,
   openedSidebarKey,
   sidebarPinnedKey,
@@ -26,7 +25,6 @@ const t = prefix('terminalThemes')
 const e = prefix('control')
 const newQuickCommand = 'newQuickCommand'
 const q = prefix('quickCommands')
-const ss = prefix('settingSync')
 
 function getDefaultBookmarkGroups (bookmarks) {
   return [
@@ -104,12 +102,7 @@ export default {
   }),
 
   // for settings related
-  _setting: JSON.stringify([
-    {
-      id: settingSyncId,
-      title: ss('settingSync')
-    }
-  ]),
+  _setting: '',
   _settingItem: JSON.stringify(getInitItem([], settingMap.bookmarks)),
   settingTab: settingMap.bookmarks, // setting tab
   autofocustrigger: Date.now(),

package/client/store/item.js

@@ -111,6 +111,9 @@ export default Store => {
   }
 
   Store.prototype.getItems = function (type) {
+    if (type === 'setting') {
+      return window.store.setting
+    }
     return JSON.parse(this['_' + type] || [])
   }
 

package/client/store/session.js

@@ -22,28 +22,6 @@ export default Store => {
     }
   }
 
-  Store.prototype.onKeyDown = function (event) {
-    if (
-      event.key === '=' &&
-      (
-        (isMac && event.metaKey) ||
-        (!isMac && event.ctrlKey)
-      )
-    ) {
-      event.stopPropagation()
-      window.store.zoom(0.25, true)
-    } else if (
-      event.key === '-' &&
-      (
-        (isMac && event.metaKey) ||
-        (!isMac && event.ctrlKey)
-      )
-    ) {
-      event.stopPropagation()
-      window.store.zoom(-0.25, true)
-    }
-  }
-
   Store.prototype.zoomTerminal = debounce(function (delta) {
     postMsg({
       action: terminalActions.zoom,

package/client/store/watch.js

@@ -65,7 +65,9 @@ export default store => {
   }).start()
 
   autoRun(store, () => {
-    window.pre.runGlobalAsync('saveUserConfig', store.config)
+    if (store.config) {
+      window.pre.runGlobalAsync('saveUserConfig', store.config)
+    }
     return store._config
   }, func => debounce(func, 100)).start()
 

package/client/views/index.pug

@@ -29,9 +29,11 @@ html
       link(rel='stylesheet', href='css/' + version + '-basic.css')
       link(rel='stylesheet', href='css/' + version + '-index.css')
       style(id='theme-css').
+      style(id='custom-css').
   body
     - if (isDev)
       style(id='theme-css').
+      style(id='custom-css').
     #container
     #content-loading
       .morph-shape.iblock.pd3

package/package.json

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