@adecore/editor 0.0.1 → 0.17.0-beta.1

package/package.json

@@ -1,11 +1,71 @@
 {
   "name": "@adecore/editor",
-  "version": "0.0.1",
-  "description": "Placeholder for the first release.",
+  "version": "0.17.0-beta.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./editor.css": {
+      "source": "./src/editor.css",
+      "default": "./dist/editor.css"
+    },
+    "./fake": {
+      "source": "./src/fake.ts",
+      "types": "./dist/fake.d.ts",
+      "default": "./dist/fake.js"
+    },
+    "./shiki": {
+      "source": "./src/shiki.ts",
+      "types": "./dist/shiki.d.ts",
+      "default": "./dist/shiki.js"
+    },
+    "./keymap": {
+      "source": "./src/keymap-table.ts",
+      "types": "./dist/keymap-table.d.ts",
+      "default": "./dist/keymap-table.js"
+    },
+    "./testing": {
+      "source": "./src/testing.ts",
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bun scripts/build.ts",
+    "test": "bun test --conditions=source"
+  },
+  "dependencies": {
+    "@adecore/editor-core": "0.17.0-beta.1",
+    "shiki": "^4.4.3",
+    "linkedom": "^0.18.13"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.2",
+    "typescript": "^7.0.2",
+    "@types/node": "^24.13.6"
+  },
   "license": "FSL-1.1-MIT",
+  "author": "Bas Milius",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/basmilius/adecore.git",
     "directory": "packages/editor"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/basmilius/adecore/issues"
+  },
+  "homepage": "https://adecore.dev/editor/",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "LICENSE"
+  ]
 }

package/src/attribution.ts

@@ -0,0 +1,85 @@
+import type { DocumentChange } from '@adecore/editor-core';
+import { mapOffset } from './offsets.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;
+
+export interface AttributedLines {
+    readonly id: string;
+    readonly color: string;
+    readonly sign?: string;
+    readonly fill?: string;
+}
+
+interface Run {
+    id: string;
+    color: string;
+    sign: string | undefined;
+    fill: string | undefined;
+    from: number;
+    to: number;
+}
+
+/* A color washed out to a background that text stays readable on in either theme. */
+export function tintValue(color: string): string {
+    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: string): string {
+    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 {
+    private runs: Run[] = [];
+
+    get size(): number {
+        return this.runs.length;
+    }
+
+    /* 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 {
+        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 };
+        });
+    }
+
+    clear(): void {
+        this.runs = [];
+    }
+
+    map(changes: readonly DocumentChange[]): void {
+        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: number, last: number, from: number, to: number, lineOf: (offset: number) => number): Map<number, AttributedLines> {
+        const lines = new Map<number, AttributedLines>();
+        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/src/code-block.ts

@@ -0,0 +1,100 @@
+import { colorValue, tintValue } from './attribution.ts';
+import { styleSpan } from './paint.ts';
+import type { EditorCodeBlockOptions, LineToken } from './types.ts';
+
+/*
+ * 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: HTMLElement,
+    text: string,
+    tokens: readonly (readonly LineToken[])[] | null,
+    tabSize: number,
+    options: EditorCodeBlockOptions
+): void {
+    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: HTMLElement, line: string, tokens: readonly LineToken[] | null, emphasis: ReadonlyArray<readonly [number, number]>): void {
+    if (tokens === null && emphasis.length === 0) {
+        element.textContent = line;
+        return;
+    }
+    const spans: Array<{ start: number; end: number; token: LineToken | null }> = [];
+    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/src/column-selection.ts

@@ -0,0 +1,63 @@
+import type { Selection } from '@adecore/editor-core';
+import { type EditorLayout, TEXT_PADDING } from './layout.ts';
+
+export interface ContentPoint {
+    x: number;
+    y: number;
+}
+
+/* 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: EditorLayout, x: number): number {
+    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: EditorLayout, from: ContentPoint, to: ContentPoint): Selection[] {
+    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: Selection[] = [];
+    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: number): number => 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: EditorLayout, from: ContentPoint, to: ContentPoint): boolean {
+    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
+    );
+}