@adecore/editor-react 0.39.0 → 0.40.0

package/src/conflict-model.ts

@@ -31,6 +31,7 @@ export function planConflict(base: string, ours: string, theirs: string): Confli
     let oursAt = 0;
     let theirsAt = 0;
     let mergedAt = 0;
+
     for (const block of blocks) {
         if (block.kind === 'theirs') {
             merges.push({ from: oursAt, to: oursAt + block.ours.length, lines: block.theirs });
@@ -47,10 +48,13 @@ export function planConflict(base: string, ours: string, theirs: string): Confli
                     theirsEnd: theirsAt + block.theirs.length
                 });
             }
+
             mergedAt += block.ours.length;
         }
+
         oursAt += block.ours.length;
         theirsAt += block.theirs.length;
     }
+
     return { merges, conflicts };
 }

package/src/context-menu-rows.ts

@@ -36,5 +36,6 @@ export interface MenuGroups {
 /* The language rows of the context menu in their groups, each holding only the rows a server answers. */
 export function menuGroupsOf(supports: (method: string) => boolean): MenuGroups {
     const supported = (rows: readonly MenuRowSpec[]): MenuRowSpec[] => rows.filter((row) => supports(row.method));
+
     return { goTo: supported(GO_TO), references: supported(REFERENCES), changes: supported(CHANGES) };
 }

package/src/context-menu.ts

@@ -12,13 +12,16 @@ export class ContextMenuFeature {
 
     constructor(language: EditorLanguage) {
         this.language = language;
+
         const off = language.editor.onContextMenu((menu) => {
             // A right click outside the selection moves the caret first, so the menu is about what was clicked.
             if (!menu.inSelection) {
                 language.editor.setCaret(menu.position);
             }
+
             this.open(menu.x, menu.y);
         });
+
         language.onDispose(() => {
             off();
             this.close();
@@ -27,6 +30,7 @@ export class ContextMenuFeature {
 
     close(): void {
         this.request++;
+
         if (this.language.popups.getState().menu !== null) {
             this.language.popups.setState({ menu: null });
         }
@@ -37,6 +41,7 @@ export class ContextMenuFeature {
         const { editor } = this.language;
         editor.focus();
         const done = document.execCommand(action);
+
         if (!done && action === 'paste') {
             void navigator.clipboard
                 ?.readText()
@@ -52,8 +57,10 @@ export class ContextMenuFeature {
         const request = ++this.request;
         const { popups, codeActions } = this.language;
         popups.setState({ menu: { x, y, refactors: [] } });
+
         void codeActions.list(['refactor']).then((entries) => {
             const shown = popups.getState().menu;
+
             if (request === this.request && shown !== null && entries !== null) {
                 popups.setState({ menu: { ...shown, refactors: entries } });
             }

package/src/definition-link.ts

@@ -5,6 +5,33 @@ import { locationsOf } from './hover-content.ts';
 import { lineTextOf } from './line-text.ts';
 import { wordRangeAt } from './rename-model.ts';
 
+/* Reports the Mod key going down and up, from the window since the editor only says where the pointer is. */
+export function followModKey(apple: boolean, onHeld: (held: boolean) => void): () => void {
+    if (typeof window === 'undefined') {
+        return () => {};
+    }
+
+    const modKey = apple ? 'Meta' : 'Control';
+
+    const keys = (event: KeyboardEvent): void => {
+        if (event.key === modKey) {
+            onHeld(event.type === 'keydown');
+        }
+    };
+
+    const lost = (): void => onHeld(false);
+
+    window.addEventListener('keydown', keys);
+    window.addEventListener('keyup', keys);
+    window.addEventListener('blur', lost);
+
+    return () => {
+        window.removeEventListener('keydown', keys);
+        window.removeEventListener('keyup', keys);
+        window.removeEventListener('blur', lost);
+    };
+}
+
 /*
  * The name under the pointer drawn as a link while Cmd (Ctrl elsewhere) is held and a server knows where it
  * is defined, which is what a Mod+click on it follows. The editor only says where the pointer is, so the
@@ -22,35 +49,22 @@ export class DefinitionLinkFeature {
     constructor(language: EditorLanguage) {
         this.language = language;
         const { editor } = language;
+
         const offs = [
             editor.onHover((hover) => {
                 this.pointer = hover?.position ?? null;
                 this.update();
             }),
             editor.onTextChange(() => this.clear()),
-            editor.onViewChange(() => this.clear())
+            editor.onViewChange(() => this.clear()),
+            followModKey(language.apple, (held) => this.setModHeld(held))
         ];
-        if (typeof window !== 'undefined') {
-            const modKey = language.apple ? 'Meta' : 'Control';
-            const keys = (event: KeyboardEvent): void => {
-                if (event.key === modKey) {
-                    this.setModHeld(event.type === 'keydown');
-                }
-            };
-            const lost = (): void => this.setModHeld(false);
-            window.addEventListener('keydown', keys);
-            window.addEventListener('keyup', keys);
-            window.addEventListener('blur', lost);
-            offs.push(() => {
-                window.removeEventListener('keydown', keys);
-                window.removeEventListener('keyup', keys);
-                window.removeEventListener('blur', lost);
-            });
-        }
+
         language.onDispose(() => {
             for (const off of offs) {
                 off();
             }
+
             this.clear();
         });
     }
@@ -66,6 +80,7 @@ export class DefinitionLinkFeature {
         this.request++;
         this.lookup?.abort();
         this.shownKey = '';
+
         if (this.drawn) {
             this.drawn = false;
             this.language.editor.setLink(null);
@@ -74,26 +89,35 @@ export class DefinitionLinkFeature {
 
     private update(): void {
         const { pointer } = this;
+
         if (!this.held || pointer === null || !this.language.project.service.supports('textDocument/definition', this.language.uri)) {
             this.clear();
+
             return;
         }
+
         const { editor, project, uri } = this.language;
         const line = lineTextOf(editor, pointer.line);
         const word = isIdentifierCharacter(line[pointer.character] ?? '') ? wordRangeAt(line, pointer) : null;
+
         if (word === null) {
             this.clear();
+
             return;
         }
+
         const key = `${word.start.line}:${word.start.character}`;
+
         if (key === this.shownKey) {
             return;
         }
+
         this.clear();
         this.shownKey = key;
         const request = ++this.request;
         const controller = new AbortController();
         this.lookup = controller;
+
         project.service
             .definition(uri, pointer, { signal: controller.signal })
             .then((result) => {

package/src/diagnostics-model.ts

@@ -12,6 +12,7 @@ const SEVERITIES: Record<number, EditorMarkerSeverity> = { 1: 'error', 2: 'warni
 const HINT = 4;
 const UNNECESSARY = 1;
 const DEPRECATED = 2;
+
 /* The scroll track's tip is a line or two, so a long message is cut where it stops being a tip. */
 const TICK_MESSAGE_LENGTH = 300;
 
@@ -30,9 +31,9 @@ export function markerOf(diagnostic: Diagnostic): EditorMarker {
     };
 }
 
-/* A diagnostic that names no severity counts as an error. */
 export function problemCountsOf(diagnostics: readonly Diagnostic[]): ProblemCounts {
     const count = (severity: number): number => diagnostics.filter((diagnostic) => (diagnostic.severity ?? 1) === severity).length;
+
     return { error: count(1), warning: count(2), info: count(3) };
 }
 
@@ -40,9 +41,14 @@ export function comparePositions(left: EditorPosition, right: EditorPosition): n
     return left.line === right.line ? left.character - right.character : left.line - right.line;
 }
 
+export function sameRange(left: EditorRange, right: EditorRange): boolean {
+    return comparePositions(left.start, right.start) === 0 && comparePositions(left.end, right.end) === 0;
+}
+
 /* Where an insertion of `text` at `start` ends, counting a line break of any kind once. */
 export function endOfInsertion(start: EditorPosition, text: string): EditorPosition {
     const lines = text.split(/\r\n|\r|\n/);
+
     return lines.length === 1
         ? { line: start.line, character: start.character + text.length }
         : { line: start.line + lines.length - 1, character: lines[lines.length - 1]!.length };
@@ -51,13 +57,17 @@ export function endOfInsertion(start: EditorPosition, text: string): EditorPosit
 /* Where a position is once one change is applied to the text it was in. One inside the replaced range lands after the new text. */
 export function shiftPosition(position: EditorPosition, change: EditorContentChange): EditorPosition {
     const { start, end } = change.range;
+
     if (comparePositions(position, start) < 0) {
         return position;
     }
+
     const inserted = endOfInsertion(start, change.text);
+
     if (comparePositions(position, end) < 0) {
         return inserted;
     }
+
     return position.line === end.line
         ? { line: inserted.line, character: inserted.character + (position.character - end.character) }
         : { line: position.line + (inserted.line - end.line), character: position.character };
@@ -66,10 +76,12 @@ export function shiftPosition(position: EditorPosition, change: EditorContentCha
 export function shiftRange(range: EditorRange, changes: readonly EditorContentChange[]): EditorRange {
     let start = range.start;
     let end = range.end;
+
     for (const change of changes) {
         start = shiftPosition(start, change);
         end = shiftPosition(end, change);
     }
+
     return { start, end };
 }
 
@@ -81,6 +93,7 @@ export function rangeHolds(range: EditorRange, position: EditorPosition): boolea
 /* The problems under a position, worst first. A hint is not a problem, so it is left to the colors and the faded text. */
 export function problemsAt(problems: readonly Problem[], position: EditorPosition): Problem[] {
     const rank = (problem: Problem): number => problem.diagnostic.severity ?? 1;
+
     return problems
         .filter((problem) => (problem.diagnostic.severity ?? 1) < HINT && rangeHolds(problem.diagnostic.range, position))
         .sort((left, right) => rank(left) - rank(right));
@@ -91,20 +104,25 @@ export function neighborProblem(problems: readonly Problem[], from: EditorPositi
     const candidates = problems
         .filter((problem) => (problem.diagnostic.severity ?? 1) < HINT)
         .sort((left, right) => comparePositions(left.diagnostic.range.start, right.diagnostic.range.start));
+
     if (candidates.length === 0) {
         return null;
     }
+
     if (direction === 1) {
         return candidates.find((problem) => comparePositions(problem.diagnostic.range.start, from) > 0) ?? candidates[0]!;
     }
+
     return [...candidates].reverse().find((problem) => comparePositions(problem.diagnostic.range.start, from) < 0) ?? candidates[candidates.length - 1]!;
 }
 
 /* `ts(2551)`, or the code alone, or the source alone, whichever the server gave. */
 export function codeLabelOf(diagnostic: Diagnostic): string {
     const code = diagnostic.code === undefined ? '' : String(diagnostic.code);
+
     if (diagnostic.source !== undefined && code !== '') {
         return `${diagnostic.source}(${code})`;
     }
+
     return code !== '' ? code : (diagnostic.source ?? '');
 }

package/src/diagnostics.ts

@@ -2,9 +2,18 @@ import type { Diagnostic } from '@adecore/lsp';
 import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorContentChange, EditorPosition, EditorReveal } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
-import { sameRange } from './hover-content.ts';
 import { isShortcut } from './shortcut-keys.ts';
-import { comparePositions, markerOf, neighborProblem, problemCountsOf, problemsAt, severityOf, shiftRange, type Problem } from './diagnostics-model.ts';
+import {
+    comparePositions,
+    markerOf,
+    neighborProblem,
+    problemCountsOf,
+    problemsAt,
+    sameRange,
+    severityOf,
+    shiftRange,
+    type Problem
+} from './diagnostics-model.ts';
 
 export interface ProblemCounts {
     readonly error: number;
@@ -26,22 +35,29 @@ export class DiagnosticsFeature {
     constructor(language: EditorLanguage) {
         this.language = language;
         const { editor, project, uri } = language;
+
         const reports = project.service.onDiagnostics((report) => {
             if (report.uri === uri) {
                 this.reports.set(report.source, report.diagnostics);
                 this.rebuild();
             }
         });
+
         const edits = editor.onTextChange((change) => this.shift(change.changes));
+
         // These keys are the editor's while it has the keyboard; elsewhere the menu's commands answer.
         const keys = language.onKey((event) => {
             const next = isShortcut(this.language.shortcuts.nextProblem, event);
+
             if (!next && !isShortcut(this.language.shortcuts.previousProblem, event)) {
                 return false;
             }
+
             this.step(next ? 1 : -1);
+
             return true;
         }, KEY_PRIORITY.diagnostics);
+
         language.onDispose(() => {
             keys();
             reports.dispose();
@@ -67,26 +83,33 @@ export class DiagnosticsFeature {
     step(direction: 1 | -1): boolean {
         const caret = this.language.editor.getCaret();
         const target = neighborProblem(this.list, caret, direction);
+
         if (target === null) {
             return false;
         }
+
         const { start } = target.diagnostic.range;
         this.reveal(target, comparePositions(start, caret) > 0 ? 'centerDown' : 'centerUp');
+
         return true;
     }
 
     /* Puts the caret on the first problem of the file. */
     goToFirst(): boolean {
         const target = neighborProblem(this.list, { line: -1, character: 0 }, 1);
+
         if (target === null) {
             return false;
         }
+
         this.reveal(target, 'center');
+
         return true;
     }
 
     onChange(listener: () => void): () => void {
         this.listeners.add(listener);
+
         return () => {
             this.listeners.delete(listener);
         };
@@ -104,20 +127,25 @@ export class DiagnosticsFeature {
     /* The problems follow the edit as the markers do. Their number does not change, so nobody is told. */
     private shift(changes: readonly EditorContentChange[]): void {
         let moved = false;
+
         for (const [server, diagnostics] of this.reports) {
             let shifted: Diagnostic[] | null = null;
+
             for (const [index, diagnostic] of diagnostics.entries()) {
                 const range = shiftRange(diagnostic.range, changes);
+
                 if (!sameRange(range, diagnostic.range)) {
                     shifted ??= [...diagnostics];
                     shifted[index] = { ...diagnostic, range };
                 }
             }
+
             if (shifted !== null) {
                 this.reports.set(server, shifted);
                 moved = true;
             }
         }
+
         if (moved) {
             this.collect();
         }
@@ -126,6 +154,7 @@ export class DiagnosticsFeature {
     private rebuild(): void {
         this.collect();
         this.language.editor.setMarkers(this.list.map((problem) => markerOf(problem.diagnostic)));
+
         for (const listener of [...this.listeners]) {
             listener();
         }

package/src/diff-expansion.ts

@@ -11,39 +11,48 @@ export const DEFAULT_UNFOLD_LIMITS: DiffLimits = { rows: 20000, characters: 2000
 export function fitsDiff(document: DiffDocument, unfolded: ReadonlyMap<number, number>, limits: DiffLimits, maxRows = limits.rows): boolean {
     let rows = 0;
     let characters = 0;
+
     for (const row of diffRows(document, 'unified', unfolded)) {
         if (row.kind === 'gap') {
             continue;
         }
+
         const text = row.new === undefined ? document.sides.old[row.old!.index]! : document.sides.new[row.new.index]!;
         characters += text.length + (rows > 0 ? 1 : 0);
+
         if (++rows > maxRows || characters > limits.characters || text.length > limits.lineLength) {
             return false;
         }
     }
+
     return true;
 }
 
 export function expandDiff(document: DiffDocument, unfolded: ReadonlyMap<number, number>, id: number, limits: DiffLimits): ReadonlyMap<number, number> {
     const rows = diffRows(document, 'unified', unfolded);
     const gap = rows.find((row) => row.kind === 'gap' && row.id === id);
+
     if (gap?.kind !== 'gap' || !gap.unfoldable) {
         return unfolded;
     }
+
     const visible = rows.filter((row) => row.kind === 'line').length;
     const maxRows = Math.min(limits.rows, visible + 500);
     const previous = unfolded.get(id) ?? 0;
     let low = 0;
     let high = Math.min(500, gap.oldCount);
+
     // Between-hunk gaps reveal from both ends; search the per-end count within the shared row budget.
     while (low < high) {
         const count = Math.ceil((low + high) / 2);
         const candidate = new Map(unfolded).set(id, previous + count);
+
         if (fitsDiff(document, candidate, limits, maxRows)) {
             low = count;
         } else {
             high = count - 1;
         }
     }
+
     return low === 0 ? unfolded : new Map(unfolded).set(id, previous + low);
 }

package/src/diff-overlays.tsx

@@ -26,18 +26,24 @@ export function DiffOverlays({
     blocked?: ReadonlySet<number>;
 }) {
     const { t } = useTranslation('editor');
+
     const getRows = () => mounted.rows.getContainers();
     const getActions = () => mounted.actions.getContainers();
+
     const rows = useSyncExternalStore((listener) => mounted.rows.subscribe(listener), getRows, getRows);
     const actions = useSyncExternalStore((listener) => mounted.actions.subscribe(listener), getActions, getActions);
+
     return (
         <>
             {display.gaps.map(({ row }) => {
                 const container = rows.get(`gap-${row.id}`);
+
                 if (container === undefined) {
                     return null;
                 }
+
                 const text = t('diff.hidden', { count: formatNumber(Math.max(row.oldCount, row.newCount)) });
+
                 return createPortal(
                     <div className="adecore-editor-diff-gap">
                         {row.unfoldable && blocked?.has(row.id) === true ? (
@@ -65,7 +71,9 @@ export function DiffOverlays({
                 if (row.noNewline === undefined) {
                     return null;
                 }
+
                 const container = actions.get(`no-newline-${index}`);
+
                 return container === undefined
                     ? null
                     : createPortal(<span className="adecore-editor-diff-no-newline">{t('diff.noNewline')}</span>, container, `no-newline-${index}`);

package/src/diff-syntax.ts

@@ -15,49 +15,103 @@ export interface DiffSyntaxSources {
     locate(side: DiffSourceSide, index: number): { readonly block: number; readonly line: number } | undefined;
 }
 
+/* Calls `refresh` once per frame while tokens arrive, or in a microtask where the window draws no frames. */
+export function repaintOnTokens(ownerWindow: Window | null | undefined, tokens: DiffSourceTokens | undefined, refresh: () => void): () => void {
+    let pending = false;
+    let stopped = false;
+    let frame: number | undefined;
+
+    const schedule = (): void => {
+        if (pending) {
+            return;
+        }
+
+        pending = true;
+
+        const paint = (): void => {
+            pending = false;
+
+            if (!stopped) {
+                refresh();
+            }
+        };
+
+        if (ownerWindow?.requestAnimationFrame !== undefined) {
+            frame = ownerWindow.requestAnimationFrame(paint);
+        } else {
+            queueMicrotask(paint);
+        }
+    };
+
+    const stop = tokens?.subscribe(schedule);
+
+    return () => {
+        stopped = true;
+        stop?.();
+
+        if (frame !== undefined) {
+            ownerWindow?.cancelAnimationFrame?.(frame);
+        }
+    };
+}
+
 function canTokenize(source: readonly string[]): boolean {
     if (source.length > 20000) {
         return false;
     }
+
     let characters = Math.max(0, source.length - 1);
+
     for (const line of source) {
         characters += line.length;
+
         if (line.length > 10000 || characters > 2000000) {
             return false;
         }
     }
+
     return true;
 }
 
 export function diffSyntaxDocument(document: DiffDocument, language: string, theme: string): DiffSyntaxSources {
     const locations: Record<DiffSourceSide, Array<{ block: number; line: number }>> = { old: [], new: [] };
+
     const build = (side: DiffSourceSide): DiffSyntaxDocument => {
         const source = document.sides[side];
+
         // Skipping a long hidden line loses grammar state; keep the entire side plain instead.
         if (!canTokenize(source)) {
             return { language, theme, blocks: [], resets: [] };
         }
+
         const blocks: string[] = [];
         const resets: number[] = [];
+
         const ranges = document.snapshots
             ? [{ from: 0, to: source.length }]
             : document.offsets.map((offset, index) => ({ from: offset[side], to: document.offsets[index + 1]?.[side] ?? source.length }));
+
         for (const range of ranges) {
             if (!document.snapshots && range.from < range.to) {
                 resets.push(blocks.length);
             }
+
             for (let from = range.from; from < range.to; from += 200) {
                 const to = Math.min(from + 200, range.to);
                 const block = blocks.length;
                 blocks.push(source.slice(from, to).join('\n'));
+
                 for (let index = from; index < to; index++) {
                     locations[side][index] = { block, line: index - from };
                 }
             }
         }
+
         return { language, theme, blocks, resets };
     };
+
     const documents = { old: build('old'), new: build('new') };
+
     return {
         documents,
         locate(side, index) {

package/src/diff-wordmarks.ts

@@ -7,25 +7,33 @@ export function wordMarks(document: DiffDocument): {
     const marks = { old: new Map<number, readonly (readonly [number, number])[]>(), new: new Map<number, readonly (readonly [number, number])[]>() };
     let pairs = 0;
     let characters = 0;
+
     for (const row of diffRows(document, 'split')) {
         if (row.kind !== 'line' || row.change !== 'pair' || document.hunks[row.hunk!]!.coarse) {
             continue;
         }
+
         const old = document.sides.old[row.old!.index]!;
         const fresh = document.sides.new[row.new!.index]!;
         characters += old.length + fresh.length;
+
         // Per-pair limits alone still allow thousands of expensive word diffs during one mount.
         if (++pairs > 1000 || characters > 100000) {
             break;
         }
+
         const words = wordChanges(old, fresh);
+
         if (words === null) {
             continue;
         }
+
         const ranges = (text: string, ranges: readonly DiffWordRange[]): Array<readonly [number, number]> =>
             ranges.filter((range) => !document.ignoreWhitespace || /\S/.test(text.slice(range.from, range.to))).map((range) => [range.from, range.to]);
+
         marks.old.set(row.old!.index, ranges(old, words.old));
         marks.new.set(row.new!.index, ranges(fresh, words.new));
     }
+
     return marks;
 }