chore: Remove react-keydown (#2713)

* First steps of remove react-keydown, replace with hook

* RegisterKeyDown component to aid transition away from react-keydown

app/components/InputSearchPage.js

@@ -1,20 +1,17 @@
 // @flow
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import styled, { useTheme } from "styled-components";
 import Input from "./Input";
-import { type Theme } from "types";
-import { meta } from "utils/keyboard";
+import useBoolean from "hooks/useBoolean";
+import useKeyDown from "hooks/useKeyDown";
+import { isModKey } from "utils/keyboard";
 import { searchUrl } from "utils/routeHelpers";
 
-type Props = {
-  history: RouterHistory,
-  theme: Theme,
+type Props = {|
   source: string,
   placeholder?: string,
   label?: string,
@@ -23,78 +20,77 @@ type Props = {
   value: string,
   onChange: (event: SyntheticInputEvent<>) => mixed,
   onKeyDown: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  t: TFunction,
-};
+|};
 
-@observer
-class InputSearchPage extends React.Component<Props> {
-  input: ?Input;
-  @observable focused: boolean = false;
+function InputSearchPage({
+  onKeyDown,
+  value,
+  onChange,
+  placeholder,
+  label,
+  collectionId,
+  source,
+}: Props) {
+  const inputRef = React.useRef();
+  const theme = useTheme();
+  const history = useHistory();
+  const { t } = useTranslation();
+  const [isFocused, setFocused, setUnfocused] = useBoolean(false);
 
-  @keydown(`${meta}+f`)
-  focus(ev: SyntheticEvent<>) {
-    ev.preventDefault();
+  const focus = React.useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
 
-    if (this.input) {
-      this.input.focus();
-    }
-  }
-
-  handleKeyDown = (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (ev.key === "Enter") {
+  useKeyDown("f", (ev: KeyboardEvent) => {
+    if (isModKey(ev)) {
       ev.preventDefault();
-      this.props.history.push(
-        searchUrl(ev.currentTarget.value, {
-          collectionId: this.props.collectionId,
-          ref: this.props.source,
-        })
-      );
+      focus();
     }
+  });
 
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(ev);
-    }
-  };
+  const handleKeyDown = React.useCallback(
+    (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        history.push(
+          searchUrl(ev.currentTarget.value, {
+            collectionId,
+            ref: source,
+          })
+        );
+      }
 
-  handleFocus = () => {
-    this.focused = true;
-  };
+      if (onKeyDown) {
+        onKeyDown(ev);
+      }
+    },
+    [history, collectionId, source, onKeyDown]
+  );
 
-  handleBlur = () => {
-    this.focused = false;
-  };
-
-  render() {
-    const { t, value, onChange } = this.props;
-    const { theme, placeholder = `${t("Search")}…` } = this.props;
-
-    return (
-      <InputMaxWidth
-        ref={(ref) => (this.input = ref)}
-        type="search"
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onKeyDown={this.handleKeyDown}
-        icon={
-          <SearchIcon
-            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
-          />
-        }
-        label={this.props.label}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        margin={0}
-        labelHidden
-      />
-    );
-  }
+  return (
+    <InputMaxWidth
+      ref={inputRef}
+      type="search"
+      placeholder={placeholder || `${t("Search")}…`}
+      value={value}
+      onChange={onChange}
+      onKeyDown={handleKeyDown}
+      icon={
+        <SearchIcon
+          color={isFocused ? theme.inputBorderFocused : theme.inputBorder}
+        />
+      }
+      label={label}
+      onFocus={setFocused}
+      onBlur={setUnfocused}
+      margin={0}
+      labelHidden
+    />
+  );
 }
 
 const InputMaxWidth = styled(Input)`
   max-width: 30vw;
 `;
 
-export default withTranslation()<InputSearchPage>(
-  withTheme(withRouter(InputSearchPage))
-);
+export default observer(InputSearchPage);

app/components/Layout.js

@@ -5,7 +5,6 @@ import { MenuIcon } from "outline-icons";
 import * as React from "react";
 import { Helmet } from "react-helmet";
 import { withTranslation } from "react-i18next";
-import keydown from "react-keydown";
 import {
   Switch,
   Route,
@@ -22,11 +21,12 @@ import ErrorSuspended from "scenes/ErrorSuspended";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
+import RegisterKeyDown from "components/RegisterKeyDown";
 import Sidebar from "components/Sidebar";
 import SettingsSidebar from "components/Sidebar/Settings";
 import SkipNavContent from "components/SkipNavContent";
 import SkipNavLink from "components/SkipNavLink";
-import { meta } from "utils/keyboard";
+import { isModKey } from "utils/keyboard";
 import {
   searchUrl,
   matchDocumentSlug as slug,
@@ -64,20 +64,13 @@ class Layout extends React.Component<Props> {
   scrollable: ?HTMLDivElement;
   @observable keyboardShortcutsOpen: boolean = false;
 
-  @keydown(`${meta}+.`)
-  handleToggleSidebar() {
-    this.props.ui.toggleCollapsedSidebar();
-  }
-
-  @keydown(["t", "/"])
-  goToSearch(ev: SyntheticEvent<>) {
+  goToSearch = (ev: KeyboardEvent) => {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.history.push(searchUrl());
-  }
+  };
 
-  @keydown("n")
-  goToNewDocument() {
+  goToNewDocument = () => {
     const { activeCollectionId } = this.props.ui;
     if (!activeCollectionId) return;
 
@@ -85,7 +78,7 @@ class Layout extends React.Component<Props> {
     if (!can.update) return;
 
     this.props.history.push(newDocumentPath(activeCollectionId));
-  }
+  };
 
   render() {
     const { auth, ui } = this.props;
@@ -97,6 +90,17 @@ class Layout extends React.Component<Props> {
 
     return (
       <Container column auto>
+        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
+        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
+        <RegisterKeyDown
+          trigger="."
+          handler={(event) => {
+            if (isModKey(event)) {
+              ui.toggleCollapsedSidebar();
+            }
+          }}
+        />
         <Helmet>
           <title>{team && team.name ? team.name : "Outline"}</title>
           <meta

app/components/RegisterKeyDown.js

@@ -0,0 +1,17 @@
+// @flow
+import useKeyDown, { type KeyFilter } from "hooks/useKeyDown";
+
+type Props = {
+  trigger: KeyFilter,
+  handler: (event: KeyboardEvent) => void,
+};
+
+/**
+ * This method is a wrapper around the useKeyDown hook to allow easier use in
+ * class components that have not yet been converted to functions. Do not use
+ * this method in functional components.
+ */
+export default function RegisterKeyDown({ trigger, handler }: Props) {
+  useKeyDown(trigger, handler);
+  return null;
+}

app/hooks/useKeyDown.js

@@ -0,0 +1,67 @@
+// @flow
+import * as React from "react";
+import isTextInput from "utils/isTextInput";
+
+export type KeyFilter = ((event: KeyboardEvent) => boolean) | string;
+
+// Registered keyboard event callbacks
+let callbacks = [];
+
+// Track if IME input suggestions are open so we can ignore keydown shortcuts
+// in this case, they should never be triggered from mobile keyboards.
+let imeOpen = false;
+
+// Based on implementation in react-use
+// https://github.com/streamich/react-use/blob/master/src/useKey.ts#L15-L22
+const createKeyPredicate = (keyFilter: KeyFilter) =>
+  typeof keyFilter === "function"
+    ? keyFilter
+    : typeof keyFilter === "string"
+    ? (event: KeyboardEvent) => event.key === keyFilter
+    : keyFilter
+    ? (_event) => true
+    : (_event) => false;
+
+export default function useKeyDown(
+  key: KeyFilter,
+  fn: (event: KeyboardEvent) => void
+): void {
+  const predicate = createKeyPredicate(key);
+
+  React.useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (predicate(event)) {
+        fn(event);
+      }
+    };
+
+    callbacks.push(handler);
+
+    return () => {
+      callbacks = callbacks.filter((cb) => cb !== handler);
+    };
+  }, []);
+}
+
+window.addEventListener("keydown", (event) => {
+  if (imeOpen) {
+    return;
+  }
+
+  // reverse so that the last registered callbacks get executed first
+  for (const callback of callbacks.reverse()) {
+    if (event.defaultPrevented === true) {
+      break;
+    }
+    if (!isTextInput(event.target) || event.ctrlKey || event.metaKey) {
+      callback(event);
+    }
+  }
+});
+
+window.addEventListener("compositionstart", () => {
+  imeOpen = true;
+});
+window.addEventListener("compositionend", () => {
+  imeOpen = false;
+});

app/hooks/usePrevious.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 
-export default function usePrevious(value: any) {
+export default function usePrevious<T>(value: T): T | void {
   const ref = React.useRef();
   React.useEffect(() => {
     ref.current = value;

app/scenes/Document/components/Document.js

@@ -6,7 +6,6 @@ import { InputIcon } from "outline-icons";
 import { AllSelection } from "prosemirror-state";
 import * as React from "react";
 import { type TFunction, Trans, withTranslation } from "react-i18next";
-import keydown from "react-keydown";
 import { Prompt, Route, withRouter } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
 import styled from "styled-components";
@@ -27,6 +26,7 @@ import Modal from "components/Modal";
 import Notice from "components/Notice";
 import PageTitle from "components/PageTitle";
 import PlaceholderDocument from "components/PlaceholderDocument";
+import RegisterKeyDown from "components/RegisterKeyDown";
 import Time from "components/Time";
 import Container from "./Container";
 import Contents from "./Contents";
@@ -39,7 +39,7 @@ import References from "./References";
 import { type LocationWithState, type NavigationNode, type Theme } from "types";
 import { isCustomDomain } from "utils/domains";
 import { emojiToUrl } from "utils/emoji";
-import { meta } from "utils/keyboard";
+import { isModKey } from "utils/keyboard";
 import {
   documentMoveUrl,
   documentHistoryUrl,
@@ -148,8 +148,7 @@ class DocumentScene extends React.Component<Props> {
     this.updateIsDirty();
   };
 
-  @keydown("m")
-  goToMove(ev) {
+  goToMove = (ev) => {
     if (!this.props.readOnly) return;
 
     ev.preventDefault();
@@ -158,10 +157,9 @@ class DocumentScene extends React.Component<Props> {
     if (abilities.move) {
       this.props.history.push(documentMoveUrl(document));
     }
-  }
+  };
 
-  @keydown("e")
-  goToEdit(ev) {
+  goToEdit = (ev) => {
     if (!this.props.readOnly) return;
 
     ev.preventDefault();
@@ -170,18 +168,16 @@ class DocumentScene extends React.Component<Props> {
     if (abilities.update) {
       this.props.history.push(editDocumentUrl(document));
     }
-  }
+  };
 
-  @keydown("esc")
-  goBack(ev) {
+  goBack = (ev) => {
     if (this.props.readOnly) return;
 
     ev.preventDefault();
     this.props.history.goBack();
-  }
+  };
 
-  @keydown("h")
-  goToHistory(ev) {
+  goToHistory = (ev) => {
     if (!this.props.readOnly) return;
 
     ev.preventDefault();
@@ -192,18 +188,16 @@ class DocumentScene extends React.Component<Props> {
     } else {
       this.props.history.push(documentHistoryUrl(document));
     }
-  }
+  };
 
-  @keydown(`${meta}+shift+p`)
-  onPublish(ev) {
+  onPublish = (ev) => {
     ev.preventDefault();
     const { document } = this.props;
     if (document.publishedAt) return;
     this.onSave({ publish: true, done: true });
-  }
+  };
 
-  @keydown("ctrl+alt+h")
-  onToggleTableOfContents(ev) {
+  onToggleTableOfContents = (ev) => {
     if (!this.props.readOnly) return;
 
     ev.preventDefault();
@@ -214,7 +208,7 @@ class DocumentScene extends React.Component<Props> {
     } else {
       ui.showTableOfContents();
     }
-  }
+  };
 
   onSave = async (
     options: {
@@ -381,6 +375,26 @@ class DocumentScene extends React.Component<Props> {
 
     return (
       <ErrorBoundary>
+        <RegisterKeyDown trigger="m" handler={this.goToMove} />
+        <RegisterKeyDown trigger="e" handler={this.goToEdit} />
+        <RegisterKeyDown trigger="Escape" handler={this.goBack} />
+        <RegisterKeyDown trigger="h" handler={this.goToHistory} />
+        <RegisterKeyDown
+          trigger="p"
+          handler={(event) => {
+            if (isModKey(event) && event.shiftKey) {
+              this.onPublish(event);
+            }
+          }}
+        />
+        <RegisterKeyDown
+          trigger="h"
+          handler={(event) => {
+            if (event.ctrlKey && event.altKey) {
+              this.onToggleTableOfContents(event);
+            }
+          }}
+        />
         <Background
           key={revision ? revision.id : document.id}
           isShare={isShare}

app/scenes/Search/Search.js

@@ -7,7 +7,6 @@ import { PlusIcon } from "outline-icons";
 import queryString from "query-string";
 import * as React from "react";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
 import { withRouter, Link } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
 import { Waypoint } from "react-waypoint";
@@ -29,6 +28,7 @@ import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import LoadingIndicator from "components/LoadingIndicator";
 import PageTitle from "components/PageTitle";
+import RegisterKeyDown from "components/RegisterKeyDown";
 import CollectionFilter from "./components/CollectionFilter";
 import DateFilter from "./components/DateFilter";
 import SearchInput from "./components/SearchInput";
@@ -82,10 +82,9 @@ class Search extends React.Component<Props> {
     }
   }
 
-  @keydown("esc")
-  goBack() {
+  goBack = () => {
     this.props.history.goBack();
-  }
+  };
 
   handleKeyDown = (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
     if (ev.key === "Enter") {
@@ -269,6 +268,7 @@ class Search extends React.Component<Props> {
     return (
       <Container auto>
         <PageTitle title={this.title} />
+        <RegisterKeyDown trigger="Escape" handler={this.goBack} />
         {this.isLoading && <LoadingIndicator />}
         {notFound && (
           <div>

app/utils/isTextInput.js

@@ -0,0 +1,12 @@
+// @flow
+const inputs = ["input", "select", "button", "textarea"];
+
+// detect if node is a text input element
+export default function isTextInput(element: HTMLElement): boolean {
+  return (
+    element &&
+    (inputs.indexOf(element.tagName.toLowerCase()) !== -1 ||
+      element.attributes.getNamedItem("role")?.value === "textbox" ||
+      element.attributes.getNamedItem("contenteditable")?.value === "true")
+  );
+}