@adecore/editor-react 0.42.0 → 0.43.0

package/dist/shortcut-keys.d.ts

@@ -12,10 +12,15 @@ export declare function shortcutsOf(keymap: Keymap, apple: boolean): {
     autoIndentLines: LanguageShortcut | null;
     callHierarchy: LanguageShortcut | null;
     codeActions: LanguageShortcut | null;
+    codeBlockEnd: LanguageShortcut | null;
+    codeBlockEndWithSelection: LanguageShortcut | null;
+    codeBlockStart: LanguageShortcut | null;
+    codeBlockStartWithSelection: LanguageShortcut | null;
     collapse: LanguageShortcut | null;
     collapseAll: LanguageShortcut | null;
     collapseDocComments: LanguageShortcut | null;
     collapseRecursively: LanguageShortcut | null;
+    completeCurrentStatement: LanguageShortcut | null;
     convertIndentsToSpaces: LanguageShortcut | null;
     convertIndentsToTabs: LanguageShortcut | null;
     decreaseFontSize: LanguageShortcut | null;
@@ -41,20 +46,32 @@ export declare function shortcutsOf(keymap: Keymap, apple: boolean): {
     goToImplementation: LanguageShortcut | null;
     goToSymbol: LanguageShortcut | null;
     goToTypeDefinition: LanguageShortcut | null;
+    hippieBackwardCompletion: LanguageShortcut | null;
+    hippieCompletion: LanguageShortcut | null;
     historyBack: LanguageShortcut | null;
     historyForward: LanguageShortcut | null;
     increaseFontSize: LanguageShortcut | null;
     inlineEdit: LanguageShortcut | null;
     joinLines: LanguageShortcut | null;
+    lastEditLocation: LanguageShortcut | null;
     matchBrace: LanguageShortcut | null;
+    methodDown: LanguageShortcut | null;
+    methodUp: LanguageShortcut | null;
     moveLineDown: LanguageShortcut | null;
     moveLineUp: LanguageShortcut | null;
+    moveStatementDown: LanguageShortcut | null;
+    moveStatementUp: LanguageShortcut | null;
+    nextChange: LanguageShortcut | null;
+    nextEditLocation: LanguageShortcut | null;
     nextHighlight: LanguageShortcut | null;
     nextProblem: LanguageShortcut | null;
     organizeImports: LanguageShortcut | null;
     parameterInfo: LanguageShortcut | null;
+    pasteAsPlainText: LanguageShortcut | null;
+    pasteFromHistory: LanguageShortcut | null;
     peekDefinition: LanguageShortcut | null;
     peekReferences: LanguageShortcut | null;
+    previousChange: LanguageShortcut | null;
     previousHighlight: LanguageShortcut | null;
     previousProblem: LanguageShortcut | null;
     quickInfo: LanguageShortcut | null;
@@ -92,10 +109,12 @@ export declare function shortcutsOf(keymap: Keymap, apple: boolean): {
     toggleLineComment: LanguageShortcut | null;
     toggleRenderedDocs: LanguageShortcut | null;
     triggerCompletion: LanguageShortcut | null;
+    typeHierarchy: LanguageShortcut | null;
     undo: LanguageShortcut | null;
     uniqueLines: LanguageShortcut | null;
     unselectOccurrence: LanguageShortcut | null;
     wordLeft: LanguageShortcut | null;
     wordRight: LanguageShortcut | null;
+    wrapWithAbbreviation: LanguageShortcut | null;
 };
 export declare function isShortcut(target: LanguageShortcut | null, event: KeyboardEvent): boolean;

package/dist/signature.js

@@ -102,10 +102,9 @@ export class SignatureFeature {
   }
   options() {
     const {
-      project,
       uri
     } = this.language;
-    const options = project.service.providerOptions(METHOD, uri);
+    const options = this.language.service.providerOptions(METHOD, uri);
     return options === undefined ? null : {
       triggers: options.triggerCharacters ?? [],
       retriggers: options.retriggerCharacters ?? []
@@ -145,10 +144,9 @@ export class SignatureFeature {
   }
   ask(context) {
     const {
-      project,
       uri
     } = this.language;
-    if (!project.service.supports(METHOD, uri)) {
+    if (!this.language.service.supports(METHOD, uri)) {
       return;
     }
     this.timers.clear(this.timer);
@@ -164,7 +162,6 @@ export class SignatureFeature {
   async fetch(context, request) {
     const {
       editor,
-      project,
       uri
     } = this.language;
     const caret = editor.getCaret();
@@ -173,7 +170,7 @@ export class SignatureFeature {
     this.controller = controller;
     let help;
     try {
-      help = await project.service.signatureHelp(uri, caret, context, {
+      help = await this.language.service.signatureHelp(uri, caret, context, {
         signal: controller.signal
       });
     } catch {

package/dist/snippet-session.d.ts

@@ -1,6 +1,6 @@
 import { type Timers } from './timers.ts';
 import { type SnippetTransformJob } from './snippet-transform-protocol.ts';
-import type { EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
+import type { EditorApplyEditsOptions, EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import type { SnippetField, SnippetStop } from './snippet.ts';
 export declare function positionInInsertion(start: EditorPosition, text: string, offset: number): EditorPosition;
@@ -34,7 +34,7 @@ export declare class SnippetFeature {
     beginInstances(insertions: readonly SnippetInsertion[], options?: {
         nested?: boolean;
     }): void;
-    applyEdits(changes: readonly EditorContentChange[], token: number, extras?: readonly EditorContentChange[]): boolean;
+    applyEdits(changes: readonly EditorContentChange[], token: number, extras?: readonly EditorContentChange[], options?: EditorApplyEditsOptions): boolean;
     end(): void;
     private closeChoices;
     private pop;

package/dist/snippet-session.js

@@ -251,17 +251,17 @@ export class SnippetFeature {
     this.visit(0);
   }
   /* Imports can touch a hull's edge; their affinity must differ from edits inside its active field. */
-  applyEdits(changes, token, extras = []) {
+  applyEdits(changes, token, extras = [], options) {
     const frame = this.frames.at(-1);
     const fits = frame !== undefined && changes.every(edit => extras.includes(edit) ? frame.instances.every(instance => comparePositions(edit.range.end, instance.hull.start) <= 0 || comparePositions(edit.range.start, instance.hull.end) >= 0) : frame.instances.some(instance => instance.selected.some(range => rangeHolds(range, edit.range.start) && rangeHolds(range, edit.range.end))));
     if (token !== this.generation || !fits) {
       this.end();
-      return this.language.editor.applyEdits(changes);
+      return this.language.editor.applyEdits(changes, options);
     }
     this.applying = true;
     this.extras = extras;
     try {
-      return this.language.editor.applyEdits(changes);
+      return this.language.editor.applyEdits(changes, options);
     } finally {
       this.applying = false;
       this.extras = [];

package/dist/symbol-picker.js

@@ -28,11 +28,10 @@ export class SymbolPickerFeature {
   }
   async open() {
     const {
-      project,
       uri,
       popups
     } = this.language;
-    if (!project.service.supports('textDocument/documentSymbol', uri)) {
+    if (!this.language.service.supports('textDocument/documentSymbol', uri)) {
       this.language.project.host.notify?.({
         id: TOAST_ID,
         kind: 'error',
@@ -41,7 +40,7 @@ export class SymbolPickerFeature {
       return;
     }
     try {
-      const entries = entriesOf(await project.service.documentSymbols(uri));
+      const entries = entriesOf(await this.language.service.documentSymbols(uri));
       popups.setState({
         symbols: {
           file: basenameOf(this.language.uri),
@@ -87,13 +86,12 @@ export class SymbolPickerFeature {
   /* The symbols of the project that answer to a name, which is a request to the server and so waits for a pause in the typing. */
   async search(text, signal) {
     const {
-      project,
       uri
     } = this.language;
-    if (text === '' || !project.service.supports('workspace/symbol', uri)) {
+    if (text === '' || !this.language.service.supports('workspace/symbol', uri)) {
       return [];
     }
-    return workspaceEntriesOf(await project.service.workspaceSymbols(uri, text, {
+    return workspaceEntriesOf(await this.language.service.workspaceSymbols(uri, text, {
       signal
     }));
   }

package/dist/symbols.js

@@ -44,6 +44,23 @@ export function symbolSpansOf(result) {
     range: symbol.location.range
   }));
 }
+function declarationsOf(result) {
+  if (result === null || result.length === 0) {
+    return [];
+  }
+  if (!('range' in result[0])) {
+    return result.map(symbol => symbol.location.range.start);
+  }
+  const stops = [];
+  const visit = symbols => {
+    for (const symbol of symbols) {
+      stops.push((symbol.selectionRange ?? symbol.range).start);
+      visit(symbol.children ?? []);
+    }
+  };
+  visit(result);
+  return stops;
+}
 /* A line a declaration can have above it: blank, a comment, or an attribute. A bare `#` is no comment, since it heads a Markdown section. */
 const PRELUDE = /^\s*(?:$|\/\/|\/\*|\*|#\[)/;
 /*
@@ -112,18 +129,19 @@ export class SymbolsFeature {
   constructor(language, timers = realTimers) {
     const {
       editor,
-      project,
       uri
     } = language;
     this.refresher = new Refresher(async signal => {
-      if (!project.service.supports(METHOD, uri)) {
+      if (!language.service.supports(METHOD, uri)) {
         return;
       }
-      const result = await project.service.documentSymbols(uri, {
+      const result = await language.service.documentSymbols(uri, {
         signal
       });
       if (!signal.aborted) {
         editor.setBlocks(result === null ? null : blocksOf(result, editor.getText()));
+        const declarations = declarationsOf(result);
+        editor.setDeclarations?.(declarations.length === 0 ? null : declarations);
         for (const listener of [...this.listeners]) {
           listener(result);
         }
@@ -138,6 +156,7 @@ export class SymbolsFeature {
       providers();
       this.refresher.dispose();
       editor.setBlocks(null);
+      editor.setDeclarations?.(null);
     });
   }
   /* Called with every answer that was not replaced before it came. */

package/dist/testing.d.ts

@@ -1,4 +1,4 @@
-import { type LanguageService, type LanguageDocument, type LanguageRequestOptions, type DiagnosticsReport, type ContentChange, type Disposable, type ProviderOptions, type CallHierarchyIncomingCall, type CallHierarchyItem, type CallHierarchyOutgoingCall, type CodeAction, type CodeActionContext, type CodeLens, type Command, type CompletionContext, type CompletionItem, type CompletionResult, type DocumentHighlight, type DocumentSymbolResult, type FoldingRange, type FormattingOptions, type Hover, type InlayHint, type Location, type NavigationResult, type Position, type PrepareRenameResult, type Range, type SelectionRange, type SemanticTokens, type SemanticTokensDelta, type SignatureHelp, type SignatureHelpContext, type TextEdit, type WorkspaceEdit, type WorkspaceSymbolResult } from '@adecore/lsp';
+import { type LanguageService, type LanguageDocument, type LanguageRequestOptions, type DiagnosticsReport, type ContentChange, type Disposable, type ProviderOptions, type CallHierarchyIncomingCall, type CallHierarchyItem, type CallHierarchyOutgoingCall, type CodeAction, type CodeActionContext, type CodeLens, type Command, type CompletionContext, type CompletionItem, type CompletionResult, type DocumentHighlight, type DocumentSymbolResult, type FoldingRange, type FormattingOptions, type Hover, type InlayHint, type Location, type NavigationResult, type Position, type PrepareRenameResult, type Range, type SelectionRange, type SemanticTokens, type SemanticTokensDelta, type SignatureHelp, type SignatureHelpContext, type TextEdit, type WorkspaceEdit, type WorkspaceSymbolResult, type Color, type ColorInformation, type ColorPresentation, type DocumentLink, type InlineCompletionContext, type InlineCompletionResult, type InlineValue, type InlineValueContext, type LinkedEditingRanges, type Moniker, type PreviousResultId, type ServerMessage, type ShowDocumentParams, type ShowDocumentResult, type TextDocumentSaveReason, type TypeHierarchyItem, type WorkspaceDiagnosticReport } from '@adecore/lsp';
 export { ManualTimers } from './timers.ts';
 export interface LanguageCall {
     method: string;
@@ -15,6 +15,8 @@ export declare class FakeLanguageService implements LanguageService {
     private readonly answers;
     private readonly diagnostics;
     private readonly changes;
+    private readonly messages;
+    private showDocument;
     respond(method: string, answer: (call: LanguageCall) => unknown, provider?: ProviderOptions): void;
     openDocument(document: LanguageDocument): Promise<void>;
     changeDocument(uri: string, changes: readonly ContentChange[]): Promise<void>;
@@ -58,4 +60,24 @@ export declare class FakeLanguageService implements LanguageService {
     outgoingCalls(uri: string, item: CallHierarchyItem, options?: LanguageRequestOptions): Promise<CallHierarchyOutgoingCall[] | null>;
     codeLenses(uri: string, options?: LanguageRequestOptions): Promise<CodeLens[] | null>;
     resolveCodeLens(uri: string, lens: CodeLens, options?: LanguageRequestOptions): Promise<CodeLens>;
+    documentLinks(uri: string, options?: LanguageRequestOptions): Promise<DocumentLink[] | null>;
+    resolveDocumentLink(uri: string, link: DocumentLink, options?: LanguageRequestOptions): Promise<DocumentLink>;
+    documentColors(uri: string, options?: LanguageRequestOptions): Promise<ColorInformation[] | null>;
+    colorPresentations(uri: string, color: Color, range: Range, options?: LanguageRequestOptions): Promise<ColorPresentation[] | null>;
+    linkedEditingRanges(uri: string, position: Position, options?: LanguageRequestOptions): Promise<LinkedEditingRanges | null>;
+    monikers(uri: string, position: Position, options?: LanguageRequestOptions): Promise<Moniker[] | null>;
+    prepareTypeHierarchy(uri: string, position: Position, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    supertypes(uri: string, item: TypeHierarchyItem, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    subtypes(uri: string, item: TypeHierarchyItem, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    inlineValues(uri: string, range: Range, context: InlineValueContext, options?: LanguageRequestOptions): Promise<InlineValue[] | null>;
+    inlineCompletions(uri: string, position: Position, context: InlineCompletionContext, options?: LanguageRequestOptions): Promise<InlineCompletionResult>;
+    rangesFormatting(uri: string, ranges: readonly Range[], formatting: FormattingOptions, options?: LanguageRequestOptions): Promise<TextEdit[] | null>;
+    willSave(uri: string, reason?: TextDocumentSaveReason): Promise<void>;
+    willSaveWaitUntil(uri: string, reason?: TextDocumentSaveReason, options?: LanguageRequestOptions): Promise<TextEdit[] | null>;
+    workspaceDiagnostics(uri: string, previousResultIds?: readonly PreviousResultId[], options?: LanguageRequestOptions): Promise<WorkspaceDiagnosticReport>;
+    textDocumentContent(uri: string, options?: LanguageRequestOptions): Promise<string | null>;
+    onServerMessage(listener: (message: ServerMessage) => void): Disposable;
+    onShowDocument(handler: (params: ShowDocumentParams) => Promise<ShowDocumentResult>): Disposable;
+    message(message: ServerMessage): void;
+    show(params: ShowDocumentParams): Promise<boolean>;
 }

package/dist/testing.js

@@ -7,6 +7,8 @@ export class FakeLanguageService {
   answers = new Map();
   diagnostics = new Set();
   changes = new Set();
+  messages = new Set();
+  showDocument = null;
   respond(method, answer, provider = {}) {
     this.answers.set(method, answer);
     this.providers.set(method, provider);
@@ -248,4 +250,116 @@ export class FakeLanguageService {
   resolveCodeLens(uri, lens, options = {}) {
     return this.request('codeLens/resolve', uri, lens, options);
   }
+  documentLinks(uri, options = {}) {
+    return this.request('textDocument/documentLink', uri, {}, options);
+  }
+  resolveDocumentLink(uri, link, options = {}) {
+    return this.request('documentLink/resolve', uri, link, options);
+  }
+  documentColors(uri, options = {}) {
+    return this.request('textDocument/documentColor', uri, {}, options);
+  }
+  colorPresentations(uri, color, range, options = {}) {
+    return this.request('textDocument/colorPresentation', uri, {
+      color,
+      range
+    }, options);
+  }
+  linkedEditingRanges(uri, position, options = {}) {
+    return this.request('textDocument/linkedEditingRange', uri, {
+      position
+    }, options);
+  }
+  monikers(uri, position, options = {}) {
+    return this.request('textDocument/moniker', uri, {
+      position
+    }, options);
+  }
+  prepareTypeHierarchy(uri, position, options = {}) {
+    return this.request('textDocument/prepareTypeHierarchy', uri, {
+      position
+    }, options);
+  }
+  supertypes(uri, item, options = {}) {
+    return this.request('typeHierarchy/supertypes', uri, {
+      item
+    }, options);
+  }
+  subtypes(uri, item, options = {}) {
+    return this.request('typeHierarchy/subtypes', uri, {
+      item
+    }, options);
+  }
+  inlineValues(uri, range, context, options = {}) {
+    return this.request('textDocument/inlineValue', uri, {
+      range,
+      context
+    }, options);
+  }
+  inlineCompletions(uri, position, context, options = {}) {
+    return this.request('textDocument/inlineCompletion', uri, {
+      position,
+      context
+    }, options);
+  }
+  rangesFormatting(uri, ranges, formatting, options = {}) {
+    return this.request('textDocument/rangesFormatting', uri, {
+      ranges,
+      options: formatting
+    }, options);
+  }
+  async willSave(uri, reason = 1) {
+    this.calls.push({
+      method: 'textDocument/willSave',
+      uri,
+      params: {
+        reason
+      },
+      options: {}
+    });
+  }
+  async willSaveWaitUntil(uri, reason = 1, options = {}) {
+    return this.supports('textDocument/willSaveWaitUntil', uri) ? this.request('textDocument/willSaveWaitUntil', uri, {
+      reason
+    }, options) : null;
+  }
+  workspaceDiagnostics(uri, previousResultIds = [], options = {}) {
+    return this.request('workspace/diagnostic', uri, {
+      previousResultIds
+    }, options);
+  }
+  async textDocumentContent(uri, options = {}) {
+    if (!this.supports('workspace/textDocumentContent', uri)) {
+      return null;
+    }
+    return (await this.request('workspace/textDocumentContent', uri, {
+      uri
+    }, options))?.text ?? null;
+  }
+  onServerMessage(listener) {
+    this.messages.add(listener);
+    return {
+      dispose: () => this.messages.delete(listener)
+    };
+  }
+  onShowDocument(handler) {
+    this.showDocument = handler;
+    return {
+      dispose: () => {
+        if (this.showDocument === handler) {
+          this.showDocument = null;
+        }
+      }
+    };
+  }
+  /* Sends a message as a server would. */
+  message(message) {
+    for (const listener of this.messages) {
+      listener(message);
+    }
+  }
+  /* Asks the host to show a document as a server would; false when nothing handles it. */
+  async show(params) {
+    return (await this.showDocument?.(params))?.success ?? false;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "type": "module",
   "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
@@ -62,9 +62,10 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor": "0.42.0",
-    "@adecore/lsp": "0.42.0",
-    "@adecore/merge": "0.42.0",
+    "@adecore/editor": "0.43.0",
+    "@adecore/lsp": "0.43.0",
+    "@adecore/merge": "0.43.0",
+    "emmet": "^2.4.11",
     "lucide-react": "^1.61.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
@@ -72,14 +73,14 @@
     "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.42.0",
+    "@adecore/ui": "^0.43.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.42.0",
+    "@adecore/ui": "0.43.0",
     "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/CallHierarchyPanel.tsx

@@ -9,7 +9,7 @@ import { CALL_HIERARCHY_HEIGHT } from './call-hierarchy.ts';
 import { PanelResizeHandle } from './PanelResizeHandle.tsx';
 import { usePanelBody } from './use-panel-body.ts';
 import { PANEL_BODY_HEIGHT } from './panel-size.ts';
-import { CALL_LEVEL_LIMIT, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
+import { CALL_LEVEL_LIMIT, isTypeDirection, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { basenameOf, relativeTo } from './paths.ts';
 import { PathText } from './PathText.tsx';
@@ -125,7 +125,12 @@ function Tree({ language, view }: { language: EditorLanguage; view: CallHierarch
     useInputPopup(language, treeId, activeId);
 
     return (
-        <div id={treeId} role="tree" aria-label={t('language.callHierarchy.label')} className="w-1/2 shrink-0 overflow-y-auto border-r border-border py-1">
+        <div
+            id={treeId}
+            role="tree"
+            aria-label={t(isTypeDirection(view.direction) ? 'language.callHierarchy.typesLabel' : 'language.callHierarchy.label')}
+            className="w-1/2 shrink-0 overflow-y-auto border-r border-border py-1"
+        >
             {view.rows.map((row) => {
                 const active = row.id === view.active;
                 const ref = active ? activeRow : undefined;
@@ -174,11 +179,14 @@ function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status'
         );
     }
 
-    return (
-        <span className="font-sans text-xs text-text-muted">
-            {t(direction === 'incoming' ? 'language.callHierarchy.noIncoming' : 'language.callHierarchy.noOutgoing')}
-        </span>
-    );
+    const empty = {
+        incoming: 'noIncoming',
+        outgoing: 'noOutgoing',
+        supertypes: 'noSupertypes',
+        subtypes: 'noSubtypes'
+    } as const;
+
+    return <span className="font-sans text-xs text-text-muted">{t(`language.callHierarchy.${empty[direction]}`)}</span>;
 }
 
 /*
@@ -210,10 +218,17 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
                     value={view.direction}
                     onValueChange={(direction) => language.callHierarchy.setDirection(direction)}
                     label={t('language.callHierarchy.direction')}
-                    options={[
-                        { id: 'incoming', label: t('language.callHierarchy.incoming') },
-                        { id: 'outgoing', label: t('language.callHierarchy.outgoing') }
-                    ]}
+                    options={
+                        isTypeDirection(view.direction)
+                            ? [
+                                  { id: 'supertypes', label: t('language.callHierarchy.supertypes') },
+                                  { id: 'subtypes', label: t('language.callHierarchy.subtypes') }
+                              ]
+                            : [
+                                  { id: 'incoming', label: t('language.callHierarchy.incoming') },
+                                  { id: 'outgoing', label: t('language.callHierarchy.outgoing') }
+                              ]
+                    }
                 />
                 <span className="shrink-0 font-medium">{view.name}</span>
                 <span className="shrink-0 font-medium text-text-muted">{path === null ? '' : basenameOf(path)}</span>

package/src/EditorContextMenu.tsx

@@ -28,6 +28,7 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
         implementation: () => void language.navigation.go('implementation'),
         peekReferences: () => void language.peek.open(),
         callHierarchy: () => void language.callHierarchy.open(),
+        typeHierarchy: () => void language.callHierarchy.open(undefined, 'supertypes'),
         renameSymbol: () => void language.rename.start(),
         codeActions: () => void language.codeActions.open()
     };
@@ -100,6 +101,12 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
                             {t('commands.formatDocument')}
                             {language.shortcuts.formatDocument !== null && <Kbd shortcut={language.shortcuts.formatDocument} />}
                         </ContextMenu.Item>
+                        {language.codeActions.formatsSelection &&
+                            language.editor
+                                .getSelections()
+                                .some((range) => range.start.line !== range.end.line || range.start.character !== range.end.character) && (
+                                <ContextMenu.Item onClick={() => void language.codeActions.formatSelection()}>{t('commands.formatSelection')}</ContextMenu.Item>
+                            )}
                     </>
                 )}
             </ContextMenu.Popup>

package/src/LanguagePopups.tsx

@@ -13,6 +13,7 @@ import { RenameCard } from './RenameCard.tsx';
 import { RenderedDocs } from './RenderedDocs.tsx';
 import { SymbolPicker } from './SymbolPicker.tsx';
 import { SignatureCard } from './SignatureCard.tsx';
+import { WrapCard } from './WrapCard.tsx';
 import type { HoverView } from './popups.ts';
 
 export interface LanguagePopupsProps<Language extends EditorLanguage = EditorLanguage> {
@@ -44,6 +45,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
     const symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
+    const wrap = useStore(language.popups, (state) => state.wrap);
 
     useEffect(() => language.editor.onViewChange(redraw), [language]);
 
@@ -53,6 +55,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
     const pickRect = pick === null ? null : language.editor.rectAt(pick.anchor);
     const renameRect = rename === null ? null : language.editor.rectAt(rename.range.start);
     const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
+    const wrapRect = wrap === null ? null : language.editor.rectAt(wrap.anchor);
 
     return (
         <>
@@ -85,6 +88,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
             {peek !== null && <PeekPanel language={language} view={peek} />}
             {callHierarchy !== null && <CallHierarchyPanel language={language} view={callHierarchy} />}
             {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {wrap !== null && wrapRect !== null && <WrapCard language={language} view={wrap} rect={wrapRect} />}
             {children}
             {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
         </>

package/src/PickPopup.tsx

@@ -10,7 +10,34 @@ import type { PickPreview, PickView } from './popups.ts';
 const CARD =
     'fixed top-0 left-0 z-(--z-popup) flex w-[420px] flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
 
+/* The label with the part a query matched marked, whatever the case. */
+function MatchedLabel({ label, query }: { label: string; query: string | null }) {
+    const start = query === null || query === '' ? -1 : label.toLowerCase().indexOf(query.toLowerCase());
+
+    if (query === null || start < 0) {
+        return label;
+    }
+
+    return (
+        <>
+            {label.slice(0, start)}
+            <mark className="bg-transparent font-semibold text-accent">{label.slice(start, start + query.length)}</mark>
+            {label.slice(start + query.length)}
+        </>
+    );
+}
+
 function PreviewLines({ preview }: { preview: PickPreview }) {
+    if (preview.kind === 'text') {
+        return (
+            <div className="max-h-48 overflow-auto border-t border-border p-2 font-mono text-code whitespace-pre">
+                {preview.added.map((line, index) => (
+                    <div key={index}>{line === '' ? ' ' : line}</div>
+                ))}
+            </div>
+        );
+    }
+
     return (
         <div className="flex flex-col gap-px border-t border-border p-1 font-mono text-code">
             {preview.removed.map((line, index) => (
@@ -89,7 +116,12 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
             onPointerDown={(event) => event.preventDefault()}
             {...keepFocusOutOfList(() => language.editor.focus())}
         >
-            {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
+            {(view.title !== null || view.query !== null) && (
+                <div className="flex items-baseline gap-2 border-b border-border px-3 py-1.5 text-xs text-text-muted">
+                    <span className="min-w-0 truncate">{view.title}</span>
+                    {view.query !== null && view.query !== '' && <span className="ml-auto shrink-0 font-mono text-text">{view.query}</span>}
+                </div>
+            )}
             <div id={listId} role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
                 {view.groups.map((group, groupIndex) => (
                     <div key={group.title ?? groupIndex} role="group" className="flex flex-col">
@@ -102,12 +134,15 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
                                 type="button"
                                 role="option"
                                 tabIndex={-1}
-                                aria-selected={row.id === view.active}
+                                aria-selected={row.id === view.active || view.chosen.includes(row.id)}
                                 data-active={row.id === view.active}
-                                className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"
-                                onClick={() => language.pick.choose(row.id)}
+                                data-chosen={view.chosen.includes(row.id)}
+                                className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row data-[chosen=true]:bg-accent/15"
+                                onClick={(event) => language.pick.choose(row.id, { toggle: event.metaKey || event.ctrlKey, range: event.shiftKey })}
                             >
-                                <span className={row.path ? 'shrink-0' : 'min-w-0 truncate'}>{row.label}</span>
+                                <span className={row.path ? 'shrink-0' : 'min-w-0 truncate'}>
+                                    <MatchedLabel label={row.label} query={view.query} />
+                                </span>
                                 {row.path ? (
                                     <PathText path={row.detail} className="ml-auto font-mono text-text-faint" />
                                 ) : (