@adecore/editor 0.0.1 → 0.17.0-beta.2

package/src/php-html.ts

@@ -0,0 +1,43 @@
+import type { Highlighter } from 'shiki';
+
+type LanguageRegistration = Extract<Parameters<Highlighter['loadLanguage']>[0], { readonly scopeName: string }>;
+
+/* Shiki's `php` is only the code inside the tags, which makes a plain `<?php` an operator and a constant. */
+export const PHP_DOCUMENT_ID = 'php-html';
+
+/*
+ * A PHP file as a document: HTML with PHP between its tags, the way `text.html.php` of the PHP
+ * grammar family does it. Shiki bundles no such grammar, so it is written here on top of `html` and
+ * `php`, which have to be loaded first. The tags carry the scope a theme draws a tag's brackets in.
+ */
+export const PHP_DOCUMENT: LanguageRegistration = {
+    name: PHP_DOCUMENT_ID,
+    scopeName: 'text.html.php',
+    embeddedLangs: ['html', 'php'],
+    patterns: [
+        {
+            begin: '(?i)<\\?(?:php|=)?',
+            beginCaptures: { '0': { name: 'punctuation.definition.tag.begin.php' } },
+            end: '\\?>',
+            endCaptures: { '0': { name: 'punctuation.definition.tag.end.php' } },
+            name: 'meta.embedded.block.php',
+            contentName: 'source.php',
+            patterns: [{ include: 'source.php' }]
+        },
+        { include: 'text.html.basic' }
+    ]
+} as LanguageRegistration;
+
+/* The grammar to color a whole file in: a PHP file is a document, and every other language is its own. */
+export function documentLanguageOf(language: string): string {
+    return language === 'php' ? PHP_DOCUMENT_ID : language;
+}
+
+/* Loads what a language needs besides its own grammar; a grammar that is already in is left alone. */
+export async function loadDocumentLanguage(highlighter: Highlighter, language: string): Promise<void> {
+    if (language !== PHP_DOCUMENT_ID || highlighter.getLoadedLanguages().includes(PHP_DOCUMENT_ID)) {
+        return;
+    }
+    await highlighter.loadLanguage('php');
+    await highlighter.loadLanguage(PHP_DOCUMENT);
+}

package/src/pointer.ts

@@ -0,0 +1,326 @@
+import type { DocumentModel, Selection } from '@adecore/editor-core';
+import type { ContentPoint } from './column-selection.ts';
+
+/* A visual line as the layout knows it: a wrapped line is as many as it has rows and a collapsed fold is one. */
+export interface VisualLine {
+    start: number;
+    end: number;
+    next: number;
+    y: number;
+}
+
+export interface PointerHost {
+    readonly model: DocumentModel;
+    readonly viewport: HTMLElement;
+    offsetAt(clientX: number, clientY: number): number;
+    contentPoint(clientX: number, clientY: number): ContentPoint;
+    /* The box between two points, or null while they are in the same cell, so a press with alt is still a click. */
+    columnSelections(from: ContentPoint, to: ContentPoint): Selection[] | null;
+    visualLine(offset: number): VisualLine;
+    /* The lines a triple click or a press on a line number selects, whole: wrapped rows and a collapsed fold are one line. */
+    lineAt(offset: number): { from: number; to: number };
+    /* Whether a double click selects a camel hump and not the whole name. */
+    camelHumps(): boolean;
+    /* Whether a drag selects a box of columns without alt held. */
+    columnMode(): boolean;
+    /* The selection a point of the screen is on, for a press that may begin dragging it; null on anything else or when the text cannot be edited. */
+    selectionAt(clientX: number, clientY: number): Selection | null;
+    /* The place a drop would land, drawn as a caret; null takes it away. */
+    setDropCaret(offset: number | null): void;
+    /* Moves `[from, to)` to `offset`, or copies it there. */
+    drop(from: number, to: number, offset: number, copy: boolean): void;
+    /* Whether the key that turns a move into a copy is down. */
+    copyHeld(event: PointerEvent): boolean;
+    focus(): void;
+    /* The view scrolled by itself while the pointer was held at an edge. */
+    scrolled(): void;
+}
+
+/* What a drag selects by: characters, or the words or lines the press started on. `drop` is no selection at all: the press was on a selection, and a drag carries its text. */
+type DragUnit = 'character' | 'word' | 'line' | 'drop';
+
+/* A press on a selection: it waits for the pointer to move this far before it carries the text, and without that it is a click. */
+interface Carry {
+    from: number;
+    to: number;
+    pressOffset: number;
+    startX: number;
+    startY: number;
+    active: boolean;
+    /* Where it would land, or null over the text itself. */
+    target: number | null;
+}
+
+interface Drag {
+    id: number;
+    anchor: number;
+    selections: readonly Selection[];
+    add: boolean;
+    unit: DragUnit;
+    /* The word or the lines the press selected, which a drag never gives back. */
+    saved: { from: number; to: number };
+    carry?: Carry;
+    /* With shift and alt a dragged box is added to the carets that are there, not put in their place. */
+    keep: boolean;
+    /* Whether a drag so far makes a box of columns. */
+    box: boolean;
+    /* Where the press landed in the content, which a scroll leaves in place. */
+    anchorPoint: ContentPoint;
+    x: number;
+    y: number;
+}
+
+const SCROLL_STEP = 40;
+/* A press this soon after the last one, this close to it, is the next click of a double or triple click. */
+const MULTI_CLICK_MS = 500;
+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;
+
+/* 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;
+    private frame: number | undefined;
+    private lastPress: { time: number; x: number; y: number; count: number } | undefined;
+    private readonly host: PointerHost;
+
+    constructor(host: PointerHost) {
+        this.host = host;
+    }
+
+    get dragging(): boolean {
+        return this.drag !== undefined;
+    }
+
+    /* A press in the text, or on a line number, which selects the line and drags by lines. */
+    start(event: PointerEvent, area: 'text' | 'gutter' = 'text'): void {
+        const { model, viewport } = this.host;
+        const count = area === 'gutter' ? 1 : this.countClick(event);
+        const head = this.host.offsetAt(event.clientX, event.clientY);
+        const selections = model.getSelections();
+        const base = event.altKey && area === 'text' ? selections : [];
+        this.drag = {
+            id: event.pointerId,
+            anchor: event.shiftKey && !event.altKey ? model.getPrimary().anchor : head,
+            selections,
+            add: event.altKey && area === 'text',
+            unit: 'character',
+            keep: event.altKey && event.shiftKey,
+            box: area === 'text' && (event.altKey || this.host.columnMode()),
+            saved: { from: head, to: head },
+            anchorPoint: this.host.contentPoint(event.clientX, event.clientY),
+            x: event.clientX,
+            y: event.clientY
+        };
+        this.host.focus();
+        viewport.setPointerCapture?.(event.pointerId);
+        // Alt on a caret that is there takes it away; there is no selection to drag after that.
+        if (area === 'text' && event.altKey && count === 1 && selections.length > 1 && selections.some((selection) => selection.head === head)) {
+            model.setSelections(selections.filter((selection) => selection.head !== head));
+            this.drag = undefined;
+            return;
+        }
+        const selected = count === 1 && area === 'text' && !event.shiftKey && !event.altKey ? this.host.selectionAt(event.clientX, event.clientY) : null;
+        if (selected !== null) {
+            this.drag.unit = 'drop';
+            this.drag.carry = {
+                from: Math.min(selected.anchor, selected.head),
+                to: Math.max(selected.anchor, selected.head),
+                pressOffset: head,
+                startX: event.clientX,
+                startY: event.clientY,
+                active: false,
+                target: null
+            };
+        } else if (area === 'gutter') {
+            this.pressLineNumber(event, head);
+        } else if (count >= 3) {
+            this.selectUnit('line', this.host.lineAt(head), base);
+        } else if (count === 2) {
+            const word = model.wordSelectionAt(head, this.host.camelHumps());
+            if (word === null) {
+                this.update();
+            } else {
+                this.selectUnit('word', word, base);
+            }
+        } else {
+            this.update();
+        }
+        if (this.drag && this.frame === undefined) {
+            this.frame = viewport.ownerDocument.defaultView?.requestAnimationFrame?.(() => this.autoScroll());
+        }
+    }
+
+    /* A line number selects its line, and with shift grows or shrinks the selection by lines. */
+    private pressLineNumber(event: PointerEvent, offset: number): void {
+        const { model } = this.host;
+        const primary = model.getPrimary();
+        if (event.shiftKey && primary.anchor !== primary.head) {
+            model.setSelections([this.tweakedByLines(primary, offset)]);
+            this.drag = undefined;
+            return;
+        }
+        this.selectUnit('line', this.host.lineAt(offset), []);
+    }
+
+    private selectUnit(unit: DragUnit, saved: { from: number; to: number }, base: readonly Selection[]): void {
+        if (this.drag === undefined) {
+            return;
+        }
+        this.drag.unit = unit;
+        this.drag.saved = saved;
+        this.drag.selections = base;
+        this.host.model.setSelections([...base, { anchor: saved.from, head: saved.to }]);
+    }
+
+    /* The selection after a shift press on a line number: the clicked line comes in, or goes out when it is inside. */
+    private tweakedByLines(selection: Selection, offset: number): Selection {
+        const { host } = this;
+        const from = Math.min(selection.anchor, selection.head);
+        const to = Math.max(selection.anchor, selection.head);
+        const first = host.visualLine(from);
+        const last = host.visualLine(to - 1);
+        const clicked = host.visualLine(offset);
+        if (clicked.y < first.y) {
+            return { anchor: to, head: clicked.start };
+        }
+        if (clicked.y > last.y) {
+            return { anchor: from, head: clicked.end };
+        }
+        if (first.y === last.y) {
+            return { anchor: selection.head, head: selection.head };
+        }
+        if (selection.anchor === to) {
+            const line = clicked.y === first.y ? host.visualLine(first.next) : clicked;
+            return { anchor: to, head: line.start };
+        }
+        const line = clicked.y === last.y ? host.visualLine(last.start - 1) : clicked;
+        return { anchor: from, head: line.end };
+    }
+
+    /* Pointer events carry no click count, so the presses are counted here. */
+    private countClick(event: PointerEvent): number {
+        const last = this.lastPress;
+        const repeated =
+            last !== undefined &&
+            event.timeStamp - last.time <= MULTI_CLICK_MS &&
+            Math.abs(event.clientX - last.x) <= MULTI_CLICK_DISTANCE &&
+            Math.abs(event.clientY - last.y) <= MULTI_CLICK_DISTANCE;
+        const count = repeated ? Math.min(3, last.count + 1) : 1;
+        this.lastPress = { time: event.timeStamp, x: event.clientX, y: event.clientY, count };
+        return count;
+    }
+
+    move(event: PointerEvent): void {
+        if (!this.drag || event.pointerId !== this.drag.id) {
+            return;
+        }
+        this.drag.x = event.clientX;
+        this.drag.y = event.clientY;
+        this.update();
+    }
+
+    /* The pointer went up, or was taken away: a selection that was carried lands, and one that was only pressed gives way to a caret. */
+    end(event?: PointerEvent): void {
+        const { viewport } = this.host;
+        const carry = this.drag?.carry;
+        if (this.drag) {
+            viewport.releasePointerCapture?.(this.drag.id);
+        }
+        this.drag = undefined;
+        this.cancelFrame();
+        if (carry === undefined) {
+            return;
+        }
+        this.host.setDropCaret(null);
+        if (event?.type === 'pointercancel') {
+            return;
+        }
+        if (!carry.active) {
+            this.host.model.setSelections([{ anchor: carry.pressOffset, head: carry.pressOffset }]);
+        } else if (carry.target !== null && event !== undefined) {
+            this.host.drop(carry.from, carry.to, carry.target, this.host.copyHeld(event));
+        }
+    }
+
+    /* Where the carried text would land at the pointer, once the pointer has moved far enough to carry it. */
+    private updateCarry(drag: Drag, carry: Carry): void {
+        if (!carry.active) {
+            if (Math.abs(drag.x - carry.startX) < CARRY_THRESHOLD && Math.abs(drag.y - carry.startY) < CARRY_THRESHOLD) {
+                return;
+            }
+            carry.active = true;
+        }
+        const offset = this.host.offsetAt(drag.x, drag.y);
+        carry.target = offset >= carry.from && offset <= carry.to ? null : offset;
+        this.host.setDropCaret(carry.target);
+    }
+
+    dispose(): void {
+        this.drag = undefined;
+        this.cancelFrame();
+    }
+
+    private cancelFrame(): void {
+        if (this.frame !== undefined) {
+            this.host.viewport.ownerDocument.defaultView?.cancelAnimationFrame?.(this.frame);
+        }
+        this.frame = undefined;
+    }
+
+    private update(): void {
+        if (!this.drag) {
+            return;
+        }
+        if (this.drag.carry !== undefined) {
+            this.updateCarry(this.drag, this.drag.carry);
+            return;
+        }
+        if (this.drag.box && this.drag.unit === 'character') {
+            const box = this.host.columnSelections(this.drag.anchorPoint, this.host.contentPoint(this.drag.x, this.drag.y));
+            if (box) {
+                this.host.model.setSelections(this.drag.keep ? [...this.drag.selections, ...box] : box);
+                return;
+            }
+        }
+        const head = this.host.offsetAt(this.drag.x, this.drag.y);
+        const { anchor, target } = this.reach(this.drag, head);
+        this.host.model.setSelections([...(this.drag.add ? this.drag.selections : []), { anchor, head: target }]);
+    }
+
+    /* Where a drag that has got to `head` selects from and to, by the unit the press began with. */
+    private reach(drag: Drag, head: number): { anchor: number; target: number } {
+        const { model } = this.host;
+        const backwards = head < drag.saved.from;
+        if (drag.unit === 'word') {
+            const camel = this.host.camelHumps();
+            return backwards
+                ? { anchor: drag.saved.to, target: model.wordStartBefore(head, camel) }
+                : { anchor: drag.saved.from, target: model.wordEndAfter(head, camel) };
+        }
+        if (drag.unit === 'line') {
+            const line = this.host.visualLine(head);
+            return backwards ? { anchor: drag.saved.to, target: line.start } : { anchor: drag.saved.from, target: line.next };
+        }
+        return { anchor: drag.anchor, target: head };
+    }
+
+    /* Holding the pointer past an edge of the view keeps scrolling that way. */
+    private autoScroll(): void {
+        const { viewport } = this.host;
+        if (!this.drag) {
+            this.frame = undefined;
+            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;
+        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));
+            this.host.scrolled();
+            this.update();
+        }
+        this.frame = viewport.ownerDocument.defaultView?.requestAnimationFrame?.(() => this.autoScroll());
+    }
+}

package/src/scroll-animation.ts

@@ -0,0 +1,48 @@
+/*
+ * How a scroll that moves the view a distance goes there: not at all for a line or less, and for more
+ * over a moment that grows with the distance up to a tenth of a second, starting fast and easing out.
+ */
+
+/* The longest the view takes to get anywhere. */
+export const SCROLL_DURATION_MS = 100;
+
+/* How many lines away the view has to go before it takes any time, and how many before it takes all of it. */
+const FREE_LINES = 1;
+const FULL_LINES = 11;
+
+export function scrollDuration(distance: number, lineHeight: number): number {
+    const lines = distance / lineHeight;
+    const part = Math.min(1, Math.max(0, (lines - FREE_LINES) / (FULL_LINES - FREE_LINES)));
+    return Math.round(part * SCROLL_DURATION_MS);
+}
+
+/* The curve `cubic-bezier(0, 0, 0.58, 1)`: how much of the way has been gone after a fraction of the time. */
+export function easeOut(fraction: number): number {
+    if (fraction <= 0) {
+        return 0;
+    }
+    if (fraction >= 1) {
+        return 1;
+    }
+    const x1 = 0;
+    const y1 = 0;
+    const x2 = 0.58;
+    const y2 = 1;
+    const bezier = (t: number, a: number, b: number): number => 3 * (1 - t) * (1 - t) * t * a + 3 * (1 - t) * t * t * b + t * t * t;
+    let low = 0;
+    let high = 1;
+    let t = fraction;
+    for (let step = 0; step < 24; step++) {
+        const x = bezier(t, x1, x2);
+        if (Math.abs(x - fraction) < 1e-5) {
+            break;
+        }
+        if (x < fraction) {
+            low = t;
+        } else {
+            high = t;
+        }
+        t = (low + high) / 2;
+    }
+    return bezier(t, y1, y2);
+}

package/src/scroll.ts

@@ -0,0 +1,102 @@
+/*
+ * Where the view scrolls to when a target has to be seen. The rules are the platform's scrolling model
+ * with its defaults: a line of margin above and below the target, three characters at its sides, and a
+ * target out of reach lands a third of the way down the view.
+ */
+
+/*
+ * `relative` keeps a caret in view with a margin, the way typing and moving do. `makeVisible` leaves
+ * what is in view alone and centers what is not. `center` always puts the target a third from the top,
+ * and `centerDown` and `centerUp` do so only when it is out of view or on the wrong side of that mark,
+ * so stepping through results in one direction keeps them where the eye expects them.
+ */
+export type ScrollKind = 'relative' | 'makeVisible' | 'center' | 'centerDown' | 'centerUp';
+
+export interface ScrollRequest {
+    /* The top left of the target in the content, as the caret is. */
+    readonly target: { readonly x: number; readonly y: number };
+    /* What is in view now: the text area, without the gutter. */
+    readonly view: { readonly x: number; readonly y: number; readonly width: number; readonly height: number };
+    /* How much there is to scroll over. */
+    readonly content: { readonly width: number; readonly height: number };
+    readonly lineHeight: number;
+    readonly charWidth: number;
+    /* Where the line above the target's starts, and where the line below it ends; the margin that has to stay in view. */
+    readonly topBound: number;
+    readonly bottomBound: number;
+    /* A jump to a target already in view is handled as `relative`, which leaves it where it is. */
+    readonly refrain: boolean;
+    /* A wrapped view has nothing to scroll sideways. */
+    readonly horizontal: boolean;
+    /* How much of the top of the view something else covers, such as pinned headers; `view` is what is left below it. */
+    readonly inset?: number;
+}
+
+/* The characters kept in view to the left and right of the target. */
+const SIDE_MARGIN = 3;
+
+function clamp(value: number, maximum: number): number {
+    return Math.min(Math.max(0, value), Math.max(0, maximum));
+}
+
+/* The one third mark when the margins fit above it, the middle of the view when they do not. */
+function centerOf(request: ScrollRequest): number {
+    const { target, view, lineHeight, topBound } = request;
+    const third = target.y - Math.trunc(view.height / 3);
+    return third < topBound ? third : target.y - Math.trunc(Math.max(0, view.height - lineHeight) / 2);
+}
+
+function verticalPosition(request: ScrollRequest, kind: ScrollKind): number {
+    const { target, view, content, topBound, bottomBound } = request;
+    const height = view.height;
+    const center = centerOf(request);
+    const above = view.y > topBound;
+    const below = view.y + height < bottomBound;
+    let position = view.y;
+    if (kind === 'center') {
+        position = center;
+    } else if (kind === 'centerUp') {
+        position = above || below || view.y > center ? center : position;
+    } else if (kind === 'centerDown') {
+        position = above || below || view.y < center ? center : position;
+    } else if (kind === 'makeVisible') {
+        position = above || below ? center : position;
+    } else if (bottomBound - topBound > height) {
+        position = center;
+    } else if (below) {
+        const lowest = target.y + height > content.height ? content.height : target.y + height - (target.y - topBound);
+        position = Math.max(bottomBound - height, Math.min(lowest, view.y + height) - height);
+    } else if (above) {
+        const highest = target.y - height < 0 ? 0 : bottomBound - height;
+        position = Math.min(topBound, Math.max(highest, view.y));
+    }
+    const inset = request.inset ?? 0;
+    return Math.min(Math.max(inset, position), Math.max(inset, content.height - height));
+}
+
+function horizontalPosition(request: ScrollRequest, kind: ScrollKind): number {
+    const { target, view, content, charWidth } = request;
+    const width = view.width;
+    const left = target.x - SIDE_MARGIN * charWidth;
+    const right = target.x + SIDE_MARGIN * charWidth;
+    let position = view.x;
+    if (right - left > width) {
+        position = target.x - Math.trunc(width / 2);
+    } else if (left < view.x) {
+        position = kind === 'makeVisible' && right < width ? 0 : left;
+    } else if (right > view.x + width) {
+        position = right - width;
+    }
+    return clamp(position, content.width - width);
+}
+
+/* The scroll position that shows the target the way `kind` asks. */
+export function scrollPosition(request: ScrollRequest, kind: ScrollKind): { x: number; y: number } {
+    const { target, view } = request;
+    const inView = target.x >= view.x && target.x < view.x + view.width && target.y >= view.y && target.y < view.y + view.height;
+    const effective: ScrollKind = request.refrain && inView && (kind === 'center' || kind === 'centerDown' || kind === 'centerUp') ? 'relative' : kind;
+    return {
+        x: request.horizontal ? horizontalPosition(request, effective) : view.x,
+        y: verticalPosition(request, effective) - (request.inset ?? 0)
+    };
+}

package/src/semantic.ts

@@ -0,0 +1,54 @@
+import type { LineToken } from './types.ts';
+
+/* A stretch of one line, in characters from its start, that a language server colors. */
+export interface SemanticSpan {
+    readonly from: number;
+    readonly to: number;
+    readonly color: string;
+    readonly fontStyle: number;
+}
+
+/*
+ * The colors of a line with the spans laid over them: inside a span its color and font style replace
+ * the grammar's, and everywhere else the grammar's stay. The tokens of the result add up to the line
+ * as before. Spans are in order and do not overlap.
+ */
+export function overlayTokens(base: readonly LineToken[], spans: readonly SemanticSpan[]): LineToken[] {
+    const result: LineToken[] = [];
+    const push = (length: number, color: string, fontStyle: number): void => {
+        if (length <= 0) {
+            return;
+        }
+        const last = result[result.length - 1];
+        if (last !== undefined && last.color === color && last.fontStyle === fontStyle) {
+            result[result.length - 1] = { length: last.length + length, color, fontStyle };
+        } else {
+            result.push({ length, color, fontStyle });
+        }
+    };
+    let span = 0;
+    let start = 0;
+    for (const token of base) {
+        const end = start + token.length;
+        let at = start;
+        while (at < end) {
+            while (span < spans.length && spans[span]!.to <= at) {
+                span++;
+            }
+            const current = spans[span];
+            if (current === undefined || current.from >= end) {
+                push(end - at, token.color, token.fontStyle);
+                at = end;
+            } else if (current.from > at) {
+                push(current.from - at, token.color, token.fontStyle);
+                at = current.from;
+            } else {
+                const stop = Math.min(end, current.to);
+                push(stop - at, current.color, current.fontStyle);
+                at = stop;
+            }
+        }
+        start = end;
+    }
+    return result;
+}