Refactor and improve grid keyboard handling

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -46,56 +46,56 @@
       }
     }
 
+    // Sugar for preventing default
+    const handle = async fn => {
+      e.preventDefault()
+      await fn()
+    }
+
     // Handle certain key presses regardless of selection state
     if (e.metaKey || e.ctrlKey) {
       switch (e.key) {
         case "c":
-          e.preventDefault()
+          return handle(() => dispatch("copy"))
-          dispatch("copy")
-          return
         case "v":
-          e.preventDefault()
+          return handle(() => dispatch("paste"))
-          dispatch("paste")
-          return
         case "Enter":
-          e.preventDefault()
+          return handle(() => {
             if ($config.canAddRows) {
               dispatch("add-row-inline")
             }
-          return
+          })
       }
     }
 
     // Handle certain key presses if we have cells selected
     if ($selectedCellCount) {
-      e.preventDefault()
       switch (e.key) {
         case "ArrowLeft":
-          changeFocusedColumn(-1, e.shiftKey)
+          return handle(() => changeFocusedColumn(-1, e.shiftKey))
-          break
         case "ArrowRight":
-          changeFocusedColumn(1, e.shiftKey)
+          return handle(() => changeFocusedColumn(1, e.shiftKey))
-          break
         case "ArrowUp":
-          changeFocusedRow(-1, e.shiftKey)
+          return handle(() => changeFocusedRow(-1, e.shiftKey))
-          break
         case "ArrowDown":
-          changeFocusedRow(1, e.shiftKey)
+          return handle(() => changeFocusedRow(1, e.shiftKey))
-          break
+        case "Escape":
+          return handle(selectedCells.actions.clear)
       }
-      return
     }
 
-    // If nothing selected avoid processing further key presses
+    // Handle certain key presses only if no cell focused
     if (!$focusedCellId) {
       if (e.key === "Tab" || e.key?.startsWith("Arrow")) {
-        e.preventDefault()
+        handle(focusFirstCell)
-        focusFirstCell()
       } else if (e.key === "Delete" || e.key === "Backspace") {
+        handle(() => {
           if (Object.keys($selectedRows).length && $config.canDeleteRows) {
             dispatch("request-bulk-delete")
           }
+        })
       }
+      // Avoid processing anything else
       return
     }
 
@@ -105,18 +105,19 @@
       // By setting a tiny timeout here we can ensure that other listeners
       // which depend on being able to read cell state on an escape keypress
       // get a chance to observe the true state before we blur
+      return handle(() => {
         if (api?.isActive()) {
           setTimeout(api?.blur, 10)
         } else {
           $focusedCellId = null
         }
         menu.actions.close()
-      return
+      })
     } else if (e.key === "Tab") {
-      e.preventDefault()
+      return handle(() => {
         api?.blur?.()
         changeFocusedColumn(1)
-      return
+      })
     }
 
     // Pass the key event to the selected cell and let it decide whether to
@@ -127,7 +128,6 @@
         return
       }
     }
-    e.preventDefault()
 
     // Handle the key ourselves
     if (e.metaKey || e.ctrlKey) {
@@ -135,30 +135,26 @@
     } else {
       switch (e.key) {
         case "ArrowLeft":
-          changeFocusedColumn(-1, e.shiftKey)
+          return handle(() => changeFocusedColumn(-1, e.shiftKey))
-          break
         case "ArrowRight":
-          changeFocusedColumn(1, e.shiftKey)
+          return handle(() => changeFocusedColumn(1, e.shiftKey))
-          break
         case "ArrowUp":
-          changeFocusedRow(-1, e.shiftKey)
+          return handle(() => changeFocusedRow(-1, e.shiftKey))
-          break
         case "ArrowDown":
-          changeFocusedRow(1, e.shiftKey)
+          return handle(() => changeFocusedRow(1, e.shiftKey))
-          break
         case "Delete":
         case "Backspace":
+          return handle(() => {
             if (Object.keys($selectedRows).length && $config.canDeleteRows) {
               dispatch("request-bulk-delete")
             } else {
               deleteSelectedCell()
             }
-          break
+          })
         case "Enter":
-          focusCell()
+          return handle(focusCell)
-          break
         default:
-          startEnteringValue(e.key, e.which)
+          return handle(() => startEnteringValue(e.key, e.which))
       }
     }
   }