feat: keyboard table (#210)

Author: drl990114

apps/linebyline/package.json

@@ -33,6 +33,7 @@
     "react-router-dom": "^6.9.0",
     "remixicon": "^3.4.0",
     "styled-components": "^5.3.11",
+    "tinykeys": "^2.1.0",
     "zustand": "^4.3.9"
   },
   "devDependencies": {

apps/linebyline/src/App.tsx

@@ -8,8 +8,7 @@ import { Route, Routes } from 'react-router-dom'
 import 'remixicon/fonts/remixicon.css'
 import { ThemeProvider } from 'styled-components'
 import { GlobalStyles } from './globalStyles'
-import { useGlobalSettingData, useGlobalTheme } from './hooks'
-import useGlobalOSInfo from './hooks/useOSInfo'
+import { useGlobalSettingData, useGlobalTheme, useGlobalKeyboard, useGlobalOSInfo } from './hooks'
 import { i18nInit } from './i18n'
 import { Root, Setting } from '@/router'
 import { loadTask, use } from '@/helper/schedule'
@@ -20,6 +19,7 @@ import { getFileObject, getFileObjectByPath } from './helper/files'
 
 function App() {
   useGlobalOSInfo()
+  useGlobalKeyboard()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, handler] = useGlobalSettingData()
   const { themeColors, muiTheme, setTheme } = useGlobalTheme()

apps/linebyline/src/components/Explorer/index.tsx

@@ -1,15 +1,12 @@
-import { open } from '@tauri-apps/api/dialog'
 import classNames from 'classnames'
-import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ListDataItem } from '../List'
 import { Container } from './styles'
 import { useEditorStore } from '@/stores'
-import { readDirectory } from '@/helper/filesys'
 import type { IFile } from '@/helper/filesys'
-import { useGlobalCacheData } from '@/hooks'
+import { useGlobalCacheData, useOpen } from '@/hooks'
 import { CacheManager } from '@/helper'
 import { Empty, FileTree, List, Popper } from '@/components'
 import styled from 'styled-components'
@@ -21,15 +18,16 @@ const RecentListBottom = styled.div`
   text-align: center;
 
   &:hover {
-    background-color: ${props => props.theme.tipsBgColor};
+    background-color: ${(props) => props.theme.tipsBgColor};
   }
 `
 
 const Explorer: FC<ExplorerProps> = (props) => {
   const { t } = useTranslation()
-  const { folderData, activeId, setFolderData, addOpenedFile, setActiveId } = useEditorStore()
+  const { folderData, activeId, addOpenedFile, setActiveId } = useEditorStore()
   const [popperOpen, setPopperOpen] = useState(false)
   const [cache] = useGlobalCacheData()
+  const { openFolderDialog, openFolder } = useOpen()
 
   const handleSelect = (item: IFile) => {
     if (item.kind === 'dir') return
@@ -38,32 +36,18 @@ const Explorer: FC<ExplorerProps> = (props) => {
     setActiveId(item.id)
   }
 
-  const openRir = useCallback(async (dir: string) => {
-    try {
-      const res = await readDirectory(dir)
-      CacheManager.writeCache('openFolderHistory', { path: dir, time: dayjs() })
-      setFolderData(res)
-    } catch (error) {
-      console.error('error', error)
-    }
-  }, [setFolderData])
-
   const handleClearRecent = () => {
     CacheManager.writeCache('openFolderHistory', [])
     setPopperOpen(false)
   }
 
-  const handleOpenDirClick = async () => {
-    const dir = await open({ directory: true, recursive: true })
-
-    if (typeof dir !== 'string') return
-    openRir(dir)
-  }
-
-  const handleOpenHistoryListItemClick = useCallback((item: ListDataItem) => {
-    openRir(item.title)
-    setPopperOpen(false)
-  }, [openRir])
+  const handleOpenHistoryListItemClick = useCallback(
+    (item: ListDataItem) => {
+      openFolder(item.title)
+      setPopperOpen(false)
+    },
+    [openFolder],
+  )
 
   const listData = useMemo(
     () =>
@@ -79,14 +63,14 @@ const Explorer: FC<ExplorerProps> = (props) => {
 
   return (
     <Container className={containerCLs}>
-      <div className="explorer-header">
+      <div className='explorer-header'>
         <small>EXPLORER</small>
-        <div className="flex" />
+        <div className='flex' />
       </div>
-      <div className="h-full w-full overflow-auto">
+      <div className='h-full w-full overflow-auto'>
         {folderData && folderData.length > 1 ? (
           <FileTree
-            className="flex-1"
+            className='flex-1'
             data={folderData}
             activeId={activeId}
             onSelect={handleSelect}
@@ -95,12 +79,12 @@ const Explorer: FC<ExplorerProps> = (props) => {
           <Empty />
         )}
       </div>
-      <div className="explorer-bottom">
-        <small className="flex-1 cursor-pointer" onClick={handleOpenDirClick}>
+      <div className='explorer-bottom'>
+        <small className='flex-1 cursor-pointer' onClick={openFolderDialog}>
           {t('file.openDir')}
         </small>
         <Popper
-          placement="top-end"
+          placement='top-end'
           onClickAway={() => setPopperOpen(false)}
           open={popperOpen}
           content={
@@ -114,10 +98,12 @@ const Explorer: FC<ExplorerProps> = (props) => {
             </>
           }
         >
-         {listData.length > 0 ? <i
-            className="ri-more-2-fill icon-border cursor-pointer"
-            onClick={() => setPopperOpen(true)}
-          /> : null}
+          {listData.length > 0 ? (
+            <i
+              className='ri-more-2-fill icon-border cursor-pointer'
+              onClick={() => setPopperOpen(true)}
+            />
+          ) : null}
         </Popper>
       </div>
     </Container>

apps/linebyline/src/helper/cacheManager/settingMap.ts

@@ -25,6 +25,7 @@ const settingMap = {
       },
     },
   },
+  keyboard: {}
 }
 
 export enum SettingKeys {

apps/linebyline/src/hooks/index.ts

@@ -1,3 +1,6 @@
 export { default as useGlobalCacheData } from './useCacheData'
 export { default as useGlobalSettingData } from './useSettingData'
 export { default as useGlobalTheme } from './useTheme'
+export { default as useGlobalKeyboard } from './useKeyboard'
+export { default as useGlobalOSInfo } from './useOSInfo'
+export { default as useOpen } from './useOpen'

apps/linebyline/src/hooks/useKeyboard.ts

@@ -0,0 +1,68 @@
+import { invoke } from '@tauri-apps/api'
+import { createGlobalStore } from 'hox'
+import { useEffect, useState } from 'react'
+import type { KeyBindingMap } from 'tinykeys'
+import { createKeybindingsHandler } from 'tinykeys'
+import { useCommandStore } from '@/stores'
+
+const getTinyKeyBinding = (keyMap: string[]) => {
+  let keyBinding = ''
+  keyMap.forEach((key, index) => {
+    if (key === 'mod') {
+      keyBinding += '$mod'
+    } else {
+      keyBinding += key
+    }
+
+    if (index < keyMap.length - 1) {
+      keyBinding += '+'
+    }
+  })
+  return keyBinding
+}
+
+function useKeyboard() {
+  const [keyboardInfos, setKeyboardInfos] = useState<KeyboardInfo[]>([])
+  const { execute } = useCommandStore()
+
+  useEffect(() => {
+    invoke<{ cmds: KeyboardInfo[] }>('get_keyboard_infos').then((res) => {
+      setKeyboardInfos(res.cmds)
+    })
+  }, [])
+
+  useEffect(() => {
+    const keybindingMap: KeyBindingMap = {}
+
+    keyboardInfos.forEach((keyboardInfo) => {
+      if (keyboardInfo.key_map.length > 0) {
+        const keybind = getTinyKeyBinding(keyboardInfo.key_map)
+        keybindingMap[keybind] = () => {
+          execute(keyboardInfo.id)
+        }
+      }
+    })
+    console.log('keybindingMap', keybindingMap)
+    const handler = createKeybindingsHandler(keybindingMap)
+
+    window.addEventListener('keydown', handler)
+
+    return () => {
+      window.removeEventListener('keydown', handler)
+    }
+  }, [execute, keyboardInfos])
+
+  return {
+    keyboardInfos,
+  }
+}
+
+const [useGlobalKeyboard] = createGlobalStore(useKeyboard)
+
+export default useGlobalKeyboard
+
+interface KeyboardInfo {
+  id: string
+  desc: string
+  key_map: string[]
+}

apps/linebyline/src/hooks/useOpen.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from 'react'
+import { open } from '@tauri-apps/api/dialog'
+import { readDirectory } from '@/helper/filesys'
+import { CacheManager } from '@/helper'
+import { useCommandStore, useEditorStore } from '@/stores'
+import dayjs from 'dayjs'
+
+const useOpen = () => {
+  const { setFolderData } = useEditorStore()
+  const { addCommand } = useCommandStore()
+
+  const openFolder = useCallback(
+    async (dir: string) => {
+      try {
+        const res = await readDirectory(dir)
+        CacheManager.writeCache('openFolderHistory', { path: dir, time: dayjs() })
+        setFolderData(res)
+      } catch (error) {
+        console.error('error', error)
+      }
+    },
+    [setFolderData],
+  )
+
+  const openFolderDialog = useCallback(async () => {
+    const dir = await open({ directory: true, recursive: true })
+
+    if (typeof dir !== 'string') return
+    openFolder(dir)
+  }, [openFolder])
+
+  
+  useEffect(() => {
+    addCommand({ id: 'app:open_folder', handler: openFolderDialog})
+  }, [addCommand, openFolderDialog])
+
+  return {
+    openFolderDialog,
+    openFolder
+  }
+}
+
+export default useOpen

apps/linebyline/src/router/Setting/KeyboardTable/KeyboardTable.tsx

@@ -0,0 +1,41 @@
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import { useGlobalKeyboard, useGlobalTheme } from '@/hooks'
+
+export function KeyboardTable() {
+  const { themeColors } = useGlobalTheme()
+  const { keyboardInfos } = useGlobalKeyboard()
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size='small' aria-label='caption table'>
+        <TableHead
+          sx={{
+            backgroundColor: themeColors.tipsBgColor,
+          }}
+        >
+          <TableRow>
+            <TableCell>Command</TableCell>
+            <TableCell>Descibe</TableCell>
+            <TableCell>Keybinding</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {keyboardInfos.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>{row.id}</TableCell>
+              <TableCell>{row.desc}</TableCell>
+              <TableCell>{row.key_map.join('+')}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <caption>Currently, custom shortcut keys are not supported.</caption>
+      </Table>
+    </TableContainer>
+  )
+}

apps/linebyline/src/router/Setting/KeyboardTable/index.ts

@@ -0,0 +1 @@
+export * from './KeyboardTable'

apps/linebyline/src/router/Setting/index.tsx

@@ -7,6 +7,7 @@ import settingMap from '@/helper/cacheManager/settingMap'
 import Logo from '@/assets/logo.svg'
 import { invoke } from '@tauri-apps/api'
 import TitleBar from '@/components/TitleBar'
+import { KeyboardTable } from './KeyboardTable'
 
 export interface DialogTitleProps {
   children?: ReactNode
@@ -34,6 +35,23 @@ function Setting() {
     })
   }, [])
 
+  const renderCurrentSettingData = () => {
+    if (curGroupKey === 'keyboard') {
+      return <KeyboardTable />
+    }
+
+    return curGroupKeys.map((key) => {
+      return (
+        <SettingGroup
+          key={key}
+          group={curGroup[key]}
+          groupKey={key}
+          categoryKey={curGroupKey}
+        />
+      )
+    })
+  }
+
   return (
     <>
       <TitleBar transparent />
@@ -71,16 +89,7 @@ function Setting() {
           <div className="conf-path">
             <small>Path: {confPath}</small>
           </div>
-          {curGroupKeys.map((key) => {
-            return (
-              <SettingGroup
-                key={key}
-                group={curGroup[key]}
-                groupKey={key}
-                categoryKey={curGroupKey}
-              />
-            )
-          })}
+          {renderCurrentSettingData()}
         </div>
       </Container>
     </>

apps/linebyline/src/stores/index.ts

@@ -1 +1,2 @@
 export { default as useEditorStore } from './useEditorStore'
+export { default as useCommandStore } from './useCommandStore'