@adecore/editor 0.21.1 → 0.22.0

package/dist/testing.js

@@ -40,28 +40,31 @@ export function createPage() {
         host: document.getElementById('host')
     };
 }
+function createEvent(window, type) {
+    return new window.Event(type, { bubbles: true, cancelable: true });
+}
 /* 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 });
+    const event = createEvent(window, 'keydown');
     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 });
+    const event = createEvent(window, 'keyup');
     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 });
+    const event = createEvent(window, 'beforeinput');
     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 });
+    const event = createEvent(window, type);
     Object.assign(event, {
         clipboardData: {
             getData: () => data.text,
@@ -75,7 +78,7 @@ export function clipboard(window, target, type, 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 });
+    const event = createEvent(window, type);
     Object.assign(event, {
         clientX: x,
         clientY: y,

package/dist/tokens.d.ts

@@ -24,5 +24,6 @@ export declare class TokenCache {
         from: number;
         to: number;
     } | null;
+    private forgetPivot;
     covers(line: number): boolean;
 }

package/dist/tokens.js

@@ -32,8 +32,7 @@ export class TokenCache {
         this.lines = this.source.getLineCount();
         this.entries = [];
         this.frontier = 0;
-        this.reusableFrom = Number.POSITIVE_INFINITY;
-        this.pivotLine = -1;
+        this.forgetPivot();
     }
     /* How far down the document has colors that are right for the text. */
     get colored() {
@@ -71,8 +70,7 @@ export class TokenCache {
         if (first === undefined) {
             this.entries = [];
             this.frontier = 0;
-            this.reusableFrom = Number.POSITIVE_INFINITY;
-            this.pivotLine = -1;
+            this.forgetPivot();
             return;
         }
         const firstLine = lineOf(first.from);
@@ -87,8 +85,7 @@ export class TokenCache {
         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;
+            this.forgetPivot();
             return;
         }
         const old = this.entries[lastOld];
@@ -109,8 +106,7 @@ export class TokenCache {
         }
         if (tokenizer.stale?.() === true) {
             this.frontier = 0;
-            this.reusableFrom = Number.POSITIVE_INFINITY;
-            this.pivotLine = -1;
+            this.forgetPivot();
         }
         const count = this.source.getLineCount();
         const limit = Math.min(until, count - 1);
@@ -135,8 +131,7 @@ export class TokenCache {
                 (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;
+                this.forgetPivot();
                 break;
             }
             if (now() > deadline) {
@@ -145,6 +140,10 @@ export class TokenCache {
         }
         return this.frontier > from ? { from, to: this.frontier - 1 } : null;
     }
+    forgetPivot() {
+        this.reusableFrom = Number.POSITIVE_INFINITY;
+        this.pivotLine = -1;
+    }
     /* 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/view.d.ts

@@ -171,6 +171,7 @@ export declare class EditorView {
     private get overscan();
     private get viewportWidth();
     private modelChanged;
+    private followEdit;
     private mapTracked;
     trackRange(from: number, to: number): {
         get(): {

package/dist/view.js

@@ -1,9 +1,10 @@
-import { replacementText, scanBrackets } from '@adecore/editor-core';
+import { indentationColumn, replacementText, scanBrackets } from '@adecore/editor-core';
 import { FindController } from './find.js';
 import { EditorLayout, RIGHT_PADDING } from './layout.js';
 import { createMetrics, readEditorFont } from './metrics.js';
 import { AttributionRuns, colorValue, tintValue } from './attribution.js';
 import { renderCodeBlock } from './code-block.js';
+import { emit, subscribe } from './listeners.js';
 import { mapOffset } from './offsets.js';
 import { mapTrackedRange } from './tracked-range.js';
 import { scrollPosition } from './scroll.js';
@@ -12,11 +13,23 @@ import { Outline, scopeChain, stickyCover, stickyPlacements, structuralEntries }
 import { overviewTicks, paintOverview } from './overview.js';
 import { paintCarets, paintGutter, paintOver, paintOverlays, paintRemoteCarets, paintSigns, paintSticky, RowPainter } from './paint.js';
 import { overlayTokens } from './semantic.js';
-import { indentationColumn } from '@adecore/editor-core';
 import { TokenCache } from './tokens.js';
 function sameRect(left, right) {
     return left.left === right.left && left.top === right.top && left.right === right.right && left.bottom === right.bottom;
 }
+function mapRange(range, changes) {
+    return { ...range, from: mapOffset(range.from, changes), to: mapOffset(range.to, changes) };
+}
+function mapFoldHints(hints, changes) {
+    return {
+        symbols: hints.symbols?.map((hint) => mapRange(hint, changes)) ?? [],
+        ranges: hints.ranges?.map((hint) => ({
+            ...mapRange(hint, changes),
+            ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
+            ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
+        })) ?? []
+    };
+}
 /* The lines past the visible ones that are colored ahead of the scroll, and how long one slice of that work may take. */
 const COLOR_MARGIN = 80;
 const MIN_OVERSCAN = 400;
@@ -436,37 +449,7 @@ export class EditorView {
                 this.layoutGhostParts();
             }
             for (const changes of batches) {
-                this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: mapOffset(inlay.at, changes) }));
-                for (const [owner, blocks] of this.blocks) {
-                    this.blocks.set(owner, blocks.map((block) => ({ ...block, at: mapOffset(block.at, changes) })));
-                }
-                this.lenses = this.lenses.map((lens) => ({ ...lens, at: mapOffset(lens.at, changes) }));
-                this.collapsed = new Set([...this.collapsed].map((anchor) => mapOffset(anchor, changes)));
-                this.settled = new Set([...this.settled].map((anchor) => mapOffset(anchor, changes)));
-                if (this.foldHints !== null) {
-                    this.foldHints = {
-                        symbols: this.foldHints.symbols?.map((hint) => ({ ...hint, from: mapOffset(hint.from, changes), to: mapOffset(hint.to, changes) })) ?? [],
-                        ranges: this.foldHints.ranges?.map((hint) => ({
-                            ...hint,
-                            from: mapOffset(hint.from, changes),
-                            to: mapOffset(hint.to, changes),
-                            ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
-                            ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
-                        })) ?? []
-                    };
-                }
-                this.customFolds = this.customFolds.map((fold) => ({ from: mapOffset(fold.from, changes), to: mapOffset(fold.to, changes) }));
-                this.find.mapBounds(changes);
-                this.changeMarks = this.changeMarks.map((mark) => ({ ...mark, from: mapOffset(mark.from, changes), to: mapOffset(mark.to, changes) }));
-                this.markers = this.markers.map((marker) => ({ ...marker, from: mapOffset(marker.from, changes), to: mapOffset(marker.to, changes) }));
-                this.mapTracked(changes);
-                this.attribution.map(changes);
-                this.highlights.map(changes);
-                this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: mapOffset(caret.at, changes) }));
-                for (const [owner, entries] of this.lineActions) {
-                    this.lineActions.set(owner, entries.map((entry) => ({ ...entry, at: mapOffset(entry.at, changes) })));
-                }
-                this.semantic = this.semantic.map((token) => ({ ...token, from: mapOffset(token.from, changes), to: mapOffset(token.to, changes) }));
+                this.followEdit(changes);
             }
             this.foldRanges = this.mappedFolds(batches);
             this.semanticVersion++;
@@ -496,6 +479,31 @@ export class EditorView {
         }
         this.requestRender();
     }
+    /* Moves everything anchored to an offset along with one batch of changes. */
+    followEdit(changes) {
+        this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: mapOffset(inlay.at, changes) }));
+        for (const [owner, blocks] of this.blocks) {
+            this.blocks.set(owner, blocks.map((block) => ({ ...block, at: mapOffset(block.at, changes) })));
+        }
+        this.lenses = this.lenses.map((lens) => ({ ...lens, at: mapOffset(lens.at, changes) }));
+        this.collapsed = new Set([...this.collapsed].map((anchor) => mapOffset(anchor, changes)));
+        this.settled = new Set([...this.settled].map((anchor) => mapOffset(anchor, changes)));
+        if (this.foldHints !== null) {
+            this.foldHints = mapFoldHints(this.foldHints, changes);
+        }
+        this.customFolds = this.customFolds.map((fold) => mapRange(fold, changes));
+        this.find.mapBounds(changes);
+        this.changeMarks = this.changeMarks.map((mark) => mapRange(mark, changes));
+        this.markers = this.markers.map((marker) => mapRange(marker, changes));
+        this.mapTracked(changes);
+        this.attribution.map(changes);
+        this.highlights.map(changes);
+        this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: mapOffset(caret.at, changes) }));
+        for (const [owner, entries] of this.lineActions) {
+            this.lineActions.set(owner, entries.map((entry) => ({ ...entry, at: mapOffset(entry.at, changes) })));
+        }
+        this.semantic = this.semantic.map((token) => mapRange(token, changes));
+    }
     mapTracked(changes) {
         for (const entry of this.tracked) {
             const mapped = mapTrackedRange(entry.from, entry.to, changes);
@@ -622,9 +630,7 @@ export class EditorView {
         this.outline.setStructure(structuralEntries(ranges, this.model, (from, to) => this.model.slice(from, to), (offset) => this.brackets().pairs.get(offset)));
         const anchors = new Set(this.foldRanges.map((range) => range.from));
         this.collapsed = new Set([...this.collapsed].filter((anchor) => anchors.has(anchor)));
-        this.anchorScroll(() => this.layout.configure({ folds: this.foldStates() }));
-        this.moveHiddenCarets();
-        this.render();
+        this.refoldLayout();
     }
     /* The folds a person made of a selection, which the document's own structure does not know, among the ones it does. */
     withCustomFolds(ranges) {
@@ -968,9 +974,11 @@ export class EditorView {
         if (!rect) {
             return { x: clientX - this.gutterWidth + this.viewport.scrollLeft, y: clientY + this.viewport.scrollTop };
         }
-        const scaleX = this.viewport.offsetWidth > 0 ? rect.width / this.viewport.offsetWidth : 1;
-        const scaleY = this.viewport.offsetHeight > 0 ? rect.height / this.viewport.offsetHeight : 1;
-        return { x: (clientX - rect.left) / scaleX - this.gutterWidth + this.viewport.scrollLeft, y: (clientY - rect.top) / scaleY + this.viewport.scrollTop };
+        const scale = this.screenScale(rect);
+        return {
+            x: (clientX - rect.left) / scale.x - this.gutterWidth + this.viewport.scrollLeft,
+            y: (clientY - rect.top) / scale.y + this.viewport.scrollTop
+        };
     }
     offsetAtPoint(clientX, clientY) {
         const point = this.contentPoint(clientX, clientY);
@@ -1059,12 +1067,8 @@ export class EditorView {
         }
     }
     onHover(listener) {
-        this.hoverListeners.add(listener);
-        return () => {
-            this.hoverListeners.delete(listener);
-        };
+        return subscribe(this.hoverListeners, listener);
     }
-    /* The pointer moved over the editor; a drag in progress is not a hover. */
     /*
      * The other places the selected text is, found without a language server: only for one selection that
      * holds no line break and is not blank, and not at all when there are more than a few of them.
@@ -1268,6 +1272,7 @@ export class EditorView {
         this.dropCaret = offset;
         this.render();
     }
+    /* The pointer moved over the editor; a drag in progress is not a hover. */
     hoverMoved(event) {
         this.content.classList.toggle('se-over-selection', !this.settings.readOnly && event.buttons === 0 && this.selectionAtPoint(event.clientX, event.clientY) !== null);
         this.setHover(event.buttons === 0 ? this.characterAtPoint(event.clientX, event.clientY, event.target) : null);
@@ -1277,15 +1282,10 @@ export class EditorView {
             return;
         }
         this.hoverOffset = offset;
-        for (const listener of [...this.hoverListeners]) {
-            listener(offset);
-        }
+        emit(this.hoverListeners, offset);
     }
     onViewChange(listener) {
-        this.viewListeners.add(listener);
-        return () => {
-            this.viewListeners.delete(listener);
-        };
+        return subscribe(this.viewListeners, listener);
     }
     announceView() {
         const key = `${this.scrollTop}|${this.scrollLeft}|${this.clientWidth}|${this.clientHeight}|${this.layout.height}`;
@@ -1293,9 +1293,7 @@ export class EditorView {
             return;
         }
         this.viewKey = key;
-        for (const listener of [...this.viewListeners]) {
-            listener();
-        }
+        emit(this.viewListeners);
     }
     caretOf(head) {
         return this.layout.caret(head, head === this.ghost?.at ? 'before' : 'after', head === this.rowEndCaret);
@@ -1304,14 +1302,12 @@ export class EditorView {
     get scrollPlace() {
         return this.scrollRun?.to ?? { x: this.viewport.scrollLeft, y: this.viewport.scrollTop };
     }
-    /* Stops a scroll on its way where it is. */
     cancelScroll() {
         if (this.scrollRun !== null) {
             this.document.defaultView?.cancelAnimationFrame?.(this.scrollRun.frame);
             this.scrollRun = null;
         }
     }
-    /* Whether a person asked their system for less motion. */
     reducedMotion() {
         return this.document.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true;
     }
@@ -1440,15 +1436,10 @@ export class EditorView {
         this.render();
     }
     onFind(listener) {
-        this.findListeners.add(listener);
-        return () => {
-            this.findListeners.delete(listener);
-        };
+        return subscribe(this.findListeners, listener);
     }
     announceFind() {
-        for (const listener of [...this.findListeners]) {
-            listener(this.find.state);
-        }
+        emit(this.findListeners, this.find.state);
     }
     revealFind() {
         const mark = this.find.currentMark;
@@ -1837,10 +1828,7 @@ export class EditorView {
         return this.attribution.linesIn(first, last, this.model.getLine(first).start, this.model.getLine(last).end, (offset) => this.model.positionAt(offset).line);
     }
     onAttributionHover(listener) {
-        this.attributionListeners.add(listener);
-        return () => {
-            this.attributionListeners.delete(listener);
-        };
+        return subscribe(this.attributionListeners, listener);
     }
     /* The bar is three pixels wide, so the pointer finds it a few pixels to either side. */
     wireAttribution() {
@@ -1860,9 +1848,7 @@ export class EditorView {
             return;
         }
         this.attributionHover = next;
-        for (const listener of [...this.attributionListeners]) {
-            listener(next);
-        }
+        emit(this.attributionListeners, next);
     }
     attributionUnder(clientX, clientY) {
         if (this.attribution.size === 0) {
@@ -1973,10 +1959,7 @@ export class EditorView {
         this.render();
     }
     onScope(listener) {
-        this.scopeListeners.add(listener);
-        return () => {
-            this.scopeListeners.delete(listener);
-        };
+        return subscribe(this.scopeListeners, listener);
     }
     announceScope() {
         const line = this.model.positionAt(this.model.getPrimary().head).line;
@@ -1991,9 +1974,7 @@ export class EditorView {
             return;
         }
         this.scopeKey = key;
-        for (const listener of [...this.scopeListeners]) {
-            listener(scope);
-        }
+        emit(this.scopeListeners, scope);
     }
     stickyLimit() {
         return Math.min(STICKY_MAX_LINES, Math.floor(this.viewportHeight / this.layout.metrics.lineHeight / STICKY_ROW_SHARE));
@@ -2061,10 +2042,7 @@ export class EditorView {
         this.render();
     }
     onGutterAction(listener) {
-        this.gutterActionListeners.add(listener);
-        return () => {
-            this.gutterActionListeners.delete(listener);
-        };
+        return subscribe(this.gutterActionListeners, listener);
     }
     setGutterMarkers(owner, markers) {
         const before = this.gutterMarkers.get(owner) ?? [];
@@ -2081,10 +2059,7 @@ export class EditorView {
         this.render();
     }
     onGutterMarker(listener) {
-        this.gutterMarkerListeners.add(listener);
-        return () => {
-            this.gutterMarkerListeners.delete(listener);
-        };
+        return subscribe(this.gutterMarkerListeners, listener);
     }
     /* The id of the host's gutter marker when the target is it. */
     gutterMarkerIdOf(target) {
@@ -2092,11 +2067,9 @@ export class EditorView {
         return button?.dataset.gutterMarker ?? null;
     }
     pressGutterMarker(id) {
-        for (const listener of [...this.gutterMarkerListeners]) {
-            listener(id);
-        }
+        emit(this.gutterMarkerListeners, id);
     }
-    /* One marker per line: where two owners mark the same line, the owner named first stays. */
+    /* One marker per line: where two owners mark the same line, the owner that sorts first stays. */
     markersByLine() {
         const byLine = new Map();
         for (const owner of [...this.gutterMarkers.keys()].sort()) {
@@ -2114,9 +2087,7 @@ export class EditorView {
         return button ? Number(button.dataset.gutterAction) : null;
     }
     pressGutterAction(line) {
-        for (const listener of [...this.gutterActionListeners]) {
-            listener(line);
-        }
+        emit(this.gutterActionListeners, line);
     }
     /* Whether a click at this point of the gutter is on a fold control, and which line it folds. */
     foldLineOf(target) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,7 +39,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.21.1",
+    "@adecore/editor-core": "0.22.0",
     "linkedom": "^0.18.13",
     "shiki": "^4.4.3"
   },

package/src/code-block.ts

@@ -25,28 +25,7 @@ export function renderCodeBlock(
         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 gutter = codeGutter(document, options, index);
         const code = document.createElement('div');
         code.className = 'se-code-text';
         if (options.faded) {
@@ -63,6 +42,32 @@ export function renderCodeBlock(
     container.append(block);
 }
 
+function codeGutter(document: Document, options: EditorCodeBlockOptions, index: number): HTMLElement {
+    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);
+    }
+    return gutter;
+}
+
 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;