@adecore/editor 0.22.0 → 0.23.0

package/dist/worker-client.d.ts

@@ -0,0 +1,37 @@
+export type WorkerRequestPort = Pick<Worker, 'addEventListener' | 'removeEventListener' | 'postMessage' | 'terminate'>;
+export type WorkerRequestErrorKind = 'timeout' | 'superseded' | 'unavailable' | 'error' | 'disposed';
+export declare class WorkerRequestError extends Error {
+    readonly kind: WorkerRequestErrorKind;
+    constructor(kind: WorkerRequestErrorKind, message: string);
+}
+export interface WorkerRequestOptions<Input extends {
+    id: number;
+}, Output extends {
+    id: number;
+}> {
+    readonly workerFactory: () => WorkerRequestPort;
+    readonly deadline?: number;
+    readonly schedule?: (callback: () => void, delay: number) => () => void;
+    readonly prepare?: (input: Input) => Input;
+    readonly accepts?: (reply: Output, input: Input) => boolean;
+    readonly failure?: (reply: Output) => {
+        error: Error;
+        restart: boolean;
+    } | undefined;
+    readonly stopped?: () => void;
+}
+export interface WorkerRequestClient<Input extends {
+    id: number;
+}, Output extends {
+    id: number;
+}> {
+    request(input: (id: number) => Input, deadline?: number, validate?: () => void): Promise<Output>;
+    cancel(): void;
+    release(): void;
+    dispose(): void;
+}
+export declare function createWorkerRequestClient<Input extends {
+    id: number;
+}, Output extends {
+    id: number;
+}>(options: WorkerRequestOptions<Input, Output>): WorkerRequestClient<Input, Output>;

package/dist/worker-client.js

@@ -0,0 +1,195 @@
+export class WorkerRequestError extends Error {
+    kind;
+    constructor(kind, message) {
+        super(message);
+        this.kind = kind;
+        this.name = 'WorkerRequestError';
+    }
+}
+function scheduleTimer(callback, delay) {
+    const timer = setTimeout(callback, delay);
+    return () => clearTimeout(timer);
+}
+export function createWorkerRequestClient(options) {
+    const deadline = options.deadline ?? 1500;
+    if (!Number.isFinite(deadline) || deadline <= 0 || deadline > 2147483647) {
+        throw new RangeError('The worker deadline must fit a positive browser timer.');
+    }
+    const schedule = options.schedule ?? scheduleTimer;
+    let worker, detach, cancelTimer;
+    let active, pending;
+    let unavailable;
+    let disposed = false, nextId = 0;
+    const stopWorker = () => {
+        cancelTimer?.();
+        cancelTimer = undefined;
+        detach?.();
+        detach = undefined;
+        const previous = worker;
+        worker = undefined;
+        options.stopped?.();
+        previous?.terminate();
+    };
+    const fail = (request, error, restart = true) => {
+        if (active !== request) {
+            return;
+        }
+        active = undefined;
+        if (restart) {
+            stopWorker();
+        }
+        else {
+            cancelTimer?.();
+            cancelTimer = undefined;
+        }
+        request.reject(error);
+    };
+    const startWorker = () => {
+        if (worker !== undefined) {
+            return worker;
+        }
+        let created;
+        try {
+            created = options.workerFactory();
+        }
+        catch (error) {
+            unavailable = new WorkerRequestError('unavailable', error instanceof Error ? error.message : String(error));
+            throw unavailable;
+        }
+        worker = created;
+        let received = false;
+        const onMessage = (event) => {
+            if (worker !== created) {
+                return;
+            }
+            const reply = event.data;
+            if (reply === null || typeof reply !== 'object') {
+                if (active !== undefined) {
+                    fail(active, new WorkerRequestError('error', 'The worker returned an invalid response.'));
+                }
+                return;
+            }
+            received = true;
+            if ('type' in reply && reply.type === 'ready') {
+                return;
+            }
+            const request = active;
+            if (request === undefined || !('id' in reply) || reply.id !== request.input.id) {
+                return;
+            }
+            try {
+                if (options.accepts?.(reply, request.input) === false) {
+                    return;
+                }
+                const failure = options.failure?.(reply);
+                if (failure !== undefined) {
+                    fail(request, failure.error, failure.restart);
+                    return;
+                }
+                active = undefined;
+                cancelTimer?.();
+                cancelTimer = undefined;
+                request.resolve(reply);
+            }
+            catch (error) {
+                fail(request, new WorkerRequestError('error', error instanceof Error ? error.message : String(error)));
+            }
+        };
+        const onError = (event) => {
+            if (worker !== created) {
+                return;
+            }
+            const error = new WorkerRequestError(received ? 'error' : 'unavailable', event.message || 'The worker failed.');
+            if (!received) {
+                unavailable = error;
+            }
+            if (active !== undefined) {
+                fail(active, error);
+            }
+            else {
+                stopWorker();
+            }
+        };
+        const onMessageError = () => {
+            if (worker !== created) {
+                return;
+            }
+            if (active !== undefined) {
+                fail(active, new WorkerRequestError('error', 'The worker response could not be decoded.'));
+            }
+            else {
+                stopWorker();
+            }
+        };
+        created.addEventListener('message', onMessage);
+        created.addEventListener('error', onError);
+        created.addEventListener('messageerror', onMessageError);
+        detach = () => {
+            created.removeEventListener('message', onMessage);
+            created.removeEventListener('error', onError);
+            created.removeEventListener('messageerror', onMessageError);
+        };
+        return created;
+    };
+    const pump = () => {
+        const request = pending;
+        if (disposed || request === undefined) {
+            return;
+        }
+        pending = undefined;
+        active = request;
+        try {
+            const target = startWorker();
+            cancelTimer = schedule(() => fail(request, new WorkerRequestError('timeout', 'The worker exceeded its time limit.')), request.deadline);
+            target.postMessage(options.prepare?.(request.input) ?? request.input);
+        }
+        catch (error) {
+            fail(request, error instanceof WorkerRequestError ? error : new WorkerRequestError('error', error instanceof Error ? error.message : String(error)));
+        }
+    };
+    const cancel = (kind) => {
+        const error = new WorkerRequestError(kind, kind === 'disposed' ? 'The worker client was disposed.' : 'A newer request superseded this request.');
+        pending?.reject(error);
+        pending = undefined;
+        if (active !== undefined) {
+            fail(active, error);
+        }
+    };
+    return {
+        request(input, duration = deadline, validate) {
+            if (disposed) {
+                return Promise.reject(new WorkerRequestError('disposed', 'The worker client was disposed.'));
+            }
+            if (unavailable !== undefined) {
+                return Promise.reject(unavailable);
+            }
+            cancel('superseded');
+            try {
+                validate?.();
+                if (!Number.isFinite(duration) || duration <= 0 || duration > 2147483647) {
+                    throw new RangeError('The request deadline must fit a positive browser timer.');
+                }
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+            return new Promise((resolve, reject) => {
+                pending = { input: input(++nextId), deadline: duration, resolve, reject };
+                // A burst before the microtask posts only its newest request.
+                queueMicrotask(pump);
+            });
+        },
+        cancel() {
+            cancel('superseded');
+        },
+        release() {
+            cancel('superseded');
+            stopWorker();
+        },
+        dispose() {
+            disposed = true;
+            cancel('disposed');
+            stopWorker();
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "exports": {
     ".": {
@@ -22,6 +22,11 @@
       "types": "./dist/shiki.d.ts",
       "default": "./dist/shiki.js"
     },
+    "./shiki-worker": {
+      "source": "./src/shiki-worker.ts",
+      "types": "./dist/shiki-worker.d.ts",
+      "default": "./dist/shiki-worker.js"
+    },
     "./keymap": {
       "source": "./src/keymap-table.ts",
       "types": "./dist/keymap-table.d.ts",
@@ -31,6 +36,16 @@
       "source": "./src/testing.ts",
       "types": "./dist/testing.d.ts",
       "default": "./dist/testing.js"
+    },
+    "./search-worker": {
+      "source": "./src/search-worker.ts",
+      "types": "./dist/search-worker.d.ts",
+      "default": "./dist/search-worker.js"
+    },
+    "./worker-client": {
+      "source": "./src/worker-client.ts",
+      "types": "./dist/worker-client.d.ts",
+      "default": "./dist/worker-client.js"
     }
   },
   "scripts": {
@@ -39,7 +54,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.22.0",
+    "@adecore/editor-core": "0.23.0",
     "linkedom": "^0.18.13",
     "shiki": "^4.4.3"
   },

package/src/attribution.ts

@@ -1,5 +1,6 @@
 import type { DocumentChange } from '@adecore/editor-core';
-import { mapOffset } from './offsets.ts';
+import { offsetMapper } from './offsets.ts';
+import type { EditorLineHighlight } from './types.ts';
 
 /* The custom properties of the agent palette, defined in `editor.css` for both themes. */
 export const AGENT_COLORS = ['--agent-1', '--agent-2', '--agent-3', '--agent-4', '--agent-5', '--agent-6'] as const;
@@ -9,6 +10,8 @@ export interface AttributedLines {
     readonly color: string;
     readonly sign?: string;
     readonly fill?: string;
+    readonly bar?: 'solid' | 'hatched';
+    readonly emphasis?: readonly { from: number; to: number }[];
 }
 
 interface Run {
@@ -16,8 +19,10 @@ interface Run {
     color: string;
     sign: string | undefined;
     fill: string | undefined;
+    bar: 'solid' | 'hatched' | undefined;
     from: number;
     to: number;
+    emphasis: { from: number; to: number }[];
 }
 
 /* A color washed out to a background that text stays readable on in either theme. */
@@ -32,8 +37,8 @@ export function colorValue(color: string): string {
 
 /*
  * The runs of lines a host attributed, anchored by offsets so they follow their text through edits. An
- * edit costs one mapping of two offsets per run, and a read works out the lines of only the runs that
- * reach the lines asked for.
+ * edit maps each run and its emphasized ranges, and a read works out the lines of only the runs
+ * that reach the lines asked for.
  */
 export class AttributionRuns {
     private runs: Run[] = [];
@@ -43,16 +48,33 @@ export class AttributionRuns {
     }
 
     /* Marks name lines one-based and inclusive; `lineBounds` answers for the document as it is now. */
-    set(
-        marks: readonly { id: string; startLine: number; endLine: number; color: string; sign?: string; fill?: string }[],
-        lineCount: number,
-        lineBounds: (line: number) => { start: number; end: number }
-    ): void {
+    set(marks: readonly (EditorLineHighlight & { id: string })[], lineCount: number, lineBounds: (line: number) => { start: number; end: number }): void {
         const clamp = (line: number): number => Math.min(lineCount, Math.max(1, Math.trunc(line) || 1)) - 1;
         this.runs = marks.map((mark) => {
             const start = clamp(mark.startLine);
             const end = Math.max(start, clamp(mark.endLine));
-            return { id: mark.id, color: mark.color, sign: mark.sign, fill: mark.fill, from: lineBounds(start).start, to: lineBounds(end).end };
+            const emphasis = (mark.emphasis ?? []).slice(0, end - start + 1).flatMap((ranges, index) => {
+                const bounds = lineBounds(start + index);
+                const length = bounds.end - bounds.start;
+                return ranges.flatMap(([from, to]) => {
+                    if (!Number.isFinite(from) || !Number.isFinite(to)) {
+                        return [];
+                    }
+                    const first = Math.min(length, Math.max(0, Math.trunc(from)));
+                    const last = Math.min(length, Math.max(0, Math.trunc(to)));
+                    return last > first ? [{ from: bounds.start + first, to: bounds.start + last }] : [];
+                });
+            });
+            return {
+                id: mark.id,
+                color: mark.color,
+                sign: mark.sign,
+                fill: mark.fill,
+                bar: mark.bar,
+                from: lineBounds(start).start,
+                to: lineBounds(end).end,
+                emphasis
+            };
         });
     }
 
@@ -60,10 +82,11 @@ export class AttributionRuns {
         this.runs = [];
     }
 
-    map(changes: readonly DocumentChange[]): void {
+    map(changes: readonly DocumentChange[], map = offsetMapper(changes)): void {
         for (const run of this.runs) {
-            run.from = mapOffset(run.from, changes);
-            run.to = mapOffset(run.to, changes);
+            run.from = map(run.from);
+            run.to = map(run.to);
+            run.emphasis = run.emphasis.map((range) => ({ from: map(range.from), to: map(range.to) })).filter((range) => range.to > range.from);
         }
     }
 
@@ -74,10 +97,23 @@ export class AttributionRuns {
             if (run.to < from || run.from > to) {
                 continue;
             }
-            const value = { id: run.id, color: run.color, sign: run.sign, fill: run.fill };
+            const value = { id: run.id, color: run.color, sign: run.sign, fill: run.fill, bar: run.bar };
+            const emphasis = new Map<number, { from: number; to: number }[]>();
+            for (const range of run.emphasis) {
+                if (range.to <= from || range.from > to) {
+                    continue;
+                }
+                const endLine = Math.min(lineOf(range.to - 1), last);
+                for (let line = Math.max(lineOf(range.from), first); line <= endLine; line++) {
+                    const ranges = emphasis.get(line) ?? [];
+                    ranges.push(range);
+                    emphasis.set(line, ranges);
+                }
+            }
             const end = Math.min(Math.max(lineOf(run.from), lineOf(run.to)), last);
             for (let line = Math.max(lineOf(run.from), first); line <= end; line++) {
-                lines.set(line, value);
+                const ranges = emphasis.get(line);
+                lines.set(line, ranges === undefined ? value : { ...value, emphasis: ranges });
             }
         }
         return lines;

package/src/bidi.ts

@@ -0,0 +1,32 @@
+/* The label drawn for each control character. The boxes are visual: assistive technology reads the raw characters from the input. */
+export const BIDI_CONTROLS = {
+    '‪': { label: 'LRE' },
+    '‫': { label: 'RLE' },
+    '‬': { label: 'PDF' },
+    '‭': { label: 'LRO' },
+    '‮': { label: 'RLO' },
+    '⁦': { label: 'LRI' },
+    '⁧': { label: 'RLI' },
+    '⁨': { label: 'FSI' },
+    '⁩': { label: 'PDI' },
+    '‎': { label: 'LRM' },
+    '‏': { label: 'RLM' },
+    '؜': { label: 'ALM' }
+} as const;
+
+type BidiControl = keyof typeof BIDI_CONTROLS;
+
+/* Every label is this many columns wide, so the placeholder is a box of fixed size in the grid. */
+export const BIDI_COLUMNS = 3;
+
+export const BIDI_PATTERN = /[‪-‮⁦-⁩‎‏؜]/g;
+
+/* The placeholder of a bidirectional control character, or null for any other text. */
+export function bidiControl(character: string): (typeof BIDI_CONTROLS)[BidiControl] | null {
+    return character.length === 1 ? ((BIDI_CONTROLS as Record<string, (typeof BIDI_CONTROLS)[BidiControl]>)[character] ?? null) : null;
+}
+
+/* Text a person reads but the editor never edits, such as a hint or a suggestion: each control is spelled out in brackets so none reaches the DOM. */
+export function visibleBidi(text: string): string {
+    return text.replace(BIDI_PATTERN, (character) => `[${BIDI_CONTROLS[character as BidiControl].label}]`);
+}

package/src/column-selection.ts

@@ -1,3 +1,4 @@
+import { stopCount, xOfStop } from './geometry-stops.ts';
 import type { Selection } from '@adecore/editor-core';
 import { type EditorLayout, TEXT_PADDING } from './layout.ts';
 
@@ -33,7 +34,7 @@ export function columnSelections(layout: EditorLayout, from: ContentPoint, to: C
             continue;
         }
         const geometry = layout.geometry(row);
-        const endX = geometry.rowStarts.length > 1 ? geometry.rowEnds[0]! : geometry.before[geometry.before.length - 1]!;
+        const endX = geometry.rowStarts.length > 1 ? geometry.rowEnds[0]! : xOfStop(geometry, stopCount(geometry) - 1);
         const offsetAt = (cell: number): number => layout.offsetAtX(geometry, 0, TEXT_PADDING + cell * charWidth).offset;
         if (cellAt(layout, endX + TEXT_PADDING) < left) {
             if (left === right) {

package/src/controller.ts

@@ -7,9 +7,12 @@ 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 { TouchSelection } from './touch.ts';
 import type {
     EditorClick,
     EditorClickHandler,
+    EditorInlayClick,
+    EditorInlayClickHandler,
     EditorContextMenu,
     EditorKeyHandler,
     EditorPosition,
@@ -80,6 +83,8 @@ function selectionSignature(selections: readonly Selection[]): string {
 
 /* Typing in the same stretch is one undo step until a pause this long. */
 const TYPING_PAUSE_MS = 750;
+/* A second press on the same hint within this many milliseconds is a double click. */
+const DOUBLE_PRESS_MS = 500;
 
 /*
  * What a person does to the editor: keys, typing, the clipboard, an input method, the mouse. It turns
@@ -88,10 +93,13 @@ const TYPING_PAUSE_MS = 750;
 export class InputController {
     private readonly native: NativeInput;
     private readonly pointer: PointerSelection;
+    private readonly touch: TouchSelection;
     private readonly cleanup: (() => void)[] = [];
     private readonly keyHandlers = new Set<EditorKeyHandler>();
     private readonly gesture: DoubleModifierGesture;
     private readonly clickHandlers = new Set<EditorClickHandler>();
+    private readonly inlayHandlers = new Set<EditorInlayClickHandler>();
+    private lastInlayPress: { id: string; at: number } | null = null;
     private readonly contextListeners = new Set<(menu: EditorContextMenu) => void>();
     private readonly subscription: { dispose(): void };
     private historyGroup = 0;
@@ -146,6 +154,16 @@ export class InputController {
             focus: () => view.focus(),
             scrolled: () => view.requestRender()
         });
+        this.touch = new TouchSelection({
+            model,
+            offsetAt: (x, y) => view.offsetAtPoint(x, y),
+            camelHumps: () => view.settings.smartKeys.camelHumps,
+            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 };
+            },
+            focus: () => view.focus()
+        });
         this.subscription = model.subscribe(() => {
             if (!this.keepDesiredXs) {
                 this.desiredXs = [];
@@ -196,22 +214,45 @@ export class InputController {
         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, 'pointerleave', () => {
+            this.view.setHover(null);
+            this.view.setInlayHover(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 move = (event: Event): void => {
+            this.pointer.move(event as PointerEvent);
+            this.touch.move(event as PointerEvent);
+        };
         const end = (event: Event): void => {
             this.pointer.end(event as PointerEvent);
+            this.touch.end(event as PointerEvent);
             this.historyGroup++;
         };
         document.addEventListener('pointermove', move);
         document.addEventListener('pointerup', end);
         document.addEventListener('pointercancel', end);
+        // The on-screen keyboard shrinks the visual viewport and not the layout one, which would leave the caret behind it.
+        const visualViewport = document.defaultView?.visualViewport;
+        let keyboardHeight = visualViewport?.height ?? 0;
+        let keyboardScale = visualViewport?.scale ?? 1;
+        const keyboard = (): void => {
+            const height = visualViewport?.height ?? 0;
+            const scale = visualViewport?.scale ?? 1;
+            // Zooming in shrinks the visual viewport too, and must not pull the view back to the caret.
+            const shrunk = height < keyboardHeight && scale === keyboardScale;
+            keyboardHeight = height;
+            keyboardScale = scale;
+            if (shrunk && this.view.focused) {
+                this.view.revealCaret();
+            }
+        };
+        visualViewport?.addEventListener('resize', keyboard);
         this.cleanup.push(() => {
+            visualViewport?.removeEventListener('resize', keyboard);
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', end);
             document.removeEventListener('pointercancel', end);
@@ -221,6 +262,7 @@ export class InputController {
     dispose(): void {
         this.subscription.dispose();
         this.pointer.dispose();
+        this.touch.dispose();
         for (const remove of this.cleanup) {
             remove();
         }
@@ -306,6 +348,9 @@ export class InputController {
     /* Folding is the view's, since it knows where the ranges are. */
     private viewCommand(name: EditorViewCommand): boolean {
         const { view } = this;
+        if (view.settings.folding === false && name !== 'toggleColumnMode') {
+            return false;
+        }
         const run: Record<EditorViewCommand, () => void> = {
             collapseRegion: () => view.collapseRegion(),
             expandRegion: () => view.expandRegion(),
@@ -641,6 +686,10 @@ export class InputController {
         return subscribe(this.clickHandlers, handler);
     }
 
+    onInlayClick(handler: EditorInlayClickHandler): () => void {
+        return subscribe(this.inlayHandlers, handler);
+    }
+
     onContextMenu(listener: (menu: EditorContextMenu) => void): () => void {
         return subscribe(this.contextListeners, listener);
     }
@@ -744,7 +793,15 @@ export class InputController {
         if (event.button !== 0 || target.closest('button, a, input, textarea, [contenteditable], .se-block, .se-gutter, .se-sticky')) {
             return;
         }
+        // Cancels the compatibility mouse events, whose focus change would close the keyboard a tap opened; scrolling is not affected.
         event.preventDefault();
+        if (this.takenByInlayHandler(event)) {
+            return;
+        }
+        if (event.pointerType === 'touch') {
+            this.touch.start(event, 'text', () => this.takenByHost(event));
+            return;
+        }
         if (this.takenByHost(event)) {
             this.view.focus();
             return;
@@ -752,6 +809,34 @@ export class InputController {
         this.pointer.start(event);
     }
 
+    /* Whether a handler of the host took a press on a hint, which then moves neither the caret nor the focus. */
+    private takenByInlayHandler(event: PointerEvent): boolean {
+        const inlay = this.inlayHandlers.size === 0 ? null : this.view.inlayAt(event.target);
+        if (inlay === null) {
+            return false;
+        }
+        const now = Date.now();
+        const again = this.lastInlayPress?.id === inlay.id && now - this.lastInlayPress.at <= DOUBLE_PRESS_MS;
+        this.lastInlayPress = again ? null : { id: inlay.id, at: now };
+        const touch = event.pointerType === 'touch';
+        const click: EditorInlayClick = {
+            id: inlay.id,
+            part: inlay.part,
+            mod: this.options.apple ? event.metaKey : event.ctrlKey,
+            alt: event.altKey,
+            shift: event.shiftKey,
+            clicks: again ? 2 : 1,
+            touch
+        };
+        if (![...this.inlayHandlers].some((handler) => handler(click))) {
+            return false;
+        }
+        if (!touch) {
+            this.view.focus();
+        }
+        return true;
+    }
+
     /* 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) {
@@ -776,6 +861,10 @@ export class InputController {
     }
 
     private contextMenu(event: MouseEvent): void {
+        if (this.contextListeners.size === 0 && this.touch.pressed) {
+            event.preventDefault();
+            return;
+        }
         if (this.contextListeners.size === 0 || (event.target as HTMLElement | null)?.closest?.('.se-sticky')) {
             return;
         }
@@ -801,6 +890,7 @@ export class InputController {
 
     /* A press on a line number selects the line. */
     private gutterDown(event: PointerEvent): void {
+        this.view.cancelScroll();
         if (event.button !== 0) {
             return;
         }
@@ -822,6 +912,10 @@ export class InputController {
             this.view.focus();
             return;
         }
+        if (event.pointerType === 'touch') {
+            this.touch.start(event, 'gutter');
+            return;
+        }
         this.pointer.start(event, 'gutter');
         this.view.focus();
     }