CLEANUP: Reimplement notebook keyboard shortcuts more simply. (#757)

Author: epatters

packages/frontend/package.json

@@ -39,7 +39,7 @@
         "@solid-primitives/active-element": "^2.1.1",
         "@solid-primitives/context": "^0.3.1",
         "@solid-primitives/destructure": "^0.2.1",
-        "@solid-primitives/keyboard": "^1.3.1",
+        "@solid-primitives/event-listener": "^2.4.3",
         "@solid-primitives/timer": "^1.4.1",
         "@solidjs/router": "^0.15.3",
         "@viz-js/viz": "^3.15.0",

packages/frontend/pnpm-lock.yaml

@@ -1,6 +1,7 @@
-import type { KbdKey } from "@solid-primitives/keyboard";
 import { For, type JSX, Show, createMemo, createSignal, onMount } from "solid-js";
 
+import type { KbdKey } from "../util/keyboard";
+
 import "./completions.css";
 
 /** A possible completion. */
@@ -96,7 +97,7 @@ export function Completions(props: {
                             <div class="completion-name">{c.name}</div>
                             <Show when={c.shortcut}>
                                 <div class="completion-shortcut">
-                                    <KbdShortcut shortcut={c.shortcut as KbdKey[]} />
+                                    <KbdShortcut shortcut={c.shortcut ?? []} />
                                 </div>
                             </Show>
                         </div>

packages/frontend/src/components/completions.tsx

@@ -11,7 +11,6 @@ import {
     type CellConstructor,
     type FormalCellEditorProps,
     NotebookEditor,
-    cellShortcutModifier,
     newFormalCell,
 } from "../notebook";
 import { DocumentBreadcrumbs, DocumentLoadingScreen, Toolbar } from "../page";
@@ -179,7 +178,7 @@ function diagramCellConstructor(meta: InstanceTypeMeta): CellConstructor<Diagram
     return {
         name,
         description,
-        shortcut: shortcut && [cellShortcutModifier, ...shortcut],
+        shortcut,
         construct() {
             return meta.tag === "ObType"
                 ? newFormalCell(newDiagramObjectDecl(meta.obType))

packages/frontend/src/diagram/diagram_editor.tsx

@@ -12,7 +12,6 @@ import {
     type FormalCellEditorProps,
     NotebookEditor,
     NotebookUtils,
-    cellShortcutModifier,
     newFormalCell,
 } from "../notebook";
 import { DocumentBreadcrumbs, DocumentLoadingScreen, Toolbar } from "../page";
@@ -195,7 +194,7 @@ function modelCellConstructor(meta: ModelTypeMeta): CellConstructor<ModelJudgmen
     return {
         name,
         description,
-        shortcut: shortcut && [cellShortcutModifier, ...shortcut],
+        shortcut,
         construct() {
             return meta.tag === "ObType"
                 ? newFormalCell(newObjectDecl(meta.obType))

packages/frontend/src/model/model_editor.tsx

@@ -1,7 +1,7 @@
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import type { DocHandle, Prop } from "@automerge/automerge-repo";
-import { type KbdKey, createShortcut } from "@solid-primitives/keyboard";
+import { makeEventListener } from "@solid-primitives/event-listener";
 import ListPlus from "lucide-solid/icons/list-plus";
 import {
     type Component,
@@ -17,6 +17,7 @@ import invariant from "tiny-invariant";
 
 import type { Cell, Notebook } from "catlog-wasm";
 import { type Completion, IconButton } from "../components";
+import { type KbdKey, type ModifierKey, keyEventHasModifier } from "../util/keyboard";
 import {
     type CellActions,
     type FormalCellEditorProps,
@@ -137,7 +138,7 @@ export function NotebookEditor<T>(props: {
         {
             name: "Text",
             description: "Start writing text",
-            shortcut: [cellShortcutModifier, "T"],
+            shortcut: ["T"],
             construct: () => newRichTextCell(),
         },
         ...(props.cellConstructors ?? []),
@@ -149,21 +150,27 @@ export function NotebookEditor<T>(props: {
             return {
                 name,
                 description,
-                shortcut,
+                shortcut: shortcut && [cellShortcutModifier, ...shortcut],
                 onComplete: () => replaceCellWith(i, cc.construct()),
             };
         });
 
-    createEffect(() => {
+    makeEventListener(window, "keydown", (evt) => {
         if (props.noShortcuts) {
             return;
         }
-        for (const command of insertCommands()) {
-            if (command.shortcut) {
-                createShortcut(command.shortcut, () => command.onComplete?.());
+        if (keyEventHasModifier(evt, cellShortcutModifier)) {
+            for (const command of insertCommands()) {
+                if (command.shortcut && evt.key.toUpperCase() === command.shortcut[0]) {
+                    command.onComplete?.();
+                    return evt.preventDefault();
+                }
             }
         }
-        createShortcut(["Shift", "Enter"], () => addAfterActiveCell(newStemCell()));
+        if (evt.shiftKey && evt.key === "Enter") {
+            addAfterActiveCell(newStemCell());
+            return evt.preventDefault();
+        }
     });
 
     // Set up drag and drop for notebook cells. Each cell reports to the
@@ -369,4 +376,4 @@ The choice is platform-specific: On Mac, the Alt/Option key remaps keys, so we
 use Control, whereas on other platforms Control tends to be already bound in
 other shortcuts, so we Alt.
  */
-export const cellShortcutModifier: KbdKey = navigator.userAgent.includes("Mac") ? "Control" : "Alt";
+const cellShortcutModifier: ModifierKey = navigator.userAgent.includes("Mac") ? "Control" : "Alt";

packages/frontend/src/notebook/notebook_editor.tsx

@@ -1,9 +1,8 @@
-import type { KbdKey } from "@solid-primitives/keyboard";
-
 import type { DblModel, DblTheory, MorType, ObOp, ObType } from "catlog-wasm";
 import { MorTypeIndex, ObTypeIndex } from "catlog-wasm";
 import type { DiagramAnalysisComponent, ModelAnalysisComponent } from "../analysis";
 import { uniqueIndexArray } from "../util/indexing";
+import type { KbdKey } from "../util/keyboard";
 import type { ArrowStyle } from "../visualization";
 
 /** A double theory configured for the frontend.

packages/frontend/src/theory/theory.ts

@@ -0,0 +1,26 @@
+/** Utilities for keyboard events and shortcuts.
+
+The types `ModifierKey` and `KbdKey` are borrowed from
+`@solid-primitives/keyboard`, a package that we're no longer using.
+
+@module
+ */
+
+export type ModifierKey = "Alt" | "Control" | "Meta" | "Shift";
+export type KbdKey = ModifierKey | (string & {});
+
+/** Returns whether the modifier key is active in the keyboard event. */
+export function keyEventHasModifier(evt: KeyboardEvent, key: ModifierKey): boolean {
+    switch (key) {
+        case "Alt":
+            return evt.altKey;
+        case "Control":
+            return evt.ctrlKey;
+        case "Meta":
+            return evt.metaKey;
+        case "Shift":
+            return evt.shiftKey;
+        default:
+            throw new Error(`Key is not a modifier: ${key}`);
+    }
+}