@adecore/editor 0.0.1 → 0.17.0-beta.1

package/dist/paint.d.ts

@@ -0,0 +1,86 @@
+import { type AttributedLines } from './attribution.ts';
+import { type EditorLayout, type LayoutRect, type LayoutRow, type LineGeometry } from './layout.ts';
+import type { EditorChangeKind, LineToken } from './types.ts';
+export interface RowPaint {
+    layoutVersion: number;
+    whitespace: boolean;
+    tokensOf(line: number): readonly LineToken[] | null;
+    viewportWidth: number;
+    hostLeft: number;
+    hostWidth: number;
+    onUnfold(line: number): void;
+}
+export declare function styleSpan(span: HTMLElement, token: LineToken): void;
+export declare function lineElement(document: Document, geometry: LineGeometry, tokens: readonly LineToken[] | null, lineHeight: number, firstRowOnly: boolean, whitespace?: boolean): HTMLElement;
+export declare class RowPainter {
+    private readonly rows;
+    private readonly code;
+    private readonly layout;
+    private readonly observer;
+    constructor(code: HTMLElement, layout: EditorLayout, observer: ResizeObserver | undefined);
+    paint(rows: readonly LayoutRow[], paint: RowPaint): boolean;
+    private paintText;
+    private buildText;
+    private appendTail;
+    private paintBlock;
+    private fillBlock;
+    clear(): void;
+}
+export interface GutterPaint {
+    activeLines: ReadonlySet<number>;
+    changes: ReadonlyMap<number, EditorChangeKind>;
+    attribution: ReadonlyMap<number, AttributedLines>;
+    highlights: ReadonlyMap<number, AttributedLines>;
+    foldable: ReadonlyMap<number, boolean>;
+    action: {
+        line: number;
+        label: string;
+    } | null;
+    markers: ReadonlyMap<number, {
+        id: string;
+        label: string;
+    }>;
+}
+export declare function paintGutter(container: HTMLElement, layout: EditorLayout, rows: readonly LayoutRow[], paint: GutterPaint): void;
+export interface OverlayPaint {
+    currentLine: LayoutRect | null;
+    selections: readonly LayoutRect[];
+    focused: boolean;
+    marks: readonly {
+        className: string;
+        rects: readonly LayoutRect[];
+        background?: string;
+    }[];
+}
+export declare function paintOverlays(container: HTMLElement, paint: OverlayPaint): void;
+export declare function paintOver(container: HTMLElement, layers: readonly {
+    className: string;
+    rects: readonly LayoutRect[];
+}[]): void;
+export declare function paintCarets(container: HTMLElement, carets: readonly (LayoutRect & {
+    primary: boolean;
+    drop?: boolean;
+})[]): void;
+export interface RemoteCaret {
+    id: string;
+    name: string;
+    color: string;
+    x: number;
+    y: number;
+    height: number;
+    below: boolean;
+}
+export declare function paintRemoteCarets(container: HTMLElement, carets: readonly RemoteCaret[]): void;
+export interface StickyEntry {
+    line: number;
+    geometry: LineGeometry;
+    tokens: readonly LineToken[] | null;
+}
+export declare function paintSticky(container: HTMLElement, entries: readonly StickyEntry[], lineHeight: number): void;
+export declare function arrowSign(document: Document, width: number, lineHeight: number, className: string): SVGSVGElement;
+export interface WrapSign {
+    x: number;
+    y: number;
+    width: number;
+}
+export declare function paintSigns(container: HTMLElement, signs: readonly WrapSign[], lineHeight: number): void;

package/dist/paint.js

@@ -0,0 +1,481 @@
+import { colorValue } from './attribution.js';
+import { scanLine } from './layout.js';
+const ITALIC = 1;
+const BOLD = 2;
+const UNDERLINE = 4;
+const STRIKETHROUGH = 8;
+/* The gap around a collapsed fold's placeholder, so it reads as `{…}` and not as three separate things. */
+const FOLD_GAP = 4;
+const FOLD_CHIP_PADDING = 12;
+export function styleSpan(span, token) {
+    if (token.color !== '') {
+        span.style.color = token.color;
+    }
+    if (token.fontStyle & ITALIC) {
+        span.style.fontStyle = 'italic';
+    }
+    if (token.fontStyle & BOLD) {
+        span.style.fontWeight = 'bold';
+    }
+    const decorations = [token.fontStyle & UNDERLINE ? 'underline' : '', token.fontStyle & STRIKETHROUGH ? 'line-through' : ''].filter(Boolean);
+    if (decorations.length > 0) {
+        span.style.textDecoration = decorations.join(' ');
+    }
+}
+/* Text in an element, with each space drawn as a faint dot when whitespace shows. A dot is as wide as a space in the code face, so nothing moves. */
+function setText(element, text, whitespace) {
+    if (!whitespace || !text.includes(' ')) {
+        element.textContent = text;
+        return;
+    }
+    const document = element.ownerDocument;
+    for (const part of text.split(/( +)/)) {
+        if (part.startsWith(' ')) {
+            const dots = document.createElement('span');
+            dots.className = 'se-ws';
+            dots.textContent = '·'.repeat(part.length);
+            element.append(dots);
+        }
+        else if (part !== '') {
+            element.append(part);
+        }
+    }
+}
+/* The text of one run, split along the colors of the line. `tokensFrom` is the offset the first token starts at, which is the geometry's own start unless it is a slice of a line. */
+function fillRun(run, geometry, from, to, tokens, whitespace, tokensFrom = geometry.start) {
+    if (tokens === null) {
+        setText(run, geometry.text.slice(from - geometry.start, to - geometry.start), whitespace);
+        return;
+    }
+    let tokenStart = tokensFrom;
+    for (const token of tokens) {
+        const tokenEnd = tokenStart + token.length;
+        const start = Math.max(from, tokenStart);
+        const end = Math.min(to, tokenEnd);
+        if (start < end) {
+            const span = run.ownerDocument.createElement('span');
+            setText(span, geometry.text.slice(start - geometry.start, end - geometry.start), whitespace);
+            styleSpan(span, token);
+            run.append(span);
+        }
+        tokenStart = tokenEnd;
+        if (tokenStart >= to) {
+            break;
+        }
+    }
+}
+/* One line of text as absolutely placed runs and inlays. `firstRowOnly` leaves out what a wrapped line carries onto later visual lines. */
+export function lineElement(document, geometry, tokens, lineHeight, firstRowOnly, whitespace = false) {
+    const element = document.createElement('div');
+    element.className = 'se-line';
+    element.style.width = `${geometry.width}px`;
+    for (const run of geometry.runs) {
+        if (firstRowOnly && run.subRow > 0) {
+            continue;
+        }
+        const span = document.createElement('span');
+        span.className = 'se-run';
+        span.style.left = `${run.x}px`;
+        span.style.top = `${run.subRow * lineHeight}px`;
+        fillRun(span, geometry, run.from, run.to, tokens, whitespace);
+        element.append(span);
+    }
+    if (whitespace) {
+        appendTabSigns(element, geometry, lineHeight, firstRowOnly);
+    }
+    for (const box of geometry.inlays) {
+        if (firstRowOnly && box.subRow > 0) {
+            continue;
+        }
+        const span = document.createElement('span');
+        span.className = box.inlay.ghost ? 'se-ghost' : box.inlay.composition ? 'se-composition' : 'se-inlay';
+        span.dataset.inlayId = box.inlay.id;
+        span.textContent = box.inlay.text;
+        span.style.left = `${box.x}px`;
+        span.style.top = `${box.subRow * lineHeight}px`;
+        span.style.width = `${box.width}px`;
+        element.append(span);
+    }
+    return element;
+}
+/*
+ * The text layer: one element per visible row, kept while what it shows stays the same. A line is
+ * drawn as absolutely placed runs of text, so the layout alone decides where each character is and
+ * the browser only has to paint it.
+ */
+export class RowPainter {
+    rows = new Map();
+    code;
+    layout;
+    observer;
+    constructor(code, layout, observer) {
+        this.code = code;
+        this.layout = layout;
+        this.observer = observer;
+    }
+    /* Draws the rows and takes the rest away. Returns whether a widget's height moved the layout. */
+    paint(rows, paint) {
+        const visible = new Set(rows.map((row) => row.key));
+        for (const [key, entry] of this.rows) {
+            if (!visible.has(key)) {
+                this.observer?.unobserve(entry.element);
+                entry.element.remove();
+                this.rows.delete(key);
+            }
+        }
+        let measured = false;
+        for (const row of rows) {
+            if (row.kind === 'text') {
+                this.paintText(row, paint);
+            }
+            else {
+                measured = this.paintBlock(row, paint) || measured;
+            }
+        }
+        return measured;
+    }
+    paintText(row, paint) {
+        const geometry = this.layout.geometry(row);
+        const tokens = paint.tokensOf(row.line);
+        const folded = row.lastLine > row.line;
+        const lastLine = folded && row.tail !== null ? this.layout.document.getLine(row.lastLine) : null;
+        const tail = lastLine === null ? '' : lastLine.text.slice(row.tail - lastLine.start);
+        const tailTokens = tail === '' ? null : paint.tokensOf(row.lastLine);
+        let entry = this.rows.get(row.key);
+        if (!entry ||
+            entry.text !== geometry.text ||
+            entry.tokens !== tokens ||
+            entry.layoutVersion !== paint.layoutVersion ||
+            entry.whitespace !== paint.whitespace ||
+            entry.folded !== folded ||
+            entry.tail !== tail ||
+            entry.tailTokens !== tailTokens) {
+            const element = this.buildText(row, geometry, tokens, paint, tail, tailTokens);
+            if (entry) {
+                entry.element.replaceWith(element);
+            }
+            else {
+                this.code.append(element);
+            }
+            entry = {
+                element,
+                text: geometry.text,
+                tokens,
+                layoutVersion: paint.layoutVersion,
+                whitespace: paint.whitespace,
+                folded,
+                tail,
+                tailTokens,
+                revision: 0
+            };
+            this.rows.set(row.key, entry);
+        }
+        entry.element.style.top = `${row.top}px`;
+        entry.element.style.height = `${row.height}px`;
+        entry.element.dataset.line = String(row.line);
+    }
+    buildText(row, geometry, tokens, paint, tail, tailTokens) {
+        const document = this.code.ownerDocument;
+        const lineHeight = this.layout.metrics.lineHeight;
+        const element = lineElement(document, geometry, tokens, lineHeight, false, paint.whitespace);
+        if (row.lastLine > row.line) {
+            const chip = document.createElement('button');
+            chip.type = 'button';
+            chip.className = 'se-fold-chip';
+            chip.textContent = '…';
+            chip.tabIndex = -1;
+            const chipLeft = geometry.rowEnds[geometry.rowEnds.length - 1] + FOLD_GAP;
+            const chipWidth = Math.ceil(this.layout.metrics.charWidth) + FOLD_CHIP_PADDING;
+            chip.style.left = `${chipLeft}px`;
+            chip.style.top = `${(geometry.subRows - 1) * lineHeight}px`;
+            chip.style.width = `${chipWidth}px`;
+            chip.addEventListener('pointerdown', (event) => event.stopPropagation());
+            chip.addEventListener('click', () => paint.onUnfold(row.line));
+            element.append(chip);
+            if (tail !== '' && row.tail !== null) {
+                this.appendTail(element, row, geometry, tail, tailTokens, chipLeft + chipWidth + FOLD_GAP);
+            }
+        }
+        return element;
+    }
+    /* The closing delimiter of a collapsed fold, laid out as a line of its own that starts after the placeholder. */
+    appendTail(element, row, header, tail, tokens, left) {
+        const document = this.code.ownerDocument;
+        const lineStart = this.layout.document.getLine(row.lastLine).start;
+        const geometry = scanLine({ start: row.tail, end: row.tail + tail.length, text: tail }, this.layout.metrics, null, []);
+        for (const run of geometry.runs) {
+            const span = document.createElement('span');
+            span.className = 'se-run';
+            span.style.left = `${left + run.x}px`;
+            span.style.top = `${(header.subRows - 1) * this.layout.metrics.lineHeight}px`;
+            fillRun(span, geometry, run.from, run.to, tokens, false, lineStart);
+            element.append(span);
+        }
+    }
+    paintBlock(row, paint) {
+        const { widget } = row;
+        const revision = widget.revision ?? 0;
+        let entry = this.rows.get(row.key);
+        if (!entry) {
+            const element = this.code.ownerDocument.createElement('div');
+            element.className = 'se-block';
+            element.dataset.rowKey = row.key;
+            element.dataset.widgetId = widget.id;
+            this.fillBlock(element, widget);
+            this.code.append(element);
+            if (!widget.lens) {
+                this.observer?.observe(element);
+            }
+            entry = { element, text: '', tokens: null, layoutVersion: 0, whitespace: false, folded: false, tail: '', tailTokens: null, revision };
+            this.rows.set(row.key, entry);
+        }
+        else if (entry.revision !== revision) {
+            entry.element.replaceChildren();
+            this.fillBlock(entry.element, widget);
+            entry.revision = revision;
+        }
+        entry.element.style.top = `${row.top}px`;
+        if (widget.lens) {
+            entry.element.style.left = `${this.layout.indentX(row.line)}px`;
+            entry.element.style.height = `${row.height}px`;
+            return false;
+        }
+        if (widget.render) {
+            entry.element.style.left = `${paint.hostLeft}px`;
+            entry.element.style.width = `${paint.hostWidth}px`;
+        }
+        else {
+            entry.element.style.width = `${Math.max(80, paint.viewportWidth)}px`;
+        }
+        const height = entry.element.getBoundingClientRect?.().height ?? 0;
+        return height > 0 && this.layout.setMeasuredHeight(row.key, height);
+    }
+    fillBlock(element, widget) {
+        if (widget.render) {
+            widget.render(element);
+        }
+        else {
+            element.textContent = widget.text ?? '';
+        }
+    }
+    clear() {
+        for (const entry of this.rows.values()) {
+            this.observer?.unobserve(entry.element);
+            entry.element.remove();
+        }
+        this.rows.clear();
+    }
+}
+/* The line numbers of the visible rows, and the fold control of the lines that have one. */
+export function paintGutter(container, layout, rows, paint) {
+    const document = container.ownerDocument;
+    const fragment = document.createDocumentFragment();
+    for (const row of rows) {
+        if (row.kind !== 'text') {
+            continue;
+        }
+        const item = document.createElement('div');
+        item.className = paint.activeLines.has(row.line) ? 'se-line-number se-active-number' : 'se-line-number';
+        item.style.top = `${row.top}px`;
+        item.style.height = `${layout.metrics.lineHeight}px`;
+        const fill = paint.highlights.get(row.line)?.fill;
+        if (fill !== undefined) {
+            item.style.background = colorValue(fill);
+        }
+        const number = document.createElement('span');
+        number.textContent = String(row.line + 1);
+        item.append(number);
+        if (paint.action?.line === row.line) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'se-gutter-action';
+            button.dataset.gutterAction = String(row.line);
+            button.tabIndex = -1;
+            button.setAttribute('aria-label', paint.action.label);
+            item.append(button);
+        }
+        const marker = paint.markers.get(row.line);
+        if (marker !== undefined) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'se-gutter-marker';
+            button.dataset.gutterMarker = marker.id;
+            button.tabIndex = -1;
+            button.setAttribute('aria-label', marker.label);
+            item.append(button);
+        }
+        const sign = paint.highlights.get(row.line)?.sign;
+        if (sign) {
+            const mark = document.createElement('span');
+            mark.className = 'se-line-sign';
+            mark.textContent = sign;
+            mark.style.color = colorValue(paint.highlights.get(row.line).color);
+            item.append(mark);
+        }
+        const bar = paint.attribution.get(row.line);
+        if (bar) {
+            const mark = document.createElement('span');
+            mark.className = 'se-attribution';
+            mark.dataset.attributionId = bar.id;
+            mark.style.background = colorValue(bar.color);
+            mark.style.height = `${row.height}px`;
+            item.append(mark);
+        }
+        const change = paint.changes.get(row.line);
+        // The bar of an agent stands where the mark of a change would, and a removal is a triangle between lines that the bar never hides.
+        if (change && (!bar || change === 'deleted')) {
+            const mark = document.createElement('span');
+            mark.className = `se-change se-change-${change}`;
+            if (change !== 'deleted') {
+                mark.style.height = `${row.height}px`;
+            }
+            item.append(mark);
+        }
+        const collapsed = paint.foldable.get(row.line);
+        if (collapsed !== undefined) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle';
+            button.dataset.foldLine = String(row.line);
+            button.tabIndex = -1;
+            button.setAttribute('aria-label', collapsed ? 'Expand' : 'Collapse');
+            item.append(button);
+        }
+        fragment.append(item);
+    }
+    container.replaceChildren(fragment);
+}
+function box(document, className, rect) {
+    const element = document.createElement('div');
+    element.className = className;
+    element.style.left = `${rect.x}px`;
+    element.style.top = `${rect.y}px`;
+    element.style.width = `${Math.max(1, rect.width)}px`;
+    element.style.height = `${rect.height}px`;
+    return element;
+}
+/* What sits behind the text: the current line, the selections and the marks of find and brackets. */
+export function paintOverlays(container, paint) {
+    const document = container.ownerDocument;
+    const fragment = document.createDocumentFragment();
+    if (paint.currentLine) {
+        fragment.append(box(document, 'se-current-line', paint.currentLine));
+    }
+    for (const mark of paint.marks) {
+        for (const rect of mark.rects) {
+            const element = box(document, mark.className, rect);
+            if (mark.background) {
+                element.style.background = mark.background;
+            }
+            fragment.append(element);
+        }
+    }
+    for (const rect of paint.selections) {
+        fragment.append(box(document, paint.focused ? 'se-selection' : 'se-selection se-selection-inactive', rect));
+    }
+    container.replaceChildren(fragment);
+}
+/* What is drawn over the text, such as the fading of code nothing uses. */
+export function paintOver(container, layers) {
+    const document = container.ownerDocument;
+    const fragment = document.createDocumentFragment();
+    for (const layer of layers) {
+        for (const rect of layer.rects) {
+            fragment.append(box(document, layer.className, rect));
+        }
+    }
+    container.replaceChildren(fragment);
+}
+/* The carets, above the text. */
+export function paintCarets(container, carets) {
+    const document = container.ownerDocument;
+    container.replaceChildren(...carets.map((rect) => box(document, rect.drop ? 'se-drop-caret' : rect.primary ? 'se-caret se-primary-caret' : 'se-caret', { ...rect, width: 2 })));
+}
+/* The carets of agents with their names, above the text; they take no pointer and never move the real caret. */
+export function paintRemoteCarets(container, carets) {
+    const document = container.ownerDocument;
+    container.replaceChildren(...carets.map((caret) => {
+        const element = box(document, 'se-remote-caret', { x: caret.x, y: caret.y, width: 2, height: caret.height });
+        element.dataset.remoteId = caret.id;
+        element.style.background = colorValue(caret.color);
+        const label = document.createElement('span');
+        label.className = 'se-remote-label';
+        label.textContent = caret.name;
+        label.style.background = colorValue(caret.color);
+        if (caret.below) {
+            label.dataset.below = 'true';
+        }
+        element.append(label);
+        return element;
+    }));
+}
+/* The headers pinned at the top: a line number in the gutter's column, then the header's own text. */
+export function paintSticky(container, entries, lineHeight) {
+    const document = container.ownerDocument;
+    container.replaceChildren(...entries.map((entry, depth) => {
+        const row = document.createElement('div');
+        row.className = 'se-sticky-row';
+        row.dataset.line = String(entry.line);
+        row.dataset.depth = String(depth);
+        const number = document.createElement('span');
+        number.className = 'se-sticky-number';
+        number.textContent = String(entry.line + 1);
+        const code = document.createElement('div');
+        code.className = 'se-sticky-code';
+        code.append(lineElement(document, entry.geometry, entry.tokens, lineHeight, true));
+        row.append(number, code);
+        return row;
+    }));
+}
+const SVG = 'http://www.w3.org/2000/svg';
+/*
+ * An arrow as the platform draws a tab or a soft wrap: a line across the middle of half a line's height,
+ * ending in a head that points right with a bar behind it, in as much room as it has.
+ */
+export function arrowSign(document, width, lineHeight, className) {
+    const svg = document.createElementNS(SVG, 'svg');
+    svg.setAttribute('class', className);
+    svg.setAttribute('width', String(Math.max(1, Math.round(width))));
+    svg.setAttribute('height', String(lineHeight));
+    const height = Math.round(lineHeight / 2);
+    const stop = Math.max(1, Math.round(width)) - 1;
+    const bottom = Math.round((lineHeight + height) / 2);
+    const top = bottom - height;
+    const middle = bottom - height / 2;
+    const head = Math.max(1, Math.round(height / 2));
+    const path = document.createElementNS(SVG, 'path');
+    path.setAttribute('d', `M0 ${middle}H${stop}M${stop} ${top}V${bottom}M${stop - head} ${top}L${stop} ${middle}L${stop - head} ${bottom}Z`);
+    path.setAttribute('fill', 'currentColor');
+    path.setAttribute('stroke', 'currentColor');
+    path.setAttribute('stroke-width', '1');
+    svg.append(path);
+    return svg;
+}
+/* An arrow over each tab of a line. */
+function appendTabSigns(element, geometry, lineHeight, firstRowOnly) {
+    const document = element.ownerDocument;
+    for (let stop = 0; stop < geometry.offsets.length - 1; stop++) {
+        if (geometry.text[geometry.offsets[stop]] !== '\t' || (firstRowOnly && geometry.rowOf[stop] > 0)) {
+            continue;
+        }
+        const left = geometry.before[stop];
+        const right = geometry.rowOf[stop + 1] === geometry.rowOf[stop] ? geometry.before[stop + 1] : geometry.rowEnds[geometry.rowOf[stop]];
+        if (right - left < 3) {
+            continue;
+        }
+        const sign = arrowSign(document, right - left - 2, lineHeight, 'se-tab-sign');
+        sign.style.left = `${left + 1}px`;
+        sign.style.top = `${geometry.rowOf[stop] * lineHeight}px`;
+        element.append(sign);
+    }
+}
+/* The signs of the soft wraps: an arrow where a row ends in the middle of a line, and one at the start of the row that goes on. */
+export function paintSigns(container, signs, lineHeight) {
+    const document = container.ownerDocument;
+    container.replaceChildren(...signs.map((sign) => {
+        const arrow = arrowSign(document, sign.width, lineHeight, 'se-wrap-sign');
+        arrow.style.left = `${sign.x}px`;
+        arrow.style.top = `${sign.y}px`;
+        return arrow;
+    }));
+}

package/dist/php-html.d.ts

@@ -0,0 +1,9 @@
+import type { Highlighter } from 'shiki';
+type LanguageRegistration = Extract<Parameters<Highlighter['loadLanguage']>[0], {
+    readonly scopeName: string;
+}>;
+export declare const PHP_DOCUMENT_ID = "php-html";
+export declare const PHP_DOCUMENT: LanguageRegistration;
+export declare function documentLanguageOf(language: string): string;
+export declare function loadDocumentLanguage(highlighter: Highlighter, language: string): Promise<void>;
+export {};

package/dist/php-html.js

@@ -0,0 +1,36 @@
+/* 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 = {
+    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' }
+    ]
+};
+/* 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) {
+    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, language) {
+    if (language !== PHP_DOCUMENT_ID || highlighter.getLoadedLanguages().includes(PHP_DOCUMENT_ID)) {
+        return;
+    }
+    await highlighter.loadLanguage('php');
+    await highlighter.loadLanguage(PHP_DOCUMENT);
+}

package/dist/pointer.d.ts

@@ -0,0 +1,49 @@
+import type { DocumentModel, Selection } from '@adecore/editor-core';
+import type { ContentPoint } from './column-selection.ts';
+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;
+    columnSelections(from: ContentPoint, to: ContentPoint): Selection[] | null;
+    visualLine(offset: number): VisualLine;
+    lineAt(offset: number): {
+        from: number;
+        to: number;
+    };
+    camelHumps(): boolean;
+    columnMode(): boolean;
+    selectionAt(clientX: number, clientY: number): Selection | null;
+    setDropCaret(offset: number | null): void;
+    drop(from: number, to: number, offset: number, copy: boolean): void;
+    copyHeld(event: PointerEvent): boolean;
+    focus(): void;
+    scrolled(): void;
+}
+export declare class PointerSelection {
+    private drag;
+    private frame;
+    private lastPress;
+    private readonly host;
+    constructor(host: PointerHost);
+    get dragging(): boolean;
+    start(event: PointerEvent, area?: 'text' | 'gutter'): void;
+    private pressLineNumber;
+    private selectUnit;
+    private tweakedByLines;
+    private countClick;
+    move(event: PointerEvent): void;
+    end(event?: PointerEvent): void;
+    private updateCarry;
+    dispose(): void;
+    private cancelFrame;
+    private update;
+    private reach;
+    private autoScroll;
+}