@adecore/editor 0.38.0 → 0.40.0

package/src/lens.ts

@@ -12,17 +12,20 @@ export function lensSignature(entries: readonly EditorCodeVisionEntry[]): string
 export function fillLens(container: HTMLElement, entries: readonly EditorCodeVisionEntry[], lookup: (id: string) => EditorCodeVisionEntry | undefined): void {
     const document = container.ownerDocument;
     container.classList.add('se-lens');
+
     for (const entry of entries) {
         const button = document.createElement('button');
         button.type = 'button';
         button.className = 'se-lens-entry';
         button.tabIndex = -1;
+
         if (entry.icon !== undefined) {
             const icon = document.createElement('span');
             icon.className = `se-lens-icon se-lens-icon-${entry.icon}`;
             icon.setAttribute('aria-hidden', 'true');
             button.append(icon);
         }
+
         button.append(entry.text);
         // The editor keeps the focus, so the caret stays where it was and a popover can hand the keyboard back.
         button.addEventListener('pointerdown', (event) => event.preventDefault());

package/src/listeners.ts

@@ -2,6 +2,7 @@ export type Listener = () => void;
 
 export function subscribe<T>(listeners: Set<T>, listener: T): () => void {
     listeners.add(listener);
+
     return () => {
         listeners.delete(listener);
     };

package/src/metrics.ts

@@ -11,53 +11,67 @@ const FALLBACK: EditorFont = { family: 'monospace', size: 13, lineHeight: 20 };
 
 function pixels(value: string): number | null {
     const parsed = Number.parseFloat(value);
+
     return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
 }
 
 /* The code face the page gives the editor's element, in whole pixels so a line is as tall as the viewer's. */
 export function readEditorFont(element: HTMLElement): EditorFont {
     const view = element.ownerDocument.defaultView;
+
     if (!view?.getComputedStyle) {
         return FALLBACK;
     }
+
     const style = view.getComputedStyle(element);
     const size = pixels(style.fontSize) ?? FALLBACK.size;
     const lineHeight = pixels(style.lineHeight) ?? Math.round(size * 1.5);
+
     return { family: style.fontFamily || FALLBACK.family, size, lineHeight: Math.round(lineHeight) };
 }
 
 /* Character widths from a canvas, which sets the text in the same face the page draws it in. Without a canvas a character is 0.6 of the size. */
 export function createMetrics(font: EditorFont, tabSize: number, document: Document): LayoutMetrics {
     let context: CanvasRenderingContext2D | null = null;
+
     try {
         context = document.createElement('canvas').getContext('2d');
     } catch {
         context = null;
     }
+
     const codeFont = `${font.size}px ${font.family}`;
     const inlayFont = `${Math.max(12, font.size - 1)}px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
     const cache = new Map<string, number>();
+
     const measure = (text: string, face: string, fallback: number): number => {
         if (!context) {
             return Array.from(text).length * fallback;
         }
+
         context.font = face;
         context.fontKerning = 'none';
+
         return context.measureText(text).width;
     };
+
     return {
         lineHeight: font.lineHeight,
         charWidth: measure('M', codeFont, font.size * 0.6),
         tabSize,
         measureText(text) {
             let width = cache.get(text);
+
             if (width === undefined) {
                 width = measure(text, codeFont, font.size * 0.6);
+
                 if (cache.size > 2000) {
                     cache.clear();
                 }
+
                 cache.set(text, width);
             }
+
             return width;
         },
         measureInlay: (text) => measure(text, inlayFont, font.size * 0.5)

package/src/modifier-gesture.ts

@@ -46,6 +46,7 @@ export class DoubleModifierGesture {
     /* Another modifier held with the one that counts spoils the gesture. */
     private spoiled(event: GestureEvent): boolean {
         const other = this.modifier === 'Alt' ? event.ctrlKey : event.altKey;
+
         return other || event.metaKey || event.shiftKey;
     }
 
@@ -54,24 +55,34 @@ export class DoubleModifierGesture {
             if (event.repeat === true) {
                 return null;
             }
+
             if (this.spoiled(event)) {
                 this.reset();
+
                 return null;
             }
+
             if (this.firstPressed && event.timeStamp - this.last > FORGET_MS) {
                 this.reset();
             }
+
             this.step(event, 'press');
+
             return null;
         }
+
         if (this.armed) {
             const held = this.modifier === 'Alt' ? event.altKey : event.ctrlKey;
+
             if (held && !this.spoiled(event) && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
                 return event.key === 'ArrowUp' ? 'above' : 'below';
             }
+
             return null;
         }
+
         this.reset();
+
         return null;
     }
 
@@ -79,8 +90,10 @@ export class DoubleModifierGesture {
         if (event.key === this.modifier) {
             if (this.spoiled(event)) {
                 this.reset();
+
                 return;
             }
+
             this.step(event, 'release');
         } else if (!this.armed) {
             this.reset();
@@ -90,8 +103,10 @@ export class DoubleModifierGesture {
     private step(event: GestureEvent, kind: 'press' | 'release'): void {
         if (this.firstPressed && event.timeStamp - this.last > TAP_MS) {
             this.reset();
+
             return;
         }
+
         if (kind === 'press') {
             if (!this.firstPressed) {
                 this.reset();
@@ -103,8 +118,10 @@ export class DoubleModifierGesture {
             } else {
                 this.reset();
             }
+
             return;
         }
+
         if (this.firstPressed && !this.firstReleased) {
             this.firstReleased = true;
             this.last = event.timeStamp;

package/src/native-input.ts

@@ -49,6 +49,7 @@ export class NativeInput {
         if (this.composing) {
             return;
         }
+
         const selection = this.model.getPrimary();
         const caretCount = this.model.getSelectionCount();
         const length = this.model.getLength();
@@ -56,33 +57,41 @@ export class NativeInput {
         const end = Math.max(selection.anchor, selection.head);
         let from = 0;
         let to = length;
+
         if (length > CONTEXT) {
             from = Math.max(0, Math.min(start, selection.head - 2048));
             to = Math.min(length, end + 2048);
+
             if (to - from > CONTEXT) {
                 from = Math.max(0, selection.head - CONTEXT / 2);
                 to = Math.min(length, from + CONTEXT);
             }
+
             // A boundary must not split a surrogate pair or a CRLF.
             if (from > 0 && /[\uDC00-\uDFFF\n]/.test(this.model.slice(from, from + 1))) {
                 from--;
             }
+
             if (to < length && /[\uDC00-\uDFFF\n]/.test(this.model.slice(to, to + 1))) {
                 to++;
             }
         }
+
         const source = this.model.slice(from, to);
         const value = textareaText(source);
         const nativeStart = textareaOffset(source, Math.max(0, start - from));
         const nativeEnd = textareaOffset(source, Math.max(0, end - from));
         this.context = { from, source, value, start: nativeStart, end: nativeEnd };
         this.writing = true;
+
         if (this.element.value !== value) {
             this.element.value = value;
         }
+
         this.element.setSelectionRange(nativeStart, nativeEnd, selection.head < selection.anchor ? 'backward' : 'forward');
         this.writing = false;
         const position = this.model.positionAt(selection.head);
+
         this.element.setAttribute(
             'aria-description',
             `Line ${position.line + 1}, column ${position.column + 1}. ${caretCount} caret${caretCount === 1 ? '' : 's'}.`
@@ -94,11 +103,14 @@ export class NativeInput {
         if (this.writing || this.composing || this.element.value !== this.context.value) {
             return;
         }
+
         const start = this.element.selectionStart;
         const end = this.element.selectionEnd;
+
         if (start === this.context.start && end === this.context.end) {
             return;
         }
+
         const from = this.context.from + modelOffset(this.context.source, start);
         const to = this.context.from + modelOffset(this.context.source, end);
         this.host.selectionChanged(this.element.selectionDirection === 'backward' ? { anchor: to, head: from } : { anchor: from, head: to });
@@ -107,26 +119,35 @@ export class NativeInput {
     onInput(): void {
         if (this.composing) {
             this.host.preview(this.composedText());
+
             return;
         }
+
         if (this.host.readOnly()) {
             this.sync();
+
             return;
         }
+
         const context = this.context;
         const change = findChange(context.value, this.element.value);
+
         if (change.from === change.to && !change.text) {
             return;
         }
+
         if (this.model.getSelections().length > 1) {
             this.host.replace(this.replacedText(context));
+
             return;
         }
+
         const edit = {
             from: context.from + modelOffset(context.source, change.from),
             to: context.from + modelOffset(context.source, change.to),
             text: this.normalizeNewlines(change.text)
         };
+
         const next = context.source.slice(0, edit.from - context.from) + edit.text + context.source.slice(edit.to - context.from);
         const start = context.from + modelOffset(next, this.element.selectionStart);
         const end = context.from + modelOffset(next, this.element.selectionEnd);
@@ -137,6 +158,7 @@ export class NativeInput {
         if (this.host.readOnly()) {
             return;
         }
+
         this.compositionContext = { ...this.context };
         this.composing = true;
     }
@@ -145,12 +167,14 @@ export class NativeInput {
         if (!this.composing) {
             return;
         }
+
         const text = this.composedText();
         const context = this.compositionContext!;
         const unchanged = this.element.value === context.value;
         this.composing = false;
         this.compositionContext = undefined;
         this.host.preview(undefined);
+
         if (data && !unchanged && !this.host.readOnly()) {
             if (DEAD_KEY_RESULT.test(text)) {
                 for (const character of text) {
@@ -160,6 +184,7 @@ export class NativeInput {
                 this.host.replace(text);
             }
         }
+
         this.sync();
     }
 
@@ -167,6 +192,7 @@ export class NativeInput {
     normalizeNewlines(text: string): string {
         const first = this.model.getLine(0);
         const newline = this.model.slice(first.end, first.next) === '\r\n' ? '\r\n' : '\n';
+
         return textareaText(text).replace(/\n/g, newline);
     }
 
@@ -177,6 +203,7 @@ export class NativeInput {
     /* What the textarea now holds where the selection of `context` was, the text after it kept. */
     private replacedText(context: InputContext): string {
         const suffix = context.value.length - context.end;
+
         return this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix));
     }
 }

package/src/offsets.ts

@@ -3,38 +3,48 @@ import type { DocumentChange } from '@adecore/editor-core';
 /* Where an offset is after a batch of changes. One inside a replaced range lands after the new text. */
 export function mapOffset(offset: number, changes: readonly DocumentChange[]): number {
     let delta = 0;
+
     for (const change of changes) {
         if (offset < change.from) {
             break;
         }
+
         if (offset < change.to || (offset === change.from && change.from === change.to)) {
             return change.from + delta + change.insertedLength;
         }
+
         delta += change.insertedLength - (change.to - change.from);
     }
+
     return offset + delta;
 }
 
 /* Build once per sorted, nonoverlapping batch when many offsets need to follow it. */
 export function offsetMapper(changes: readonly DocumentChange[]): (offset: number) => number {
     const deltas = new Float64Array(changes.length + 1);
+
     for (let index = 0; index < changes.length; index++) {
         const change = changes[index]!;
         deltas[index + 1] = deltas[index]! + change.insertedLength - (change.to - change.from);
     }
+
     return (offset) => {
         let low = 0,
             high = changes.length;
+
         while (low < high) {
             const middle = (low + high) >>> 1;
             const change = changes[middle]!;
+
             if (change.to < offset || (change.to === offset && change.from !== change.to)) {
                 low = middle + 1;
             } else {
                 high = middle;
             }
         }
+
         const change = changes[low];
+
         return change !== undefined && change.from <= offset ? change.from + deltas[low]! + change.insertedLength : offset + deltas[low]!;
     };
 }

package/src/outline.ts

@@ -27,10 +27,13 @@ export interface OutlineDocument {
 
 const MODIFIERS =
     '(?:export\\s+|default\\s+|declare\\s+|abstract\\s+|async\\s+|pub(?:\\([^)]*\\))?\\s+|public\\s+|private\\s+|protected\\s+|static\\s+|final\\s+|readonly\\s+|override\\s+|unsafe\\s+|extern\\s+)*';
+
 const DECLARATION = new RegExp(
     `^${MODIFIERS}(function\\*?|class|interface|enum|type|namespace|module|trait|impl|struct|fn|def|func|object|record)\\s+([A-Za-z_$][\\w$]*)`
 );
+
 const VARIABLE = new RegExp(`^${MODIFIERS}(?:const|let|var)\\s+([A-Za-z_$][\\w$]*)`);
+
 const KEYWORDS = new Set([
     'if',
     'for',
@@ -49,8 +52,10 @@ const KEYWORDS = new Set([
     'super',
     'finally'
 ]);
+
 const METHOD = /^(?:(?:public|private|protected|static|async|get|set|override|readonly|abstract)\s+)*\*?\s*([A-Za-z_$#][\w$]*)\s*[(<]/;
 const PROPERTY = /^["']?([\w$-]+)["']?\s*:\s*[{[(]?$/;
+
 const KINDS: Record<string, string> = {
     'function*': 'function',
     fn: 'function',
@@ -62,30 +67,39 @@ const KINDS: Record<string, string> = {
     trait: 'interface',
     impl: 'class'
 };
+
 const LABEL_LIMIT = 48;
 
 /* What a header line declares, when it declares something a person would look for by name. */
 export function describeHeader(text: string): { name?: string; kind?: string } {
     const line = text.trim();
     const declaration = DECLARATION.exec(line);
+
     if (declaration) {
         return { name: declaration[2]!, kind: KINDS[declaration[1]!] ?? declaration[1]! };
     }
+
     const variable = VARIABLE.exec(line);
+
     if (variable) {
         return { name: variable[1]!, kind: 'variable' };
     }
+
     const method = METHOD.exec(line);
+
     if (method && !KEYWORDS.has(method[1]!)) {
         return { name: method[1]!, kind: 'method' };
     }
+
     const property = PROPERTY.exec(line);
+
     return property ? { name: property[1]!, kind: 'property' } : {};
 }
 
 /* The header line as a label: what a breadcrumb shows for a block that declares nothing. */
 export function headerLabel(text: string): string {
     const label = text.trim().replace(/[\s{(:]+$/, '');
+
     return label.length > LABEL_LIMIT ? `${label.slice(0, LABEL_LIMIT - 1)}…` : label;
 }
 
@@ -101,27 +115,34 @@ export function structuralEntries(
     mate: (offset: number) => number | undefined
 ): OutlineEntry[] {
     const entries: OutlineEntry[] = [];
+
     for (const range of ranges) {
         if (range.kind === 'comment' || (range.kind === 'bracket' && slice(range.from, range.from + 1) !== '{')) {
             continue;
         }
+
         let headerLine = range.startLine;
         const header = document.getLine(headerLine);
         const lead = header.text.length - header.text.trimStart().length;
+
         if (/^[)\]]/.test(header.text.slice(lead))) {
             const opener = mate(header.start + lead);
+
             if (opener !== undefined && opener < header.start) {
                 headerLine = document.positionAt(opener).line;
             }
         }
+
         const start = document.getLine(headerLine);
         entries.push({ from: start.start, to: document.getLine(range.endLine).end, ...describeHeader(start.text) });
     }
+
     return entries;
 }
 
 function toBlock(entry: OutlineEntry, document: OutlineDocument): OutlineBlock {
     const startLine = document.positionAt(entry.from).line;
+
     return {
         startLine,
         endLine: Math.max(startLine, document.positionAt(entry.to).line),
@@ -149,15 +170,21 @@ export class Outline {
     /* Blocks the host drew from its own source, in one-based lines; null goes back to the structure. */
     setProvided(blocks: readonly EditorBlock[] | null, document: OutlineDocument): void {
         this.version++;
+
         if (blocks === null) {
             this.provided = null;
+
             return;
         }
+
         const last = document.getLineCount() - 1;
+
         const clamp = (line: number): number => Math.min(last, Math.max(0, Math.trunc(line) - 1));
+
         this.provided = blocks.map((block) => {
             const start = document.getLine(clamp(block.startLine));
             const header = block.name === undefined ? headerLabel(start.text) : block.name;
+
             return {
                 from: start.start,
                 to: document.getLine(Math.max(clamp(block.startLine), clamp(block.endLine))).end,
@@ -169,16 +196,20 @@ export class Outline {
 
     edited(batches: readonly (readonly DocumentChange[])[]): void {
         const mappers = batches.map(offsetMapper);
+
         const move = (entries: OutlineEntry[]): OutlineEntry[] =>
             entries.map((entry) => {
                 let from = entry.from;
                 let to = entry.to;
+
                 for (const map of mappers) {
                     from = map(from);
                     to = map(to);
                 }
+
                 return { ...entry, from, to };
             });
+
         this.structure = move(this.structure);
         this.provided = this.provided === null ? null : move(this.provided);
         this.version++;
@@ -190,8 +221,10 @@ export class Outline {
             const sorted = (this.provided ?? this.structure)
                 .map((entry) => toBlock(entry, document))
                 .sort((left, right) => left.startLine - right.startLine || right.endLine - left.endLine);
+
             this.cache = { version: this.version, blocks: sorted.filter((block, index) => index === 0 || block.startLine !== sorted[index - 1]!.startLine) };
         }
+
         return this.cache.blocks;
     }
 }
@@ -220,9 +253,11 @@ export interface StickyPlacement {
  */
 export function stickyPlacements(blocks: readonly OutlineBlock[], scrollTop: number, lineHeight: number, max: number, rows: StickyRows): StickyPlacement[] {
     const placements: StickyPlacement[] = [];
+
     for (let depth = 0; depth < max; depth++) {
         const pinnedAt = scrollTop + depth * lineHeight;
         const parent = placements.at(-1)?.block;
+
         const next = blocks.find(
             (block) =>
                 (parent === undefined || (block.startLine > parent.startLine && block.endLine <= parent.endLine)) &&
@@ -230,11 +265,14 @@ export function stickyPlacements(blocks: readonly OutlineBlock[], scrollTop: num
                 rows.top(block.startLine) < pinnedAt &&
                 rows.bottom(block.endLine) > pinnedAt
         );
+
         if (next === undefined) {
             break;
         }
+
         placements.push({ block: next, depth, offset: Math.min(0, rows.bottom(next.endLine) - (pinnedAt + lineHeight)) });
     }
+
     return placements;
 }
 

package/src/overview.ts

@@ -28,7 +28,9 @@ export function overviewTicks(spans: readonly OverviewSpan[], contentHeight: num
     if (trackHeight <= 0) {
         return [];
     }
+
     const scale = trackHeight / Math.max(contentHeight, trackHeight);
+
     const ticks = spans
         .map((span): OverviewTick => ({
             kind: span.kind,
@@ -38,18 +40,24 @@ export function overviewTicks(spans: readonly OverviewSpan[], contentHeight: num
             ...(span.title === undefined ? {} : { title: span.title })
         }))
         .sort((left, right) => left.y - right.y);
+
     const merged: OverviewTick[] = [];
     const last = new Map<OverviewKind, OverviewTick>();
+
     for (const tick of ticks) {
         const before = last.get(tick.kind);
+
         if (before && tick.y <= before.y + before.height) {
             before.height = Math.max(before.height, tick.y + tick.height - before.y);
+
             continue;
         }
+
         const next = { ...tick };
         last.set(tick.kind, next);
         merged.push(next);
     }
+
     return merged;
 }
 
@@ -58,7 +66,9 @@ const PAINT_ORDER: Partial<Record<OverviewKind, number>> = { warning: 1, error:
 
 export function paintOverview(container: HTMLElement, ticks: readonly OverviewTick[]): void {
     const document = container.ownerDocument;
+
     const order = (tick: OverviewTick): number => PAINT_ORDER[tick.kind] ?? 0;
+
     container.replaceChildren(
         ...[...ticks]
             .sort((left, right) => order(left) - order(right))
@@ -67,12 +77,15 @@ export function paintOverview(container: HTMLElement, ticks: readonly OverviewTi
                 element.className = `se-tick se-tick-${tick.kind}`;
                 element.style.top = `${tick.y}px`;
                 element.style.height = `${tick.height}px`;
+
                 if (tick.offset !== undefined) {
                     element.setAttribute('data-offset', String(tick.offset));
                 }
+
                 if (tick.title !== undefined) {
                     element.setAttribute('data-title', tick.title);
                 }
+
                 return element;
             })
     );