@adecore/editor-react 0.43.0 → 0.44.1

package/dist/PickPopup.js

@@ -199,7 +199,7 @@ function _temp(line, index) {
   }, index);
 }
 export function PickPopup(t0) {
-  const $ = _c(34);
+  const $ = _c(37);
   const {
     language,
     view,
@@ -279,27 +279,36 @@ export function PickPopup(t0) {
     t4 = $[10];
   }
   const activeId = t4;
-  useInputPopup(language, listId, activeId);
   let t5;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
-      visibility: "hidden"
-    };
-    $[11] = t5;
+  if ($[11] !== view.groups) {
+    t5 = view.groups.some(_temp5);
+    $[11] = view.groups;
+    $[12] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[12];
   }
+  const mnemonics = t5;
+  useInputPopup(language, listId, activeId);
   let t6;
-  if ($[12] !== language) {
-    t6 = keepFocusOutOfList(() => language.editor.focus());
-    $[12] = language;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      visibility: "hidden"
+    };
     $[13] = t6;
   } else {
     t6 = $[13];
   }
   let t7;
-  if ($[14] !== view.query || $[15] !== view.title) {
-    t7 = (view.title !== null || view.query !== null) && /*#__PURE__*/_jsxs("div", {
+  if ($[14] !== language) {
+    t7 = keepFocusOutOfList(() => language.editor.focus());
+    $[14] = language;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== view.query || $[17] !== view.title) {
+    t8 = (view.title !== null || view.query !== null) && /*#__PURE__*/_jsxs("div", {
       className: "flex items-baseline gap-2 border-b border-border px-3 py-1.5 text-xs text-text-muted",
       children: [/*#__PURE__*/_jsx("span", {
         className: "min-w-0 truncate",
@@ -309,103 +318,115 @@ export function PickPopup(t0) {
         children: view.query
       })]
     });
-    $[14] = view.query;
-    $[15] = view.title;
-    $[16] = t7;
+    $[16] = view.query;
+    $[17] = view.title;
+    $[18] = t8;
   } else {
-    t7 = $[16];
+    t8 = $[18];
   }
-  let t8;
-  if ($[17] !== language || $[18] !== optionIds || $[19] !== view.active || $[20] !== view.chosen || $[21] !== view.groups || $[22] !== view.query) {
-    t8 = view.groups.map((group_0, groupIndex) => /*#__PURE__*/_jsxs("div", {
+  let t9;
+  if ($[19] !== language || $[20] !== mnemonics || $[21] !== optionIds || $[22] !== view.active || $[23] !== view.chosen || $[24] !== view.groups || $[25] !== view.query) {
+    t9 = view.groups.map((group_1, groupIndex) => /*#__PURE__*/_jsxs("div", {
       role: "group",
       className: "flex flex-col",
-      children: [group_0.title !== null && /*#__PURE__*/_jsx("div", {
+      children: [group_1.title !== null && /*#__PURE__*/_jsx("div", {
         className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint",
-        children: group_0.title
-      }), group_0.rows.map(row_0 => /*#__PURE__*/_jsxs("button", {
-        id: optionIds.get(row_0.id),
-        ref: row_0.id === view.active ? activeRow : undefined,
+        children: group_1.title
+      }), group_1.rows.map(row_1 => /*#__PURE__*/_jsxs("button", {
+        id: optionIds.get(row_1.id),
+        ref: row_1.id === view.active ? activeRow : undefined,
         type: "button",
         role: "option",
         tabIndex: -1,
-        "aria-selected": row_0.id === view.active || view.chosen.includes(row_0.id),
-        "data-active": row_0.id === view.active,
-        "data-chosen": view.chosen.includes(row_0.id),
+        "aria-selected": row_1.id === view.active || view.chosen.includes(row_1.id),
+        "aria-keyshortcuts": row_1.mnemonic,
+        "data-active": row_1.id === view.active,
+        "data-chosen": view.chosen.includes(row_1.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_0 => language.pick.choose(row_0.id, {
+        onClick: event_0 => language.pick.choose(row_1.id, {
           toggle: event_0.metaKey || event_0.ctrlKey,
           range: event_0.shiftKey
         }),
-        children: [/*#__PURE__*/_jsx("span", {
-          className: row_0.path ? "shrink-0" : "min-w-0 truncate",
+        children: [mnemonics && /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          className: "w-3 shrink-0 text-center font-mono text-text-faint",
+          children: row_1.mnemonic
+        }), /*#__PURE__*/_jsx("span", {
+          className: row_1.path ? "shrink-0" : "min-w-0 truncate",
           children: /*#__PURE__*/_jsx(MatchedLabel, {
-            label: row_0.label,
+            label: row_1.label,
             query: view.query
           })
-        }), row_0.path ? /*#__PURE__*/_jsx(PathText, {
-          path: row_0.detail,
+        }), row_1.path ? /*#__PURE__*/_jsx(PathText, {
+          path: row_1.detail,
           className: "ml-auto font-mono text-text-faint"
         }) : /*#__PURE__*/_jsx("span", {
           className: "ml-auto shrink-0 font-mono text-text-faint",
-          children: row_0.id === view.active && row_0.detail === "" ? "\u21B5" : row_0.detail
+          children: row_1.id === view.active && row_1.detail === "" ? "\u21B5" : row_1.detail
         })]
-      }, row_0.id))]
-    }, group_0.title ?? groupIndex));
-    $[17] = language;
-    $[18] = optionIds;
-    $[19] = view.active;
-    $[20] = view.chosen;
-    $[21] = view.groups;
-    $[22] = view.query;
-    $[23] = t8;
+      }, row_1.id))]
+    }, group_1.title ?? groupIndex));
+    $[19] = language;
+    $[20] = mnemonics;
+    $[21] = optionIds;
+    $[22] = view.active;
+    $[23] = view.chosen;
+    $[24] = view.groups;
+    $[25] = view.query;
+    $[26] = t9;
   } else {
-    t8 = $[23];
+    t9 = $[26];
   }
-  let t9;
-  if ($[24] !== listId || $[25] !== t8) {
-    t9 = /*#__PURE__*/_jsx("div", {
+  let t10;
+  if ($[27] !== listId || $[28] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
       id: listId,
       role: "listbox",
       className: "min-h-0 flex-1 overflow-y-auto p-1",
-      children: t8
+      children: t9
     });
-    $[24] = listId;
-    $[25] = t8;
-    $[26] = t9;
+    $[27] = listId;
+    $[28] = t9;
+    $[29] = t10;
   } else {
-    t9 = $[26];
+    t10 = $[29];
   }
-  let t10;
-  if ($[27] !== view.preview) {
-    t10 = view.preview !== null && /*#__PURE__*/_jsx(PreviewLines, {
+  let t11;
+  if ($[30] !== view.preview) {
+    t11 = view.preview !== null && /*#__PURE__*/_jsx(PreviewLines, {
       preview: view.preview
     });
-    $[27] = view.preview;
-    $[28] = t10;
+    $[30] = view.preview;
+    $[31] = t11;
   } else {
-    t10 = $[28];
+    t11 = $[31];
   }
-  let t11;
-  if ($[29] !== t10 || $[30] !== t6 || $[31] !== t7 || $[32] !== t9) {
-    t11 = createPortal(/*#__PURE__*/_jsxs("div", {
+  let t12;
+  if ($[32] !== t10 || $[33] !== t11 || $[34] !== t7 || $[35] !== t8) {
+    t12 = createPortal(/*#__PURE__*/_jsxs("div", {
       ref: card,
       className: CARD,
-      style: t5,
-      onPointerDown: _temp4,
-      ...t6,
-      children: [t7, t9, t10]
+      style: t6,
+      onPointerDown: _temp6,
+      ...t7,
+      children: [t8, t10, t11]
     }), document.body);
-    $[29] = t10;
-    $[30] = t6;
-    $[31] = t7;
-    $[32] = t9;
+    $[32] = t10;
     $[33] = t11;
+    $[34] = t7;
+    $[35] = t8;
+    $[36] = t12;
   } else {
-    t11 = $[33];
+    t12 = $[36];
   }
-  return t11;
+  return t12;
 }
-function _temp4(event) {
+function _temp6(event) {
   return event.preventDefault();
+}
+function _temp5(group_0) {
+  return group_0.rows.some(_temp4);
+}
+function _temp4(row_0) {
+  return row_0.mnemonic !== undefined;
 }

package/dist/completion.d.ts

@@ -1,5 +1,26 @@
+import { type CompletionItem } from '@adecore/lsp';
+import type { EditorPosition } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { type Timers } from './timers.ts';
+/** A row a source of the editor offers beside the language server's. */
+export interface LocalCompletionItem {
+    /** The label, kind, detail, documentation, filter text and sort text of the row; its edit range is the typed prefix on the caret's line, ending at the caret. */
+    readonly item: CompletionItem;
+    /** Runs instead of the insertion: the source inserts the row itself. */
+    accept(): void;
+}
+/** What a source is asked for when the list is requested. */
+export interface CompletionRequest {
+    readonly position: EditorPosition;
+    /** Whether the person asked for the list with the keyboard. */
+    readonly explicit: boolean;
+    readonly triggerCharacter?: string;
+}
+/** Rows that come from the editor itself, such as templates, merged into the list of the language server. */
+export interface CompletionSource {
+    /** Synchronous and cheap; asked on every request of the list. */
+    items(request: CompletionRequest): readonly LocalCompletionItem[];
+}
 export declare class CompletionFeature {
     private readonly language;
     private readonly timers;
@@ -24,9 +45,16 @@ export declare class CompletionFeature {
     private acceptSequence;
     private disposed;
     private readonly resolved;
+    private readonly sources;
+    private locals;
+    private shown;
     constructor(language: EditorLanguage, timers?: Timers);
     get isOpen(): boolean;
     invoke(): void;
+    /** Adds rows to every list, also in a document without a language server. Returns the function that takes the source away again. */
+    addSource(source: CompletionSource): () => void;
+    /** Opens the list with only these rows, the typed prefix starting at `start`, as Insert Live Template does. */
+    showItems(items: readonly LocalCompletionItem[], start: EditorPosition): void;
     move(delta: number): void;
     accept(replace: boolean, index?: number, commit?: string): Promise<void>;
     private insert;

package/dist/completion.js

@@ -101,6 +101,11 @@ export class CompletionFeature {
   acceptSequence = 0;
   disposed = false;
   resolved = new Map();
+  sources = new Set();
+  /* The rows of the list that a source inserts itself. */
+  locals = new Map();
+  /* Whether the list holds the rows `showItems` gave it and no request refreshes it. */
+  shown = false;
   constructor(language, timers = realTimers) {
     this.language = language;
     this.timers = timers;
@@ -132,6 +137,27 @@ export class CompletionFeature {
       triggerKind: 1
     }, 0);
   }
+  /** Adds rows to every list, also in a document without a language server. Returns the function that takes the source away again. */
+  addSource(source) {
+    this.sources.add(source);
+    return () => {
+      this.sources.delete(source);
+    };
+  }
+  /** Opens the list with only these rows, the typed prefix starting at `start`, as Insert Live Template does. */
+  showItems(items, start) {
+    this.language.pick.close();
+    this.close();
+    this.shown = true;
+    this.locals = new Map(items.map(local => [local.item, local]));
+    this.pool = items.map(local => local.item);
+    this.incomplete = false;
+    this.start = start;
+    this.active = 0;
+    this.touched = false;
+    this.server = '';
+    this.refilter();
+  }
   move(delta) {
     if (this.ranked.length === 0) {
       return;
@@ -165,6 +191,13 @@ export class CompletionFeature {
     if (entry === undefined) {
       return;
     }
+    const local = this.locals.get(entry.item);
+    if (local !== undefined) {
+      recentChoicesOf(this.language.languageId).record(entry.item);
+      this.close();
+      local.accept();
+      return;
+    }
     const {
       editor,
       project,
@@ -562,6 +595,8 @@ export class CompletionFeature {
     this.activeKey = null;
     this.start = null;
     this.resolved.clear();
+    this.locals = new Map();
+    this.shown = false;
     if (this.language.popups.getState().completion !== null) {
       this.language.popups.setState({
         completion: null
@@ -621,6 +656,15 @@ export class CompletionFeature {
   }
   edited(change) {
     this.textRevision++;
+    // The rows were given, so typing only filters them.
+    if (this.shown && this.isOpen) {
+      if (change.source === 'input' && change.changes.length === 1 && Array.from(change.changes[0].text).every(isIdentifierCharacter)) {
+        this.refilter();
+      } else {
+        this.close();
+      }
+      return;
+    }
     if (change.source !== 'input' || change.changes.length !== 1) {
       this.close();
       return;
@@ -678,7 +722,7 @@ export class CompletionFeature {
     const {
       uri
     } = this.language;
-    if (!this.language.service.supports(METHOD, uri)) {
+    if (!this.language.service.supports(METHOD, uri) && this.sources.size === 0) {
       return;
     }
     this.timers.clear(this.requestTimer);
@@ -695,26 +739,43 @@ export class CompletionFeature {
     this.controller?.abort();
     const controller = new AbortController();
     this.controller = controller;
-    let normalized;
-    try {
-      const result = await this.language.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();
+    let normalized = {
+      items: [],
+      incomplete: false
+    };
+    let failed = false;
+    if (this.language.service.supports(METHOD, uri)) {
+      try {
+        const result = await this.language.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) {
+          return;
+        }
+        failed = true;
       }
+    }
+    const locals = [...this.sources].flatMap(source => source.items({
+      position,
+      explicit: this.explicit && !refresh,
+      triggerCharacter: context.triggerCharacter
+    }));
+    // A failed request still leaves the rows of the sources.
+    if (failed && locals.length === 0) {
+      this.close();
       return;
     }
     const {
       items,
       incomplete
     } = normalized;
-    this.pool = items;
+    this.pool = [...items, ...locals.map(local => local.item)];
+    this.locals = new Map(locals.map(local => [local.item, local]));
     this.incomplete = incomplete;
     this.resolved.clear();
     this.server = project.host.serverNames?.(uri)[0] ?? '';
@@ -806,7 +867,7 @@ export class CompletionFeature {
     this.timers.clear(this.resolveTimer);
     this.resolving?.abort();
     const entry = this.ranked[this.active];
-    if (entry === undefined || this.resolved.has(entry.item) || this.language.service.providerOptions('completionItem/resolve', uri) === undefined) {
+    if (entry === undefined || this.locals.has(entry.item) || this.resolved.has(entry.item) || this.language.service.providerOptions('completionItem/resolve', uri) === undefined) {
       return;
     }
     const request = this.request;

package/dist/editor-language.d.ts

@@ -30,7 +30,9 @@ import { InlayHintsFeature } from './inlay-hints.ts';
 import { type SemanticTokensOptions } from './semantic-tokens.ts';
 import { SignatureFeature } from './signature.ts';
 import { SnippetFeature } from './snippet-session.ts';
+import { SurroundFeature } from './surround.ts';
 import { SymbolsFeature } from './symbols.ts';
+import { TemplatesFeature } from './live-templates.ts';
 import type { Place } from './navigation-history.ts';
 import type { LanguageDocumentHandle, ProjectLanguage } from './project-language.ts';
 export interface EditorLanguageOptions {
@@ -54,6 +56,8 @@ export declare class EditorLanguage {
     readonly signature: SignatureFeature;
     readonly snippets: SnippetFeature;
     readonly markup: MarkupFeature;
+    readonly templates: TemplatesFeature;
+    readonly surround: SurroundFeature;
     readonly highlights: HighlightsFeature;
     readonly pick: PickFeature;
     readonly codeActions: CodeActionsFeature;

package/dist/editor-language.js

@@ -32,7 +32,9 @@ import { SelectionRangesFeature } from './selection-ranges.js';
 import { SemanticTokensFeature } from './semantic-tokens.js';
 import { SignatureFeature } from './signature.js';
 import { SnippetFeature } from './snippet-session.js';
+import { SurroundFeature } from './surround.js';
 import { SymbolsFeature } from './symbols.js';
+import { TemplatesFeature } from './live-templates.js';
 /* How long the edits servers want before a save are waited for. */
 const SAVE_PARTICIPANT_MS = 1_000;
 /*
@@ -58,6 +60,8 @@ export class EditorLanguage {
   signature;
   snippets;
   markup;
+  templates;
+  surround;
   highlights;
   pick;
   codeActions;
@@ -101,6 +105,8 @@ export class EditorLanguage {
     this.completion = new CompletionFeature(this, timers);
     this.snippets = new SnippetFeature(this, timers);
     this.markup = new MarkupFeature(this);
+    this.templates = new TemplatesFeature(this);
+    this.surround = new SurroundFeature(this);
     this.signature = new SignatureFeature(this, timers);
     this.highlights = new HighlightsFeature(this, timers);
     this.symbols = new SymbolsFeature(this, timers);

package/dist/host-types.d.ts

@@ -6,6 +6,7 @@ import type { ClipboardHistory } from './clipboard-history.ts';
 import type { ProjectFiles } from './workspace-edit.ts';
 import type { Place } from './navigation-history.ts';
 import type { ProblemSource } from './project-problems.ts';
+import type { LiveTemplateDraft, TemplateRegistry } from './templates.ts';
 import type { ServerMessage } from '@adecore/lsp';
 export interface DiskText {
     text: string;
@@ -58,6 +59,9 @@ export interface LanguageHost {
     readonly apple?: boolean;
     readonly keymap?: Keymap;
     readonly clipboard?: ClipboardHistory;
+    readonly templates?: TemplateRegistry;
+    saveAsLiveTemplate?(draft: LiveTemplateDraft): void;
+    openTemplateSettings?(): void;
     readonly editHistoryLimit?: number;
     readonly panelBodyHeight?: number;
     onPanelResize?(height: number): void;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export type { BlameSource, CodeVisionSettings } from './code-vision.ts';
 export type { HoverSettings } from './hover.ts';
 export type { PopupState, PopupStore, HoverInfo, HoverView, CompletionView, CompletionDocs, CompletionRow, SignatureView, RenameView, RenameFileView, PeekView, CallHierarchyView, PickView, PickGroup, PickRow, PickPreview, SymbolsView, MenuView, AuthorsView, WrapView } from './popups.ts';
 export { type MarkupFeature } from './markup.ts';
+export { type SurroundFeature } from './surround.ts';
 export type { MarkupSettings } from './markup.ts';
 export { RowHost, LineActionHost } from './row-host.ts';
 export type { HostedRow, HostedAction } from './row-host.ts';
@@ -43,6 +44,7 @@ export type { Place } from './navigation-history.ts';
 export { EditLocations, type EditPlace } from './edit-locations.ts';
 export { ClipboardHistory, type ClipboardEntry, type ClipboardHistoryOptions } from './clipboard-history.ts';
 export { type PasteHistoryFeature } from './paste-history.ts';
+export { TemplateRegistry, checkTemplate, BUILT_IN_LIVE_TEMPLATES, BUILT_IN_POSTFIX_TEMPLATES, type TemplatesFeature, type LiveTemplate, type PostfixTemplate, type LiveTemplateDraft, type TemplateLanguage, type TemplatePlace, type TemplateSettings, type TemplateRegistryOptions, type TemplateUpdate } from './templates.ts';
 export { openingPlace, viewStates, followViewStates, viewStateKey, forgetMovesFrom } from './view-state.ts';
 export type { ViewState, RevealLineRequest } from './view-state.ts';
 export { lspLanguageIdOf, shikiLanguageOf, shikiLanguageOfPath } from './language-ids.ts';

package/dist/index.js

@@ -20,12 +20,14 @@ export { ProjectProblems, serviceProblems, countsOf } from './project-problems.j
 export { applyWorkspaceEdit, supportedResourceOperations } from './workspace-edit.js';
 export { useProblemCounts } from './use-problem-counts.js';
 export {} from './markup.js';
+export {} from './surround.js';
 export { RowHost, LineActionHost } from './row-host.js';
 export { highlightLayers } from './highlight-layers.js';
 export {} from './navigation-history.js';
 export { EditLocations } from './edit-locations.js';
 export { ClipboardHistory } from './clipboard-history.js';
 export {} from './paste-history.js';
+export { TemplateRegistry, checkTemplate, BUILT_IN_LIVE_TEMPLATES, BUILT_IN_POSTFIX_TEMPLATES } from './templates.js';
 export { openingPlace, viewStates, followViewStates, viewStateKey, forgetMovesFrom } from './view-state.js';
 export { lspLanguageIdOf, shikiLanguageOf, shikiLanguageOfPath } from './language-ids.js';
 export { AttributionCard } from "./AttributionCard.js";

package/dist/key-priority.d.ts

@@ -5,6 +5,7 @@ export declare const KEY_PRIORITY: {
     readonly hover: 1400;
     readonly completion: 1300;
     readonly snippets: 1200;
+    readonly templates: 1150;
     readonly markup: 1100;
     readonly signature: 1000;
     readonly highlights: 900;

package/dist/key-priority.js

@@ -8,6 +8,8 @@ export const KEY_PRIORITY = {
   hover: 1400,
   completion: 1300,
   snippets: 1200,
+  // Between snippets and markup, so the spacing of a hundred bends here: Tab has to reach the templates after a running snippet and before Emmet.
+  templates: 1150,
   markup: 1100,
   signature: 1000,
   highlights: 900,

package/dist/live-templates.d.ts

@@ -0,0 +1,16 @@
+import type { EditorLanguage } from './editor-language.ts';
+export declare class TemplatesFeature {
+    private readonly language;
+    private readonly postfix;
+    constructor(language: EditorLanguage);
+    expand(): boolean;
+    insert(): void;
+    saveSelection(): boolean;
+    private customKey;
+    private matchAtCarets;
+    private matchAt;
+    private expandAtCarets;
+    private run;
+    private rows;
+    private row;
+}