@adecore/editor-react 0.22.1 → 0.23.1

package/src/completion.ts

@@ -1,9 +1,13 @@
-import { StaleResultError, type CompletionContext, type CompletionItem } from '@adecore/lsp';
+import { SnippetTransformQueueError } from './snippet-transform-queue.ts';
+import { SnippetTransformError } from './snippet-transform-client.ts';
+import { MAX_TRANSFORM_JOBS, MAX_TRANSFORM_WORK, type SnippetTransformJob } from './snippet-transform-protocol.ts';
+import { fileUriToPath, StaleResultError, type CompletionContext, type CompletionItem } from '@adecore/lsp';
 import type { EditorContentChange, EditorPosition, EditorRange, EditorTextChange } from '@adecore/editor';
 import { comparePositions, shiftPosition } from './diagnostics-model.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import {
     completionDocsOf,
+    editRangeOf,
     identifierPrefix,
     insertionOf,
     isIdentifierCharacter,
@@ -18,6 +22,9 @@ import {
     type Ranked
 } from './completion-model.ts';
 import { PARAMETER_HINTS_COMMAND, isCallItem, planCall, withParentheses, type CallPlan } from './completion-call.ts';
+import { compileSnippet } from './snippet.ts';
+import { createSnippetResolver } from './snippet-variables.ts';
+import { wordRangeAt } from './rename-model.ts';
 import { RecentChoices, recentChoicesOf } from './recent-choices.ts';
 import { shikiLanguageOf } from './language-ids.ts';
 import { textBeforeOf } from './line-text.ts';
@@ -34,6 +41,45 @@ const RESOLVE_DELAY_MS = 120;
 const PAGE = 8;
 const LINES_BACK = 60;
 const TOAST_ID = 'language-completion';
+const MAX_COMPLETION_CHARACTERS = 2_000_000;
+const MAX_COMPLETION_RANGES = 1_000;
+
+class CompletionLimitError extends Error {}
+
+function mapCompletionEdits(
+    item: CompletionItem,
+    changes: readonly EditorContentChange[],
+    mapRange: (range: EditorRange) => EditorRange
+): CompletionItem | null {
+    // Changes apply one after another, so each is checked against the range as the earlier ones left it.
+    const overlapsChange = (range: EditorRange): boolean => {
+        let { start, end } = range;
+        for (const change of changes) {
+            if (comparePositions(start, change.range.end) < 0 && comparePositions(change.range.start, end) < 0) {
+                return true;
+            }
+            start = shiftPosition(start, change);
+            end = shiftPosition(end, change);
+        }
+        return false;
+    };
+    let valid = true;
+    const map = (range: EditorRange): EditorRange => {
+        valid &&= !overlapsChange(range);
+        return mapRange(range);
+    };
+    const edit = item.textEdit;
+    const mapped = {
+        ...item,
+        ...(edit === undefined
+            ? {}
+            : { textEdit: 'range' in edit ? { ...edit, range: map(edit.range) } : { ...edit, insert: map(edit.insert), replace: map(edit.replace) } }),
+        ...(item.additionalTextEdits === undefined
+            ? {}
+            : { additionalTextEdits: item.additionalTextEdits.map((edit) => ({ ...edit, range: map(edit.range) })) })
+    };
+    return valid ? mapped : null;
+}
 
 /*
  * The suggestions that open while a word is typed. A single typed identifier character or a trigger
@@ -60,6 +106,9 @@ export class CompletionFeature {
     private requestTimer: unknown;
     private refreshTimer: unknown;
     private resolveTimer: unknown;
+    private textRevision = 0;
+    private acceptSequence = 0;
+    private disposed = false;
     private readonly resolved = new Map<CompletionItem, CompletionItem>();
 
     constructor(language: EditorLanguage, timers: Timers = realTimers) {
@@ -70,9 +119,13 @@ export class CompletionFeature {
             editor.onKeyDown((event) => this.key(event)),
             editor.onTextChange((change) => this.edited(change)),
             editor.onCaret((position) => this.caretMoved(position)),
-            editor.onBlur(() => this.close())
+            editor.onBlur(() => {
+                this.acceptSequence++;
+                this.close();
+            })
         ];
         language.onDispose(() => {
+            this.disposed = true;
             for (const off of offs) {
                 off();
             }
@@ -86,6 +139,7 @@ export class CompletionFeature {
 
     /* Asks for suggestions at the caret now, as Ctrl+Space does. */
     invoke(): void {
+        this.language.pick.close();
         this.explicit = true;
         this.beginRequest({ triggerKind: 1 }, 0);
     }
@@ -108,7 +162,38 @@ export class CompletionFeature {
         if (entry === undefined) {
             return;
         }
-        const { editor, project, uri } = this.language;
+        const { editor, project, uri, snippets } = this.language;
+        const acceptSequence = ++this.acceptSequence;
+        const snippetToken = snippets.token;
+        const inSnippet = snippets.isActive;
+        const exitChanges: { changes: readonly EditorContentChange[]; map: (range: EditorRange) => EditorRange }[] = [];
+        if (snippets.hasPendingTransforms) {
+            this.close();
+            if (
+                !(await snippets.settleTransforms(
+                    () => !this.disposed && acceptSequence === this.acceptSequence && snippets.token === snippetToken,
+                    (changes, map) => exitChanges.push({ changes, map })
+                ))
+            ) {
+                return;
+            }
+        }
+        const acceptedSelections = editor.getSelections();
+        const revision = this.textRevision;
+        const current = (): boolean => {
+            if (this.disposed || acceptSequence !== this.acceptSequence || revision !== this.textRevision || (inSnippet && snippets.token !== snippetToken)) {
+                return false;
+            }
+            const selections = editor.getSelections();
+            return (
+                selections.length === acceptedSelections.length &&
+                selections.every(
+                    (range, index) =>
+                        comparePositions(range.start, acceptedSelections[index]!.start) === 0 &&
+                        comparePositions(range.end, acceptedSelections[index]!.end) === 0
+                )
+            );
+        };
         recentChoicesOf(this.language.languageId).record(entry.item);
         let item = this.resolved.get(entry.item) ?? entry.item;
         const needsResolve = !this.resolved.has(entry.item) && project.service.providerOptions('completionItem/resolve', uri) !== undefined;
@@ -117,44 +202,214 @@ export class CompletionFeature {
             // Resolving can add the import an item needs; an item that cannot be resolved is still inserted as it is.
             item = await this.resolveNow(entry.item);
         }
+        if (!current()) {
+            return;
+        }
+        for (const { changes, map } of exitChanges) {
+            const mapped = mapCompletionEdits(item, changes, map);
+            if (mapped === null) {
+                return;
+            }
+            item = mapped;
+        }
         const caret = editor.getCaret();
         const lineBefore = textBeforeOf(editor, caret);
         const lineAfter = editor.textInRange({ start: caret, end: { line: caret.line, character: Number.MAX_SAFE_INTEGER } });
-        // A character that commits is typed after the name, so a call is not added before it.
-        const planned = insertionOf(item, caret, lineBefore, replace, commit === undefined ? lineAfter : '(');
-        const { before, rest } = this.surroundings(planned, caret, lineAfter);
-        const plan: CallPlan =
-            commit === undefined ? planCall({ item, languageId: this.language.languageId, insertion: planned, before, rest, replace }) : { action: 'none' };
-        const main = plan.action === 'add' ? withParentheses(planned, plan.inside) : planned;
-        const extras = (item.additionalTextEdits ?? []).map((edit): EditorContentChange => ({ range: edit.range, text: edit.newText }));
-        // An import above the insertion moves it, and the tab stops are measured from where it ends up.
-        const start = extras
-            .filter((extra) => comparePositions(extra.range.end, main.range.start) <= 0)
-            .sort((left, right) => comparePositions(right.range.start, left.range.start))
-            .reduce((place, extra) => shiftPosition(place, extra), main.range.start);
-        // A name typed at several carets is completed at all of them, and the other carets end behind what was put in.
         const carets = editor.getSelections();
-        const mirrored = mirroredInsertions(carets, editor.getSelection(), caret, (range) => editor.textInRange(range), main);
-        editor.applyEdits([{ range: main.range, text: main.text }, ...mirrored, ...extras]);
-        const landed = editor.getSelections();
-        if (commit === undefined) {
-            this.language.snippets.begin(start, main.text, main.stops);
-            if (plan.action === 'add' && plan.inside && mirrored.length > 0) {
-                this.placeMirroredCarets(carets, mirrored, landed);
+        const source = item.textEdit?.newText ?? item.insertText ?? item.label;
+        if (source.length * carets.length > MAX_COMPLETION_CHARACTERS) {
+            this.refuseLargeCompletion();
+            return;
+        }
+        let characters = 0;
+        let ranges = 0;
+        const now = new Date();
+        const template = item.insertTextFormat === 2 ? compileSnippet(item.textEdit?.newText ?? item.insertText ?? item.label) : undefined;
+        const finishes = new Map<Insertion, (values: readonly string[]) => Insertion>();
+        const renderAt = (position: EditorPosition, selection: EditorRange): Insertion => {
+            const line = editor.textInRange({ start: { line: position.line, character: 0 }, end: { line: position.line, character: Number.MAX_SAFE_INTEGER } });
+            const word = wordRangeAt(line, position);
+            const resolver = createSnippetResolver(
+                {
+                    uri,
+                    languageId: this.language.languageId,
+                    position,
+                    selection,
+                    selectedText: editor.textInRange(selection),
+                    currentLine: line,
+                    currentWord: word === null ? '' : editor.textInRange(word),
+                    cursorIndex: Math.max(
+                        0,
+                        carets.findIndex((range) => comparePositions(range.start, selection.start) === 0 && comparePositions(range.end, selection.end) === 0)
+                    ),
+                    cursorCount: carets.length,
+                    folder: project.host.folder,
+                    path: fileUriToPath(uri) ?? project.host.pathOfUri?.(uri) ?? undefined
+                },
+                project.host.resolveSnippetVariable?.bind(project.host),
+                { now }
+            );
+            const atItem =
+                position === caret || item.textEdit === undefined
+                    ? item
+                    : { ...item, textEdit: undefined, insertText: item.textEdit?.newText ?? item.insertText };
+            const editStart = editRangeOf(atItem, replace)?.start;
+            // A commit character follows the name, so accepting must not also add a call.
+            const finish = (variableTransforms?: readonly string[]): Insertion => {
+                const insertion = insertionOf(
+                    atItem,
+                    position,
+                    line.slice(0, position.character),
+                    replace,
+                    commit === undefined ? line.slice(position.character) : '(',
+                    {
+                        template,
+                        variableTransforms,
+                        resolve: resolver,
+                        indentationBefore:
+                            editStart === undefined ? undefined : editor.textInRange({ start: { line: editStart.line, character: 0 }, end: editStart })
+                    }
+                );
+                return commit === undefined ? insertion : { ...insertion, text: insertion.text + commit };
+            };
+            const rendered = finish();
+            finishes.set(rendered, finish);
+            characters += rendered.text.length;
+            ranges +=
+                (rendered.variableTransforms?.length ?? 0) +
+                (rendered.fields?.reduce((count, field) => count + field.ranges.length + (field.linked?.length ?? 0), 1) ?? rendered.stops.length);
+            if (rendered.limited || characters > MAX_COMPLETION_CHARACTERS || ranges > MAX_COMPLETION_RANGES) {
+                throw new CompletionLimitError();
+            }
+            return rendered;
+        };
+        try {
+            const planned = renderAt(caret, editor.getSelection());
+            const { before, rest } = this.surroundings(planned, caret, lineAfter);
+            const plan: CallPlan =
+                commit === undefined ? planCall({ item, languageId: this.language.languageId, insertion: planned, before, rest, replace }) : { action: 'none' };
+            let main = plan.action === 'add' ? withParentheses(planned, plan.inside) : planned;
+            const extras = (item.additionalTextEdits ?? []).map((edit): EditorContentChange => ({ range: edit.range, text: edit.newText }));
+            const instances = new Map<EditorContentChange, Insertion>();
+            const continuing = inSnippet && snippets.isActive && snippetToken === snippets.token;
+            const mirrored = mirroredInsertions(carets, editor.getSelection(), caret, (range) => editor.textInRange(range), main, continuing).map(
+                (insertion) => {
+                    const selection = carets.find(
+                        (range) =>
+                            range.start.line === insertion.range.start.line &&
+                            range.start.character >= insertion.range.start.character &&
+                            range.start.character <= insertion.range.end.character
+                    )!;
+                    const position = selection[continuing ? 'end' : 'start'];
+                    const own = renderAt(position, selection);
+                    const rendered = plan.action === 'add' ? withParentheses(own, plan.inside) : own;
+                    const edit = { ...insertion, text: rendered.text };
+                    const instance = { ...rendered, range: insertion.range };
+                    instances.set(edit, instance);
+                    const finish = finishes.get(own);
+                    if (finish !== undefined) {
+                        finishes.set(instance, (values) => ({ ...finish(values), range: insertion.range }));
+                    }
+                    return edit;
+                }
+            );
+            const drafts = [...mirrored.map((edit) => instances.get(edit)!), main];
+            const jobs: SnippetTransformJob[] = [];
+            const keys = new Map<string, number>();
+            const slots = drafts.map((draft) =>
+                (draft.variableTransforms ?? []).map((job) => {
+                    const key = JSON.stringify(job);
+                    let slot = keys.get(key);
+                    if (slot === undefined) {
+                        slot = jobs.length;
+                        keys.set(key, slot);
+                        jobs.push(job);
+                    }
+                    return slot;
+                })
+            );
+            if (jobs.length > MAX_TRANSFORM_JOBS || jobs.reduce((sum, job) => sum + job.value.length, 0) > MAX_TRANSFORM_WORK) {
+                throw new CompletionLimitError();
+            }
+            if (jobs.length > 0 && project.host.snippetTransformWorker !== undefined) {
+                const values = await snippets.transformVariables(jobs, current);
+                if (!current()) {
+                    return;
+                }
+                if (values !== null) {
+                    const transformed = drafts.map((draft, index) =>
+                        slots[index]!.length === 0 ? draft : finishes.get(draft)!(slots[index]!.map((slot) => values[slot]!))
+                    );
+                    if (
+                        transformed.some((draft) => draft.limited) ||
+                        transformed.reduce((sum, draft) => sum + draft.text.length, 0) > MAX_COMPLETION_CHARACTERS
+                    ) {
+                        throw new CompletionLimitError();
+                    }
+                    main = transformed.at(-1)!;
+                    mirrored.forEach((edit, index) => {
+                        edit.text = transformed[index]!.text;
+                        instances.set(edit, transformed[index]!);
+                    });
+                }
             }
-            if (plan.action === 'enter') {
-                const end = editor.getCaret();
-                editor.setCaret({ line: end.line, character: end.character + plan.shift });
+            const primary = { range: main.range, text: main.text };
+            const changes = [primary, ...mirrored, ...extras];
+            if (changes.reduce((total, edit) => total + edit.text.length, 0) > MAX_COMPLETION_CHARACTERS) {
+                throw new CompletionLimitError();
             }
-        } else {
-            const end = editor.getCaret();
-            editor.applyEdits([{ range: { start: end, end }, text: commit }]);
-            if (this.triggerCharacters().includes(commit)) {
-                this.beginRequest({ triggerKind: 2, triggerCharacter: commit }, 0);
+            // Imports and earlier carets move each insertion independently; the primary instance stays last.
+            const starts = [...mirrored, primary].map((insertion) =>
+                changes
+                    .filter((change) => change !== insertion && comparePositions(change.range.end, insertion.range.start) <= 0)
+                    .sort((left, right) => comparePositions(right.range.start, left.range.start))
+                    .reduce((place, change) => shiftPosition(place, change), insertion.range.start)
+            );
+            const applied = inSnippet ? snippets.applyEdits(changes, snippetToken, extras) : editor.applyEdits(changes);
+            if (!applied) {
+                return;
+            }
+            const landed = editor.getSelections();
+            if (commit === undefined) {
+                this.language.snippets.beginInstances(
+                    [...mirrored, primary].map((insertion, index) => {
+                        const rendered = insertion === primary ? main : instances.get(insertion)!;
+                        return { start: starts[index]!, text: rendered.text, stops: rendered.stops, fields: rendered.fields };
+                    }),
+                    { nested: continuing && snippets.isActive }
+                );
+                if (plan.action === 'add' && plan.inside && mirrored.length > 0 && main.fields === undefined) {
+                    this.placeMirroredCarets(carets, mirrored, landed);
+                }
+                if (plan.action === 'enter') {
+                    const end = editor.getCaret();
+                    editor.setCaret({ line: end.line, character: end.character + plan.shift });
+                }
+            } else {
+                if (this.triggerCharacters().includes(commit)) {
+                    this.beginRequest({ triggerKind: 2, triggerCharacter: commit }, 0);
+                }
+            }
+            this.afterInsert(item, commit, lineBefore);
+            editor.focus();
+        } catch (error) {
+            if (!current()) {
+                return;
+            }
+            if (error instanceof SnippetTransformQueueError) {
+                project.host.notify?.({ id: TOAST_ID, kind: 'error', title: project.i18n.t('editor:language.completion.transformBusy') });
+            } else if (error instanceof CompletionLimitError || (error instanceof SnippetTransformError && error.kind === 'range')) {
+                this.refuseLargeCompletion();
+            } else if (error instanceof SnippetTransformError) {
+                project.host.notify?.({ id: TOAST_ID, kind: 'error', title: project.i18n.t('editor:language.completion.transformFailed') });
+            } else {
+                throw error;
             }
         }
-        this.afterInsert(item, commit, lineBefore);
-        editor.focus();
+    }
+
+    private refuseLargeCompletion(): void {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title: this.language.project.i18n.t('editor:language.completion.tooLarge') });
     }
 
     /* The carets that got the same `()` go inside it like the primary one, which the snippet already placed. */
@@ -212,7 +467,7 @@ export class CompletionFeature {
     private async resolveNow(item: CompletionItem): Promise<CompletionItem> {
         const { editor, project, uri } = this.language;
         try {
-            return await project.service.resolveCompletion(uri, item);
+            return { ...item, ...(await project.service.resolveCompletion(uri, item)) };
         } catch (error) {
             if (!(error instanceof StaleResultError)) {
                 return item;
@@ -222,7 +477,7 @@ export class CompletionFeature {
             const fresh = itemsOf(await project.service.completion(uri, editor.getCaret(), { triggerKind: 1 })).items.find(
                 (candidate) => candidate.label === item.label && candidate.kind === item.kind
             );
-            return fresh === undefined ? item : await project.service.resolveCompletion(uri, fresh).catch(() => fresh);
+            return fresh === undefined ? item : { ...fresh, ...(await project.service.resolveCompletion(uri, fresh).catch(() => fresh)) };
         } catch {
             return item;
         }
@@ -300,6 +555,7 @@ export class CompletionFeature {
     }
 
     private edited(change: EditorTextChange): void {
+        this.textRevision++;
         if (change.source !== 'input' || change.changes.length !== 1) {
             this.close();
             return;
@@ -372,16 +628,20 @@ export class CompletionFeature {
         this.controller?.abort();
         const controller = new AbortController();
         this.controller = controller;
-        let result;
+        let normalized: ReturnType<typeof itemsOf>;
         try {
-            result = await project.service.completion(uri, position, context, { signal: controller.signal });
+            const result = await project.service.completion(uri, position, context, { signal: controller.signal });
+            if (request !== this.request || this.controller !== controller || controller.signal.aborted) {
+                return;
+            }
+            normalized = itemsOf(result);
         } catch {
+            if (request === this.request && this.controller === controller && !controller.signal.aborted) {
+                this.close();
+            }
             return;
         }
-        if (request !== this.request) {
-            return;
-        }
-        const { items, incomplete } = itemsOf(result);
+        const { items, incomplete } = normalized;
         this.pool = items;
         this.incomplete = incomplete;
         this.resolved.clear();
@@ -463,7 +723,7 @@ export class CompletionFeature {
             void project.service
                 .resolveCompletion(uri, entry.item)
                 .then((item) => {
-                    this.resolved.set(entry.item, item);
+                    this.resolved.set(entry.item, { ...entry.item, ...item });
                     if (this.ranked[this.active]?.item === entry.item) {
                         this.publish();
                     }

package/src/diagnostics.ts

@@ -2,7 +2,7 @@ import type { Diagnostic } from '@adecore/lsp';
 import type { EditorContentChange, EditorPosition, EditorReveal } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { isShortcut } from './shortcut-keys.ts';
-import { comparePositions, markerOf, neighborProblem, problemCountsOf, problemsAt, shiftRange, type Problem } from './diagnostics-model.ts';
+import { comparePositions, markerOf, neighborProblem, problemCountsOf, problemsAt, severityOf, shiftRange, type Problem } from './diagnostics-model.ts';
 
 export interface ProblemCounts {
     readonly error: number;
@@ -69,7 +69,7 @@ export class DiagnosticsFeature {
             return false;
         }
         const { start } = target.diagnostic.range;
-        this.reveal(start, comparePositions(start, caret) > 0 ? 'centerDown' : 'centerUp');
+        this.reveal(target, comparePositions(start, caret) > 0 ? 'centerDown' : 'centerUp');
         return true;
     }
 
@@ -79,7 +79,7 @@ export class DiagnosticsFeature {
         if (target === null) {
             return false;
         }
-        this.reveal(target.diagnostic.range.start, 'center');
+        this.reveal(target, 'center');
         return true;
     }
 
@@ -90,11 +90,13 @@ export class DiagnosticsFeature {
         };
     }
 
-    private reveal(position: EditorPosition, reveal: EditorReveal): void {
-        const { editor } = this.language;
-        editor.setCaret(position, reveal);
+    private reveal(problem: Problem, reveal: EditorReveal): void {
+        const { editor, project } = this.language;
+        editor.setCaret(problem.diagnostic.range.start, reveal);
         editor.focus();
         this.language.hover.showProblemsAt(editor.getCaret());
+        const severity = project.i18n.t(`editor:language.announce.severity.${severityOf(problem.diagnostic)}`);
+        editor.announce(project.i18n.t('editor:language.announce.problem', { severity, message: problem.diagnostic.message }));
     }
 
     private shift(changes: readonly EditorContentChange[]): void {

package/src/diff-expansion.ts

@@ -0,0 +1,49 @@
+import { diffRows, type DiffDocument } from '@adecore/merge';
+
+export interface DiffLimits {
+    readonly rows: number;
+    readonly characters: number;
+    readonly lineLength: number;
+}
+
+export const DEFAULT_UNFOLD_LIMITS: DiffLimits = { rows: 20000, characters: 2000000, lineLength: 10000 };
+
+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

@@ -0,0 +1,69 @@
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import type { Editor, EditorEngine } from '@adecore/editor';
+import type { DiffDisplay } from '@adecore/merge';
+import { RowHost, LineActionHost } from './row-host.ts';
+
+export interface MountedDiff {
+    engine: EditorEngine;
+    editor: Editor;
+    rows: RowHost;
+    actions: LineActionHost;
+}
+
+export function DiffOverlays({
+    mounted,
+    display,
+    unfold,
+    blocked
+}: {
+    mounted: MountedDiff;
+    display: DiffDisplay;
+    unfold(id: number): void;
+    blocked?: ReadonlySet<number>;
+}) {
+    const { t } = useTranslation('editor');
+    useSyncExternalStore(mounted.rows.subscribe, mounted.rows.getVersion, mounted.rows.getVersion);
+    useSyncExternalStore(mounted.actions.subscribe, mounted.actions.getVersion, mounted.actions.getVersion);
+    return (
+        <>
+            {display.gaps.map(({ row }) => {
+                const container = mounted.rows.container(`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 ? (
+                            <Button
+                                size="xs"
+                                disabled={blocked?.has(row.id)}
+                                title={blocked?.has(row.id) ? t('diff.contextLimit') : undefined}
+                                onClick={() => unfold(row.id)}
+                            >
+                                {text}
+                            </Button>
+                        ) : (
+                            <span>{text}</span>
+                        )}
+                    </div>,
+                    container,
+                    `gap-${row.id}`
+                );
+            })}
+            {display.rows.map((row, index) => {
+                if (row.noNewline === undefined) {
+                    return null;
+                }
+                const container = mounted.actions.container(`no-newline-${index}`);
+                return container === undefined
+                    ? null
+                    : createPortal(<span className="adecore-editor-diff-no-newline">{t('diff.noNewline')}</span>, container, `no-newline-${index}`);
+            })}
+        </>
+    );
+}