@adecore/editor-react 0.43.0 → 0.44.0

package/dist/live-templates.js

@@ -0,0 +1,289 @@
+import { identifierPrefix, isIdentifierCharacter } from './completion-model.js';
+import { comparePositions } from './diagnostics-model.js';
+import { KEY_PRIORITY } from './key-priority.js';
+import { textBeforeOf } from './line-text.js';
+import { isShortcut } from './shortcut-keys.js';
+import { PostfixFeature } from './postfix.js';
+import { bodyWithIndentUnit, dedentLines, indentUnitOf, insertSnippet } from './snippet-insert.js';
+import { escapeSnippetText } from './snippet.js';
+import { SNIPPET_KIND, sortAfterServer, templateApplies, templateContextAt } from './template-context.js';
+const TOAST_ID = 'language-templates';
+const IDENTIFIER_START = /[\p{L}_$]/u;
+/* Sorts the rows of a list of templates by group, then key. */
+function grouped(template) {
+  return `${template.group ?? template.languages[0]}\u0000${template.key}`;
+}
+/* A key that starts in the middle of a word is no key, unless it starts with a character no word has. */
+function startsInsideWord(before, index) {
+  return index > 0 && IDENTIFIER_START.test(before[index]) && isIdentifierCharacter(before[index - 1]);
+}
+/* The longest start of `key` that the text before the caret ends with, as a number of characters; 0 when none. */
+function prefixLength(key, before) {
+  for (let length = Math.min(key.length, before.length); length >= 1; length--) {
+    if (before.endsWith(key.slice(0, length)) && !startsInsideWord(before, before.length - length)) {
+      return length;
+    }
+  }
+  return 0;
+}
+/*
+ * Live templates: a key typed before the caret and Tab expands a snippet, Insert Live Template lists the ones that
+ * apply, and Save as Live Template hands a selection to the host. The templates come from the registry of the
+ * project. Tab comes after a running snippet and before Emmet, and a key that starts before an Emmet abbreviation
+ * wins over it, as in IntelliJ.
+ */
+export class TemplatesFeature {
+  language;
+  postfix;
+  constructor(language) {
+    this.language = language;
+    this.postfix = new PostfixFeature(language);
+    language.onDispose(language.onKey(event => {
+      if (event.key === 'Tab' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey && !event.isComposing) {
+        return this.expand();
+      }
+      if (isShortcut(language.shortcuts.insertLiveTemplate, event)) {
+        this.insert();
+        return true;
+      }
+      if (isShortcut(language.shortcuts.saveAsLiveTemplate, event)) {
+        this.saveSelection();
+        return true;
+      }
+      return false;
+    }, KEY_PRIORITY.templates));
+    language.onDispose(language.completion.addSource({
+      items: request => [...this.rows(request.position), ...this.postfix.rows(request.position)]
+    }));
+  }
+  /*
+   * Expands the template whose key ends at the caret, or lists them when several share the key. False where Tab has
+   * nothing to expand, and where the key is an Emmet abbreviation, which the markup feature expands on the same Tab.
+   */
+  expand() {
+    const {
+      editor,
+      completion
+    } = this.language;
+    const selections = editor.getSelections();
+    if (editor.isReadOnly?.() === true || selections.some(selection => comparePositions(selection.start, selection.end) !== 0)) {
+      return false;
+    }
+    const match = this.matchAtCarets(selections.map(selection => selection.start));
+    const custom = selections.length === 1 ? this.customKey() : null;
+    if (custom !== null && (match === null || comparePositions(match.start, custom.start) >= 0)) {
+      return custom.expand?.() ?? false;
+    }
+    if (match === null) {
+      return false;
+    }
+    if (match.templates.length === 1) {
+      this.expandAtCarets(match.templates[0], match.start);
+      return true;
+    }
+    completion.showItems(match.templates.map(template => this.row(template, template.key, grouped(template), {
+      start: match.start,
+      end: editor.getCaret()
+    }, () => this.expandAtCarets(template, match.start))), match.start);
+    return true;
+  }
+  /* Lists the templates that apply, only the ones whose key or description fits the word before the caret when some do. */
+  insert() {
+    const {
+      editor,
+      completion,
+      project
+    } = this.language;
+    if (editor.isReadOnly?.() === true) {
+      return;
+    }
+    const selection = editor.getSelection();
+    const selected = comparePositions(selection.start, selection.end) !== 0;
+    const caret = editor.getCaret();
+    const before = textBeforeOf(editor, caret);
+    const word = selected ? '' : identifierPrefix(before);
+    const wordStart = {
+      line: caret.line,
+      character: caret.character - word.length
+    };
+    const context = templateContextAt(this.language, selected ? selection.start : wordStart);
+    const applicable = project.templates.live.filter(template => templateApplies(template, context));
+    if (applicable.length === 0) {
+      const title = project.i18n.t('editor:language.templates.none');
+      project.host.notify?.({
+        id: TOAST_ID,
+        kind: 'error',
+        title
+      });
+      editor.announce(title);
+      return;
+    }
+    const keyed = template => word !== '' && prefixLength(template.key, before) > 0;
+    const described = template => word !== '' && (template.description?.toLowerCase().includes(word.toLowerCase()) ?? false);
+    const matching = applicable.filter(template => keyed(template) || described(template));
+    const start = matching.length === 0 ? caret : wordStart;
+    const text = selected ? editor.textInRange(selection) : '';
+    const rows = (matching.length === 0 ? applicable : matching).map(template => this.row(template, keyed(template) || matching.length === 0 ? template.key : word, grouped(template), {
+      start,
+      end: caret
+    }, () => {
+      const range = selected ? selection : {
+        start,
+        end: editor.getCaret()
+      };
+      void this.run(template, [{
+        range,
+        selectedText: selected ? dedentLines(text) : undefined
+      }]);
+    }));
+    completion.showItems(rows, start);
+  }
+  /* Hands the selection to the host as a draft of a template; false without a selection or without a host that saves. */
+  saveSelection() {
+    const {
+      editor,
+      project
+    } = this.language;
+    const selection = editor.getSelection();
+    if (comparePositions(selection.start, selection.end) === 0) {
+      editor.announce(project.i18n.t('editor:language.templates.selectToSave'));
+      return false;
+    }
+    if (project.host.saveAsLiveTemplate === undefined) {
+      return false;
+    }
+    const context = templateContextAt(this.language, selection.start);
+    project.host.saveAsLiveTemplate({
+      body: escapeSnippetText(dedentLines(editor.textInRange(selection))),
+      languages: [context.families[0]],
+      places: [context.place]
+    });
+    return true;
+  }
+  /* The keys that compete with a live template for Tab: an Emmet abbreviation, then a postfix key. */
+  customKey() {
+    const abbreviation = this.language.markup.abbreviationAt();
+    return abbreviation === null ? this.postfix.key() : {
+      start: abbreviation,
+      expand: null
+    };
+  }
+  /* The templates every caret has the same key of, ending at the caret, in a context they apply in. */
+  matchAtCarets(carets) {
+    const matches = carets.map(caret => this.matchAt(caret));
+    const primary = matches.at(-1);
+    if (primary === null || primary === undefined) {
+      return null;
+    }
+    const templates = primary.templates.filter(template => matches.every(match => match?.templates.some(other => other.id === template.id) === true));
+    return templates.length === 0 ? null : {
+      start: primary.start,
+      templates
+    };
+  }
+  /*
+   * The templates whose key is the longest one that ends at the caret, as IntelliJ looks them up: when the longest
+   * key found applies nowhere, no shorter key is tried.
+   */
+  matchAt(caret) {
+    const {
+      editor,
+      project
+    } = this.language;
+    const {
+      live
+    } = project.templates;
+    const before = textBeforeOf(editor, caret);
+    const longest = live.reduce((length, template) => Math.max(length, template.key.length), 0);
+    for (let length = Math.min(longest, before.length); length >= 1; length--) {
+      const index = before.length - length;
+      const key = before.slice(index);
+      const found = live.filter(template => template.key === key);
+      if (found.length === 0 || startsInsideWord(before, index)) {
+        continue;
+      }
+      const start = {
+        line: caret.line,
+        character: index
+      };
+      const context = templateContextAt(this.language, start);
+      const templates = found.filter(template => templateApplies(template, context));
+      return templates.length === 0 ? null : {
+        start,
+        templates
+      };
+    }
+    return null;
+  }
+  /* Replaces the text between `start` and the caret, as far as the primary caret is from it, at every caret. */
+  expandAtCarets(template, start) {
+    const {
+      editor
+    } = this.language;
+    const length = Math.max(0, editor.getCaret().character - start.character);
+    void this.run(template, editor.getSelections().map(selection => ({
+      range: {
+        start: {
+          line: selection.end.line,
+          character: Math.max(0, selection.end.character - length)
+        },
+        end: selection.end
+      }
+    })));
+  }
+  run(template, placements) {
+    return insertSnippet(this.language, bodyWithIndentUnit(template.body, indentUnitOf(this.language.editor)), placements);
+  }
+  /* The rows for the word before the caret, each a template whose key starts with it. */
+  rows(position) {
+    const {
+      editor,
+      project
+    } = this.language;
+    if (!project.templates.settings.liveInCompletion) {
+      return [];
+    }
+    const before = textBeforeOf(editor, position);
+    if (identifierPrefix(before) === '') {
+      return [];
+    }
+    const contexts = new Map();
+    return project.templates.live.flatMap(template => {
+      const length = prefixLength(template.key, before);
+      if (length === 0) {
+        return [];
+      }
+      const start = {
+        line: position.line,
+        character: position.character - length
+      };
+      const context = contexts.get(length) ?? templateContextAt(this.language, start);
+      contexts.set(length, context);
+      return templateApplies(template, context) ? [this.row(template, template.key, sortAfterServer(template.key), {
+        start,
+        end: position
+      }, () => this.expandAtCarets(template, start))] : [];
+    });
+  }
+  row(template, filterText, sortText, range, accept) {
+    const item = {
+      label: template.key,
+      kind: SNIPPET_KIND,
+      detail: template.description,
+      documentation: {
+        kind: 'markdown',
+        value: `\`\`\`\n${template.body}\n\`\`\``
+      },
+      filterText,
+      sortText,
+      textEdit: {
+        range,
+        newText: template.key
+      }
+    };
+    return {
+      item,
+      accept
+    };
+  }
+}

package/dist/locales/en.json

@@ -219,6 +219,36 @@
             "title": "Choose Content to Paste",
             "empty": "Nothing was copied yet"
         },
+        "templates": {
+            "none": "No templates defined in this context",
+            "selectToSave": "Select the text to save as a live template"
+        },
+        "postfix": {
+            "expressions": "Expressions"
+        },
+        "surround": {
+            "title": "Surround With",
+            "selectTemplate": "Select Template",
+            "liveTemplates": "Live templates",
+            "configure": "Configure live templates…",
+            "comments": "{{construct}} Comments",
+            "none": "Couldn't find Surround With variants applicable to the current context",
+            "noTemplates": "No surround templates defined in this context",
+            "unwrap": {
+                "title": "Choose the statement to unwrap/remove",
+                "if": "Unwrap 'if...'",
+                "else": "Unwrap 'else...'",
+                "removeElse": "Remove 'else...'",
+                "for": "Unwrap 'for...'",
+                "while": "Unwrap 'while...'",
+                "do": "Unwrap 'do...'",
+                "try": "Unwrap 'try...'",
+                "removeCatch": "Remove 'catch...'",
+                "removeFinally": "Remove 'finally...'",
+                "braces": "Unwrap braces",
+                "tag": "Remove enclosing tag: {{name}}"
+            }
+        },
         "announce": {
             "problem": "{{severity}}: {{message}}",
             "severity": {

package/dist/locales/nl.json

@@ -219,6 +219,36 @@
             "title": "Kies wat je plakt",
             "empty": "Er is nog niets gekopieerd"
         },
+        "templates": {
+            "none": "Geen sjablonen gedefinieerd in deze context",
+            "selectToSave": "Selecteer de tekst die je als live sjabloon wilt opslaan"
+        },
+        "postfix": {
+            "expressions": "Expressies"
+        },
+        "surround": {
+            "title": "Omring met",
+            "selectTemplate": "Kies een sjabloon",
+            "liveTemplates": "Live sjablonen",
+            "configure": "Live sjablonen instellen…",
+            "comments": "{{construct}}-commentaar",
+            "none": "Geen Omring met-varianten gevonden voor de huidige context",
+            "noTemplates": "Geen omringende sjablonen gedefinieerd in deze context",
+            "unwrap": {
+                "title": "Kies het statement om uit te pakken of te verwijderen",
+                "if": "'if...' uitpakken",
+                "else": "'else...' uitpakken",
+                "removeElse": "'else...' verwijderen",
+                "for": "'for...' uitpakken",
+                "while": "'while...' uitpakken",
+                "do": "'do...' uitpakken",
+                "try": "'try...' uitpakken",
+                "removeCatch": "'catch...' verwijderen",
+                "removeFinally": "'finally...' verwijderen",
+                "braces": "Accolades uitpakken",
+                "tag": "Omringende tag verwijderen: {{name}}"
+            }
+        },
         "announce": {
             "problem": "{{severity}}: {{message}}",
             "severity": {

package/dist/markup-context.d.ts

@@ -30,8 +30,26 @@ export interface TagPair {
         readonly to: number;
     };
 }
+export interface TagSpan {
+    readonly from: number;
+    readonly to: number;
+}
+export interface EnclosingElement {
+    readonly name: string;
+    readonly open: TagSpan;
+    readonly close: TagSpan | null;
+}
 export declare const MAX_MARKUP_SCAN = 1000000;
 export declare function markupSyntaxOf(languageId: string): MarkupSyntax | null;
 export declare function isVoidElement(name: string, syntax: MarkupSyntax): boolean;
+export declare function enclosingElements(text: string, offset: number, syntax: MarkupSyntax): EnclosingElement[];
+export interface TextReplacement {
+    readonly from: number;
+    readonly to: number;
+    readonly text: string;
+}
+export declare function lineStartOf(text: string, offset: number): number;
+export declare function lineEndOf(text: string, offset: number): number;
+export declare function removeTagEdits(text: string, element: EnclosingElement, unit: string): TextReplacement[];
 export declare function markupPlaceAt(text: string, offset: number, syntax: MarkupSyntax): MarkupPlace | null;
 export declare function tagPairAt(text: string, offset: number, syntax: MarkupSyntax): TagPair | null;

package/dist/markup-context.js

@@ -37,6 +37,7 @@ class Stop {
  */
 class MarkupScanner {
   pairs = [];
+  elements = [];
   text;
   syntax;
   until;
@@ -131,7 +132,10 @@ class MarkupScanner {
     const name = text.slice(nameFrom, nameTo);
     const end = this.tagEnd(at, closing, name, nameFrom, nameTo);
     if (closing) {
-      this.close(name, nameFrom, nameTo);
+      this.close(name, nameFrom, nameTo, {
+        from: at,
+        to: end
+      });
       return end;
     }
     const selfClosing = text[end - 2] === '/' && text[end - 1] === '>';
@@ -139,12 +143,19 @@ class MarkupScanner {
       return end;
     }
     if (this.syntax !== 'xml' && RAW_ELEMENTS.has(name.toLowerCase())) {
-      return this.rawContent(end, name, nameFrom, nameTo);
+      return this.rawContent({
+        from: at,
+        to: end
+      }, name, nameFrom, nameTo);
     }
     this.open.push({
       name,
       nameFrom,
-      nameTo
+      nameTo,
+      tag: {
+        from: at,
+        to: end
+      }
     });
     return end;
   }
@@ -224,7 +235,8 @@ class MarkupScanner {
     return text.length;
   }
   /* The content of `script`, `style` and the like is not markup, up to the end tag of the element. */
-  rawContent(from, name, nameFrom, nameTo) {
+  rawContent(tag, name, nameFrom, nameTo) {
+    const from = tag.to;
     const pattern = new RegExp(`</${name}(?=[\\s/>]|$)`, 'gi');
     pattern.lastIndex = from;
     const match = pattern.exec(this.text);
@@ -248,10 +260,18 @@ class MarkupScanner {
         to: closeTo
       }
     });
+    this.elements.push({
+      name,
+      open: tag,
+      close: {
+        from: end,
+        to: after
+      }
+    });
     return after;
   }
   /* An end tag closes the nearest open element of its name and every element left open inside it. */
-  close(name, nameFrom, nameTo) {
+  close(name, nameFrom, nameTo, tag) {
     const caseless = this.syntax !== 'xml';
     for (let index = this.open.length - 1; index >= 0; index--) {
       const element = this.open[index];
@@ -266,11 +286,108 @@ class MarkupScanner {
             to: nameTo
           }
         });
+        this.elements.push({
+          name: element.name,
+          open: element.tag,
+          close: tag
+        });
         this.open.length = index;
         return;
       }
     }
   }
+  /* The elements still open at the end of the text. */
+  unclosed() {
+    return this.open.map(element => ({
+      name: element.name,
+      open: element.tag,
+      close: null
+    }));
+  }
+}
+/*
+ * The elements whose tags hold `offset`, innermost first: each with its start tag and its end tag, which an element left
+ * open does not have. Empty for a document too large to read on a keystroke.
+ */
+export function enclosingElements(text, offset, syntax) {
+  if (text.length > MAX_MARKUP_SCAN) {
+    return [];
+  }
+  const scanner = new MarkupScanner(text, syntax, Infinity);
+  scanner.run();
+  return [...scanner.elements, ...scanner.unclosed()].filter(element => element.open.from <= offset && offset <= (element.close?.to ?? text.length)).sort((left, right) => right.open.from - left.open.from);
+}
+export function lineStartOf(text, offset) {
+  let at = offset;
+  while (at > 0 && text[at - 1] !== '\n' && text[at - 1] !== '\r') {
+    at--;
+  }
+  return at;
+}
+export function lineEndOf(text, offset) {
+  let at = offset;
+  while (at < text.length && text[at] !== '\n' && text[at] !== '\r') {
+    at++;
+  }
+  return at;
+}
+function breakLengthAt(text, offset) {
+  if (text.startsWith('\r\n', offset)) {
+    return 2;
+  }
+  return text[offset] === '\n' || text[offset] === '\r' ? 1 : 0;
+}
+/* The tag alone on its line takes the line with it, and the break before it where no break follows. */
+function tagReplacement(text, tag) {
+  const start = lineStartOf(text, tag.from);
+  const end = lineEndOf(text, tag.to);
+  if (text.slice(start, tag.from).trim() !== '' || text.slice(tag.to, end).trim() !== '') {
+    return {
+      from: tag.from,
+      to: tag.to,
+      text: ''
+    };
+  }
+  const after = breakLengthAt(text, end);
+  const before = start > 0 && after === 0 ? text.startsWith('\r\n', start - 2) ? 2 : 1 : 0;
+  return {
+    from: start - before,
+    to: end + after,
+    text: ''
+  };
+}
+/*
+ * The edits that take an element's tags away and keep what is between them: each tag that stands alone on its line
+ * goes with its line, and when the start tag does, the lines it enclosed lose one indentation unit. The offsets are
+ * those of `text`, ascending and apart.
+ */
+export function removeTagEdits(text, element, unit) {
+  const open = tagReplacement(text, element.open);
+  const edits = [open];
+  if (element.close === null) {
+    return edits;
+  }
+  const close = tagReplacement(text, element.close);
+  const openAlone = open.from !== element.open.from || open.to !== element.open.to;
+  const closeAlone = close.from !== element.close.from || close.to !== element.close.to;
+  const indent = unit === '\t' ? /^\t/ : new RegExp(`^ {1,${unit.length}}`);
+  const lastLine = lineStartOf(text, element.close.from);
+  let line = lineEndOf(text, element.open.to);
+  line += breakLengthAt(text, line);
+  while (openAlone && line <= lastLine && line < text.length && !(closeAlone && line === lastLine)) {
+    const found = indent.exec(text.slice(line, lineEndOf(text, line)));
+    if (found !== null) {
+      edits.push({
+        from: line,
+        to: line + found[0].length,
+        text: ''
+      });
+    }
+    line = lineEndOf(text, line);
+    line += breakLengthAt(text, line);
+  }
+  edits.push(close);
+  return edits;
 }
 /* What `offset` is in; null for a document too large to read on a keystroke. */
 export function markupPlaceAt(text, offset, syntax) {

package/dist/markup.d.ts

@@ -1,3 +1,4 @@
+import type { EditorPosition } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 export interface MarkupSettings {
     readonly emmet?: boolean;
@@ -16,6 +17,8 @@ export declare class MarkupFeature {
     get supported(): boolean;
     configure(settings: MarkupSettings): void;
     expand(): boolean;
+    abbreviationAt(): EditorPosition | null;
+    private abbreviation;
     startWrap(): boolean;
     submitWrap(abbreviation: string): boolean;
     cancelWrap(): void;

package/dist/markup.js

@@ -60,6 +60,14 @@ export class MarkupFeature {
   }
   /* 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 found = this.abbreviation();
+    return found !== null && this.insert(found.range, found.expanded, found.line);
+  }
+  /* Where the abbreviation that `expand` would take starts, without expanding it; null under the conditions where `expand` does nothing. */
+  abbreviationAt() {
+    return this.abbreviation()?.range.start ?? null;
+  }
+  abbreviation() {
     const {
       syntax
     } = this;
@@ -67,13 +75,13 @@ export class MarkupFeature {
       editor
     } = this.language;
     if (syntax === null || !this.settings.emmet || !this.editable()) {
-      return false;
+      return null;
     }
     const caret = editor.getCaret();
     const line = lineTextOf(editor, caret.line);
     const found = abbreviationBefore(line, caret.character);
     if (found === null) {
-      return false;
+      return null;
     }
     const range = {
       start: {
@@ -86,13 +94,17 @@ export class MarkupFeature {
       }
     };
     if (markupPlaceAt(editor.getText(), editor.offsetAt(range.start), syntax)?.kind !== 'text') {
-      return false;
+      return null;
     }
     const expanded = expandAbbreviation(found.abbreviation, {
       syntax,
       indent: this.indent()
     });
-    return expanded !== null && this.insert(range, expanded, line);
+    return expanded === null ? null : {
+      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() {

package/dist/pick.d.ts

@@ -48,6 +48,7 @@ export declare class PickFeature {
     private requery;
     private removeChosen;
     private key;
+    private takeMnemonic;
     private schedulePreview;
     private publish;
 }

package/dist/pick.js

@@ -260,9 +260,19 @@ export class PickFeature {
           this.requery(this.query + event.key);
           return true;
         }
-        return false;
+        return spec.filter !== true && event.key.length === 1 && this.takeMnemonic(event.key);
     }
   }
+  /* Takes the visible row whose mnemonic is the typed character, whatever the case. */
+  takeMnemonic(character) {
+    const wanted = character.toLowerCase();
+    const row = this.visibleGroups().flatMap(group => group.rows).find(candidate => candidate.mnemonic?.toLowerCase() === wanted);
+    if (row === undefined) {
+      return false;
+    }
+    this.choose(row.id);
+    return true;
+  }
   schedulePreview() {
     const spec = this.spec;
     this.timers.clear(this.previewTimer);

package/dist/popups.d.ts

@@ -55,6 +55,7 @@ export interface PickRow {
     readonly detail: string;
     readonly path?: boolean;
     readonly search?: string;
+    readonly mnemonic?: string;
 }
 export interface PickGroup {
     readonly title: string | null;