@adecore/editor 0.21.1 → 0.22.0

package/src/fake.ts

@@ -53,7 +53,7 @@ function positionIn(text: string, offset: number): EditorPosition {
     return { line: lines.length - 1, character: lines.at(-1)!.length };
 }
 
-/* An editor without a DOM, for tests: `type`, `save` and `blur` do what a person would, the rest says what the client asked of it. */
+/* An editor without a DOM, for tests: `type`, `save` and `blur` do what a person would, the rest says what the host asked of it. */
 export class FakeEditor implements Editor {
     readonly element: HTMLElement;
     readonly language: string | undefined;
@@ -67,10 +67,10 @@ export class FakeEditor implements Editor {
     revealedLine: number | null;
     focused = false;
     indentation: EditorIndentation;
-    /* How often the client asked it to read the code face off the page again. */
+    /* How often the host asked it to read the code face off the page again. */
     fontRefreshes = 0;
     disposed = false;
-    /* What the client asked to find last; null once it ended the find. */
+    /* What the host asked to find last; null once it ended the find. */
     findQuery: EditorFindQuery | null = null;
     findState: EditorFindState = { count: 0, current: null };
     private text: string;
@@ -147,9 +147,7 @@ export class FakeEditor implements Editor {
             source,
             changes: [{ range: { start: positionIn(before, span.start), end: positionIn(before, span.end) }, text: span.text }]
         };
-        for (const listener of [...this.textChanges]) {
-            listener(change);
-        }
+        emit(this.textChanges, change);
     }
 
     private readonly tracked = new Set<{ from: number; to: number; lost: boolean }>();
@@ -180,10 +178,7 @@ export class FakeEditor implements Editor {
     }
 
     onTextChange(listener: (change: EditorTextChange) => void): () => void {
-        this.textChanges.add(listener);
-        return () => {
-            this.textChanges.delete(listener);
-        };
+        return subscribe(this.textChanges, listener);
     }
 
     positionAt(offset: number): EditorPosition {
@@ -216,7 +211,7 @@ export class FakeEditor implements Editor {
         return subscribe(this.blurs, listener);
     }
 
-    /* How the client last asked the view to follow a jump. */
+    /* How the host last asked the view to follow a jump. */
     lastReveal: EditorReveal | null = null;
 
     revealLine(line: number, reveal: EditorReveal = 'center'): void {
@@ -224,7 +219,7 @@ export class FakeEditor implements Editor {
         this.lastReveal = reveal;
     }
 
-    /* Counts plain occurrences only; the matcher itself is the editor's, and a test here is about the client's side. */
+    /* Counts plain occurrences only; the matcher itself is the editor's, and a test here is about the host's side. */
     find(query: EditorFindQuery | null): void {
         this.findQuery = query;
         const needle = query === null || query.text === '' ? '' : query.caseSensitive ? query.text : query.text.toLowerCase();
@@ -233,12 +228,12 @@ export class FakeEditor implements Editor {
         this.announceFind({ count, current: count === 0 ? null : 0 });
     }
 
-    /* What the client asked to replace, one match at a time and all at once. */
+    /* What the host asked to replace, one match at a time and all at once. */
     replacements: string[] = [];
     replaceOptions: EditorReplaceOptions[] = [];
-    /* What the client last asked to show under the match. */
+    /* What the host last asked to show under the match. */
     replacePreview: string | null = null;
-    /* What the client asked to select all matches of, and how many it was told there were. */
+    /* What the host asked to select all matches of, and how many it was told there were. */
     selectedMatches = 0;
     lastFindFromCursor: { query: EditorFindQuery; direction: 1 | -1 } | null = null;
     replacementsOfAll: string[] = [];
@@ -278,10 +273,7 @@ export class FakeEditor implements Editor {
     }
 
     onFind(listener: (state: EditorFindState) => void): () => void {
-        this.finds.add(listener);
-        return () => {
-            this.finds.delete(listener);
-        };
+        return subscribe(this.finds, listener);
     }
 
     endFind(): void {
@@ -292,39 +284,39 @@ export class FakeEditor implements Editor {
         this.wrap = wrap;
     }
 
-    /* What the client handed it last; null while it reads the structure itself. */
+    /* What the host handed it last; null while it reads the structure itself. */
     blocks: readonly EditorBlock[] | null = null;
     private readonly scopes = new Set<(scope: readonly EditorBlock[]) => void>();
 
-    /* What the client marked as changed last. */
+    /* What the host marked as changed last. */
     changeMarks: readonly EditorChangeMark[] = [];
 
     setChangeMarks(marks: readonly EditorChangeMark[]): void {
         this.changeMarks = marks;
     }
 
-    /* The tinted lines the client set last. */
+    /* The tinted lines the host set last. */
     lineHighlights: readonly EditorLineHighlight[] = [];
 
     setLineHighlights(highlights: readonly EditorLineHighlight[]): void {
         this.lineHighlights = highlights;
     }
 
-    /* What the client drew as code outside the document: the text and how, and into which element. */
+    /* What the host drew as code outside the document: the text and how, and into which element. */
     codeBlocks: { container: HTMLElement; text: string; options: EditorCodeBlockOptions }[] = [];
 
     renderCode(container: HTMLElement, text: string, options: EditorCodeBlockOptions = {}): void {
         this.codeBlocks.push({ container, text, options });
     }
 
-    /* The cursors of agents the client set last. */
+    /* The cursors of agents the host set last. */
     remoteCursors: readonly EditorRemoteCursor[] = [];
 
     setRemoteCursors(cursors: readonly EditorRemoteCursor[]): void {
         this.remoteCursors = cursors;
     }
 
-    /* What the client marked as written by an agent last. */
+    /* What the host marked as written by an agent last. */
     attributionMarks: readonly EditorAttributionMark[] = [];
     private readonly attributionHovers = new Set<(hover: EditorAttributionHover | null) => void>();
 
@@ -333,10 +325,7 @@ export class FakeEditor implements Editor {
     }
 
     onAttributionHover(listener: (hover: EditorAttributionHover | null) => void): () => void {
-        this.attributionHovers.add(listener);
-        return () => {
-            this.attributionHovers.delete(listener);
-        };
+        return subscribe(this.attributionHovers, listener);
     }
 
     /* The pointer on the bar of a mark, or leaving it. The rect is where `rectAt` puts the mark's first line unless given. */
@@ -346,9 +335,7 @@ export class FakeEditor implements Editor {
             mark === undefined
                 ? null
                 : { id: mark.id, rect: rect ?? this.rectAt({ line: mark.startLine - 1, character: 0 }) ?? { left: 0, top: 0, right: 0, bottom: 0 } };
-        for (const listener of [...this.attributionHovers]) {
-            listener(hover);
-        }
+        emit(this.attributionHovers, hover);
     }
 
     /* What each owner put next to lines of the text last. */
@@ -388,14 +375,14 @@ export class FakeEditor implements Editor {
         }
     }
 
-    /* The code vision rows the client set last. */
+    /* The code vision rows the host set last. */
     codeVision: readonly EditorCodeVision[] = [];
 
     setCodeVision(rows: readonly EditorCodeVision[]): void {
         this.codeVision = rows;
     }
 
-    /* The button the client set in the gutter last. */
+    /* The button the host set in the gutter last. */
     gutterAction: EditorGutterAction | null = null;
     private readonly gutterActionListeners = new Set<(line: number) => void>();
 
@@ -404,10 +391,7 @@ export class FakeEditor implements Editor {
     }
 
     onGutterAction(listener: (line: number) => void): () => void {
-        this.gutterActionListeners.add(listener);
-        return () => {
-            this.gutterActionListeners.delete(listener);
-        };
+        return subscribe(this.gutterActionListeners, listener);
     }
 
     /* What each owner put in the gutter last. */
@@ -423,25 +407,18 @@ export class FakeEditor implements Editor {
     }
 
     onGutterMarker(listener: (id: string) => void): () => void {
-        this.gutterMarkerListeners.add(listener);
-        return () => {
-            this.gutterMarkerListeners.delete(listener);
-        };
+        return subscribe(this.gutterMarkerListeners, listener);
     }
 
     /* A press on a gutter marker. */
     pressGutterMarker(id: string): void {
-        for (const listener of [...this.gutterMarkerListeners]) {
-            listener(id);
-        }
+        emit(this.gutterMarkerListeners, id);
     }
 
     /* A press on the gutter button, if there is one. */
     pressGutterAction(): void {
         if (this.gutterAction !== null) {
-            for (const listener of [...this.gutterActionListeners]) {
-                listener(this.gutterAction.line);
-            }
+            emit(this.gutterActionListeners, this.gutterAction.line);
         }
     }
 
@@ -450,17 +427,12 @@ export class FakeEditor implements Editor {
     }
 
     onScope(listener: (scope: readonly EditorBlock[]) => void): () => void {
-        this.scopes.add(listener);
-        return () => {
-            this.scopes.delete(listener);
-        };
+        return subscribe(this.scopes, listener);
     }
 
-    /* The caret moving into blocks, for a test of what the client draws from it. */
+    /* The caret moving into blocks, for a test of what the host draws from it. */
     enterScope(scope: readonly EditorBlock[]): void {
-        for (const listener of [...this.scopes]) {
-            listener(scope);
-        }
+        emit(this.scopes, scope);
     }
 
     smartKeys: Partial<EditorSmartKeys>;
@@ -506,7 +478,7 @@ export class FakeEditor implements Editor {
         this.indentation = indentation;
     }
 
-    /* What the client marked and highlighted last. */
+    /* What the host marked and highlighted last. */
     markers: readonly EditorMarker[] = [];
     highlights: readonly EditorHighlight[] = [];
     caret: EditorPosition = { line: 0, character: 0 };
@@ -522,7 +494,7 @@ export class FakeEditor implements Editor {
         this.markers = markers;
     }
 
-    /* What the client drew as hints last. */
+    /* What the host drew as hints last. */
     inlayHints: readonly EditorInlayHint[] = [];
 
     setInlayHints(hints: readonly EditorInlayHint[]): void {
@@ -536,14 +508,14 @@ export class FakeEditor implements Editor {
         this.ghost = ghost;
     }
 
-    /* What the client classified last. */
+    /* What the host classified last. */
     semanticTokens: readonly EditorSemanticToken[] | null = null;
 
     setSemanticTokens(tokens: readonly EditorSemanticToken[] | null): void {
         this.semanticTokens = tokens;
     }
 
-    /* What the client drew as a link last. */
+    /* What the host drew as a link last. */
     link: EditorRange | null = null;
 
     setLink(range: EditorRange | null): void {
@@ -558,7 +530,7 @@ export class FakeEditor implements Editor {
         return this.caret;
     }
 
-    /* The folds the client asked to keep. */
+    /* The folds the host asked to keep. */
     folds: EditorFolds = { collapsed: [], custom: [] };
 
     getFolds(): EditorFolds {
@@ -616,40 +588,28 @@ export class FakeEditor implements Editor {
         this.lastReveal = reveal;
         this.caret = range.end;
         this.selection = range;
-        for (const listener of [...this.carets]) {
-            listener(range.end);
-        }
+        emit(this.carets, range.end);
     }
 
     /* The caret a person's click or key moved. */
     moveCaret(position: EditorPosition): void {
         this.caret = position;
         this.selection = null;
-        for (const listener of [...this.carets]) {
-            listener(position);
-        }
+        emit(this.carets, position);
     }
 
     onCaret(listener: (position: EditorPosition) => void): () => void {
-        this.carets.add(listener);
-        return () => {
-            this.carets.delete(listener);
-        };
+        return subscribe(this.carets, listener);
     }
 
     onHover(listener: (hover: EditorHover | null) => void): () => void {
-        this.hovers.add(listener);
-        return () => {
-            this.hovers.delete(listener);
-        };
+        return subscribe(this.hovers, listener);
     }
 
     /* The pointer resting on a position, or leaving the text. */
     hover(position: EditorPosition | null): void {
         const hover = position === null ? null : { position, rect: this.rectAt(position)! };
-        for (const listener of [...this.hovers]) {
-            listener(hover);
-        }
+        emit(this.hovers, hover);
     }
 
     rectAt(position: EditorPosition): EditorRect | null {
@@ -685,27 +645,18 @@ export class FakeEditor implements Editor {
     }
 
     onKeyDown(handler: EditorKeyHandler): () => void {
-        this.keys.add(handler);
-        return () => {
-            this.keys.delete(handler);
-        };
+        return subscribe(this.keys, handler);
     }
 
     private readonly clickHandlers = new Set<EditorClickHandler>();
     private readonly contextListeners = new Set<(menu: EditorContextMenu) => void>();
 
     onClick(handler: EditorClickHandler): () => void {
-        this.clickHandlers.add(handler);
-        return () => {
-            this.clickHandlers.delete(handler);
-        };
+        return subscribe(this.clickHandlers, handler);
     }
 
     onContextMenu(listener: (menu: EditorContextMenu) => void): () => void {
-        this.contextListeners.add(listener);
-        return () => {
-            this.contextListeners.delete(listener);
-        };
+        return subscribe(this.contextListeners, listener);
     }
 
     /* A press on a character as the editor sees it first; true when a handler took it, and the caret stays where it is otherwise only until the test moves it. */
@@ -715,9 +666,7 @@ export class FakeEditor implements Editor {
 
     /* The context menu asked for at a position. */
     openContextMenu(menu: EditorContextMenu): void {
-        for (const listener of [...this.contextListeners]) {
-            listener(menu);
-        }
+        emit(this.contextListeners, menu);
     }
 
     /* A key as the editor sees it first; true when a handler took it. */
@@ -805,12 +754,10 @@ export class FakeEditor implements Editor {
 
     private announceFind(state: EditorFindState): void {
         this.findState = state;
-        for (const listener of [...this.finds]) {
-            listener(state);
-        }
+        emit(this.finds, state);
     }
 
-    /* A test that drives an editor its client already disposed has found a leak. */
+    /* A test that drives an editor its host already disposed has found a leak. */
     private assertLive(): void {
         if (this.disposed) {
             throw new Error('The editor is disposed');

package/src/keymap.ts

@@ -1,7 +1,6 @@
 import type { EditorCommand } from '@adecore/editor-core';
-import type { EditorViewCommand } from './types.ts';
 import { chordOf, KEYMAP, KEYMAP_IDS, type Keymap, type KeymapId, parseChord } from './keymap-table.ts';
-import type { KeyChord } from './types.ts';
+import type { EditorViewCommand, KeyChord } from './types.ts';
 
 export interface KeyLike {
     key: string;
@@ -30,6 +29,10 @@ function command(name: EditorCommand): KeyAction {
     return { type: 'command', command: name };
 }
 
+function view(name: EditorViewCommand): KeyAction {
+    return { type: 'view', command: name };
+}
+
 /* What each key of the table does in the editor. A key of the table that is not here is a language command, which the host answers. */
 const ACTIONS: Partial<Record<KeymapId, KeyAction>> = {
     undo: command('undo'),
@@ -69,21 +72,21 @@ const ACTIONS: Partial<Record<KeymapId, KeyAction>> = {
     selectTextStart: { type: 'edge', end: false, extend: true },
     textEnd: { type: 'edge', end: true, extend: false },
     selectTextEnd: { type: 'edge', end: true, extend: true },
-    collapse: { type: 'view', command: 'collapseRegion' },
-    expand: { type: 'view', command: 'expandRegion' },
-    collapseAll: { type: 'view', command: 'collapseAllRegions' },
-    expandAll: { type: 'view', command: 'expandAllRegions' },
-    collapseRecursively: { type: 'view', command: 'collapseRegionRecursively' },
-    expandRecursively: { type: 'view', command: 'expandRegionRecursively' },
-    foldSelection: { type: 'view', command: 'foldSelection' },
-    collapseDocComments: { type: 'view', command: 'collapseDocComments' },
-    expandDocComments: { type: 'view', command: 'expandDocComments' },
-    expandAllToLevel1: { type: 'view', command: 'expandAllToLevel1' },
-    expandAllToLevel2: { type: 'view', command: 'expandAllToLevel2' },
-    expandAllToLevel3: { type: 'view', command: 'expandAllToLevel3' },
-    expandAllToLevel4: { type: 'view', command: 'expandAllToLevel4' },
-    expandAllToLevel5: { type: 'view', command: 'expandAllToLevel5' },
-    toggleColumnMode: { type: 'view', command: 'toggleColumnMode' }
+    collapse: view('collapseRegion'),
+    expand: view('expandRegion'),
+    collapseAll: view('collapseAllRegions'),
+    expandAll: view('expandAllRegions'),
+    collapseRecursively: view('collapseRegionRecursively'),
+    expandRecursively: view('expandRegionRecursively'),
+    foldSelection: view('foldSelection'),
+    collapseDocComments: view('collapseDocComments'),
+    expandDocComments: view('expandDocComments'),
+    expandAllToLevel1: view('expandAllToLevel1'),
+    expandAllToLevel2: view('expandAllToLevel2'),
+    expandAllToLevel3: view('expandAllToLevel3'),
+    expandAllToLevel4: view('expandAllToLevel4'),
+    expandAllToLevel5: view('expandAllToLevel5'),
+    toggleColumnMode: view('toggleColumnMode')
 };
 
 const PUNCTUATION_CODES: Readonly<Record<string, string>> = {

package/src/layout.ts

@@ -136,6 +136,7 @@ const DEFAULT_BLOCK_HEIGHT = 40;
 const WRAP_INDENT_STEP = 2;
 const GEOMETRY_CACHE_SIZE = 400;
 const PLAIN = /^[\x20-\x7e\t]*$/;
+const GRAPHEME_LIMIT = 20000;
 const SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 
 function lowerBound(values: readonly number[], value: number): number {
@@ -152,10 +153,10 @@ function lowerBound(values: readonly number[], value: number): number {
     return low;
 }
 
-/* Where each character starts, with the length last. A line that long is cut by code unit, since splitting it by grapheme would cost more than it shows. */
+/* Where each character starts, with the length last. A very long line is cut by code unit, since splitting it by grapheme would cost more than it shows. */
 function characterOffsets(text: string): number[] {
     const offsets: number[] = [];
-    if (text.length > 20000 || PLAIN.test(text)) {
+    if (text.length > GRAPHEME_LIMIT || PLAIN.test(text)) {
         for (let i = 0; i < text.length; i++) {
             offsets.push(i);
         }
@@ -432,8 +433,8 @@ export class EditorLayout {
             }
             const fold = folds.get(line);
             const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
-            const tail = fold?.closer !== undefined && last > line ? this.tailOf(fold.closer, last) : null;
-            const head = fold?.head !== undefined && last > line ? this.tailOf(fold.head, line) : null;
+            const tail = fold?.closer !== undefined && last > line ? this.clampToLine(fold.closer, last) : null;
+            const head = fold?.head !== undefined && last > line ? this.clampToLine(fold.head, line) : null;
             const index = this.rows.length;
             const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
             const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
@@ -461,9 +462,9 @@ export class EditorLayout {
     }
 
     /* An offset of a fold clamped to its line, since the fold may be a moment older than an edit. */
-    private tailOf(closer: number, line: number): number {
+    private clampToLine(offset: number, line: number): number {
         const bounds = this.document.getLine(line);
-        return Math.min(bounds.end, Math.max(bounds.start, closer));
+        return Math.min(bounds.end, Math.max(bounds.start, offset));
     }
 
     private reflow(): void {

package/src/listeners.ts

@@ -1,6 +1,6 @@
 export type Listener = () => void;
 
-export function subscribe(listeners: Set<Listener>, listener: Listener): () => void {
+export function subscribe<T>(listeners: Set<T>, listener: T): () => void {
     listeners.add(listener);
     return () => {
         listeners.delete(listener);
@@ -8,8 +8,8 @@ export function subscribe(listeners: Set<Listener>, listener: Listener): () => v
 }
 
 /* Over a copy, so a listener that unsubscribes itself does not skip the next one. */
-export function emit(listeners: Set<Listener>): void {
+export function emit<Args extends unknown[]>(listeners: Set<(...args: Args) => void>, ...args: Args): void {
     for (const listener of [...listeners]) {
-        listener();
+        listener(...args);
     }
 }

package/src/modifier-gesture.ts

@@ -45,8 +45,8 @@ export class DoubleModifierGesture {
 
     /* Another modifier held with the one that counts spoils the gesture. */
     private spoiled(event: GestureEvent): boolean {
-        const others = this.modifier === 'Alt' ? event.ctrlKey || event.metaKey || event.shiftKey : event.altKey || event.metaKey || event.shiftKey;
-        return others;
+        const other = this.modifier === 'Alt' ? event.ctrlKey : event.altKey;
+        return other || event.metaKey || event.shiftKey;
     }
 
     keydown(event: GestureEvent): GestureAction | null {

package/src/native-input.ts

@@ -119,8 +119,7 @@ export class NativeInput {
             return;
         }
         if (this.model.getSelections().length > 1) {
-            const suffix = context.value.length - context.end;
-            this.host.replace(this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix)));
+            this.host.replace(this.replacedText(context));
             return;
         }
         const edit = {
@@ -172,7 +171,11 @@ export class NativeInput {
     }
 
     private composedText(): string {
-        const context = this.compositionContext!;
+        return this.replacedText(this.compositionContext!);
+    }
+
+    /* What the textarea now holds where the selection of `context` was, the text after it kept. */
+    private replacedText(context: InputContext): string {
         const suffix = context.value.length - context.end;
         return this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix));
     }

package/src/outline.ts

@@ -120,7 +120,7 @@ export function structuralEntries(
     return entries;
 }
 
-function toEditorLines(entry: OutlineEntry, document: OutlineDocument): OutlineBlock {
+function toBlock(entry: OutlineEntry, document: OutlineDocument): OutlineBlock {
     const startLine = document.positionAt(entry.from).line;
     return {
         startLine,
@@ -187,7 +187,7 @@ export class Outline {
     blocks(document: OutlineDocument): readonly OutlineBlock[] {
         if (this.cache?.version !== this.version) {
             const sorted = (this.provided ?? this.structure)
-                .map((entry) => toEditorLines(entry, document))
+                .map((entry) => toBlock(entry, document))
                 .sort((left, right) => left.startLine - right.startLine || right.endLine - left.endLine);
             this.cache = { version: this.version, blocks: sorted.filter((block, index) => index === 0 || block.startLine !== sorted[index - 1]!.startLine) };
         }

package/src/overview.ts

@@ -56,7 +56,6 @@ export function overviewTicks(spans: readonly OverviewSpan[], contentHeight: num
 /* What is painted later is on top: the current find match, and the worse a problem is the later it goes. */
 const PAINT_ORDER: Partial<Record<OverviewKind, number>> = { warning: 1, error: 2, 'find-current': 3 };
 
-/* Draws the ticks. */
 export function paintOverview(container: HTMLElement, ticks: readonly OverviewTick[]): void {
     const document = container.ownerDocument;
     const order = (tick: OverviewTick): number => PAINT_ORDER[tick.kind] ?? 0;

package/src/paint.ts

@@ -345,6 +345,15 @@ export interface GutterPaint {
     markers: ReadonlyMap<number, { id: string; label: string }>;
 }
 
+function gutterButton(document: Document, className: string, label: string): HTMLButtonElement {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = className;
+    button.tabIndex = -1;
+    button.setAttribute('aria-label', label);
+    return button;
+}
+
 /* The line numbers of the visible rows, and the fold control of the lines that have one. */
 export function paintGutter(container: HTMLElement, layout: EditorLayout, rows: readonly LayoutRow[], paint: GutterPaint): void {
     const document = container.ownerDocument;
@@ -365,22 +374,14 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         number.textContent = String(row.line + 1);
         item.append(number);
         if (paint.action?.line === row.line) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'se-gutter-action';
+            const button = gutterButton(document, 'se-gutter-action', paint.action.label);
             button.dataset.gutterAction = String(row.line);
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', paint.action.label);
             item.append(button);
         }
         const marker = paint.markers.get(row.line);
         if (marker !== undefined) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'se-gutter-marker';
+            const button = gutterButton(document, 'se-gutter-marker', marker.label);
             button.dataset.gutterMarker = marker.id;
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', marker.label);
             item.append(button);
         }
         const sign = paint.highlights.get(row.line)?.sign;
@@ -412,12 +413,8 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         }
         const collapsed = paint.foldable.get(row.line);
         if (collapsed !== undefined) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle';
+            const button = gutterButton(document, collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle', collapsed ? 'Expand' : 'Collapse');
             button.dataset.foldLine = String(row.line);
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', collapsed ? 'Expand' : 'Collapse');
             item.append(button);
         }
         fragment.append(item);

package/src/pointer.ts

@@ -77,6 +77,14 @@ const MULTI_CLICK_DISTANCE = 4;
 /* How far the pointer goes, in pixels, before a press on a selection starts carrying it. */
 const CARRY_THRESHOLD = 5;
 
+/* How far `value` lies outside `[low, high]`, negative below it and zero inside. */
+function overshoot(value: number, low: number, high: number): number {
+    if (value < low) {
+        return value - low;
+    }
+    return value > high ? value - high : 0;
+}
+
 /* The selection a mouse makes: a click, a drag, shift to extend, alt to add a caret or, dragged, a column, a double click for a word and a triple for a line, which a drag then grows by words and lines. */
 export class PointerSelection {
     private drag: Drag | undefined;
@@ -313,8 +321,8 @@ export class PointerSelection {
             return;
         }
         const rect = viewport.getBoundingClientRect();
-        const dy = this.drag.y < rect.top ? this.drag.y - rect.top : this.drag.y > rect.bottom ? this.drag.y - rect.bottom : 0;
-        const dx = this.drag.x < rect.left ? this.drag.x - rect.left : this.drag.x > rect.right ? this.drag.x - rect.right : 0;
+        const dy = overshoot(this.drag.y, rect.top, rect.bottom);
+        const dx = overshoot(this.drag.x, rect.left, rect.right);
         if (dy || dx) {
             viewport.scrollTop += Math.max(-SCROLL_STEP, Math.min(SCROLL_STEP, dy));
             viewport.scrollLeft += Math.max(-SCROLL_STEP, Math.min(SCROLL_STEP, dx));