@adecore/editor 0.0.1 → 0.17.0-beta.1

package/src/controller.ts

@@ -0,0 +1,838 @@
+import type { Keymap } from './keymap-table.ts';
+import type { CommandOptions, EditorCommand, Selection, TextEdit } from '@adecore/editor-core';
+import { replacementEdits } from './input.ts';
+import { chordMatches, type KeyAction, keyAction, type MoveKey } from './keymap.ts';
+import { DoubleModifierGesture } from './modifier-gesture.ts';
+import { NativeInput } from './native-input.ts';
+import { columnSelections, sameCell } from './column-selection.ts';
+import { PointerSelection } from './pointer.ts';
+import type {
+    EditorClick,
+    EditorClickHandler,
+    EditorContextMenu,
+    EditorKeyHandler,
+    EditorPosition,
+    EditorRunCommand,
+    EditorSelectionRanges,
+    EditorViewCommand,
+    KeyChord
+} from './types.ts';
+import type { EditorView } from './view.ts';
+
+export interface ControllerOptions {
+    keymap?: Keymap;
+    handBack: readonly KeyChord[];
+    apple: boolean;
+    save(): void;
+    blur(): void;
+}
+
+const MODIFYING = new Set<EditorCommand>([
+    'undo',
+    'redo',
+    'deleteWordLeft',
+    'deleteWordRight',
+    'deleteCamelLeft',
+    'deleteCamelRight',
+    'duplicateLine',
+    'deleteLine',
+    'moveLineUp',
+    'moveLineDown',
+    'toggleLineComment',
+    'toggleBlockComment',
+    'startNewLine',
+    'startNewLineBefore',
+    'splitLine',
+    'joinLines',
+    'toggleCase',
+    'autoIndentLines',
+    'insertTab',
+    'indent',
+    'outdent',
+    'insertNewline',
+    'smartBackspace',
+    'deleteForward'
+]);
+
+const VIEW_COMMANDS = new Set<EditorViewCommand>([
+    'collapseRegion',
+    'expandRegion',
+    'collapseAllRegions',
+    'expandAllRegions',
+    'collapseRegionRecursively',
+    'expandRegionRecursively',
+    'foldSelection',
+    'collapseDocComments',
+    'expandDocComments',
+    'expandAllToLevel1',
+    'expandAllToLevel2',
+    'expandAllToLevel3',
+    'expandAllToLevel4',
+    'expandAllToLevel5',
+    'toggleColumnMode'
+]);
+
+/* The clipboard text of the last copy or cut of a bare caret, which pastes back as whole lines. Shared, since it can be pasted in another editor. */
+let lineClip: string | null = null;
+
+/* Typing in the same stretch is one undo step until a pause this long. */
+const TYPING_PAUSE_MS = 750;
+const PAIR_CHARACTER = /^[()[\]{}'"`;<]$/;
+
+/*
+ * What a person does to the editor: keys, typing, the clipboard, an input method, the mouse. It turns
+ * each into a command on the model and leaves the drawing to the view.
+ */
+export class InputController {
+    private readonly native: NativeInput;
+    private readonly pointer: PointerSelection;
+    private readonly cleanup: (() => void)[] = [];
+    private readonly keyHandlers = new Set<EditorKeyHandler>();
+    private readonly gesture: DoubleModifierGesture;
+    private readonly clickHandlers = new Set<EditorClickHandler>();
+    private readonly contextListeners = new Set<(menu: EditorContextMenu) => void>();
+    private readonly subscription: { dispose(): void };
+    private historyGroup = 0;
+    /* The two corners of a box being grown with the keys, and the selections it made, which say whether it is still the one on screen. */
+    private block: { anchor: { x: number; y: number }; head: { x: number; y: number }; signature: string } | null = null;
+    private selectionRanges: EditorSelectionRanges | null = null;
+    /* The Extend Selection presses that wait for a server's ranges, which are answered one after the other. */
+    private expansions: Promise<void> = Promise.resolve();
+    private lastInputAt = 0;
+    private desiredXs: number[] = [];
+    private keepDesiredXs = false;
+    private readonly view: EditorView;
+    private readonly options: ControllerOptions;
+
+    constructor(view: EditorView, options: ControllerOptions) {
+        this.view = view;
+        this.options = options;
+        this.gesture = new DoubleModifierGesture(options.apple ? 'Alt' : 'Control');
+        const { model, input, viewport } = view;
+        this.native = new NativeInput(input, model, {
+            readOnly: () => view.settings.readOnly,
+            replace: (text) => this.replaceSelections(text),
+            type: (character) => this.typeText(character),
+            apply: (edit, selection) => {
+                this.applyEdits([edit], [selection]);
+                view.revealCaret();
+            },
+            preview: (text) => view.setComposition(text),
+            selectionChanged: (selection) => {
+                this.historyGroup++;
+                model.setSelections([selection]);
+                view.revealCaret();
+            }
+        });
+        this.pointer = new PointerSelection({
+            model,
+            viewport,
+            offsetAt: (x, y) => view.offsetAtPoint(x, y),
+            contentPoint: (x, y) => view.contentPoint(x, y),
+            columnSelections: (from, to) => (sameCell(view.layout, from, to) ? null : columnSelections(view.layout, from, to)),
+            visualLine: (offset) => view.layout.visualLine(offset),
+            lineAt: (offset) => {
+                const row = view.layout.rowForLine(model.positionAt(offset).line);
+                return row.kind === 'text' ? { from: model.getLine(row.line).start, to: model.getLine(row.lastLine).next } : { from: offset, to: offset };
+            },
+            camelHumps: () => view.settings.smartKeys.camelHumps,
+            columnMode: () => view.columnMode,
+            selectionAt: (x, y) => (view.settings.readOnly ? null : view.selectionAtPoint(x, y)),
+            setDropCaret: (offset) => view.setDropCaret(offset),
+            drop: (from, to, offset, copy) => this.dropText(from, to, offset, copy),
+            copyHeld: (event) => (this.options.apple ? event.altKey : event.ctrlKey),
+            focus: () => view.focus(),
+            scrolled: () => view.requestRender()
+        });
+        this.subscription = model.subscribe(() => {
+            if (!this.keepDesiredXs) {
+                this.desiredXs = [];
+            }
+            this.native.sync();
+        });
+        this.native.sync();
+        this.attach();
+    }
+
+    private listen<Event extends keyof HTMLElementEventMap>(target: HTMLElement, name: Event, callback: (event: HTMLElementEventMap[Event]) => void): void {
+        target.addEventListener(name, callback);
+        this.cleanup.push(() => target.removeEventListener(name, callback));
+    }
+
+    private attach(): void {
+        const { input, viewport, root } = this.view;
+        const document = root.ownerDocument;
+        this.listen(input, 'keydown', (event) => this.keydown(event));
+        this.listen(input, 'beforeinput', (event) => this.beforeInput(event));
+        this.listen(input, 'input', () => this.native.onInput());
+        this.listen(input, 'compositionstart', () => {
+            this.historyGroup++;
+            this.native.startComposition();
+        });
+        this.listen(input, 'compositionend', (event) => {
+            this.native.endComposition(event.data);
+            this.historyGroup++;
+            this.view.render();
+        });
+        this.listen(input, 'select', () => this.native.readSelection());
+        this.listen(input, 'focus', () => this.view.requestRender());
+        this.listen(input, 'blur', () => {
+            this.gesture.reset();
+            this.view.requestRender();
+        });
+        this.listen(input, 'keyup', (event) => this.gesture.keyup(event));
+        this.listen(root, 'focusout', (event) => {
+            if (!(event.relatedTarget instanceof Node) || !root.contains(event.relatedTarget)) {
+                this.options.blur();
+            }
+        });
+        this.listen(input, 'paste', (event) => {
+            event.preventDefault();
+            this.paste(event.clipboardData?.getData('text/plain') ?? '');
+        });
+        this.listen(input, 'copy', (event) => this.copy(event, false));
+        this.listen(input, 'cut', (event) => this.copy(event, true));
+        this.listen(viewport, 'scroll', () => this.view.scrolled());
+        this.listen(viewport, 'wheel', () => this.view.cancelScroll());
+        this.listen(viewport, 'touchstart', () => this.view.cancelScroll());
+        this.listen(viewport, 'pointermove', (event) => this.view.hoverMoved(event));
+        this.listen(viewport, 'pointerleave', () => this.view.setHover(null));
+        this.listen(viewport, 'pointerdown', (event) => this.pointerDown(event));
+        this.listen(viewport, 'contextmenu', (event) => this.contextMenu(event));
+        this.listen(this.view.gutterElement, 'pointerdown', (event) => this.gutterDown(event));
+        this.listen(this.view.stickyElement, 'pointerdown', (event) => this.stickyDown(event));
+        const move = (event: Event): void => this.pointer.move(event as PointerEvent);
+        const end = (event: Event): void => {
+            this.pointer.end(event as PointerEvent);
+            this.historyGroup++;
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', end);
+        document.addEventListener('pointercancel', end);
+        this.cleanup.push(() => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', end);
+            document.removeEventListener('pointercancel', end);
+        });
+    }
+
+    dispose(): void {
+        this.subscription.dispose();
+        this.pointer.dispose();
+        for (const remove of this.cleanup) {
+            remove();
+        }
+        this.cleanup.length = 0;
+        this.keyHandlers.clear();
+    }
+
+    /* Tells a person why nothing happened, when the editor is read only and has said why. */
+    private blockedByReadOnly(): boolean {
+        if (!this.view.settings.readOnly) {
+            return false;
+        }
+        if (this.view.settings.readOnlyReason) {
+            this.view.notify(this.view.settings.readOnlyReason);
+        }
+        return true;
+    }
+
+    private inputGroup(): string {
+        const now = Date.now();
+        if (now - this.lastInputAt > TYPING_PAUSE_MS) {
+            this.historyGroup++;
+        }
+        this.lastInputAt = now;
+        return `view-input-${this.historyGroup}`;
+    }
+
+    private applyEdits(edits: readonly TextEdit[], selections?: readonly Selection[]): boolean {
+        if (this.view.settings.readOnly) {
+            return false;
+        }
+        return this.view.model.applyEdits(edits, { selections, source: 'input', historyGroup: this.inputGroup() });
+    }
+
+    private replaceSelections(text: string): void {
+        if (this.blockedByReadOnly()) {
+            return;
+        }
+        const { model } = this.view;
+        for (const selection of model.getSelections()) {
+            this.view.ensureVisible(selection.head);
+        }
+        const replacement = replacementEdits(model.getSelections(), this.native.normalizeNewlines(text));
+        this.applyEdits(replacement.edits, replacement.selections);
+        this.view.revealCaret();
+    }
+
+    private paste(text: string): void {
+        if (this.blockedByReadOnly()) {
+            return;
+        }
+        const { model } = this.view;
+        for (const selection of model.getSelections()) {
+            this.view.ensureVisible(selection.head);
+        }
+        this.historyGroup++;
+        model.paste(this.native.normalizeNewlines(text), { ...this.commandOptions(), wholeLines: text !== '' && text === lineClip });
+        this.historyGroup++;
+        this.view.revealCaret();
+    }
+
+    private commandOptions(): CommandOptions {
+        const { settings } = this.view;
+        const keys = settings.smartKeys;
+        return {
+            tabSize: settings.tabSize,
+            insertSpaces: settings.insertSpaces,
+            autoClosingBrackets: keys.autoPairBrackets,
+            autoClosingQuotes: keys.autoPairQuotes,
+            surroundSelection: keys.surroundSelection,
+            tabOutOfClosers: keys.tabOutOfClosers,
+            smartEnter: keys.smartIndentOnEnter,
+            indentOnPaste: keys.indentOnPaste,
+            smartSemicolon: keys.smartSemicolon,
+            language: settings.language ?? 'plaintext',
+            camelCase: keys.camelHumps,
+            visualLine: (offset) => this.view.rowOf(offset),
+            lineSpan: (line) => this.view.lineSpan(line)
+        };
+    }
+
+    /* Folding is the view's, since it knows where the ranges are. */
+    private viewCommand(name: EditorViewCommand): boolean {
+        const { view } = this;
+        const run: Record<EditorViewCommand, () => void> = {
+            collapseRegion: () => view.collapseRegion(),
+            expandRegion: () => view.expandRegion(),
+            collapseAllRegions: () => view.foldAll(true),
+            expandAllRegions: () => view.foldAll(false),
+            collapseRegionRecursively: () => view.collapseRecursively(),
+            expandRegionRecursively: () => view.expandRecursively(),
+            foldSelection: () => view.foldSelection(),
+            collapseDocComments: () => view.foldRole('doc-comment', true),
+            expandDocComments: () => view.foldRole('doc-comment', false),
+            expandAllToLevel1: () => view.expandAllToLevel(1),
+            expandAllToLevel2: () => view.expandAllToLevel(2),
+            expandAllToLevel3: () => view.expandAllToLevel(3),
+            expandAllToLevel4: () => view.expandAllToLevel(4),
+            expandAllToLevel5: () => view.expandAllToLevel(5),
+            toggleColumnMode: () => this.toggleColumnMode()
+        };
+        run[name]();
+        return true;
+    }
+
+    /* Runs a model command on every caret, with the folds that would hide its result opened first. */
+    command(name: EditorRunCommand): boolean {
+        if (VIEW_COMMANDS.has(name as EditorViewCommand)) {
+            return this.viewCommand(name as EditorViewCommand);
+        }
+        if (name === 'expandSelection' && this.selectionRanges !== null) {
+            const provider = this.selectionRanges;
+            this.expansions = this.expansions.then(() => this.expandThrough(provider));
+            return true;
+        }
+        return this.modelCommand(name as EditorCommand);
+    }
+
+    setSelectionRanges(provider: EditorSelectionRanges | null): void {
+        this.selectionRanges = provider;
+    }
+
+    /* Extend Selection through the ranges of a language server, the editor's own rule where it has none. */
+    private async expandThrough(provider: EditorSelectionRanges): Promise<void> {
+        const { model } = this.view;
+        const selections = model.getSelections();
+        const revision = model.getRevision();
+        const stretches = selections.map(({ anchor, head }) => ({ from: Math.min(anchor, head), to: Math.max(anchor, head) }));
+        const asked = stretches.map(({ from }) => {
+            const { line, column } = model.positionAt(from);
+            return { line, character: column };
+        });
+        const chains = await provider(asked).catch(() => null);
+        if (model.getRevision() !== revision || JSON.stringify(model.getSelections()) !== JSON.stringify(selections)) {
+            return;
+        }
+        if (chains === null) {
+            this.modelCommand('expandSelection');
+            return;
+        }
+        const ranges = stretches.map(
+            ({ from, to }, index) =>
+                (chains[index] ?? [])
+                    .map((range) => ({
+                        from: model.offsetAt({ line: range.start.line, column: range.start.character }),
+                        to: model.offsetAt({ line: range.end.line, column: range.end.character })
+                    }))
+                    .find((range) => range.from <= from && range.to >= to && (range.from < from || range.to > to)) ?? null
+        );
+        this.historyGroup++;
+        model.expandSelectionTo(ranges);
+        this.view.revealCaret();
+    }
+
+    private modelCommand(name: EditorCommand): boolean {
+        const { model } = this.view;
+        const modifies = MODIFYING.has(name) && name !== 'undo' && name !== 'redo';
+        if ((modifies || name === 'undo' || name === 'redo') && this.blockedByReadOnly()) {
+            return false;
+        }
+        this.historyGroup++;
+        if (modifies) {
+            for (const selection of model.getSelections()) {
+                this.view.ensureVisible(selection.head);
+                const position = model.positionAt(selection.head);
+                const line = model.getLine(position.line);
+                if ((name === 'smartBackspace' || name === 'deleteWordLeft') && selection.head === line.start && position.line > 0) {
+                    this.view.ensureVisible(model.getLine(position.line - 1).start);
+                }
+                if ((name === 'deleteForward' || name === 'deleteWordRight') && selection.head === line.end && position.line + 1 < model.getLineCount()) {
+                    this.view.ensureVisible(model.getLine(position.line + 1).start);
+                }
+            }
+        }
+        const folded = name === 'moveLineUp' || name === 'moveLineDown' ? this.view.getFolds().collapsed : [];
+        const result = model.execute(name, {
+            ...this.commandOptions(),
+            onLinesMoved: (moves) => this.view.refoldMoved(folded, moves)
+        });
+        if (name === 'selectNextOccurrence' && model.occurrencesExhausted && this.view.settings.messages.noMoreOccurrences !== undefined) {
+            this.view.notify(this.view.settings.messages.noMoreOccurrences);
+        }
+        if (name === 'smartEnd' || name === 'selectSmartEnd') {
+            this.view.markRowEnd(model.getPrimary().head);
+        }
+        this.view.revealCaret();
+        return result;
+    }
+
+    private typeText(text: string): void {
+        if (this.blockedByReadOnly()) {
+            return;
+        }
+        for (const selection of this.view.model.getSelections()) {
+            this.view.ensureVisible(selection.head);
+        }
+        if (PAIR_CHARACTER.test(text)) {
+            this.view.model.typeText(text, { ...this.commandOptions(), historyGroup: this.inputGroup() });
+            this.view.revealCaret();
+        } else {
+            this.replaceSelections(text);
+        }
+    }
+
+    /* A page scrolls whole lines, and every caret goes as far, so each stays on its row of the screen. */
+    private movePages(direction: -1 | 1, extend: boolean): void {
+        const { model, layout } = this.view;
+        const { lineHeight } = layout.metrics;
+        const height = this.view.viewportHeight;
+        const page = Math.trunc(height / lineHeight) * lineHeight;
+        const from = this.view.scrollPlace;
+        const scrollTop = direction < 0 ? from.y - page : Math.min(layout.height - height, from.y + page);
+        this.view.scrollTo(from.x, Math.max(0, layout.lineBase(scrollTop)));
+        const distance = direction < 0 ? height : height + lineHeight - 1;
+        const selections = model.getSelections().map((selection, index) => {
+            this.desiredXs[index] ??= layout.caret(selection.head).x;
+            const head = layout.verticalOffset(selection.head, direction, this.desiredXs[index]!, distance);
+            return { anchor: extend ? selection.anchor : head, head };
+        });
+        this.keepDesiredXs = true;
+        model.setSelections(selections);
+        this.keepDesiredXs = false;
+        this.historyGroup++;
+        this.view.revealCaret();
+    }
+
+    /* Column mode on drops every caret but the first and keeps a selection as a box; off it makes one selection of the box. */
+    private toggleColumnMode(): void {
+        const { view } = this;
+        const { model, layout } = view;
+        this.block = null;
+        if (view.columnMode) {
+            const first = model.getSelections()[0]!;
+            const last = model.getPrimary();
+            view.setColumnMode(false);
+            model.setSelections([{ anchor: first.anchor, head: last.head }]);
+            return;
+        }
+        view.setColumnMode(true);
+        const primary = model.getPrimary();
+        model.setSelections([primary]);
+        if (primary.anchor !== primary.head) {
+            const anchor = layout.caret(primary.anchor);
+            const head = layout.caret(primary.head);
+            this.block = { anchor: { x: anchor.x, y: anchor.y }, head: { x: head.x, y: head.y }, signature: '' };
+            this.extendBlock({ x: 0, y: 0 });
+        }
+    }
+
+    /* Moves the corner of the box by a step and selects the columns between it and the other corner. */
+    private extendBlock(step: { x: number; y: number }): void {
+        const { model, layout } = this.view;
+        const selections = model.getSelections();
+        const signature = selections.map((selection) => `${selection.anchor}:${selection.head}`).join(',');
+        if (this.block === null || (this.block.signature !== '' && this.block.signature !== signature)) {
+            const primary = model.getPrimary();
+            const anchor = layout.caret(primary.anchor);
+            const head = layout.caret(primary.head);
+            this.block = { anchor: { x: anchor.x, y: anchor.y }, head: { x: head.x, y: head.y }, signature };
+        }
+        const block = this.block;
+        block.head = {
+            x: Math.max(0, block.head.x + step.x),
+            y: Math.max(0, Math.min(layout.height - layout.metrics.lineHeight, block.head.y + step.y))
+        };
+        model.setSelections(columnSelections(layout, block.anchor, block.head));
+        block.signature = model
+            .getSelections()
+            .map((selection) => `${selection.anchor}:${selection.head}`)
+            .join(',');
+    }
+
+    private moveCarets(key: MoveKey, extend: boolean): void {
+        if (this.view.columnMode && extend && (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight')) {
+            const { lineHeight, charWidth } = this.view.layout.metrics;
+            this.extendBlock({
+                x: key === 'ArrowLeft' ? -charWidth : key === 'ArrowRight' ? charWidth : 0,
+                y: key === 'ArrowUp' ? -lineHeight : key === 'ArrowDown' ? lineHeight : 0
+            });
+            this.view.revealCaret();
+            return;
+        }
+        if (key === 'PageUp' || key === 'PageDown') {
+            this.movePages(key === 'PageUp' ? -1 : 1, extend);
+            return;
+        }
+        const { model, layout } = this.view;
+        const vertical = key === 'ArrowUp' || key === 'ArrowDown';
+        const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1;
+        const selections = model.getSelections().map((selection, index) => {
+            let head: number;
+            if (!vertical && !extend && selection.anchor !== selection.head) {
+                head = direction < 0 ? Math.min(selection.anchor, selection.head) : Math.max(selection.anchor, selection.head);
+            } else if (vertical) {
+                // A selection first gives way to the edge in the direction of the move, as the platform's Up and Down do.
+                const hasSelection = !extend && selection.anchor !== selection.head;
+                const from = hasSelection
+                    ? direction < 0
+                        ? Math.min(selection.anchor, selection.head)
+                        : Math.max(selection.anchor, selection.head)
+                    : selection.head;
+                if (hasSelection) {
+                    delete this.desiredXs[index];
+                }
+                this.desiredXs[index] ??= layout.caret(from).x;
+                head = layout.verticalOffset(from, direction, this.desiredXs[index]!);
+            } else {
+                head = layout.horizontalOffset(selection.head, direction);
+            }
+            return { anchor: extend ? selection.anchor : head, head };
+        });
+        this.keepDesiredXs = vertical;
+        model.setSelections(selections);
+        this.keepDesiredXs = false;
+        if (!vertical) {
+            this.desiredXs = [];
+        }
+        this.historyGroup++;
+        this.view.revealCaret();
+    }
+
+    /* Carries the text of a selection to a place in the text, or copies it there, as one step of the history, and selects it where it landed. */
+    private dropText(from: number, to: number, offset: number, copy: boolean): void {
+        if (this.blockedByReadOnly()) {
+            return;
+        }
+        const { model } = this.view;
+        const text = model.slice(from, to);
+        this.view.ensureVisible(offset);
+        const start = copy || offset < from ? offset : offset - (to - from);
+        this.historyGroup++;
+        model.applyEdits(
+            copy
+                ? [{ from: offset, to: offset, text }]
+                : [
+                      { from, to, text: '' },
+                      { from: offset, to: offset, text }
+                  ],
+            {
+                source: 'input',
+                selections: [{ anchor: start, head: start + text.length }]
+            }
+        );
+        this.historyGroup++;
+        this.view.revealCaret();
+    }
+
+    private goToMatchingBracket(): void {
+        const { model } = this.view;
+        let changed = false;
+        model.setSelections(
+            model.getSelections().map((selection) => {
+                const bracket = this.view.matchingBracket(selection);
+                if (!bracket || bracket.mate === undefined) {
+                    return selection;
+                }
+                const head = bracket.mate > bracket.at ? bracket.mate + 1 : bracket.mate;
+                changed = true;
+                return { anchor: head, head };
+            })
+        );
+        if (changed) {
+            this.view.revealCaret();
+        }
+    }
+
+    private run(action: KeyAction, event: KeyboardEvent): void {
+        const { model } = this.view;
+        switch (action.type) {
+            case 'save':
+                event.preventDefault();
+                this.options.save();
+                return;
+            case 'command':
+                event.preventDefault();
+                this.command(action.command);
+                return;
+            case 'move':
+                event.preventDefault();
+                this.moveCarets(action.key, action.extend);
+                return;
+            case 'edge': {
+                event.preventDefault();
+                const head = action.end ? model.getLength() : 0;
+                model.setSelections([{ anchor: action.extend ? model.getPrimary().anchor : head, head }]);
+                this.view.revealCaret();
+                return;
+            }
+            case 'bracket':
+                event.preventDefault();
+                this.goToMatchingBracket();
+                return;
+            case 'view':
+                event.preventDefault();
+                this.viewCommand(action.command);
+                return;
+            case 'escape': {
+                const selections = model.getSelections();
+                if (selections.length > 1 || selections[0]!.anchor !== selections[0]!.head) {
+                    event.preventDefault();
+                    // The oldest caret stays; the newest ones go.
+                    const head = selections[0]!.head;
+                    model.setSelections([{ anchor: head, head }]);
+                    if (selections.length > 1) {
+                        this.view.revealCaret();
+                    }
+                }
+                return;
+            }
+        }
+    }
+
+    /* A handler sees the key before the editor does, the page's own shortcuts included, since a list of suggestions owns the arrows while it is open. */
+    onKeyDown(handler: EditorKeyHandler): () => void {
+        this.keyHandlers.add(handler);
+        return () => {
+            this.keyHandlers.delete(handler);
+        };
+    }
+
+    onClick(handler: EditorClickHandler): () => void {
+        this.clickHandlers.add(handler);
+        return () => {
+            this.clickHandlers.delete(handler);
+        };
+    }
+
+    onContextMenu(listener: (menu: EditorContextMenu) => void): () => void {
+        this.contextListeners.add(listener);
+        return () => {
+            this.contextListeners.delete(listener);
+        };
+    }
+
+    private keydown(event: KeyboardEvent): void {
+        if (event.isComposing || this.native.composing) {
+            return;
+        }
+        const added = this.gesture.keydown(event);
+        if (added !== null) {
+            event.preventDefault();
+            this.command(added === 'above' ? 'addCaretAbove' : 'addCaretBelow');
+            return;
+        }
+        for (const handler of [...this.keyHandlers]) {
+            if (handler(event)) {
+                event.preventDefault();
+                return;
+            }
+        }
+        // The app's own shortcuts stay the app's, also where the editor has a binding for the same key.
+        if (this.options.handBack.some((chord) => chordMatches(chord, event, this.options.apple))) {
+            return;
+        }
+        const action = keyAction(event, this.options.apple, this.options.keymap);
+        if (action) {
+            this.run(action, event);
+        }
+    }
+
+    private beforeInput(event: InputEvent): void {
+        if (this.view.settings.readOnly) {
+            event.preventDefault();
+            this.blockedByReadOnly();
+            return;
+        }
+        if (this.native.composing || event.isComposing) {
+            return;
+        }
+        switch (event.inputType) {
+            case 'insertText':
+            case 'insertReplacementText':
+                event.preventDefault();
+                if (event.data !== null) {
+                    this.typeText(event.data);
+                }
+                return;
+            case 'insertLineBreak':
+            case 'insertParagraph':
+                event.preventDefault();
+                this.command('insertNewline');
+                return;
+            case 'deleteContentBackward':
+                event.preventDefault();
+                this.command('smartBackspace');
+                return;
+            case 'deleteContentForward':
+                event.preventDefault();
+                this.command('deleteForward');
+                return;
+            case 'historyUndo':
+            case 'historyRedo':
+                event.preventDefault();
+                this.command(event.inputType === 'historyUndo' ? 'undo' : 'redo');
+                return;
+        }
+    }
+
+    /* A cut or copy of nothing selected takes the lines the carets are on. */
+    private copy(event: ClipboardEvent, cut: boolean): void {
+        event.preventDefault();
+        const { model } = this.view;
+        const selections = model.getSelections();
+        const empty = selections.every((selection) => selection.anchor === selection.head);
+        const text = empty
+            ? selections
+                  .map((selection) => {
+                      const { first, last } = this.view.lineSpan(model.positionAt(selection.head).line);
+                      return { start: model.getLine(first).start, end: model.getLine(last).end, next: model.getLine(last).next };
+                  })
+                  .map((lines) => model.slice(lines.start, lines.next) + (lines.next === lines.end ? '\n' : ''))
+                  .join('')
+            : selections.map((selection) => model.slice(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head))).join('\n');
+        event.clipboardData?.setData('text/plain', text);
+        lineClip = empty ? text : null;
+        if (!cut || this.blockedByReadOnly()) {
+            return;
+        }
+        this.historyGroup++;
+        if (empty) {
+            this.command('deleteLine');
+        } else {
+            this.replaceSelections('');
+        }
+        this.historyGroup++;
+    }
+
+    private pointerDown(event: PointerEvent): void {
+        this.view.cancelScroll();
+        const target = event.target as HTMLElement;
+        if (event.button !== 0 || target.closest('button, a, input, textarea, [contenteditable], .se-block, .se-gutter, .se-sticky')) {
+            return;
+        }
+        event.preventDefault();
+        if (this.takenByHost(event)) {
+            this.view.focus();
+            return;
+        }
+        this.pointer.start(event);
+    }
+
+    /* Whether a handler of the host took a press on a character, such as a Mod+click that follows a name. */
+    private takenByHost(event: PointerEvent): boolean {
+        if (this.clickHandlers.size === 0) {
+            return false;
+        }
+        const offset = this.view.characterAtPoint(event.clientX, event.clientY, event.target);
+        if (offset === null) {
+            return false;
+        }
+        const click: EditorClick = {
+            position: this.positionOf(offset),
+            mod: this.options.apple ? event.metaKey : event.ctrlKey,
+            alt: event.altKey,
+            shift: event.shiftKey
+        };
+        return [...this.clickHandlers].some((handler) => handler(click));
+    }
+
+    private positionOf(offset: number): EditorPosition {
+        const { line, column } = this.view.model.positionAt(offset);
+        return { line, character: column };
+    }
+
+    private contextMenu(event: MouseEvent): void {
+        if (this.contextListeners.size === 0 || (event.target as HTMLElement | null)?.closest?.('.se-sticky')) {
+            return;
+        }
+        event.preventDefault();
+        const offset = this.view.offsetAtPoint(event.clientX, event.clientY);
+        const selection = this.view.model
+            .getSelections()
+            .some((candidate) => Math.min(candidate.anchor, candidate.head) <= offset && offset <= Math.max(candidate.anchor, candidate.head));
+        const menu: EditorContextMenu = { position: this.positionOf(offset), inSelection: selection, x: event.clientX, y: event.clientY };
+        for (const listener of [...this.contextListeners]) {
+            listener(menu);
+        }
+    }
+
+    /* A press on a pinned header goes to that header. */
+    private stickyDown(event: PointerEvent): void {
+        const row = (event.target as HTMLElement | null)?.closest?.<HTMLElement>('.se-sticky-row');
+        if (event.button !== 0 || !row) {
+            return;
+        }
+        event.preventDefault();
+        this.view.jumpToHeader(Number(row.dataset.line), Number(row.dataset.depth));
+        this.view.focus();
+    }
+
+    /* A press on a line number selects the line. */
+    private gutterDown(event: PointerEvent): void {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        /* On the press and not on click: a repaint in between replaces the gutter's buttons, and a click whose button left the DOM never arrives. */
+        const markerId = this.view.gutterMarkerIdOf(event.target);
+        if (markerId !== null) {
+            this.view.pressGutterMarker(markerId);
+            return;
+        }
+        const actionLine = this.view.gutterActionLineOf(event.target);
+        if (actionLine !== null) {
+            this.view.pressGutterAction(actionLine);
+            return;
+        }
+        const foldLine = this.view.foldLineOf(event.target);
+        if (foldLine !== null) {
+            this.view.toggleFold(foldLine);
+            this.view.focus();
+            return;
+        }
+        this.pointer.start(event, 'gutter');
+        this.view.focus();
+    }
+}