@adecore/editor-react 0.23.1 → 0.24.1

package/src/RenameCard.tsx

@@ -9,6 +9,7 @@ import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.ts';
 import { AnchoredPopup } from './AnchoredPopup.tsx';
 import type { EditorLanguage } from './editor-language.ts';
+import { keepFocusOutOfList } from './popup-focus.ts';
 import type { RenameView } from './popups.ts';
 
 const CARD_ATTRIBUTE = 'data-rename-card';
@@ -22,10 +23,10 @@ function staysInside(target: EventTarget | null): boolean {
  * Suggested names from the host, in a list under the input; a press fills the input and the
  * typed name stays what Enter applies. While it is up the card says only its two keys.
  */
-function Suggestions({ names, active, onPick }: { names: readonly string[]; active: number; onPick(name: string): void }) {
+function Suggestions({ names, active, onPick, onFocusBack }: { names: readonly string[]; active: number; onPick(name: string): void; onFocusBack(): void }) {
     const { t } = useTranslation('editor');
     return (
-        <div className="flex w-[250px] flex-col p-1.25">
+        <div className="flex w-[250px] flex-col p-1.25" {...keepFocusOutOfList(onFocusBack)}>
             <div className="flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint">
                 <Icon icon={Sparkles} size={12} className="shrink-0" />
                 {t('language.rename.suggestions')}
@@ -50,7 +51,7 @@ function Suggestions({ names, active, onPick }: { names: readonly string[]; acti
     );
 }
 
-function Hints({ view, active, onPick }: { view: RenameView; active: number; onPick(name: string): void }) {
+function Hints({ view, active, onPick, onFocusBack }: { view: RenameView; active: number; onPick(name: string): void; onFocusBack(): void }) {
     const { t } = useTranslation('editor');
     const { occurrences } = view;
     return (
@@ -61,7 +62,7 @@ function Hints({ view, active, onPick }: { view: RenameView; active: number; onP
                 </div>
             )}
             {view.suggestions.length > 0 ? (
-                <Suggestions names={view.suggestions} active={active} onPick={onPick} />
+                <Suggestions names={view.suggestions} active={active} onPick={onPick} onFocusBack={onFocusBack} />
             ) : (
                 <div className="flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted">
                     {occurrences !== null && (
@@ -208,12 +209,13 @@ export function RenameCard({ language, view, rect, endRect }: { language: Editor
                 spellCheck={false}
                 autoComplete="off"
                 aria-label={view.original}
-                className="fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-1 font-mono text-code text-text shadow-(--float-shadow) outline-none [field-sizing:content]"
+                className="fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-0 font-mono text-(length:--code-font-size) text-text shadow-(--float-shadow) outline-none [font-kerning:none] [field-sizing:content]"
                 style={{
-                    left: Math.round(rect.left) - 5,
+                    // Only the border stands beside the name: any padding would cover the character after it, often a `(`.
+                    left: Math.round(rect.left) - 1,
                     top: Math.round(rect.top) - 2,
                     height: Math.round(rect.bottom - rect.top) + 4,
-                    minWidth: Math.round(symbolWidth) + 10
+                    minWidth: Math.round(symbolWidth) + 2
                 }}
                 onChange={(event) => {
                     setValue(event.target.value);
@@ -226,9 +228,13 @@ export function RenameCard({ language, view, rect, endRect }: { language: Editor
                     }
                 }}
             />
-            <AnchoredPopup rect={{ ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }} className="overflow-hidden" placement={{ gap: 2 }}>
+            <AnchoredPopup rect={{ ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }} overflow="clip" placement={{ gap: 2 }}>
                 <div {...{ [CARD_ATTRIBUTE]: '' }} onPointerDown={(event) => event.preventDefault()}>
-                    {view.phase === 'preview' ? <Preview language={language} view={view} /> : <Hints view={view} active={active} onPick={fill} />}
+                    {view.phase === 'preview' ? (
+                        <Preview language={language} view={view} />
+                    ) : (
+                        <Hints view={view} active={active} onPick={fill} onFocusBack={() => input.current?.focus()} />
+                    )}
                 </div>
             </AnchoredPopup>
         </>,

package/src/RenderedDocs.tsx

@@ -1,13 +1,13 @@
 import { createPortal } from 'react-dom';
-import { useSyncExternalStore, type MouseEvent } from 'react';
+import { memo, useSyncExternalStore, type MouseEvent } from 'react';
+import type { DocComment } from '@adecore/editor';
 import { useTranslation } from 'react-i18next';
 import type { EditorLanguage } from './editor-language.ts';
-import { DOC_LINK_PREFIX, sectionsOf, type DocTagEntry } from './doc-comment-model.ts';
+import { DOC_LINK_PREFIX, sectionsOf, type DocTagEntry, type ParsedDocComment } from './doc-comment-model.ts';
 import { markdownParts } from './hover-content.ts';
 import { Signature } from './HoverSections.tsx';
 import { shikiLanguageOf } from './language-ids.ts';
 import { Markdown } from './Markdown.tsx';
-import type { RenderedDocEntry } from './rendered-docs.ts';
 
 const LINK = /\[([^\]]*)\]\(#doc-link:[^)]*\)/g;
 const KNOWN = new Set([
@@ -83,12 +83,18 @@ function TagRow({ tag, language, linkable, spaced }: { tag: DocTagEntry; languag
     );
 }
 
-export function RenderedDocBlock({ language, entry }: { language: EditorLanguage; entry: RenderedDocEntry }) {
+interface DocBlockProps {
+    language: EditorLanguage;
+    comment: DocComment;
+    parsed: ParsedDocComment;
+    linkable: boolean;
+}
+
+function DocBlock({ language, comment, parsed, linkable }: DocBlockProps) {
     const { t } = useTranslation('editor');
     const feature = language.renderedDocs;
-    const { description, tags } = entry.parsed;
+    const { description, tags } = parsed;
     const highlighter = shikiLanguageOf(language.languageId);
-    const linkable = feature.canFollow;
     const sections = sectionsOf(tags);
     const deprecated = sections.find((section) => section.name === 'deprecated');
     const shown = sections.filter((section) => section.name !== 'deprecated');
@@ -106,7 +112,7 @@ export function RenderedDocBlock({ language, entry }: { language: EditorLanguage
             return;
         }
         if (href.startsWith(DOC_LINK_PREFIX)) {
-            feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), entry.comment);
+            feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), comment);
         } else if (/^(https?:|mailto:)/i.test(href)) {
             window.open(href, '_blank', 'noopener,noreferrer');
         }
@@ -143,6 +149,9 @@ export function RenderedDocBlock({ language, entry }: { language: EditorLanguage
     );
 }
 
+/* Drawn again only when its comment or its links change, since every scroll of the editor draws the popups again. */
+export const RenderedDocBlock = memo(DocBlock);
+
 /*
  * The documentation comments the editor drew as rows, filled with their formatted text. It portals into
  * the element the editor made for each row, so the editor decides what is in view; a comment is parsed
@@ -151,5 +160,18 @@ export function RenderedDocBlock({ language, entry }: { language: EditorLanguage
 export function RenderedDocs({ language }: { language: EditorLanguage }) {
     const feature = language.renderedDocs;
     useSyncExternalStore(feature.subscribe, feature.getVersion, feature.getVersion);
-    return <>{feature.entries().map((entry) => createPortal(<RenderedDocBlock language={language} entry={entry} />, entry.container, entry.id))}</>;
+    const linkable = feature.canFollow;
+    return (
+        <>
+            {feature
+                .entries()
+                .map((entry) =>
+                    createPortal(
+                        <RenderedDocBlock language={language} comment={entry.comment} parsed={entry.parsed} linkable={linkable} />,
+                        entry.container,
+                        entry.id
+                    )
+                )}
+        </>
+    );
 }

package/src/call-hierarchy.ts

@@ -1,4 +1,5 @@
 import { StaleResultError, type CallHierarchyItem } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorPosition } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import {
@@ -53,7 +54,7 @@ export class CallHierarchyFeature {
         this.timers = timers;
         const { editor } = language;
         const offs = [
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 if (isShortcut(this.language.shortcuts.callHierarchy, event)) {
                     if (this.isOpen) {
                         this.setDirection(this.direction === 'incoming' ? 'outgoing' : 'incoming');
@@ -63,7 +64,7 @@ export class CallHierarchyFeature {
                     return true;
                 }
                 return this.key(event);
-            }),
+            }, KEY_PRIORITY.callHierarchy),
             editor.onTextChange(() => this.close())
         ];
         language.onDispose(() => {
@@ -75,7 +76,7 @@ export class CallHierarchyFeature {
     }
 
     get isOpen(): boolean {
-        return (this.language.popups.getState().callHierarchy ?? null) !== null;
+        return this.language.popups.getState().callHierarchy !== null;
     }
 
     /* Whether a server of this document answers the three requests the tree is made of. */
@@ -137,7 +138,7 @@ export class CallHierarchyFeature {
 
     close(): void {
         this.reset();
-        if (this.language.popups.getState().callHierarchy == null) {
+        if (this.language.popups.getState().callHierarchy === null) {
             return;
         }
         this.language.popups.setState({ callHierarchy: null });
@@ -148,7 +149,7 @@ export class CallHierarchyFeature {
 
     /* Starts the tree over from the same symbols for the other direction. */
     setDirection(direction: CallDirection): void {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (view === null || view.direction === direction) {
             return;
         }
@@ -173,7 +174,7 @@ export class CallHierarchyFeature {
         }
         if (node.expanded) {
             this.patch(id, { expanded: false });
-            const view = this.language.popups.getState().callHierarchy ?? null;
+            const view = this.language.popups.getState().callHierarchy;
             if (view !== null && this.hasAncestor(view.active, id)) {
                 this.select(id);
             }
@@ -200,7 +201,7 @@ export class CallHierarchyFeature {
         }
         this.patch(parent, { shown: Math.min(node.children.length, node.shown + CALL_LEVEL_LIMIT) });
         const first = node.children[node.shown];
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         // The row that offered more is gone once everything shows, so the selection moves on to what it brought.
         if (first !== undefined && view?.active === moreIdOf(parent)) {
             this.select(first);
@@ -209,7 +210,7 @@ export class CallHierarchyFeature {
 
     /* Makes a row the active one and shows the code of its call. */
     select(id: string, site = 0): void {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         const node = this.nodes.get(id);
         if (view === null || !view.rows.some((row) => row.id === id)) {
             return;
@@ -224,7 +225,7 @@ export class CallHierarchyFeature {
 
     /* Steps through the places a call is made from when the active one has more than one. */
     stepSite(direction: 1 | -1): void {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (view !== null && view.sites > 1) {
             this.select(view.active, (view.site + direction + view.sites) % view.sites);
         }
@@ -232,7 +233,7 @@ export class CallHierarchyFeature {
 
     /* Goes to the call of a row, or to the symbol of a root, and closes the tree. */
     go(id: string): void {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         const node = this.nodes.get(id);
         if (view === null || node === undefined) {
             return;
@@ -259,7 +260,7 @@ export class CallHierarchyFeature {
     }
 
     private mounted(container: HTMLElement): void {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ callHierarchy: { ...view, container } });
             revealRow(this.timers, container);
@@ -268,7 +269,7 @@ export class CallHierarchyFeature {
 
     private patch(id: string, change: Partial<CallNode>): void {
         const node = this.nodes.get(id);
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (node === undefined || view === null) {
             return;
         }
@@ -329,7 +330,7 @@ export class CallHierarchyFeature {
                 this.texts.set(uri, text);
             }
         }
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (view === null || view.active !== node.id) {
             return;
         }
@@ -354,7 +355,7 @@ export class CallHierarchyFeature {
     }
 
     private key(event: KeyboardEvent): boolean {
-        const view = this.language.popups.getState().callHierarchy ?? null;
+        const view = this.language.popups.getState().callHierarchy;
         if (view === null || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.isComposing) {
             return false;
         }

package/src/code-actions.ts

@@ -1,4 +1,5 @@
 import { ErrorCodes, LspError, StaleResultError, type CodeAction, type Command, type Diagnostic, type Position } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorPosition, EditorRange } from '@adecore/editor';
 import {
     ACTION_GROUPS,
@@ -79,11 +80,13 @@ export class CodeActionsFeature {
         const offs = [
             editor.onCaret(() => {
                 editor.setGutterAction(null);
+                // An answer for the caret's last place would light the bulb on the line it moved to.
+                this.refresher.cancel();
                 this.refresher.later();
             }),
             editor.onTextChange(() => editor.setGutterAction(null)),
             editor.onGutterAction(() => void this.open()),
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 if (isShortcut(this.language.shortcuts.codeActions, event)) {
                     void this.open();
                     return true;
@@ -93,7 +96,7 @@ export class CodeActionsFeature {
                     return true;
                 }
                 return false;
-            }),
+            }, KEY_PRIORITY.codeActions),
             language.diagnostics.onChange(() => this.refresher.later()),
             providers
         ];

package/src/completion-model.ts

@@ -1,3 +1,4 @@
+import { labelCollator } from '@adecore/ui/format';
 import type { SnippetTransformJob } from './snippet-transform-protocol.ts';
 import type { EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
 import { applyCompletionDefaults, type CompletionItem, type CompletionResult, type MarkupContent } from '@adecore/lsp';
@@ -201,6 +202,7 @@ export function rankCompletions(
     recency: (item: CompletionItem) => number = () => 0,
     limit = 150
 ): Ranked[] {
+    const { compare } = labelCollator();
     return items
         .map((item, index) => {
             const prefix = prefixOf(item);
@@ -212,7 +214,7 @@ export function rankCompletions(
                 left.score - right.score ||
                 right.recent - left.recent ||
                 Number(right.item.preselect === true) - Number(left.item.preselect === true) ||
-                (left.item.sortText ?? left.item.label).localeCompare(right.item.sortText ?? right.item.label) ||
+                compare(left.item.sortText ?? left.item.label, right.item.sortText ?? right.item.label) ||
                 left.index - right.index
         )
         .slice(0, limit)

package/src/completion.ts

@@ -1,4 +1,5 @@
 import { SnippetTransformQueueError } from './snippet-transform-queue.ts';
+import { KEY_PRIORITY } from './key-priority.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';
@@ -32,11 +33,10 @@ import { isEmptyRange } from './proposal-model.ts';
 import { isShortcut } from './shortcut-keys.ts';
 import type { CompletionRow, CompletionView } from './popups.ts';
 import { realTimers, type Timers } from './timers.ts';
+import { messageOf } from './error-message.ts';
 
 const METHOD = 'textDocument/completion';
 const START_DELAY_MS = 80;
-/* After typing stops, the list is asked for again at the new text: a server only resolves an item for the text it was made for. */
-const REFRESH_DELAY_MS = 150;
 const RESOLVE_DELAY_MS = 120;
 const PAGE = 8;
 const LINES_BACK = 60;
@@ -103,8 +103,11 @@ export class CompletionFeature {
     private server = '';
     private request = 0;
     private controller: AbortController | null = null;
+    private resolving: AbortController | null = null;
+    private accepting: AbortController | null = null;
+    /* What the list was ranked for last: the caret event and the text event of one keystroke both refilter, and only the first has to rank. */
+    private rankedFor: { readonly pool: readonly CompletionItem[]; readonly key: string } | null = null;
     private requestTimer: unknown;
-    private refreshTimer: unknown;
     private resolveTimer: unknown;
     private textRevision = 0;
     private acceptSequence = 0;
@@ -116,16 +119,18 @@ export class CompletionFeature {
         this.timers = timers;
         const { editor } = language;
         const offs = [
-            editor.onKeyDown((event) => this.key(event)),
+            language.onKey((event) => this.key(event), KEY_PRIORITY.completion),
             editor.onTextChange((change) => this.edited(change)),
             editor.onCaret((position) => this.caretMoved(position)),
             editor.onBlur(() => {
                 this.acceptSequence++;
+                this.accepting?.abort();
                 this.close();
             })
         ];
         language.onDispose(() => {
             this.disposed = true;
+            this.accepting?.abort();
             for (const off of offs) {
                 off();
             }
@@ -156,14 +161,26 @@ export class CompletionFeature {
         this.scheduleResolve();
     }
 
-    /* Picks a row by a click or a key. */
+    /* Picks a row by a click or a key. It never rejects: a failure is told to the person, so a caller can leave the promise alone. */
     async accept(replace: boolean, index = this.active, commit?: string): Promise<void> {
+        try {
+            await this.insert(replace, index, commit);
+        } catch (error) {
+            const { project } = this.language;
+            project.host.notify?.({ id: TOAST_ID, kind: 'error', title: project.i18n.t('editor:language.completion.failed', { message: messageOf(error) }) });
+        }
+    }
+
+    private async insert(replace: boolean, index: number, commit: string | undefined): Promise<void> {
         const entry = this.ranked[index];
         if (entry === undefined) {
             return;
         }
         const { editor, project, uri, snippets } = this.language;
         const acceptSequence = ++this.acceptSequence;
+        this.accepting?.abort();
+        const accepting = new AbortController();
+        this.accepting = accepting;
         const snippetToken = snippets.token;
         const inSnippet = snippets.isActive;
         const exitChanges: { changes: readonly EditorContentChange[]; map: (range: EditorRange) => EditorRange }[] = [];
@@ -200,7 +217,7 @@ export class CompletionFeature {
         this.close();
         if (needsResolve) {
             // 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);
+            item = await this.resolveNow(entry.item, accepting.signal);
         }
         if (!current()) {
             return;
@@ -464,20 +481,20 @@ export class CompletionFeature {
      * made for. When the person typed on since, the list is asked for again at the new text and the same
      * suggestion is resolved in that one; an item that cannot be resolved is still inserted as it is.
      */
-    private async resolveNow(item: CompletionItem): Promise<CompletionItem> {
+    private async resolveNow(item: CompletionItem, signal: AbortSignal): Promise<CompletionItem> {
         const { editor, project, uri } = this.language;
         try {
-            return { ...item, ...(await project.service.resolveCompletion(uri, item)) };
+            return { ...item, ...(await project.service.resolveCompletion(uri, item, { signal })) };
         } catch (error) {
             if (!(error instanceof StaleResultError)) {
                 return item;
             }
         }
         try {
-            const fresh = itemsOf(await project.service.completion(uri, editor.getCaret(), { triggerKind: 1 })).items.find(
+            const fresh = itemsOf(await project.service.completion(uri, editor.getCaret(), { triggerKind: 1 }, { signal })).items.find(
                 (candidate) => candidate.label === item.label && candidate.kind === item.kind
             );
-            return fresh === undefined ? item : { ...fresh, ...(await project.service.resolveCompletion(uri, fresh).catch(() => fresh)) };
+            return fresh === undefined ? item : { ...fresh, ...(await project.service.resolveCompletion(uri, fresh, { signal }).catch(() => fresh)) };
         } catch {
             return item;
         }
@@ -486,11 +503,12 @@ export class CompletionFeature {
     close(): void {
         this.request++;
         this.controller?.abort();
+        this.resolving?.abort();
         this.timers.clear(this.requestTimer);
-        this.timers.clear(this.refreshTimer);
         this.timers.clear(this.resolveTimer);
         this.pool = [];
         this.ranked = [];
+        this.rankedFor = null;
         this.touched = false;
         this.explicit = false;
         this.activeKey = null;
@@ -573,12 +591,14 @@ export class CompletionFeature {
         } else if (this.isOpen) {
             if (text === '' || typedIdentifier) {
                 this.refilter();
-                this.scheduleRefresh();
             } else {
                 this.close();
             }
         } else if (text.length === 1 && typedIdentifier && isEmptyRange(range)) {
             this.beginRequest({ triggerKind: 1 }, START_DELAY_MS);
+        } else if (text !== '') {
+            // A request the last letter started, still waiting or out, would open the list after a character that ends the word.
+            this.close();
         }
     }
 
@@ -598,20 +618,6 @@ export class CompletionFeature {
         return project.service.providerOptions(METHOD, uri)?.triggerCharacters ?? [];
     }
 
-    private scheduleRefresh(): void {
-        const { project, uri } = this.language;
-        this.timers.clear(this.refreshTimer);
-        if (this.start === null || !project.service.supports(METHOD, uri)) {
-            return;
-        }
-        const request = this.request;
-        this.refreshTimer = this.timers.set(() => {
-            if (request === this.request && this.start !== null) {
-                void this.ask({ triggerKind: 1 }, request, true);
-            }
-        }, REFRESH_DELAY_MS);
-    }
-
     private beginRequest(context: CompletionContext, delay: number): void {
         const { project, uri } = this.language;
         if (!project.service.supports(METHOD, uri)) {
@@ -675,6 +681,11 @@ export class CompletionFeature {
             return;
         }
         const lineBefore = textBeforeOf(editor, caret);
+        const typedKey = `${caret.line}:${caret.character}:${lineBefore}`;
+        if (this.rankedFor?.pool === this.pool && this.rankedFor.key === typedKey) {
+            return;
+        }
+        this.rankedFor = { pool: this.pool, key: typedKey };
         // Most items of a list replace the same range, so the text under it is read once and not once per item.
         const typed = new Map<string, string>();
         const textBetween = (range: EditorRange): string => {
@@ -715,20 +726,29 @@ export class CompletionFeature {
     private scheduleResolve(): void {
         const { project, uri } = this.language;
         this.timers.clear(this.resolveTimer);
+        this.resolving?.abort();
         const entry = this.ranked[this.active];
         if (entry === undefined || this.resolved.has(entry.item) || project.service.providerOptions('completionItem/resolve', uri) === undefined) {
             return;
         }
+        const request = this.request;
         this.resolveTimer = this.timers.set(() => {
+            const controller = new AbortController();
+            this.resolving = controller;
             void project.service
-                .resolveCompletion(uri, entry.item)
+                .resolveCompletion(uri, entry.item, { signal: controller.signal })
                 .then((item) => {
                     this.resolved.set(entry.item, { ...entry.item, ...item });
                     if (this.ranked[this.active]?.item === entry.item) {
                         this.publish();
                     }
                 })
-                .catch(() => undefined);
+                .catch((error: unknown) => {
+                    // A server only resolves an item for the text it was made for, so only an item that is wanted and stale costs a new list.
+                    if (error instanceof StaleResultError && !controller.signal.aborted && request === this.request && this.start !== null) {
+                        void this.ask({ triggerKind: 1 }, request, true);
+                    }
+                });
         }, RESOLVE_DELAY_MS);
     }
 

package/src/diagnostics-model.ts

@@ -41,7 +41,7 @@ export function comparePositions(left: EditorPosition, right: EditorPosition): n
 }
 
 /* Where an insertion of `text` at `start` ends, counting a line break of any kind once. */
-function endOfInsertion(start: EditorPosition, text: string): EditorPosition {
+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 }

package/src/diagnostics.ts

@@ -1,6 +1,8 @@
 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';
 
@@ -27,19 +29,19 @@ export class DiagnosticsFeature {
         const reports = project.service.onDiagnostics((report) => {
             if (report.uri === uri) {
                 this.reports.set(report.source, report.diagnostics);
-                this.rebuild(true);
+                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 = editor.onKeyDown((event) => {
+        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();
@@ -99,23 +101,37 @@ export class DiagnosticsFeature {
         editor.announce(project.i18n.t('editor:language.announce.problem', { severity, message: problem.diagnostic.message }));
     }
 
+    /* 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) {
-            this.reports.set(
-                server,
-                diagnostics.map((diagnostic) => ({ ...diagnostic, range: shiftRange(diagnostic.range, changes) }))
-            );
+            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();
         }
-        this.rebuild(false);
     }
 
-    private rebuild(draw: boolean): void {
-        this.list = [...this.reports].flatMap(([server, diagnostics]) => diagnostics.map((diagnostic): Problem => ({ diagnostic, server })));
-        if (draw) {
-            this.language.editor.setMarkers(this.list.map((problem) => markerOf(problem.diagnostic)));
-        }
+    private rebuild(): void {
+        this.collect();
+        this.language.editor.setMarkers(this.list.map((problem) => markerOf(problem.diagnostic)));
         for (const listener of [...this.listeners]) {
             listener();
         }
     }
+
+    private collect(): void {
+        this.list = [...this.reports].flatMap(([server, diagnostics]) => diagnostics.map((diagnostic): Problem => ({ diagnostic, server })));
+    }
 }

package/src/diff-overlays.tsx

@@ -1,7 +1,7 @@
 import { useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@adecore/ui';
+import { Button, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import type { Editor, EditorEngine } from '@adecore/editor';
 import type { DiffDisplay } from '@adecore/merge';
@@ -38,13 +38,17 @@ export function DiffOverlays({
                 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)}
-                            >
+                        {row.unfoldable && blocked?.has(row.id) === true ? (
+                            <Tooltip label={t('diff.contextLimit')}>
+                                {/* A disabled button gets no pointer events, so the hint hangs on a wrapper. */}
+                                <span className="inline-flex">
+                                    <Button size="xs" disabled>
+                                        {text}
+                                    </Button>
+                                </span>
+                            </Tooltip>
+                        ) : row.unfoldable ? (
+                            <Button size="xs" onClick={() => unfold(row.id)}>
                                 {text}
                             </Button>
                         ) : (