app/components/editor/typing.ts

Functions

Imports

It imports no other module of this repo. Imported by app/routes/book.file.tsx, app/routes/editor.tsx.

Source

1// The editor's chrome steps back while someone types and returns on a mouse move or when focus enters
2// it. Carrel's editor always did this for its own toolbar; it now covers the shell too, so the rail and
3// the top bar fall quiet with the rest. The state is one attribute on the document, read by app.css.
4
5import { useEffect } from "react";
6
7export function useTypingRecede() {
8  useEffect(() => {
9    const root = document.documentElement;
10    const settle = () => {
11      if (root.hasAttribute("data-typing")) root.removeAttribute("data-typing");
12    };
13    const type = (event: KeyboardEvent) => {
14      if (event.metaKey || event.ctrlKey || event.altKey || event.key.length !== 1) return;
15      // Only typing in the editing surface counts; a character typed in a dialog's field does not.
16      const target = event.target;
17      if (target instanceof HTMLElement && target.closest(".cm-editor, .app-rich-surface")) root.setAttribute("data-typing", "");
18    };
19    window.addEventListener("keydown", type);
20    window.addEventListener("mousemove", settle);
21    return () => {
22      window.removeEventListener("keydown", type);
23      window.removeEventListener("mousemove", settle);
24      root.removeAttribute("data-typing");
25    };
26  }, []);
27}