added ability to exit using ESC

lib/commands/core.js

@@ -0,0 +1,3 @@
+"use babel";
+
+export default [];

lib/components/command.js

@@ -12,18 +12,6 @@ export default Option = (props) => {
     // hide modal after executing
   }
 
-  function checkfocus() {
-    if (document.activeElement.id === "cpInput") {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const isHighlighted = {
-    backgroundColor: idx === 0 ? "var(--highlight-background)" : "",
-  };
-
   return (
     <a className="option flex-row" onClick={execute} href="#">
       <p className="nomargin">

lib/components/palette.js

@@ -5,12 +5,10 @@ import Option from "./command.js";
 import Commands from "../commands/application.js";
 import { logger, useModal } from "inkdrop";
 import useArrowKeyNavigation from "../navigation/hook.js";
-import { ipcRenderer } from "electron";
 
 const CommandPalette = (props) => {
   const modal = useModal();
   const { Dialog } = inkdrop.components.classes;
-  const parentRef = useArrowKeyNavigation({ selectors: "a,input" });
 
   const inputRef = useRef(null);
   const [searchQuery, setSearchQuery] = React.useState("");
@@ -23,6 +21,7 @@ const CommandPalette = (props) => {
     const sub = inkdrop.commands.add(document.body, {
       "commandpalette:toggle": toggle,
     });
+    console.log("useeffect triggered");
     return () => sub.dispose();
   }, [toggle]);
 
@@ -58,10 +57,15 @@ const CommandPalette = (props) => {
       {...modal.state}
       onBackdropClick={modal.close}
       className="commandpalette flex-col"
-      ref={parentRef}
     >
       <Dialog.Content className="commandpalette">
-        <div className="commandpalettewrapper flex-col" ref={parentRef}>
+        <div
+          className="commandpalettewrapper flex-col"
+          ref={useArrowKeyNavigation({
+            selectors: "a,input",
+            modal: modal.close,
+          })}
+        >
           <div className="flex-col contents">
             <div className="ui small input">
               <input

lib/navigation/handleEvents.js

@@ -7,6 +7,7 @@ function handleEnter({ event, currentIndex, availableElements }) {
   } else {
     clickElement = availableElements[currentIndex];
   }
+  if (clickElement === undefined) return;
   clickElement.click();
   event.preventDefault();
 }
@@ -40,12 +41,13 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
 export default function handleEvents({
   event,
   parentNode,
+  modal,
   selectors = "a,button,input",
 }) {
   if (!parentNode) return;
 
   const key = event.key;
-  if (!["ArrowUp", "ArrowDown", "Enter"].includes(key)) {
+  if (!["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(key)) {
     return;
   }
 
@@ -68,5 +70,12 @@ export default function handleEvents({
   if (key === "Enter") {
     handleEnter({ event, currentIndex, availableElements });
   }
+
+  if (key === "Escape") {
+    modal();
+    event.preventDefault();
+    return;
+  }
+
   handleArrowKey({ event, currentIndex, availableElements });
 }

lib/navigation/hook.js

@@ -9,12 +9,17 @@ import { useRef, useEffect } from "react";
  * @returns a useRef, which can be applied to a component
  */
 export default function useArrowKeyNavigation(props) {
-  const { selectors } = props || {};
+  const { selectors, modal } = props || {};
   const parentNode = useRef();
 
   useEffect(() => {
     const eventHandler = (event) => {
-      handleEvents({ event, parentNode: parentNode.current, selectors });
+      handleEvents({
+        event,
+        parentNode: parentNode.current,
+        selectors,
+        modal: modal,
+      });
     };
     document.addEventListener("keydown", eventHandler);
     return () => document.removeEventListener("keydown", eventHandler);