Implement shortcuts

client/components/Controllers/Table/Editor.tsx

@@ -19,6 +19,30 @@ export default function Editor() {
     store.deleteMultipleCells(cellSelection)
   })
 
+  useKeyPress(['alt+m'], () => {
+    store.togglePanel('metadata')
+  })
+
+  useKeyPress(['alt+r'], () => {
+    store.togglePanel('report')
+  })
+
+  useKeyPress(['alt+s'], () => {
+    store.togglePanel('source')
+  })
+
+  useKeyPress(['ctrl+z', 'meta+z'], () => {
+    store.undoTableChange()
+  })
+
+  useKeyPress(['ctrl+y', 'meta+y'], () => {
+    store.redoTableChange()
+  })
+
+  useKeyPress(['ctrl+s', 'meta+s'], () => {
+    store.saveTable()
+  })
+
   // Ensure that when the user interact with other parts on the application
   // e.g. Metadata editor the selection logic is not activated
   // also commit current table editing (https://github.com/okfn/opendataeditor/issues/495)

client/components/Parts/Bars/Action.tsx

@@ -7,7 +7,6 @@ import CheckIcon from '@mui/icons-material/Check'
 import HistoryIcon from '@mui/icons-material/History'
 import IconButton from '../../Parts/Buttons/Icon'
 import Columns from '../Grids/Columns'
-import { useKeyPress } from 'ahooks'
 import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
 
 export interface ActionBarProps {}
@@ -37,12 +36,7 @@ export interface ButtonProps {
 
 export function SaveAsButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.j'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
     <Box>
       <IconButton
@@ -61,12 +55,7 @@ export function SaveAsButton(props: ButtonProps) {
 
 export function PublishButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.k'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
     <Box sx={{ marginRight: '20px' }}>
       <IconButton
@@ -85,12 +74,7 @@ export function PublishButton(props: ButtonProps) {
 
 export function RevertButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.q'], (event) => {
-    event.preventDefault()
-    if (props.updated) {
-      onClick()
-    }
-  })
+
   return (
     <Box>
       <IconButton
@@ -108,12 +92,7 @@ export function RevertButton(props: ButtonProps) {
 
 export function SaveButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.s'], (event) => {
-    event.preventDefault()
-    if (props.updated) {
-      onClick()
-    }
-  })
+
   return (
     <Box>
       <IconButton

client/components/Parts/Bars/Menu.tsx

@@ -15,7 +15,6 @@ import CodeIcon from '@mui/icons-material/Code'
 import TuneIcon from '@mui/icons-material/Tune'
 import IconButton from '../Buttons/Icon'
 import { useTheme } from '@mui/material/styles'
-import { useKeyPress } from 'ahooks'
 
 export interface MenuBarProps {
   fullWidth?: boolean
@@ -53,12 +52,7 @@ export interface ButtonProps {
 export function MetadataButton(props: ButtonProps) {
   const theme = useTheme()
   const onClick = props.onClick || noop
-  useKeyPress(['alt.m'], (event) => {
-    event.preventDefault()
-    if (!props.enabled && !props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -86,12 +80,7 @@ export function MetadataButton(props: ButtonProps) {
 export function ReportButton(props: ButtonProps) {
   const theme = useTheme()
   const onClick = props.onClick || noop
-  useKeyPress(['alt.r'], (event) => {
-    event.preventDefault()
-    if (!props.enabled && !props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -119,12 +108,7 @@ export function ReportButton(props: ButtonProps) {
 export function SourceButton(props: ButtonProps) {
   const theme = useTheme()
   const onClick = props.onClick || noop
-  useKeyPress(['alt.s'], (event) => {
-    event.preventDefault()
-    if (!props.enabled && !props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -151,12 +135,7 @@ export function SourceButton(props: ButtonProps) {
 
 export function ChatButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.m'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -174,12 +153,7 @@ export function ChatButton(props: ButtonProps) {
 
 export function UndoButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.z'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -203,12 +177,7 @@ export function UndoButton(props: ButtonProps) {
 
 export function RedoButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.y'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -232,12 +201,7 @@ export function RedoButton(props: ButtonProps) {
 
 export function ClearButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.p'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -261,12 +225,7 @@ export function ClearButton(props: ButtonProps) {
 
 export function FixButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.i'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -290,12 +249,7 @@ export function FixButton(props: ButtonProps) {
 
 export function MinifyButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.y'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton
@@ -319,12 +273,7 @@ export function MinifyButton(props: ButtonProps) {
 
 export function PrettifyButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  useKeyPress(['ctrl.b'], (event) => {
-    event.preventDefault()
-    if (!props.disabled) {
-      onClick()
-    }
-  })
+
   return (
       <Box>
         <IconButton

client/components/Parts/Chips/Create.tsx

@@ -1,7 +1,6 @@
 import Chip from '@mui/material/Chip'
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
 import LightTooltip from '../Tooltips/Light'
-import { useKeyPress } from 'ahooks'
 
 // TODO: create BaseChip / move concrete to appliction?
 
@@ -10,12 +9,9 @@ export interface CreateChipProps {
 }
 
 export default function CreateChip(props: CreateChipProps) {
-  useKeyPress(['ctrl.u'], (event) => {
-    event.preventDefault()
-    props.onClick()
-  })
+
   return (
-    <LightTooltip title="Create text, json, more [CTRL+U]">
+    <LightTooltip title="Create text, json, more">
       <Chip
         onClick={props.onClick}
         color="primary"