@adecore/editor-react 0.42.0 → 0.44.0

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,
@@ -198,7 +231,7 @@ export class CompletionFeature {
     };
     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;
+    const needsResolve = !this.resolved.has(entry.item) && this.language.service.providerOptions('completionItem/resolve', uri) !== undefined;
     this.close();
     if (needsResolve) {
       // Resolving can add the import an item needs; an item that cannot be resolved is still inserted as it is.
@@ -482,7 +515,6 @@ export class CompletionFeature {
   afterInsert(item, commit, lineBefore) {
     const {
       editor,
-      project,
       uri,
       signature
     } = this.language;
@@ -508,7 +540,7 @@ export class CompletionFeature {
     if (command.command === PARAMETER_HINTS_COMMAND) {
       signature.trigger();
     } else {
-      project.service.executeCommand(uri, command).catch(() => undefined);
+      this.language.service.executeCommand(uri, command).catch(() => undefined);
     }
   }
   /*
@@ -519,13 +551,12 @@ export class CompletionFeature {
   async resolveNow(item, signal) {
     const {
       editor,
-      project,
       uri
     } = this.language;
     try {
       return {
         ...item,
-        ...(await project.service.resolveCompletion(uri, item, {
+        ...(await this.language.service.resolveCompletion(uri, item, {
           signal
         }))
       };
@@ -535,14 +566,14 @@ export class CompletionFeature {
       }
     }
     try {
-      const fresh = itemsOf(await project.service.completion(uri, editor.getCaret(), {
+      const fresh = itemsOf(await this.language.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, {
+        ...(await this.language.service.resolveCompletion(uri, fresh, {
           signal
         }).catch(() => fresh))
       };
@@ -564,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
@@ -623,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;
@@ -672,17 +714,15 @@ export class CompletionFeature {
   }
   triggerCharacters() {
     const {
-      project,
       uri
     } = this.language;
-    return project.service.providerOptions(METHOD, uri)?.triggerCharacters ?? [];
+    return this.language.service.providerOptions(METHOD, uri)?.triggerCharacters ?? [];
   }
   beginRequest(context, delay) {
     const {
-      project,
       uri
     } = this.language;
-    if (!project.service.supports(METHOD, uri)) {
+    if (!this.language.service.supports(METHOD, uri) && this.sources.size === 0) {
       return;
     }
     this.timers.clear(this.requestTimer);
@@ -699,26 +739,43 @@ export class CompletionFeature {
     this.controller?.abort();
     const controller = new AbortController();
     this.controller = controller;
-    let normalized;
-    try {
-      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();
+    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] ?? '';
@@ -805,20 +862,19 @@ export class CompletionFeature {
   }
   scheduleResolve() {
     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) {
+    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;
     this.resolveTimer = this.timers.set(() => {
       const controller = new AbortController();
       this.resolving = controller;
-      void project.service.resolveCompletion(uri, entry.item, {
+      void this.language.service.resolveCompletion(uri, entry.item, {
         signal: controller.signal
       }).then(item => {
         this.resolved.set(entry.item, {

package/dist/context-menu-rows.d.ts

@@ -1,6 +1,6 @@
 import type { KeymapId } from '@adecore/editor/keymap';
 import type { NavigationKind } from './navigation.ts';
-export type MenuRowId = NavigationKind | 'peekReferences' | 'callHierarchy' | 'renameSymbol' | 'codeActions';
+export type MenuRowId = NavigationKind | 'peekReferences' | 'callHierarchy' | 'typeHierarchy' | 'renameSymbol' | 'codeActions';
 export interface MenuRowSpec {
     readonly id: MenuRowId;
     readonly method: string;

package/dist/context-menu-rows.js

@@ -24,6 +24,10 @@ const REFERENCES = [{
   id: 'callHierarchy',
   method: 'textDocument/prepareCallHierarchy',
   shortcut: 'callHierarchy'
+}, {
+  id: 'typeHierarchy',
+  method: 'textDocument/prepareTypeHierarchy',
+  shortcut: 'typeHierarchy'
 }];
 const CHANGES = [{
   id: 'renameSymbol',

package/dist/definition-link.js

@@ -25,8 +25,8 @@ export function followModKey(apple, onHeld) {
 }
 /*
  * The name under the pointer drawn as a link while Cmd (Ctrl elsewhere) is held and a server knows where it
- * is defined, which is what a Mod+click on it follows. The editor only says where the pointer is, so the
- * key comes from the window.
+ * is defined, which is what a Mod+click on it follows. A document link under the pointer goes first. The
+ * editor only says where the pointer is, so the key comes from the window.
  */
 export class DefinitionLinkFeature {
   language;
@@ -71,13 +71,23 @@ export class DefinitionLinkFeature {
     const {
       pointer
     } = this;
-    if (!this.held || pointer === null || !this.language.project.service.supports('textDocument/definition', this.language.uri)) {
+    const link = pointer === null ? null : this.language.links.rangeAt(pointer);
+    if (this.held && link !== null) {
+      const key = `link:${link.start.line}:${link.start.character}`;
+      if (key !== this.shownKey) {
+        this.clear();
+        this.shownKey = key;
+        this.drawn = true;
+        this.language.editor.setLink(link);
+      }
+      return;
+    }
+    if (!this.held || pointer === null || !this.language.service.supports('textDocument/definition', this.language.uri)) {
       this.clear();
       return;
     }
     const {
       editor,
-      project,
       uri
     } = this.language;
     const line = lineTextOf(editor, pointer.line);
@@ -95,7 +105,7 @@ export class DefinitionLinkFeature {
     const request = ++this.request;
     const controller = new AbortController();
     this.lookup = controller;
-    project.service.definition(uri, pointer, {
+    this.language.service.definition(uri, pointer, {
       signal: controller.signal
     }).then(result => {
       if (request === this.request && locationsOf(result).length > 0) {

package/dist/document-colors.d.ts

@@ -0,0 +1,24 @@
+import type { Color, ColorInformation, ColorPresentation, TextEdit } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import { type Timers } from './timers.ts';
+export declare function cssColorOf(color: Color): string;
+export declare function colorOfHex(value: string): Color | null;
+export declare function presentationEdits(presentation: ColorPresentation, information: ColorInformation): TextEdit[];
+export declare class DocumentColorsFeature {
+    private readonly language;
+    private colors;
+    private readonly query;
+    private enabled;
+    constructor(language: EditorLanguage, timers?: Timers);
+    get supported(): boolean;
+    all(): readonly ColorInformation[];
+    configure(settings: {
+        readonly enabled?: boolean;
+    }): void;
+    presentations(information: ColorInformation, color?: Color): Promise<ColorPresentation[]>;
+    apply(presentation: ColorPresentation, information: ColorInformation): boolean;
+    private show;
+    private pressed;
+    private open;
+    private choose;
+}

package/dist/document-colors.js

@@ -0,0 +1,194 @@
+import { DocumentQuery } from './document-query.js';
+import { realTimers } from './timers.js';
+const METHOD = 'textDocument/documentColor';
+const OWNER = 'document-colors';
+const DELAY_MS = 500;
+const ID_PREFIX = 'color-';
+const OTHER_COLOR = 'other';
+/* A color of LSP, each part from 0 to 1, as CSS draws it. */
+export function cssColorOf(color) {
+  const part = value => String(Math.round(Math.min(1, Math.max(0, value)) * 1000) / 1000);
+  return `color(srgb ${part(color.red)} ${part(color.green)} ${part(color.blue)} / ${part(color.alpha)})`;
+}
+/* `#rrggbb` of an `<input type="color">` as a color of LSP, opaque. */
+export function colorOfHex(value) {
+  const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(value);
+  if (match === null) {
+    return null;
+  }
+  return {
+    red: parseInt(match[1], 16) / 255,
+    green: parseInt(match[2], 16) / 255,
+    blue: parseInt(match[3], 16) / 255,
+    alpha: 1
+  };
+}
+function hexOf(color) {
+  const part = value => Math.round(Math.min(1, Math.max(0, value)) * 255).toString(16).padStart(2, '0');
+  return `#${part(color.red)}${part(color.green)}${part(color.blue)}`;
+}
+/* The edits a presentation makes: its own text edit, or its label over the color, and the edits that come with it. */
+export function presentationEdits(presentation, information) {
+  return [presentation.textEdit ?? {
+    range: information.range,
+    newText: presentation.label
+  }, ...(presentation.additionalTextEdits ?? [])];
+}
+/*
+ * The colors a server finds in the text, such as `#ff0000` in a stylesheet, each with a swatch before it. A press on
+ * a swatch lists the ways the server writes that color, so `rgb()` can become `#hex`, and offers a color of the
+ * platform's picker, which keeps the way the color was written when the server offers it.
+ */
+export class DocumentColorsFeature {
+  language;
+  colors = [];
+  query;
+  enabled = true;
+  constructor(language, timers = realTimers) {
+    this.language = language;
+    this.query = new DocumentQuery(language, timers, DELAY_MS, signal => this.enabled && this.supported ? language.service.documentColors(language.uri, {
+      signal
+    }) : Promise.resolve(null), colors => this.show(colors ?? []));
+    const {
+      editor
+    } = language;
+    if (editor.onInlayClick !== undefined) {
+      language.onDispose(editor.onInlayClick(click => this.pressed(click)));
+    }
+    language.onDispose(() => editor.setInlayHints([], OWNER));
+  }
+  get supported() {
+    const {
+      service
+    } = this.language;
+    return service.documentColors !== undefined && service.supports(METHOD, this.language.uri);
+  }
+  /* The colors of the current text, empty while an edit waits for the next answer. */
+  all() {
+    return this.colors;
+  }
+  /* Off, there are no swatches; on unless false. */
+  configure(settings) {
+    this.enabled = settings.enabled !== false;
+    if (this.enabled) {
+      this.query.run();
+    } else {
+      this.show([]);
+    }
+  }
+  /* The ways the server writes a color found in the text, for a menu of the host. */
+  async presentations(information, color = information.color) {
+    const {
+      service
+    } = this.language;
+    if (service.colorPresentations === undefined) {
+      return [];
+    }
+    try {
+      return (await service.colorPresentations(this.language.uri, color, information.range)) ?? [];
+    } catch {
+      return [];
+    }
+  }
+  /* Writes a presentation in place of the color it was asked for; false when the text moved on since. */
+  apply(presentation, information) {
+    if (!this.colors.includes(information)) {
+      return false;
+    }
+    const changes = presentationEdits(presentation, information).map(edit => ({
+      range: edit.range,
+      text: edit.newText
+    }));
+    return this.language.editor.applyEdits(changes);
+  }
+  show(colors) {
+    this.colors = colors;
+    const hints = colors.map((information, index) => ({
+      id: `${ID_PREFIX}${index}`,
+      position: information.range.start,
+      label: this.language.project.i18n.t('editor:language.colors.swatch', {
+        color: hexOf(information.color)
+      }),
+      swatch: cssColorOf(information.color),
+      paddingRight: true
+    }));
+    this.language.editor.setInlayHints(hints, OWNER);
+  }
+  pressed(click) {
+    if (!click.id.startsWith(ID_PREFIX)) {
+      return false;
+    }
+    const information = this.colors[Number(click.id.slice(ID_PREFIX.length))];
+    if (information === undefined) {
+      return false;
+    }
+    void this.open(information);
+    return true;
+  }
+  async open(information) {
+    const presentations = await this.presentations(information);
+    if (!this.colors.includes(information)) {
+      return;
+    }
+    const {
+      pick,
+      project
+    } = this.language;
+    const rows = presentations.map((presentation, index) => ({
+      id: String(index),
+      label: presentation.label,
+      detail: ''
+    }));
+    pick.open({
+      anchor: information.range.start,
+      title: project.i18n.t('editor:language.colors.title'),
+      groups: [{
+        title: null,
+        rows
+      }, {
+        title: null,
+        rows: [{
+          id: OTHER_COLOR,
+          label: project.i18n.t('editor:language.colors.other'),
+          detail: ''
+        }]
+      }],
+      accept: id => {
+        if (id === OTHER_COLOR) {
+          this.choose(information, presentations);
+        } else {
+          this.apply(presentations[Number(id)], information);
+        }
+      }
+    });
+  }
+  /* The platform's color picker; the new color is written the way the old one was when the server offers that. */
+  choose(information, before) {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const written = this.language.editor.textInRange(information.range);
+    const form = Math.max(0, before.findIndex(presentation => presentation.label === written));
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.value = hexOf(information.color);
+    input.addEventListener('change', () => {
+      const color = colorOfHex(input.value);
+      if (color === null) {
+        return;
+      }
+      void this.presentations(information, {
+        ...color,
+        alpha: information.color.alpha
+      }).then(presentations => {
+        const presentation = presentations[form] ?? presentations[0];
+        if (presentation !== undefined) {
+          this.apply(presentation, information);
+        }
+      });
+    }, {
+      once: true
+    });
+    input.click();
+  }
+}

package/dist/document-links.d.ts

@@ -0,0 +1,22 @@
+import type { EditorPosition, EditorRange } from '@adecore/editor';
+import type { DocumentLink } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import { type Timers } from './timers.ts';
+export declare function linkPosition(target: string): {
+    readonly uri: string;
+    readonly position: EditorPosition;
+};
+export declare class DocumentLinksFeature {
+    private readonly language;
+    private links;
+    private readonly query;
+    constructor(language: EditorLanguage, timers?: Timers);
+    get supported(): boolean;
+    all(): readonly DocumentLink[];
+    linkAt(position: EditorPosition): DocumentLink | null;
+    rangeAt(position: EditorPosition): EditorRange | null;
+    refresh(): void;
+    follow(link: DocumentLink): Promise<boolean>;
+    private resolve;
+}
+export declare function openTarget(language: EditorLanguage, target: string, selection?: EditorRange): void;

package/dist/document-links.js

@@ -0,0 +1,133 @@
+import { comparePositions } from './diagnostics-model.js';
+import { DocumentQuery } from './document-query.js';
+import { realTimers } from './timers.js';
+const METHOD = 'textDocument/documentLink';
+const RESOLVE = 'documentLink/resolve';
+/* How long after the last edit the links are asked again. */
+const DELAY_MS = 500;
+/* `#L12`, `#12` or `#L12,4`: a line, from one, and a column, from one, the form editors write into a link. */
+const LINE_FRAGMENT = /^#L?(\d+)(?:[,:C](\d+))?$/i;
+/* Where a link to a file of the editor lands, from the line its fragment names; the start of the file without one. */
+export function linkPosition(target) {
+  const hash = target.indexOf('#');
+  const fragment = hash === -1 ? null : LINE_FRAGMENT.exec(target.slice(hash));
+  if (fragment === null) {
+    return {
+      uri: target,
+      position: {
+        line: 0,
+        character: 0
+      }
+    };
+  }
+  return {
+    uri: target.slice(0, hash),
+    position: {
+      line: Math.max(0, Number(fragment[1]) - 1),
+      character: Math.max(0, Number(fragment[2] ?? 1) - 1)
+    }
+  };
+}
+/* Whether a target opens in the editor: a file, or a document of a scheme a server serves. A web address opens outside. */
+function opensInEditor(target) {
+  return !/^(https?|mailto|ftp):/i.test(target);
+}
+/*
+ * The links a server finds in the text, such as an import path or a web address in a comment. Mod+click on one
+ * follows it, and while Mod is held the link under the pointer is drawn as one (`DefinitionLinkFeature` draws it).
+ * A link without a target asks the server for it first.
+ */
+export class DocumentLinksFeature {
+  language;
+  links = [];
+  query;
+  constructor(language, timers = realTimers) {
+    this.language = language;
+    this.query = new DocumentQuery(language, timers, DELAY_MS, signal => this.supported ? language.service.documentLinks(language.uri, {
+      signal
+    }) : Promise.resolve(null), links => {
+      this.links = links ?? [];
+    });
+    const off = language.editor.onClick(click => {
+      if (!click.mod || click.alt || click.shift) {
+        return false;
+      }
+      const link = this.linkAt(click.position);
+      if (link === null) {
+        return false;
+      }
+      void this.follow(link);
+      return true;
+    });
+    language.onDispose(off);
+  }
+  get supported() {
+    const {
+      service
+    } = this.language;
+    return service.documentLinks !== undefined && service.supports(METHOD, this.language.uri);
+  }
+  /* The links of the current text, empty while an edit waits for the next answer. */
+  all() {
+    return this.links;
+  }
+  /* The link whose range holds `position`, its end left out. */
+  linkAt(position) {
+    return this.links.find(link => comparePositions(link.range.start, position) <= 0 && comparePositions(position, link.range.end) < 0) ?? null;
+  }
+  /* The range of the link at `position`, which the pointer draws as a link while Mod is held. */
+  rangeAt(position) {
+    return this.linkAt(position)?.range ?? null;
+  }
+  refresh() {
+    this.query.run();
+  }
+  /* Opens what a link points at; false when it has no target, even after asking. */
+  async follow(link) {
+    const target = link.target ?? (await this.resolve(link))?.target;
+    if (target === undefined) {
+      return false;
+    }
+    openTarget(this.language, target);
+    return true;
+  }
+  async resolve(link) {
+    const {
+      service
+    } = this.language;
+    if (service.resolveDocumentLink === undefined || service.providerOptions(RESOLVE, this.language.uri)?.resolveProvider !== true) {
+      return null;
+    }
+    try {
+      return await service.resolveDocumentLink(this.language.uri, link);
+    } catch {
+      return null;
+    }
+  }
+}
+/* Opens a file or a document of a server in the editor, and a web address through the host. */
+export function openTarget(language, target, selection) {
+  if (!opensInEditor(target)) {
+    const {
+      host
+    } = language.project;
+    if (host.openExternal !== undefined) {
+      host.openExternal(target);
+    } else if (typeof window !== 'undefined') {
+      window.open(target, '_blank', 'noopener,noreferrer');
+    }
+    return;
+  }
+  const {
+    uri,
+    position
+  } = linkPosition(target);
+  const range = selection ?? {
+    start: position,
+    end: position
+  };
+  language.goTo({
+    uri,
+    range
+  });
+}

package/dist/document-query.d.ts

@@ -0,0 +1,15 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { Timers } from './timers.ts';
+export declare class DocumentQuery<Value> {
+    private readonly language;
+    private readonly timers;
+    private readonly delay;
+    private readonly ask;
+    private readonly apply;
+    private timer;
+    private controller;
+    private generation;
+    constructor(language: EditorLanguage, timers: Timers, delay: number, ask: (signal: AbortSignal) => Promise<Value | null>, apply: (value: Value | null) => void);
+    run(): void;
+    private cancel;
+}