Do not steal focus from editable elements on the page

Author: dmtrKovalenko

src/components/DocSearch.js

@@ -4,10 +4,13 @@ type options = {
   inputSelector: string,
 }
 
+@bs.val @bs.scope("document")
+external activeElement: option<Dom.element> = "activeElement"
+
 @bs.val @bs.scope("window")
 external docsearch: option<options => unit> = "docsearch"
 
-type keyboardEventLike = {key: string}
+type keyboardEventLike = {key: string, ctrlKey: bool, metaKey: bool}
 
 @bs.val @bs.scope("window")
 external addKeyboardEventListener: (string, keyboardEventLike => unit) => unit = "addEventListener"
@@ -16,10 +19,15 @@ external addKeyboardEventListener: (string, keyboardEventLike => unit) => unit =
 external removeKeyboardEventListener: (string, keyboardEventLike => unit) => unit =
   "addEventListener"
 
+@bs.send
+external keyboardEventPreventDefault: keyboardEventLike => unit = "preventDefault"
+
 type state =
   | Active
   | Inactive
 
+@bs.get external isContentEditable: Dom.element => bool = "isContentEditable"
+@bs.get external tagName: Dom.element => string = "tagName"
 @bs.send external focus: Dom.element => unit = "focus"
 @bs.send external blur: Dom.element => unit = "blur"
 @bs.set external value: (Dom.element, string) => unit = "value"
@@ -41,20 +49,40 @@ let make = () => {
     | None => ()
     }
 
-    let handleKeyDown = e => {
-      if e.key == "/" {
-        setState(_ => Active)
+    None
+  }, [])
+
+  React.useEffect1(() => {
+    let isEditableTag = el =>
+      switch el->tagName {
+      | "TEXTAREA" | "SELECT" | "INPUT" => true
+      | _ => false
+      }
 
-        Js.Global.setTimeout(() => {
-          // execture focus in the next tick to avoid setting / inside input
+    let focusSearch = e => {
+      switch activeElement {
+      | Some(el) when el->isEditableTag => ()
+      | Some(el) when el->isContentEditable => ()
+      | _ => {
+          setState(_ => Active)
           inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(focus)
-        }, 0)->ignore
+
+          e->keyboardEventPreventDefault
+        }
       }
     }
 
-    addKeyboardEventListener("keydown", handleKeyDown)
-    Some(() => removeKeyboardEventListener("keydown", handleKeyDown))
-  }, [])
+    let handleGlobalKeyDown = e => {
+      switch e.key {
+      | "/" => focusSearch(e)
+      | "k" when e.ctrlKey || e.metaKey => focusSearch(e)
+      | _ => ()
+      }
+    }
+
+    addKeyboardEventListener("keydown", handleGlobalKeyDown)
+    Some(() => removeKeyboardEventListener("keydown", handleGlobalKeyDown))
+  }, [setState])
 
   let focusInput = () =>
     inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)