@adecore/editor-react 0.42.0 → 0.43.0

package/dist/markup.js

@@ -0,0 +1,453 @@
+import { abbreviationBefore, expandAbbreviation } from './emmet.js';
+import { KEY_PRIORITY } from './key-priority.js';
+import { lineTextOf } from './line-text.js';
+import { isVoidElement, markupPlaceAt, markupSyntaxOf, tagPairAt } from './markup-context.js';
+import { isShortcut } from './shortcut-keys.js';
+import { parseSnippet } from './snippet.js';
+import { indentSnippet } from './snippet-indent.js';
+import { positionInInsertion } from './snippet-session.js';
+const NAME = /^[\w:.-]*$/;
+const NAME_BEFORE = /<\/?[\w:.-]*$/;
+/*
+ * Writing HTML, XML, the template of a Vue file and the markup of PHP: Emmet abbreviations, end tags that
+ * write themselves and tag names that change in pairs. The edits it adds join the undo step of the key that
+ * caused them. It does nothing in other languages, in a document over `MAX_MARKUP_SCAN` characters, or with more
+ * than one caret.
+ */
+export class MarkupFeature {
+  language;
+  syntax;
+  settings = {
+    emmet: true,
+    closeTags: true,
+    linkedTags: true
+  };
+  link = null;
+  wrapping = null;
+  /* Raised by every change of the text, so a follow-up edit for an older text is dropped. */
+  revision = 0;
+  mirroring = false;
+  constructor(language) {
+    this.language = language;
+    this.syntax = markupSyntaxOf(language.languageId);
+    if (this.syntax === null) {
+      return;
+    }
+    const {
+      editor
+    } = language;
+    const offs = [language.onKey(event => this.key(event), KEY_PRIORITY.markup), editor.onTextChange(change => this.edited(change)), editor.onCaret(() => this.moved())];
+    language.onDispose(() => {
+      this.cancelWrap();
+      for (const off of offs) {
+        off();
+      }
+    });
+  }
+  /* Whether the language of the document is markup this feature writes. */
+  get supported() {
+    return this.syntax !== null;
+  }
+  configure(settings) {
+    this.settings = {
+      emmet: settings.emmet !== false,
+      closeTags: settings.closeTags !== false,
+      linkedTags: settings.linkedTags !== false
+    };
+    if (!this.settings.linkedTags) {
+      this.link = null;
+    }
+  }
+  /* Expands the abbreviation before the caret, its places to fill as a snippet; false when there is none, which leaves Tab its own meaning. */
+  expand() {
+    const {
+      syntax
+    } = this;
+    const {
+      editor
+    } = this.language;
+    if (syntax === null || !this.settings.emmet || !this.editable()) {
+      return false;
+    }
+    const caret = editor.getCaret();
+    const line = lineTextOf(editor, caret.line);
+    const found = abbreviationBefore(line, caret.character);
+    if (found === null) {
+      return false;
+    }
+    const range = {
+      start: {
+        line: caret.line,
+        character: found.start
+      },
+      end: {
+        line: caret.line,
+        character: found.end
+      }
+    };
+    if (markupPlaceAt(editor.getText(), editor.offsetAt(range.start), syntax)?.kind !== 'text') {
+      return false;
+    }
+    const expanded = expandAbbreviation(found.abbreviation, {
+      syntax,
+      indent: this.indent()
+    });
+    return expanded !== null && this.insert(range, expanded, line);
+  }
+  /* Opens the field for an abbreviation to wrap the selection in, or the text of the caret's line without one. */
+  startWrap() {
+    const {
+      editor,
+      popups
+    } = this.language;
+    if (this.syntax === null || !this.editable(true)) {
+      return false;
+    }
+    const range = this.wrapTarget();
+    if (range === null) {
+      return false;
+    }
+    this.cancelWrap();
+    this.wrapping = editor.trackRange(range);
+    popups.setState({
+      wrap: {
+        anchor: range.start,
+        error: null
+      }
+    });
+    return true;
+  }
+  /* Wraps the text the field was opened over; false, with the reason in the field, when the abbreviation does not expand. */
+  submitWrap(abbreviation) {
+    const {
+      syntax
+    } = this;
+    const {
+      editor,
+      popups,
+      project
+    } = this.language;
+    const range = this.wrapping?.get() ?? null;
+    if (syntax === null || range === null) {
+      this.cancelWrap();
+      return false;
+    }
+    const expanded = expandAbbreviation(abbreviation.trim(), {
+      syntax,
+      indent: this.indent(),
+      wrap: this.wrapLines(range)
+    });
+    if (expanded === null) {
+      popups.setState({
+        wrap: {
+          anchor: range.start,
+          error: project.i18n.t('editor:language.markup.invalid')
+        }
+      });
+      return false;
+    }
+    this.cancelWrap();
+    const inserted = this.insert(range, expanded, lineTextOf(editor, range.start.line));
+    editor.focus();
+    return inserted;
+  }
+  cancelWrap() {
+    this.wrapping?.dispose();
+    this.wrapping = null;
+    if (this.language.popups.getState().wrap !== null) {
+      this.language.popups.setState({
+        wrap: null
+      });
+    }
+  }
+  key(event) {
+    if (isShortcut(this.language.shortcuts.wrapWithAbbreviation, event)) {
+      return this.startWrap();
+    }
+    if (event.key !== 'Tab' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.isComposing) {
+      return false;
+    }
+    return this.expand();
+  }
+  editable(selection = false) {
+    const {
+      editor
+    } = this.language;
+    const selections = editor.getSelections();
+    if (editor.isReadOnly?.() === true || selections.length !== 1) {
+      return false;
+    }
+    const {
+      start,
+      end
+    } = selections[0];
+    return selection || start.line === end.line && start.character === end.character;
+  }
+  indent() {
+    const {
+      tabSize,
+      insertSpaces
+    } = this.language.editor.getIndentation();
+    return insertSpaces ? ' '.repeat(tabSize) : '\t';
+  }
+  /* The selection without the whitespace around it, or the text of the caret's line; null when that is blank. */
+  wrapTarget() {
+    const {
+      editor
+    } = this.language;
+    const selection = editor.getSelection();
+    const text = editor.getText();
+    const empty = selection.start.line === selection.end.line && selection.start.character === selection.end.character;
+    let from = empty ? editor.offsetAt({
+      line: selection.start.line,
+      character: 0
+    }) : editor.offsetAt(selection.start);
+    let to = empty ? from + lineTextOf(editor, selection.start.line).length : editor.offsetAt(selection.end);
+    while (from < to && /\s/.test(text[from])) {
+      from++;
+    }
+    while (to > from && /\s/.test(text[to - 1])) {
+      to--;
+    }
+    return from === to ? null : {
+      start: editor.positionAt(from),
+      end: editor.positionAt(to)
+    };
+  }
+  /* The lines of the wrapped text, without the indentation they share, which the expansion gives them again. */
+  wrapLines(range) {
+    const lines = this.language.editor.textInRange(range).split(/\r\n|\r|\n/);
+    const indents = lines.slice(1).flatMap(line => line.trim() === '' ? [] : [/^[\t ]*/.exec(line)[0].length]);
+    const shared = indents.length === 0 ? 0 : Math.min(...indents);
+    return lines.map((line, index) => index === 0 ? line : line.slice(Math.min(shared, /^[\t ]*/.exec(line)[0].length)));
+  }
+  insert(range, snippet, line) {
+    const {
+      editor,
+      snippets
+    } = this.language;
+    const parsed = indentSnippet(parseSnippet(snippet), line);
+    if (parsed.limited === true) {
+      return false;
+    }
+    if (!this.apply([{
+      range,
+      text: parsed.text
+    }])) {
+      return false;
+    }
+    if (parsed.stops.length > 0) {
+      snippets.begin(range.start, parsed.text, parsed.stops, parsed.fields);
+    } else {
+      editor.setCaret(positionInInsertion(range.start, parsed.text, parsed.text.length));
+    }
+    return true;
+  }
+  /* Through the snippet session while one runs, so an edit inside its field keeps it going. */
+  apply(changes, options) {
+    const {
+      editor,
+      snippets
+    } = this.language;
+    return snippets.isActive ? snippets.applyEdits(changes, snippets.token, [], options) : editor.applyEdits(changes, options);
+  }
+  edited(change) {
+    const revision = ++this.revision;
+    if (this.mirroring) {
+      return;
+    }
+    const edit = change.changes[0];
+    // Backspace and the word deletes are commands too; an undo of both names is two changes and lets go.
+    if (change.source === 'external' || change.changes.length !== 1 || edit === undefined || edit.range.start.line !== edit.range.end.line) {
+      this.link = null;
+      return;
+    }
+    const from = this.language.editor.offsetAt(edit.range.start);
+    const removed = edit.range.end.character - edit.range.start.character;
+    this.follow(from, removed, edit.text, revision);
+    if (change.source !== 'input' || !this.settings.closeTags || removed !== 0 || this.language.editor.getSelections().length !== 1) {
+      return;
+    }
+    if (edit.text === '>') {
+      queueMicrotask(() => this.closeTag(from, revision));
+    } else if (edit.text === '/') {
+      queueMicrotask(() => this.completeEndTag(from, revision));
+    }
+  }
+  /* Keeps the link on the name being typed and copies the name to its other tag once the edit is in. */
+  follow(from, removed, inserted, revision) {
+    const link = this.link;
+    if (link === null) {
+      return;
+    }
+    const {
+      own,
+      partner
+    } = link;
+    if (from < own.from || from + removed > own.to || !NAME.test(inserted)) {
+      this.link = null;
+      return;
+    }
+    const delta = inserted.length - removed;
+    this.link = {
+      own: {
+        from: own.from,
+        to: own.to + delta
+      },
+      partner: partner.from > own.from ? {
+        from: partner.from + delta,
+        to: partner.to + delta
+      } : partner
+    };
+    queueMicrotask(() => this.mirror(revision));
+  }
+  mirror(revision) {
+    const link = this.link;
+    if (link === null || revision !== this.revision) {
+      return;
+    }
+    const {
+      editor
+    } = this.language;
+    const text = editor.getText();
+    const name = text.slice(link.own.from, link.own.to);
+    if (name === text.slice(link.partner.from, link.partner.to)) {
+      return;
+    }
+    const range = {
+      start: editor.positionAt(link.partner.from),
+      end: editor.positionAt(link.partner.to)
+    };
+    this.mirroring = true;
+    try {
+      if (!this.apply([{
+        range,
+        text: name
+      }], {
+        mergeUndo: true
+      })) {
+        this.link = null;
+        return;
+      }
+    } finally {
+      this.mirroring = false;
+    }
+    const delta = name.length - (link.partner.to - link.partner.from);
+    this.link = {
+      own: link.partner.from < link.own.from ? {
+        from: link.own.from + delta,
+        to: link.own.to + delta
+      } : link.own,
+      partner: {
+        from: link.partner.from,
+        to: link.partner.to + delta
+      }
+    };
+  }
+  /* The `>` at `at` ended a start tag: its end tag goes after it, with the caret between the two. */
+  closeTag(at, revision) {
+    const {
+      editor
+    } = this.language;
+    const text = editor.getText();
+    if (revision !== this.revision || text[at] !== '>' || text[at - 1] === '/') {
+      return;
+    }
+    const place = markupPlaceAt(text, at, this.syntax);
+    if (place?.kind !== 'tag' || place.tag.closing || place.tag.inValue || place.tag.name === '' || isVoidElement(place.tag.name, this.syntax)) {
+      return;
+    }
+    const end = `</${place.tag.name}>`;
+    if (text.startsWith(end, at + 1)) {
+      return;
+    }
+    const caret = editor.positionAt(at + 1);
+    this.apply([{
+      range: {
+        start: caret,
+        end: caret
+      },
+      text: end
+    }], {
+      mergeUndo: true,
+      mapSelections: () => ({
+        start: caret,
+        end: caret
+      })
+    });
+  }
+  /* The `/` at `at` follows a `<` in text: the end tag of the innermost open element is written out. */
+  completeEndTag(at, revision) {
+    const {
+      editor
+    } = this.language;
+    const text = editor.getText();
+    if (revision !== this.revision || text[at] !== '/' || text[at - 1] !== '<') {
+      return;
+    }
+    const place = markupPlaceAt(text, at - 1, this.syntax);
+    const element = place?.kind === 'text' ? place.open.at(-1) : undefined;
+    if (element === undefined) {
+      return;
+    }
+    const position = editor.positionAt(at + 1);
+    const closed = text[at + 1] === '>';
+    const completion = closed ? element.name : `${element.name}>`;
+    const after = {
+      line: position.line,
+      character: position.character + element.name.length + 1
+    };
+    this.apply([{
+      range: {
+        start: position,
+        end: position
+      },
+      text: completion
+    }], {
+      mergeUndo: true,
+      mapSelections: () => ({
+        start: after,
+        end: after
+      })
+    });
+  }
+  /* Links the tag name the caret moved into with its other tag, once the edit that moved it is in. */
+  moved() {
+    if (!this.settings.linkedTags || this.mirroring) {
+      return;
+    }
+    queueMicrotask(() => {
+      this.link = this.linkAtCaret();
+    });
+  }
+  linkAtCaret() {
+    const {
+      editor
+    } = this.language;
+    if (!this.editable()) {
+      return null;
+    }
+    const caret = editor.getCaret();
+    const offset = editor.offsetAt(caret);
+    const link = this.link;
+    if (link !== null && link.own.from <= offset && offset <= link.own.to) {
+      return link;
+    }
+    const line = lineTextOf(editor, caret.line);
+    if (!NAME_BEFORE.test(line.slice(0, caret.character))) {
+      return null;
+    }
+    const pair = tagPairAt(editor.getText(), offset, this.syntax);
+    if (pair === null) {
+      return null;
+    }
+    const inOpen = pair.open.from <= offset && offset <= pair.open.to;
+    return inOpen ? {
+      own: pair.open,
+      partner: pair.close
+    } : {
+      own: pair.close,
+      partner: pair.open
+    };
+  }
+}

package/dist/navigation.js

@@ -75,11 +75,10 @@ export class NavigationFeature {
     });
   }
   supports(kind) {
-    return this.language.project.service.supports(METHODS[kind], this.language.uri);
+    return this.language.service.supports(METHODS[kind], this.language.uri);
   }
   async go(kind, position = this.language.editor.getCaret()) {
     const {
-      project,
       uri,
       editor
     } = this.language;
@@ -89,7 +88,7 @@ export class NavigationFeature {
     }
     let result;
     try {
-      result = await REQUESTS[kind](project.service, uri, position);
+      result = await REQUESTS[kind](this.language.service, uri, position);
     } catch (error) {
       if (!(error instanceof StaleResultError)) {
         this.tell(this.say('failed', {
@@ -118,7 +117,6 @@ export class NavigationFeature {
    */
   async goToName(name, anchor, own) {
     const {
-      project,
       uri,
       editor
     } = this.language;
@@ -126,11 +124,11 @@ export class NavigationFeature {
       this.language.goTo(own);
       return;
     }
-    if (!project.service.supports('workspace/symbol', uri)) {
+    if (!this.language.service.supports('workspace/symbol', uri)) {
       return;
     }
     try {
-      const places = placesOfName(await project.service.workspaceSymbols(uri, name), name, editor.getText());
+      const places = placesOfName(await this.language.service.workspaceSymbols(uri, name), name, editor.getText());
       if (places.length === 1) {
         this.language.goTo(places[0]);
       } else if (places.length > 1) {

package/dist/paste-history.d.ts

@@ -0,0 +1,7 @@
+import type { EditorLanguage } from './editor-language.ts';
+export declare class PasteHistoryFeature {
+    private readonly language;
+    constructor(language: EditorLanguage);
+    open(): void;
+    private paste;
+}

package/dist/paste-history.js

@@ -0,0 +1,104 @@
+import { rememberCopy } from '@adecore/editor';
+import { KEY_PRIORITY } from './key-priority.js';
+import { isShortcut } from './shortcut-keys.js';
+const LABEL_LENGTH = 80;
+/* The first characters of a copy on one line, with each line break shown as a return sign. */
+function labelOf(text) {
+  const flat = text.replace(/\r\n|\r|\n/g, '⏎');
+  return flat.length > LABEL_LENGTH ? `${flat.slice(0, LABEL_LENGTH)}…` : flat;
+}
+/*
+ * Paste from History: a list of what was copied in the editors of the project, newest first. Typing narrows it,
+ * Shift with the arrows chooses several entries, which paste as one, and Delete forgets entries.
+ */
+export class PasteHistoryFeature {
+  language;
+  constructor(language) {
+    this.language = language;
+    const off = language.onKey(event => {
+      if (!isShortcut(this.language.shortcuts.pasteFromHistory, event)) {
+        return false;
+      }
+      this.open();
+      return true;
+    }, KEY_PRIORITY.pasteHistory);
+    language.onDispose(off);
+  }
+  open() {
+    const {
+      editor,
+      project
+    } = this.language;
+    const {
+      clipboard
+    } = project;
+    if (clipboard.entries.length === 0) {
+      editor.announce(project.i18n.t('editor:language.pasteHistory.empty'));
+      return;
+    }
+    const ids = new Map();
+    const entries = new Map();
+    const groups = () => [{
+      title: null,
+      rows: clipboard.entries.map(entry => {
+        const id = ids.get(entry) ?? String(ids.size);
+        ids.set(entry, id);
+        entries.set(id, entry);
+        return {
+          id,
+          label: labelOf(entry.text),
+          detail: '',
+          search: entry.text
+        };
+      })
+    }];
+    const rows = groups();
+    this.language.pick.open({
+      anchor: editor.getCaret(),
+      title: project.i18n.t('editor:language.pasteHistory.title'),
+      groups: rows,
+      active: rows[0].rows[0].id,
+      filter: true,
+      multiple: true,
+      accept: id => this.paste([entries.get(id)]),
+      acceptMany: chosen => this.paste(clipboard.entries.filter(entry => chosen.includes(ids.get(entry) ?? ''))),
+      preview: async id => ({
+        removed: [],
+        added: entries.get(id)?.text.split('\n') ?? [],
+        note: null,
+        kind: 'text'
+      }),
+      remove: chosen => {
+        for (const id of chosen) {
+          clipboard.remove(entries.get(id));
+        }
+        return groups();
+      }
+    });
+  }
+  /* Pastes entries in list order, joined by line breaks, as a paste of that text from the clipboard would. */
+  paste(chosen) {
+    const {
+      editor,
+      project
+    } = this.language;
+    const {
+      clipboard
+    } = project;
+    if (chosen.length === 0) {
+      return;
+    }
+    const text = chosen.map(entry => entry.text).join('\n');
+    const wholeLines = chosen.length === 1 && chosen[0].wholeLines;
+    if (chosen.length === 1) {
+      clipboard.promote(chosen[0]);
+    } else {
+      clipboard.add(text);
+    }
+    globalThis.navigator?.clipboard?.writeText(text).catch(() => undefined);
+    rememberCopy(text, wholeLines);
+    editor.paste?.(text, {
+      wholeLines
+    });
+  }
+}

package/dist/peek.js

@@ -71,7 +71,7 @@ export class PeekFeature {
       uri
     } = this.language;
     const method = KINDS[kind].method;
-    if (!project.service.supports(method, uri)) {
+    if (!this.language.service.supports(method, uri)) {
       this.tell(this.say(KINDS[kind].unavailable));
       return;
     }
@@ -147,17 +147,16 @@ export class PeekFeature {
   }
   async fetch(kind, position) {
     const {
-      project,
       uri
     } = this.language;
     if (kind === 'references') {
       // Without the declaration, so the list holds what the usages count above a declaration counts.
       return {
-        locations: (await project.service.references(uri, position, false)) ?? [],
+        locations: (await this.language.service.references(uri, position, false)) ?? [],
         targets: new Map()
       };
     }
-    const places = uniquePlaces(await project.service.definition(uri, position));
+    const places = uniquePlaces(await this.language.service.definition(uri, position));
     const targets = new Map(places.flatMap(({
       location,
       target

package/dist/pick.d.ts

@@ -11,13 +11,21 @@ export interface PickSpec {
     onTab?(backwards: boolean): void;
     attempt?(id: string): Promise<string | null>;
     preview?(id: string, signal: AbortSignal): Promise<PickPreview | null>;
+    readonly filter?: boolean;
+    readonly multiple?: boolean;
+    acceptMany?(ids: readonly string[]): void;
+    remove?(ids: readonly string[]): readonly PickGroup[];
 }
 export declare class PickFeature {
     private readonly language;
     private readonly timers;
     private spec;
+    private groups;
     private ids;
     private active;
+    private query;
+    private chosen;
+    private rangeAnchor;
     private previewTimer;
     private controller;
     private refusals;
@@ -26,9 +34,19 @@ export declare class PickFeature {
     get isOpen(): boolean;
     open(spec: PickSpec): void;
     close(): void;
-    move(delta: number): void;
-    choose(id: string): void;
+    move(delta: number, extend?: boolean): void;
+    private settle;
+    choose(id: string, modifiers?: {
+        readonly toggle?: boolean;
+        readonly range?: boolean;
+    }): void;
     private activate;
+    private extendTo;
+    private toggle;
+    private takeActive;
+    private visibleGroups;
+    private requery;
+    private removeChosen;
     private key;
     private schedulePreview;
     private publish;