@adecore/editor-react 0.42.0 → 0.43.0

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;
+}

package/dist/document-query.js

@@ -0,0 +1,54 @@
+/*
+ * Asks the servers for something of the whole document: once it is open, a moment after the last edit, and
+ * whenever what the servers offer changes. An edit clears the answer at once, since its ranges point into a
+ * text that is gone; an answer for an older text is dropped.
+ */
+export class DocumentQuery {
+  language;
+  timers;
+  delay;
+  ask;
+  apply;
+  timer = null;
+  controller = null;
+  generation = 0;
+  constructor(language, timers, delay, ask, apply) {
+    this.language = language;
+    this.timers = timers;
+    this.delay = delay;
+    this.ask = ask;
+    this.apply = apply;
+    const offs = [language.onProvidersChanged(() => this.run()), language.editor.onTextChange(() => {
+      this.cancel();
+      this.apply(null);
+      this.timer = this.timers.set(() => this.run(), this.delay);
+    })];
+    language.onDispose(() => {
+      this.cancel();
+      for (const off of offs) {
+        off();
+      }
+    });
+  }
+  /* Asks again now, as a refresh of the host does. */
+  run() {
+    this.cancel();
+    const generation = this.generation;
+    const controller = new AbortController();
+    this.controller = controller;
+    this.ask(controller.signal).then(value => {
+      if (generation === this.generation && !this.language.isDisposed) {
+        this.apply(value);
+      }
+    },
+    // A server that fails or refuses answers nothing; the next edit asks again.
+    () => undefined);
+  }
+  cancel() {
+    this.generation++;
+    this.timers.clear(this.timer);
+    this.timer = null;
+    this.controller?.abort();
+    this.controller = null;
+  }
+}

package/dist/edit-locations.d.ts

@@ -0,0 +1,20 @@
+import type { EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
+export interface EditPlace {
+    readonly uri: string;
+    readonly selections: readonly EditorRange[];
+}
+export declare class EditLocations {
+    private readonly limit;
+    private entries;
+    private index;
+    private arriving;
+    constructor(limit?: number);
+    get places(): readonly EditPlace[];
+    record(place: EditPlace): void;
+    moved(uri: string, position: EditorPosition): void;
+    previous(current: EditPlace | null): EditPlace | null;
+    next(current: EditPlace | null): EditPlace | null;
+    map(uri: string, changes: readonly EditorContentChange[]): void;
+    forget(matches: (uri: string) => boolean): void;
+    private arrive;
+}

package/dist/edit-locations.js

@@ -0,0 +1,136 @@
+const LIMIT = 150;
+/* Two places are one when they are in one file with as many carets, and every caret is within three lines of its twin. */
+function isSame(left, right) {
+  return right !== null && left.uri === right.uri && left.selections.length === right.selections.length && left.selections.every((selection, index) => Math.abs(selection.end.line - right.selections[index].end.line) < 4);
+}
+function before(left, right) {
+  return left.line < right.line || left.line === right.line && left.character < right.character;
+}
+/* Where the text of a change ends, in the text after the change. */
+function endOf(change) {
+  const lines = change.text.split('\n');
+  const {
+    start
+  } = change.range;
+  return lines.length === 1 ? {
+    line: start.line,
+    character: start.character + change.text.length
+  } : {
+    line: start.line + lines.length - 1,
+    character: lines[lines.length - 1].length
+  };
+}
+/* A position after a change: untouched in front of it, at the start when the change replaced the text around it, moved along behind it. */
+function follow(position, change) {
+  const {
+    start,
+    end
+  } = change.range;
+  if (!before(start, position)) {
+    return position;
+  }
+  if (before(position, end)) {
+    return start;
+  }
+  const landed = endOf(change);
+  return position.line === end.line ? {
+    line: landed.line,
+    character: landed.character + position.character - end.character
+  } : {
+    line: position.line + landed.line - end.line,
+    character: position.character
+  };
+}
+/*
+ * Where the project was edited, for Last Edit Location and Next Edit Location. An edit within three lines of the
+ * last one is the same place, so typing a paragraph is one stop. A caret that moves without an edit puts the walk
+ * back at the end, and so does an edit.
+ */
+export class EditLocations {
+  limit;
+  entries = [];
+  index = 0;
+  arriving = null;
+  constructor(limit = LIMIT) {
+    this.limit = limit;
+  }
+  get places() {
+    return this.entries;
+  }
+  /* An edit left the carets here. */
+  record(place) {
+    const last = this.entries.at(-1);
+    if (last !== undefined && isSame(last, place)) {
+      this.entries[this.entries.length - 1] = place;
+    } else {
+      this.entries.push(place);
+      if (this.entries.length > this.limit) {
+        this.entries.shift();
+      }
+    }
+    this.index = this.entries.length;
+    this.arriving = null;
+  }
+  /* The caret moved without an edit. The move that lands on the place a walk went to does not count. */
+  moved(uri, position) {
+    if (this.arriving?.uri === uri && this.arriving.line === position.line) {
+      return;
+    }
+    this.arriving = null;
+    this.index = this.entries.length;
+  }
+  /* The place of an earlier edit that is not the one the carets are on; null when there is none. */
+  previous(current) {
+    for (let i = this.index - 1; i >= 0; i--) {
+      if (!isSame(this.entries[i], current)) {
+        this.index = i;
+        return this.arrive(this.entries[i]);
+      }
+    }
+    return null;
+  }
+  /* The place of a later edit; it moves one past the place it returns, so Last Edit Location and Next Edit Location are not exact opposites. */
+  next(current) {
+    for (let i = this.index; i < this.entries.length; i++) {
+      if (!isSame(this.entries[i], current)) {
+        this.index = i + 1;
+        return this.arrive(this.entries[i]);
+      }
+    }
+    return null;
+  }
+  /* The places of a file follow its edits, in the order the editor made them. */
+  map(uri, changes) {
+    if (!this.entries.some(entry => entry.uri === uri)) {
+      return;
+    }
+    this.entries = this.entries.map(entry => {
+      if (entry.uri !== uri) {
+        return entry;
+      }
+      const selections = changes.reduce((current, change) => current.map(selection => ({
+        start: follow(selection.start, change),
+        end: follow(selection.end, change)
+      })), entry.selections);
+      return {
+        uri,
+        selections
+      };
+    });
+  }
+  /* Drops the places of files that are gone. */
+  forget(matches) {
+    this.entries = this.entries.filter(entry => !matches(entry.uri));
+    this.index = this.entries.length;
+    if (this.arriving !== null && matches(this.arriving.uri)) {
+      this.arriving = null;
+    }
+  }
+  arrive(place) {
+    this.arriving = {
+      uri: place.uri,
+      line: place.selections.at(-1).end.line
+    };
+    return place;
+  }
+}

package/dist/editor-language.d.ts

@@ -1,6 +1,10 @@
 import { type Keymap } from '@adecore/editor/keymap';
 import type { Editor, EditorKeyHandler, EditorPosition } from '@adecore/editor';
-import type { Location } from '@adecore/lsp';
+import type { LanguageService, Location, TextDocumentSaveReason } from '@adecore/lsp';
+import { DocumentColorsFeature } from './document-colors.ts';
+import { DocumentLinksFeature } from './document-links.ts';
+import { InlineCompletionFeature } from './inline-completion.ts';
+import { LinkedEditingFeature } from './linked-editing.ts';
 import { CallHierarchyFeature } from './call-hierarchy.ts';
 import { CodeActionsFeature } from './code-actions.ts';
 import { CodeVisionFeature } from './code-vision.ts';
@@ -12,7 +16,9 @@ import { FormatOnTypeFeature } from './format-on-type.ts';
 import { HighlightsFeature } from './highlights.ts';
 import { HistoryFeature } from './history.ts';
 import { HoverFeature } from './hover.ts';
+import { MarkupFeature } from './markup.ts';
 import { NavigationFeature } from './navigation.ts';
+import { PasteHistoryFeature } from './paste-history.ts';
 import { PeekFeature } from './peek.ts';
 import { PickFeature } from './pick.ts';
 import { SymbolPickerFeature } from './symbol-picker.ts';
@@ -29,6 +35,7 @@ import type { Place } from './navigation-history.ts';
 import type { LanguageDocumentHandle, ProjectLanguage } from './project-language.ts';
 export interface EditorLanguageOptions {
     semanticTokens?: SemanticTokensOptions;
+    serve?: boolean;
 }
 export declare class EditorLanguage {
     readonly editor: Editor;
@@ -38,6 +45,7 @@ export declare class EditorLanguage {
     readonly project: ProjectLanguage;
     readonly document: LanguageDocumentHandle;
     readonly languageId: string;
+    readonly served: boolean;
     readonly popups: import("./popups.ts").PopupStore;
     readonly diagnostics: DiagnosticsFeature;
     readonly hover: HoverFeature;
@@ -45,6 +53,7 @@ export declare class EditorLanguage {
     readonly completion: CompletionFeature;
     readonly signature: SignatureFeature;
     readonly snippets: SnippetFeature;
+    readonly markup: MarkupFeature;
     readonly highlights: HighlightsFeature;
     readonly pick: PickFeature;
     readonly codeActions: CodeActionsFeature;
@@ -60,11 +69,18 @@ export declare class EditorLanguage {
     readonly codeVision: CodeVisionFeature;
     readonly formatOnType: FormatOnTypeFeature;
     readonly renderedDocs: RenderedDocsFeature;
+    readonly pasteHistory: PasteHistoryFeature;
+    readonly links: DocumentLinksFeature;
+    readonly colors: DocumentColorsFeature;
+    readonly linkedEditing: LinkedEditingFeature;
+    readonly inlineCompletion: InlineCompletionFeature;
     private readonly disposers;
     private readonly keys;
+    private readonly timers;
     private disposed;
     constructor(project: ProjectLanguage, editor: Editor, uri: string, languageId: string, timers?: Timers, options?: EditorLanguageOptions);
     get uri(): string;
+    get service(): LanguageService;
     get isDisposed(): boolean;
     get place(): Place;
     goTo(location: Location): void;
@@ -73,7 +89,9 @@ export declare class EditorLanguage {
     locations(places: readonly Location[], anchor: EditorPosition, title: string): void;
     onProvidersChanged(listener: () => void): () => void;
     onKey(handler: EditorKeyHandler, priority?: number): () => void;
+    prepareSave(reason?: TextDocumentSaveReason): Promise<void>;
     onDispose(dispose: () => void): void;
     dispose(): void;
+    private otherTexts;
     private placeOpenedCaret;
 }