@adecore/editor 0.0.1 → 0.17.0-beta.2

package/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# @adecore/editor
+
+[![npm](https://img.shields.io/npm/v/@adecore/editor)](https://www.npmjs.com/package/@adecore/editor)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/editor/)
+
+A code editor for the DOM. It draws a [`DocumentModel`](https://adecore.dev/editor-core/) with a layout of its own, renders only the rows in view, and takes the decorations, rows and marks a host hands it: problems, inlay hints, semantic colors, change marks, widgets between lines, code vision, agent attribution and ghost text. It knows no language server; [`@adecore/editor-react`](https://adecore.dev/editor-react/) adds one.
+
+**[Documentation with live demos](https://adecore.dev/editor/)**
+
+## Install
+
+```sh
+bun add @adecore/editor
+```
+
+## Set up
+
+```css
+@import '@adecore/ui/theme.css';
+@import '@adecore/editor/editor.css';
+```
+
+```ts
+import { createSmartEditorEngine, shikiTokenizers } from '@adecore/editor';
+
+const engine = createSmartEditorEngine({ tokenizer: shikiTokenizers(getHighlighter) });
+const editor = engine.mount(element, { text, language: 'typescript', theme: 'github-light' });
+```
+
+The element needs a position and a size from its parent.
+
+## Entry points
+
+| Import | What it holds |
+|---|---|
+| `@adecore/editor` | `createSmartEditorEngine`, the `Editor` contract and its types, the Shiki adapters |
+| `@adecore/editor/editor.css` | The styles |
+| `@adecore/editor/shiki` | The Shiki adapters and grammar loading |
+| `@adecore/editor/keymap` | The key table, `resolveKeymap`, `chordOf` and `parseChord` |
+| `@adecore/editor/fake` | `FakeEditorEngine`, for tests of host code |
+| `@adecore/editor/testing` | `mountEditor` on a LinkeDOM page |
+
+## Documentation
+
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/editor/getting-started) | Install, styles, mounting and the engine options |
+| [Options and keymaps](https://adecore.dev/editor/options) | Every option and setter, smart keys and the key table |
+| [Text and events](https://adecore.dev/editor/editing) | Positions, edits, selections, events and tracked ranges |
+| [Decorations](https://adecore.dev/editor/decorations), [Rows and widgets](https://adecore.dev/editor/rows), [Agents](https://adecore.dev/editor/agents) | What a host draws into the editor |
+| [Find and folding](https://adecore.dev/editor/find-folding) | The find matcher, folds and sticky scroll |
+| [Theme and syntax](https://adecore.dev/editor/theme) | CSS tokens, Shiki and a tokenizer of your own |
+| [Testing](https://adecore.dev/editor/testing) | `mountEditor` and `FakeEditorEngine` |
+
+## License
+
+FSL-1.1-MIT

package/dist/attribution.d.ts

@@ -0,0 +1,28 @@
+import type { DocumentChange } from '@adecore/editor-core';
+export declare const AGENT_COLORS: readonly ['--agent-1', '--agent-2', '--agent-3', '--agent-4', '--agent-5', '--agent-6'];
+export interface AttributedLines {
+    readonly id: string;
+    readonly color: string;
+    readonly sign?: string;
+    readonly fill?: string;
+}
+export declare function tintValue(color: string): string;
+export declare function colorValue(color: string): string;
+export declare class AttributionRuns {
+    private runs;
+    get size(): number;
+    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;
+    clear(): void;
+    map(changes: readonly DocumentChange[]): void;
+    linesIn(first: number, last: number, from: number, to: number, lineOf: (offset: number) => number): Map<number, AttributedLines>;
+}

package/dist/attribution.js

@@ -0,0 +1,55 @@
+import { mapOffset } from './offsets.js';
+/* 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'];
+/* A color washed out to a background that text stays readable on in either theme. */
+export function tintValue(color) {
+    return `color-mix(in srgb, ${colorValue(color)} 14%, transparent)`;
+}
+/* The CSS value of a mark's color: `--agent-1` is the page's custom property of that name, anything else is a color as it stands. */
+export function colorValue(color) {
+    return color.startsWith('--') ? `var(${color})` : color;
+}
+/*
+ * 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.
+ */
+export class AttributionRuns {
+    runs = [];
+    get size() {
+        return this.runs.length;
+    }
+    /* Marks name lines one-based and inclusive; `lineBounds` answers for the document as it is now. */
+    set(marks, lineCount, lineBounds) {
+        const clamp = (line) => 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 };
+        });
+    }
+    clear() {
+        this.runs = [];
+    }
+    map(changes) {
+        for (const run of this.runs) {
+            run.from = mapOffset(run.from, changes);
+            run.to = mapOffset(run.to, changes);
+        }
+    }
+    /* The run on each line from `first` to `last`, zero-based, where `from` and `to` are the offsets they span; where runs overlap the one set last wins. */
+    linesIn(first, last, from, to, lineOf) {
+        const lines = new Map();
+        for (const run of this.runs) {
+            if (run.to < from || run.from > to) {
+                continue;
+            }
+            const value = { id: run.id, color: run.color, sign: run.sign, fill: run.fill };
+            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);
+            }
+        }
+        return lines;
+    }
+}

package/dist/code-block.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCodeBlockOptions, LineToken } from './types.ts';
+export declare function renderCodeBlock(container: HTMLElement, text: string, tokens: readonly (readonly LineToken[])[] | null, tabSize: number, options: EditorCodeBlockOptions): void;

package/dist/code-block.js

@@ -0,0 +1,89 @@
+import { colorValue, tintValue } from './attribution.js';
+import { styleSpan } from './paint.js';
+/*
+ * Lines of code that are not part of the document, in the editor's own face, colors and gutter, for a
+ * widget row to show text that is not in the file: lines an agent removed, or the other side of a
+ * conflict. The gutter column is as wide as the editor's, so the text lines up with the document's.
+ */
+export function renderCodeBlock(container, text, tokens, tabSize, options) {
+    const document = container.ownerDocument;
+    const block = document.createElement('div');
+    block.className = 'se-code-block';
+    block.style.tabSize = String(tabSize);
+    const lines = text.split(/\r?\n/);
+    lines.forEach((line, index) => {
+        const row = document.createElement('div');
+        row.className = 'se-code-row';
+        if (options.color !== undefined) {
+            row.style.background = tintValue(options.color);
+        }
+        const gutter = document.createElement('div');
+        gutter.className = 'se-code-gutter';
+        if (options.firstLine !== undefined) {
+            const number = document.createElement('span');
+            number.textContent = String(options.firstLine + index);
+            gutter.append(number);
+        }
+        if (options.sign) {
+            const sign = document.createElement('span');
+            sign.className = 'se-line-sign';
+            sign.textContent = options.sign;
+            if (options.color !== undefined) {
+                sign.style.color = colorValue(options.color);
+            }
+            gutter.append(sign);
+        }
+        if (options.color !== undefined) {
+            const bar = document.createElement('span');
+            bar.className = 'se-attribution';
+            bar.style.background = colorValue(options.color);
+            gutter.append(bar);
+        }
+        const code = document.createElement('div');
+        code.className = 'se-code-text';
+        if (options.faded) {
+            code.dataset.faded = 'true';
+        }
+        const emphasis = options.emphasis?.[index] ?? [];
+        if (emphasis.length > 0 && options.color !== undefined) {
+            row.style.setProperty('--se-emphasis', colorValue(options.color));
+        }
+        fill(code, line, tokens?.[index] ?? null, emphasis);
+        row.append(gutter, code);
+        block.append(row);
+    });
+    container.append(block);
+}
+function fill(element, line, tokens, emphasis) {
+    if (tokens === null && emphasis.length === 0) {
+        element.textContent = line;
+        return;
+    }
+    const spans = [];
+    let start = 0;
+    for (const token of tokens ?? []) {
+        const end = Math.min(line.length, start + token.length);
+        if (end > start) {
+            spans.push({ start, end, token });
+        }
+        start = end;
+    }
+    if (start < line.length) {
+        spans.push({ start, end: line.length, token: null });
+    }
+    for (const { start: from, end: to, token } of spans) {
+        // A token is cut at the edges of every emphasis that crosses it, so each piece is one color and either on or off.
+        const cuts = [...new Set([from, to, ...emphasis.flatMap((range) => range).filter((cut) => cut > from && cut < to)])].sort((left, right) => left - right);
+        for (let i = 0; i < cuts.length - 1; i++) {
+            const piece = element.ownerDocument.createElement('span');
+            piece.textContent = line.slice(cuts[i], cuts[i + 1]);
+            if (token !== null) {
+                styleSpan(piece, token);
+            }
+            if (emphasis.some(([emphasisStart, emphasisEnd]) => emphasisStart <= cuts[i] && cuts[i + 1] <= emphasisEnd)) {
+                piece.className = 'se-code-emphasis';
+            }
+            element.append(piece);
+        }
+    }
+}

package/dist/column-selection.d.ts

@@ -0,0 +1,9 @@
+import type { Selection } from '@adecore/editor-core';
+import { type EditorLayout } from './layout.ts';
+export interface ContentPoint {
+    x: number;
+    y: number;
+}
+export declare function cellAt(layout: EditorLayout, x: number): number;
+export declare function columnSelections(layout: EditorLayout, from: ContentPoint, to: ContentPoint): Selection[];
+export declare function sameCell(layout: EditorLayout, from: ContentPoint, to: ContentPoint): boolean;

package/dist/column-selection.js

@@ -0,0 +1,52 @@
+import { TEXT_PADDING } from './layout.js';
+/* The cell of a monospaced grid an x falls in, which stands in for the visual column since a tab is a whole number of cells. */
+export function cellAt(layout, x) {
+    return Math.max(0, Math.round((x - TEXT_PADDING) / layout.metrics.charWidth));
+}
+/*
+ * One selection per line between two points, each spanning the same visual columns, the way a column
+ * (box) selection works. A line that ends before the box starts has no text in it: it gets a caret at
+ * its end when the box is only a column of carets, and none otherwise.
+ */
+export function columnSelections(layout, from, to) {
+    const { charWidth } = layout.metrics;
+    const document = layout.document;
+    const fromLine = document.positionAt(layout.hitTest(from.x, from.y)).line;
+    const toLine = document.positionAt(layout.hitTest(to.x, to.y)).line;
+    const fromCell = cellAt(layout, from.x);
+    const toCell = cellAt(layout, to.x);
+    const left = Math.min(fromCell, toCell);
+    const right = Math.max(fromCell, toCell);
+    const reversed = toCell < fromCell;
+    const result = [];
+    for (let line = Math.min(fromLine, toLine); line <= Math.max(fromLine, toLine); line++) {
+        const row = layout.rowForLine(line);
+        if (row.kind !== 'text' || layout.isHidden(line)) {
+            continue;
+        }
+        const geometry = layout.geometry(row);
+        const endX = geometry.rowStarts.length > 1 ? geometry.rowEnds[0] : geometry.before[geometry.before.length - 1];
+        const offsetAt = (cell) => layout.offsetAtX(geometry, 0, TEXT_PADDING + cell * charWidth).offset;
+        if (cellAt(layout, endX + TEXT_PADDING) < left) {
+            if (left === right) {
+                const end = document.getLine(line).end;
+                result.push({ anchor: end, head: end });
+            }
+            continue;
+        }
+        const start = offsetAt(left);
+        const end = offsetAt(right);
+        result.push(reversed ? { anchor: end, head: start } : { anchor: start, head: end });
+    }
+    if (result.length === 0) {
+        const end = document.getLine(toLine).end;
+        result.push({ anchor: end, head: end });
+    }
+    return result;
+}
+/* Whether two points are in the same cell of the same line, which makes a press with alt a click and not yet a box. */
+export function sameCell(layout, from, to) {
+    const document = layout.document;
+    return (cellAt(layout, from.x) === cellAt(layout, to.x) &&
+        document.positionAt(layout.hitTest(from.x, from.y)).line === document.positionAt(layout.hitTest(to.x, to.y)).line);
+}

package/dist/controller.d.ts

@@ -0,0 +1,64 @@
+import type { Keymap } from './keymap-table.ts';
+import type { EditorClickHandler, EditorContextMenu, EditorKeyHandler, EditorRunCommand, EditorSelectionRanges, KeyChord } from './types.ts';
+import type { EditorView } from './view.ts';
+export interface ControllerOptions {
+    keymap?: Keymap;
+    handBack: readonly KeyChord[];
+    apple: boolean;
+    save(): void;
+    blur(): void;
+}
+export declare class InputController {
+    private readonly native;
+    private readonly pointer;
+    private readonly cleanup;
+    private readonly keyHandlers;
+    private readonly gesture;
+    private readonly clickHandlers;
+    private readonly contextListeners;
+    private readonly subscription;
+    private historyGroup;
+    private block;
+    private selectionRanges;
+    private expansions;
+    private lastInputAt;
+    private desiredXs;
+    private keepDesiredXs;
+    private readonly view;
+    private readonly options;
+    constructor(view: EditorView, options: ControllerOptions);
+    private listen;
+    private attach;
+    dispose(): void;
+    private blockedByReadOnly;
+    private inputGroup;
+    private applyEdits;
+    private replaceSelections;
+    private paste;
+    private commandOptions;
+    private viewCommand;
+    command(name: EditorRunCommand): boolean;
+    setSelectionRanges(provider: EditorSelectionRanges | null): void;
+    private expandThrough;
+    private modelCommand;
+    private typeText;
+    private movePages;
+    private toggleColumnMode;
+    private extendBlock;
+    private moveCarets;
+    private dropText;
+    private goToMatchingBracket;
+    private run;
+    onKeyDown(handler: EditorKeyHandler): () => void;
+    onClick(handler: EditorClickHandler): () => void;
+    onContextMenu(listener: (menu: EditorContextMenu) => void): () => void;
+    private keydown;
+    private beforeInput;
+    private copy;
+    private pointerDown;
+    private takenByHost;
+    private positionOf;
+    private contextMenu;
+    private stickyDown;
+    private gutterDown;
+}