fix(editor): restore Find and missing editing shortcuts

.github/workflows/e2e-local.yml

@@ -55,6 +55,7 @@ jobs:
                     [
                         home,
                         editor,
+                        editor-find,
                         manual,
                         manual-examples,
                         manual-code,

docs/guide/reference/shortcuts.md

@@ -27,6 +27,33 @@ On macOS, Command is the main shortcut modifier. Windows and Linux use Ctrl.
 
 Evaluation needs a running Csound performance. A table plot needs a supported definition. When a browser or operating system takes a shortcut, use the corresponding page control instead.
 
+## Find and edit
+
+Click in an editor, then press Command+F on macOS or Ctrl+F on Windows and Linux. Find searches that file, even when several editors are open. The panel includes replace, regular expressions, case matching, and whole-word search. Read-only tool output supports Find without replace.
+
+Press Enter in the Find field for the next match, or Shift+Enter for the previous match. Escape closes the panel and returns focus to the editor. Replace all is one undo step. With focus outside an editor, the browser keeps its own Find shortcut.
+
+| Action                                  | macOS                       | Windows / Linux          |
+| --------------------------------------- | --------------------------- | ------------------------ |
+| Find and replace                        | Command+F                   | Ctrl+F                   |
+| Next match                              | Command+G or F3             | Ctrl+G or F3             |
+| Previous match                          | Command+Shift+G or Shift+F3 | Ctrl+Shift+G or Shift+F3 |
+| Select next occurrence                  | Command+D                   | Ctrl+D                   |
+| Select all occurrences of selected text | Command+Shift+L             | Ctrl+Shift+L             |
+| Go to line                              | Command+Option+G            | Ctrl+Alt+G               |
+
+The source editor also supports these commands:
+
+| Action                                | macOS                          | Windows / Linux                |
+| ------------------------------------- | ------------------------------ | ------------------------------ |
+| Fold / unfold code at cursor          | Command+Option+[ / ]           | Ctrl+Shift+[ / ]               |
+| Fold / unfold all code                | Ctrl+Alt+[ / ]                 | Ctrl+Alt+[ / ]                 |
+| Open error list                       | Command+Shift+M                | Ctrl+Shift+M                   |
+| Next error or warning                 | F8                             | F8                             |
+| Delete both brackets of an empty pair | Backspace between the brackets | Backspace between the brackets |
+
+Folding follows the file's language. Error shortcuts use messages already reported by Csound or the background checker.
+
 ## Plot windows and piano
 
 Escape closes the focused table plot. With several plots, focus returns through the windows you used.

package.json

@@ -49,6 +49,7 @@
         "@codemirror/lang-markdown": "^6.5.2",
         "@codemirror/language": "^6.13.1",
         "@codemirror/lint": "^6.9.7",
+        "@codemirror/search": "^6.7.2",
         "@codemirror/state": "^6.7.6",
         "@codemirror/view": "^6.43.14",
         "@csound/browser": "7.0.0-beta41",

puppeteer-tests/fixtures/editor-find.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Editor Find check</title>
+        <style>
+            body {
+                margin: 0;
+                font-family: system-ui, sans-serif;
+            }
+            main {
+                padding: 16px;
+                display: grid;
+                gap: 16px;
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+            header {
+                grid-column: 1 / -1;
+            }
+            section {
+                min-width: 0;
+            }
+            h2 {
+                font-size: 14px;
+                margin: 0 0 8px;
+            }
+            .editor-host {
+                height: 300px;
+            }
+            @media (max-width: 600px) {
+                main {
+                    grid-template-columns: minmax(0, 1fr);
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./editor-find.tsx"></script>
+    </body>
+</html>

puppeteer-tests/fixtures/editor-find.tsx

@@ -0,0 +1,159 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { setDiagnostics } from "@codemirror/lint";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import Editor, { openEditors } from "../../src/components/editor/editor";
+import { CodePane } from "../../src/components/score-tools/code-pane";
+import HotKeys from "../../src/components/hot-keys/hot-keys";
+import HotKeysReducer from "../../src/components/hot-keys/reducer";
+import dark from "../../src/styles/_theme-dracula";
+import light from "../../src/styles/_theme-github-light";
+
+// Real editor components and global shortcuts, without cloud reads or writes.
+const store = configureStore({
+    reducer: {
+        HotKeysReducer,
+        ProjectsReducer: () => ({ projects: { "find-fixture": {} } })
+    }
+});
+const lightMode = new URLSearchParams(location.search).has("light");
+const theme = createTheme({
+    ...(lightMode ? light : dark),
+    font: { regular: "system-ui, sans-serif", monospace: "monospace" }
+});
+document.body.style.background = theme.background;
+document.body.style.color = theme.textColor;
+history.replaceState(null, "", "/editor/find-fixture");
+
+(window as any).editorFindFixture = {
+    text: (id: string) => openEditors.get(id)?.state.doc.toString(),
+    cursorLine: (id: string) => {
+        const state = openEditors.get(id)!.state;
+        return state.doc.lineAt(state.selection.main.head).number;
+    },
+    selection: (id: string) => {
+        const state = openEditors.get(id)!.state;
+        return state.sliceDoc(
+            state.selection.main.from,
+            state.selection.main.to
+        );
+    },
+    select: (id: string, from: number, to = from) => {
+        openEditors
+            .get(id)!
+            .dispatch({ selection: { anchor: from, head: to } });
+    },
+    ranges: (id: string) =>
+        openEditors
+            .get(id)!
+            .state.selection.ranges.map(({ from, to }) => ({ from, to })),
+    diagnostics: () => {
+        const view = openEditors.get("first")!;
+        view.dispatch(
+            setDiagnostics(view.state, [
+                {
+                    from: 2,
+                    to: 11,
+                    severity: "error",
+                    message: "Example error"
+                },
+                {
+                    from: 12,
+                    to: 17,
+                    severity: "warning",
+                    message: "Example warning"
+                }
+            ])
+        );
+    },
+    lastFindPrevented: undefined
+};
+document.addEventListener("keydown", (event) => {
+    if (event.key.toLowerCase() === "f" && (event.metaKey || event.ctrlKey))
+        (window as any).editorFindFixture.lastFindPrevented =
+            event.defaultPrevented;
+});
+
+function Source({
+    id,
+    value,
+    filename = `${id}.csd`
+}: {
+    id: string;
+    value: string;
+    filename?: string;
+}) {
+    const [text, setText] = useState(value);
+    return (
+        <section data-editor={id}>
+            <h2>{filename}</h2>
+            <div className="editor-host">
+                <Editor
+                    documentUid={id}
+                    projectUid="find-fixture"
+                    buffer={{ filename, value: text }}
+                    onBufferChange={setText}
+                />
+            </div>
+        </section>
+    );
+}
+
+function Fixture() {
+    const [source, setSource] = useState("i1 0 1\ni2 1 1");
+    return (
+        <HotKeys>
+            <main>
+                <header>
+                    <label>
+                        Outside editor <input aria-label="Outside editor" />
+                    </label>
+                </header>
+                <Source
+                    id="first"
+                    filename="first.orc"
+                    value={
+                        "; untouched alpha\ninstr 1\n  aSignal oscili 0.1, 440\nendin"
+                    }
+                />
+                <Source
+                    id="second"
+                    value={
+                        "; alpha ALPHA alphabet alpha\n; tone12 tone34\ninstr 2\nendin"
+                    }
+                />
+                <section data-editor="tool-source">
+                    <h2>Tool source</h2>
+                    <div className="editor-host">
+                        <CodePane
+                            value={source}
+                            label="Tool source"
+                            language={[]}
+                            onChange={setSource}
+                        />
+                    </div>
+                </section>
+                <section data-editor="tool-output">
+                    <h2>Tool output (read only)</h2>
+                    <div className="editor-host">
+                        <CodePane
+                            value={"i1 0 1\ni2 1 1"}
+                            label="Tool output"
+                            language={[]}
+                        />
+                    </div>
+                </section>
+            </main>
+        </HotKeys>
+    );
+}
+
+createRoot(document.getElementById("root")!).render(
+    <Provider store={store}>
+        <ThemeProvider theme={theme}>
+            <Fixture />
+        </ThemeProvider>
+    </Provider>
+);