@adecore/editor 0.0.1 → 0.17.0-beta.2

package/dist/testing.js

@@ -0,0 +1,117 @@
+import { parseHTML } from 'linkedom';
+import { createSmartEditorEngine } from './engine.js';
+/*
+ * A page for tests: linkedom has no layout, so every box is the editor's fallback size, and its
+ * textarea has no selection of its own, which the editor's input sink reads and writes.
+ */
+export function createPage() {
+    const { document, window } = parseHTML('<html><body><div id="host"></div></body></html>');
+    const prototype = window.HTMLTextAreaElement.prototype;
+    const selections = new WeakMap();
+    const read = (element) => selections.get(element) ?? { start: 0, end: 0, direction: 'none' };
+    Object.defineProperty(prototype, 'selectionStart', {
+        get: function () {
+            return read(this).start;
+        },
+        configurable: true
+    });
+    Object.defineProperty(prototype, 'selectionEnd', {
+        get: function () {
+            return read(this).end;
+        },
+        configurable: true
+    });
+    Object.defineProperty(prototype, 'selectionDirection', {
+        get: function () {
+            return read(this).direction;
+        },
+        configurable: true
+    });
+    prototype.setSelectionRange = function (start, end, direction = 'none') {
+        selections.set(this, { start, end, direction });
+    };
+    const element = window.HTMLElement.prototype;
+    for (const name of ['scrollTop', 'scrollLeft']) {
+        Object.defineProperty(element, name, { value: 0, writable: true, configurable: true });
+    }
+    return {
+        document: document,
+        window: window,
+        host: document.getElementById('host')
+    };
+}
+/* Fires a keydown at the element and says whether the editor took the key. */
+export function press(window, target, key, options = {}) {
+    const event = new window.Event('keydown', { bubbles: true, cancelable: true });
+    Object.assign(event, { key, ctrlKey: false, metaKey: false, altKey: false, shiftKey: false, isComposing: false, ...options });
+    target.dispatchEvent(event);
+    return event.defaultPrevented;
+}
+/* Fires a keyup at the element, the other half of `press`. */
+export function release(window, target, key, options = {}) {
+    const event = new window.Event('keyup', { bubbles: true, cancelable: true });
+    Object.assign(event, { key, ctrlKey: false, metaKey: false, altKey: false, shiftKey: false, isComposing: false, ...options });
+    target.dispatchEvent(event);
+}
+/* What a browser sends before it puts text in a textarea. */
+export function typeInto(window, target, text) {
+    const event = new window.Event('beforeinput', { bubbles: true, cancelable: true });
+    Object.assign(event, { inputType: 'insertText', data: text, isComposing: false });
+    target.dispatchEvent(event);
+}
+/* A clipboard event with the data it carries; what a copy or cut sets is read back through `data`. */
+export function clipboard(window, target, type, data = { text: '' }) {
+    const event = new window.Event(type, { bubbles: true, cancelable: true });
+    Object.assign(event, {
+        clipboardData: {
+            getData: () => data.text,
+            setData: (_format, value) => {
+                data.text = value;
+            }
+        }
+    });
+    target.dispatchEvent(event);
+    return { prevented: event.defaultPrevented, text: data.text };
+}
+/* A pointer event at a point of the screen; the page has no scroll or scale, so it is also the point of the content. */
+export function pointer(window, target, type, x, y, options = {}) {
+    const event = new window.Event(type, { bubbles: true, cancelable: true });
+    Object.assign(event, {
+        clientX: x,
+        clientY: y,
+        button: 0,
+        pointerId: 1,
+        detail: 0,
+        shiftKey: false,
+        altKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        ...options
+    });
+    target.dispatchEvent(event);
+}
+/* An editor on a page of its own, with the helpers that drive it the way a person would. */
+export function mountEditor(options = {}, engineOptions = {}) {
+    const page = createPage();
+    const editor = createSmartEditorEngine({ tokenizer: async () => null, ...engineOptions }).mount(page.host, {
+        text: 'one\ntwo\nthree',
+        theme: 'dark',
+        ...options
+    });
+    const input = page.host.querySelector('textarea');
+    const viewport = page.host.querySelector('.se-viewport');
+    return {
+        editor,
+        page,
+        input,
+        viewport,
+        press: (key, modifiers = {}) => press(page.window, input, key, modifiers),
+        release: (key, modifiers = {}) => release(page.window, input, key, modifiers),
+        type: (text) => typeInto(page.window, input, text),
+        clip: (type, text = '') => clipboard(page.window, input, type, { text }).text,
+        click: (x, y, modifiers = {}) => {
+            pointer(page.window, viewport, 'pointerdown', x, y, modifiers);
+            pointer(page.window, viewport, 'pointerup', x, y);
+        }
+    };
+}

package/dist/theme-scopes.d.ts

@@ -0,0 +1,9 @@
+import type { ScopeColors } from './types.ts';
+export interface ThemeRule {
+    readonly scope?: string | readonly string[];
+    readonly settings: {
+        readonly foreground?: string;
+        readonly fontStyle?: string;
+    };
+}
+export declare function scopeColorsOf(rules: readonly ThemeRule[]): ScopeColors;

package/dist/theme-scopes.js

@@ -0,0 +1,61 @@
+const FONT_STYLES = { italic: 1, bold: 2, underline: 4, strikethrough: 8 };
+function fontStyleOf(text) {
+    return (text ?? '').split(/\s+/).reduce((flags, word) => flags | (FONT_STYLES[word] ?? 0), 0);
+}
+function nameMatches(selector, scope) {
+    return scope === selector || scope.startsWith(`${selector}.`);
+}
+/*
+ * How well a selector fits a stack of scopes, outermost first, or null when it does not. As in a
+ * TextMate theme the last word has to match the innermost scope and the words before it some outer
+ * ones in order; the longer the name it matched, the better, and a selector with more words beats one
+ * with fewer.
+ */
+function selectorScore(selector, stack) {
+    const words = selector.trim().split(/\s+/);
+    const last = words[words.length - 1];
+    const innermost = stack[stack.length - 1];
+    if (innermost === undefined || !nameMatches(last, innermost)) {
+        return null;
+    }
+    let at = stack.length - 2;
+    for (let word = words.length - 2; word >= 0; word--) {
+        while (at >= 0 && !nameMatches(words[word], stack[at])) {
+            at--;
+        }
+        if (at < 0) {
+            return null;
+        }
+        at--;
+    }
+    return last.length * 100 + words.length;
+}
+/*
+ * What a theme draws a scope stack in, the way its own grammar's tokens are colored: the rule that
+ * fits best wins and a later rule beats an equal one. Undefined where no rule colors it, which is
+ * where the editor keeps what the grammar said.
+ */
+export function scopeColorsOf(rules) {
+    const flat = rules.flatMap((rule, order) => (typeof rule.scope === 'string' ? rule.scope.split(',') : (rule.scope ?? [])).map((selector) => ({
+        selector: selector.trim(),
+        style: { color: rule.settings.foreground ?? '', fontStyle: fontStyleOf(rule.settings.fontStyle) },
+        order
+    })));
+    const cache = new Map();
+    return (stack) => {
+        const key = stack.join(' ');
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        let best;
+        for (const entry of flat) {
+            const score = entry.selector === '' ? null : selectorScore(entry.selector, stack);
+            if (score !== null && (best === undefined || score > best.score || (score === best.score && entry.order > best.order))) {
+                best = { score, order: entry.order, style: entry.style };
+            }
+        }
+        const style = best !== undefined && best.style.color !== '' ? best.style : undefined;
+        cache.set(key, style);
+        return style;
+    };
+}

package/dist/tokens.d.ts

@@ -0,0 +1,28 @@
+import type { DocumentChange } from '@adecore/editor-core';
+import type { LineToken, LineTokenizer } from './types.ts';
+export interface TokenSource {
+    getLineCount(): number;
+    getLineText(line: number): string;
+}
+export declare class TokenCache {
+    private tokenizer;
+    private entries;
+    private frontier;
+    private reusableFrom;
+    private pivotLine;
+    private pivotState;
+    private lines;
+    private readonly source;
+    constructor(source: TokenSource);
+    get ready(): boolean;
+    setTokenizer(tokenizer: LineTokenizer | null): void;
+    get colored(): number;
+    tokenizeText(lines: readonly string[]): (readonly LineToken[])[] | null;
+    tokensOf(line: number): readonly LineToken[] | null;
+    edited(batches: readonly (readonly DocumentChange[])[], lineOf: (offset: number) => number): void;
+    advance(until: number, budget: number, now?: () => number): {
+        from: number;
+        to: number;
+    } | null;
+    covers(line: number): boolean;
+}

package/dist/tokens.js

@@ -0,0 +1,152 @@
+/* A line this long is left uncolored: a grammar can spend seconds on it, and nobody reads it in colors. */
+const LONGEST_COLORED_LINE = 20000;
+/*
+ * What a grammar made of each line, from the top of the document down. A grammar needs the state the
+ * line above it ended in, so the lines are colored in order from a frontier, and an edit moves the
+ * frontier up to the changed line. Lines below it keep their old colors, shifted to where they now
+ * are, until the recoloring reaches a line that ends in the state it ended in before, which is when
+ * everything under it is right again.
+ */
+export class TokenCache {
+    tokenizer = null;
+    entries = [];
+    /* Every line above it is colored for the text as it is now. */
+    frontier = 0;
+    /* The last line the edit touched; lines below it may be told right by their old state. */
+    reusableFrom = Number.POSITIVE_INFINITY;
+    /* The state the last line of the edited stretch ended in before the edit; the same state now means the lines below are right. */
+    pivotLine = -1;
+    pivotState;
+    lines;
+    source;
+    constructor(source) {
+        this.source = source;
+        this.lines = source.getLineCount();
+    }
+    get ready() {
+        return this.tokenizer !== null;
+    }
+    /* A new tokenizer, or none, colors everything anew. */
+    setTokenizer(tokenizer) {
+        this.tokenizer = tokenizer;
+        this.lines = this.source.getLineCount();
+        this.entries = [];
+        this.frontier = 0;
+        this.reusableFrom = Number.POSITIVE_INFINITY;
+        this.pivotLine = -1;
+    }
+    /* How far down the document has colors that are right for the text. */
+    get colored() {
+        return this.frontier;
+    }
+    /* The colors of text that is not part of the document, a line at a time, or null without a tokenizer. */
+    tokenizeText(lines) {
+        const tokenizer = this.tokenizer;
+        if (tokenizer === null) {
+            return null;
+        }
+        let state = null;
+        return lines.map((text) => {
+            if (text.length > LONGEST_COLORED_LINE) {
+                return [{ length: text.length, color: '', fontStyle: 0 }];
+            }
+            const result = tokenizer.tokenizeLine(text, state);
+            state = result.state;
+            return result.tokens;
+        });
+    }
+    /* The colors of a line, or null while it has none; the old colors of a line the recoloring has not reached yet. */
+    tokensOf(line) {
+        return this.entries[line]?.tokens ?? null;
+    }
+    /* The text changed in these batches; `lineOf` answers for the document as it is now. */
+    edited(batches, lineOf) {
+        const lineCount = this.source.getLineCount();
+        const delta = lineCount - this.lines;
+        this.lines = lineCount;
+        if (this.tokenizer === null) {
+            return;
+        }
+        const first = batches[0]?.[0];
+        if (first === undefined) {
+            this.entries = [];
+            this.frontier = 0;
+            this.reusableFrom = Number.POSITIVE_INFINITY;
+            this.pivotLine = -1;
+            return;
+        }
+        const firstLine = lineOf(first.from);
+        const changes = batches.length === 1 ? batches[0] : [];
+        let shift = 0;
+        for (let i = 0; i < changes.length - 1; i++) {
+            shift += changes[i].insertedLength - (changes[i].to - changes[i].from);
+        }
+        const last = changes.at(-1);
+        const lastNew = last === undefined ? -1 : lineOf(last.from + shift + last.insertedLength);
+        const lastOld = lastNew - delta;
+        this.frontier = Math.min(this.frontier, firstLine);
+        if (last === undefined || lastOld < firstLine || this.entries.length <= firstLine) {
+            this.entries.length = Math.min(this.entries.length, firstLine);
+            this.reusableFrom = Number.POSITIVE_INFINITY;
+            this.pivotLine = -1;
+            return;
+        }
+        const old = this.entries[lastOld];
+        this.pivotLine = old ? lastNew : -1;
+        this.pivotState = old?.state;
+        this.entries.splice(firstLine, lastOld - firstLine + 1, ...new Array(lastNew - firstLine + 1));
+        this.reusableFrom = lastNew + 1;
+    }
+    /*
+     * Colors lines from the frontier until `until` is reached, the colors are right for the rest of
+     * the document, or `budget` milliseconds are spent. Returns the first line that changed, so a
+     * view knows what to draw again, or null when nothing did.
+     */
+    advance(until, budget, now = () => performance.now()) {
+        const tokenizer = this.tokenizer;
+        if (tokenizer === null) {
+            return null;
+        }
+        if (tokenizer.stale?.() === true) {
+            this.frontier = 0;
+            this.reusableFrom = Number.POSITIVE_INFINITY;
+            this.pivotLine = -1;
+        }
+        const count = this.source.getLineCount();
+        const limit = Math.min(until, count - 1);
+        const deadline = now() + budget;
+        const from = this.frontier;
+        while (this.frontier <= limit && this.frontier < count) {
+            const line = this.frontier;
+            const text = this.source.getLineText(line);
+            const state = line === 0 ? null : (this.entries[line - 1]?.state ?? null);
+            const previous = this.entries[line];
+            let next;
+            if (text.length > LONGEST_COLORED_LINE) {
+                next = { tokens: [{ length: text.length, color: '', fontStyle: 0 }], state };
+            }
+            else {
+                const result = tokenizer.tokenizeLine(text, state);
+                next = { tokens: result.tokens, state: result.state };
+            }
+            this.entries[line] = next;
+            this.frontier = line + 1;
+            const settled = (line === this.pivotLine && tokenizer.sameState(this.pivotState, next.state)) ||
+                (previous !== undefined && line >= this.reusableFrom && tokenizer.sameState(previous.state, next.state));
+            if (settled) {
+                this.frontier = this.entries.length;
+                this.reusableFrom = Number.POSITIVE_INFINITY;
+                this.pivotLine = -1;
+                break;
+            }
+            if (now() > deadline) {
+                break;
+            }
+        }
+        return this.frontier > from ? { from, to: this.frontier - 1 } : null;
+    }
+    /* Whether lines through `line` are colored for the text as it is now. */
+    covers(line) {
+        return this.frontier > line || this.frontier >= this.source.getLineCount();
+    }
+}

package/dist/tracked-range.d.ts

@@ -0,0 +1,5 @@
+import type { DocumentChange } from '@adecore/editor-core';
+export declare function mapTrackedRange(from: number, to: number, changes: readonly DocumentChange[]): {
+    from: number;
+    to: number;
+} | null;

package/dist/tracked-range.js

@@ -0,0 +1,20 @@
+/*
+ * Where a tracked range is after a batch of changes, or null once a change touched it. A change
+ * touches a range when it replaces any of the text inside it or inserts strictly between its ends.
+ * Text inserted exactly at an end leaves the range's own text alone: at the start the range moves
+ * behind it, at the end the range stays as it is.
+ */
+export function mapTrackedRange(from, to, changes) {
+    let delta = 0;
+    for (const change of changes) {
+        if (change.to <= from) {
+            delta += change.insertedLength - (change.to - change.from);
+            continue;
+        }
+        if (change.from >= to) {
+            break;
+        }
+        return null;
+    }
+    return { from: from + delta, to: to + delta };
+}