Hide document UI while typing

app/scenes/Document/components/KeyboardShortcutsButton.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { useEditingFocus } from "~/components/DocumentContext";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useStores from "~/hooks/useStores";
@@ -12,6 +13,7 @@ import useStores from "~/hooks/useStores";
 function KeyboardShortcutsButton() {
   const { t } = useTranslation();
   const { dialogs } = useStores();
+  const isEditingFocus = useEditingFocus();
 
   const handleOpenKeyboardShortcuts = () => {
     dialogs.openGuide({
@@ -22,18 +24,20 @@ function KeyboardShortcutsButton() {
 
   return (
     <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
-      <Button onClick={handleOpenKeyboardShortcuts}>
+      <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
         <KeyboardIcon />
       </Button>
     </Tooltip>
   );
 }
 
-const Button = styled(NudeButton)`
+const Button = styled(NudeButton)<{ $hidden: boolean }>`
   display: none;
   position: fixed;
   bottom: 0;
   margin: 24px;
+  transition: opacity 500ms ease-in-out;
+  ${(props) => props.$hidden && "opacity: 0;"}
 
   ${breakpoint("tablet")`
     display: block;