@adecore/editor-react 0.41.1 → 0.43.0

package/src/markup.ts

@@ -0,0 +1,367 @@
+import type { EditorApplyEditsOptions, EditorContentChange, EditorRange, EditorTextChange, EditorTrackedRange } from '@adecore/editor';
+import { abbreviationBefore, expandAbbreviation } from './emmet.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { KEY_PRIORITY } from './key-priority.ts';
+import { lineTextOf } from './line-text.ts';
+import { isVoidElement, markupPlaceAt, markupSyntaxOf, tagPairAt, type MarkupSyntax } from './markup-context.ts';
+import { isShortcut } from './shortcut-keys.ts';
+import { parseSnippet } from './snippet.ts';
+import { indentSnippet } from './snippet-indent.ts';
+import { positionInInsertion } from './snippet-session.ts';
+
+/* Each is on unless false. */
+export interface MarkupSettings {
+    /* Tab after an abbreviation expands it, as Emmet does. */
+    readonly emmet?: boolean;
+    /* The `>` of a start tag adds its end tag after the caret, and `</` completes the end tag of the open element. */
+    readonly closeTags?: boolean;
+    /* Changing the name of a start tag changes the name of its end tag with it, and the other way around. */
+    readonly linkedTags?: boolean;
+}
+
+interface Span {
+    readonly from: number;
+    readonly to: number;
+}
+
+/* The tag name the caret is in and the name of its other tag, as offsets of the current text. */
+interface Link {
+    readonly own: Span;
+    readonly partner: Span;
+}
+
+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 {
+    private readonly language: EditorLanguage;
+    private readonly syntax: MarkupSyntax | null;
+    private settings: Required<MarkupSettings> = { emmet: true, closeTags: true, linkedTags: true };
+    private link: Link | null = null;
+    private wrapping: EditorTrackedRange | null = null;
+    /* Raised by every change of the text, so a follow-up edit for an older text is dropped. */
+    private revision = 0;
+    private mirroring = false;
+
+    constructor(language: EditorLanguage) {
+        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(): boolean {
+        return this.syntax !== null;
+    }
+
+    configure(settings: MarkupSettings): void {
+        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(): boolean {
+        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(): boolean {
+        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: string): boolean {
+        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(): void {
+        this.wrapping?.dispose();
+        this.wrapping = null;
+        if (this.language.popups.getState().wrap !== null) {
+            this.language.popups.setState({ wrap: null });
+        }
+    }
+
+    private key(event: KeyboardEvent): boolean {
+        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();
+    }
+
+    private editable(selection = false): boolean {
+        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);
+    }
+
+    private indent(): string {
+        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. */
+    private wrapTarget(): EditorRange | null {
+        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. */
+    private wrapLines(range: EditorRange): string[] {
+        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))));
+    }
+
+    private insert(range: EditorRange, snippet: string, line: string): boolean {
+        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. */
+    private apply(changes: readonly EditorContentChange[], options?: EditorApplyEditsOptions): boolean {
+        const { editor, snippets } = this.language;
+        return snippets.isActive ? snippets.applyEdits(changes, snippets.token, [], options) : editor.applyEdits(changes, options);
+    }
+
+    private edited(change: EditorTextChange): void {
+        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. */
+    private follow(from: number, removed: number, inserted: string, revision: number): void {
+        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));
+    }
+
+    private mirror(revision: number): void {
+        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. */
+    private closeTag(at: number, revision: number): void {
+        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. */
+    private completeEndTag(at: number, revision: number): void {
+        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. */
+    private moved(): void {
+        if (!this.settings.linkedTags || this.mirroring) {
+            return;
+        }
+        queueMicrotask(() => {
+            this.link = this.linkAtCaret();
+        });
+    }
+
+    private linkAtCaret(): Link | null {
+        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/src/navigation.ts

@@ -95,11 +95,11 @@ export class NavigationFeature {
     }
 
     supports(kind: NavigationKind): boolean {
-        return this.language.project.service.supports(METHODS[kind], this.language.uri);
+        return this.language.service.supports(METHODS[kind], this.language.uri);
     }
 
     async go(kind: NavigationKind, position: EditorPosition = this.language.editor.getCaret()): Promise<void> {
-        const { project, uri, editor } = this.language;
+        const { uri, editor } = this.language;
 
         if (!this.supports(kind)) {
             this.tell(this.say('unavailable'));
@@ -110,7 +110,7 @@ export class NavigationFeature {
         let result: NavigationResult;
 
         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', { message: messageOf(error) }));
@@ -141,7 +141,7 @@ export class NavigationFeature {
      * up by name among the symbols of the project. One match goes there at once, several are listed, and none says nothing.
      */
     async goToName(name: string, anchor: EditorPosition, own: Location | null): Promise<void> {
-        const { project, uri, editor } = this.language;
+        const { uri, editor } = this.language;
 
         if (own !== null) {
             this.language.goTo(own);
@@ -149,12 +149,12 @@ export class NavigationFeature {
             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]!);

package/src/paste-history.ts

@@ -0,0 +1,111 @@
+import { rememberCopy } from '@adecore/editor';
+import type { ClipboardEntry } from './clipboard-history.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { KEY_PRIORITY } from './key-priority.ts';
+import type { PickGroup } from './popups.ts';
+import { isShortcut } from './shortcut-keys.ts';
+
+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: string): string {
+    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 {
+    private readonly language: EditorLanguage;
+
+    constructor(language: EditorLanguage) {
+        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(): void {
+        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<ClipboardEntry, string>();
+        const entries = new Map<string, ClipboardEntry>();
+
+        const groups = (): readonly PickGroup[] => [
+            {
+                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. */
+    private paste(chosen: readonly ClipboardEntry[]): void {
+        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/src/peek.ts

@@ -82,7 +82,7 @@ export class PeekFeature {
         const { editor, project, 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;
@@ -160,14 +160,14 @@ export class PeekFeature {
     }
 
     private async fetch(kind: PeekKind, position: EditorPosition): Promise<{ locations: Location[]; targets: Map<string, Range> }> {
-        const { project, uri } = this.language;
+        const { 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)) ?? [], targets: new Map() };
+            return { 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 }) => (target === null ? [] : [[placeKey(location), target] as const])));
 
         return { locations: places.map(({ location }) => location), targets };