@adecore/editor 0.0.1 → 0.17.0-beta.2

package/dist/engine.d.ts

@@ -0,0 +1,2 @@
+import type { EditorEngine, SmartEditorEngineOptions } from './types.ts';
+export declare function createSmartEditorEngine(options: SmartEditorEngineOptions): EditorEngine;

package/dist/engine.js

@@ -0,0 +1,610 @@
+import { changedSpans, DocumentModel, replacementText } from '@adecore/editor-core';
+import { InputController } from './controller.js';
+import { resolveSmartKeys } from './smart-keys.js';
+import { emit, subscribe } from './listeners.js';
+import { fillLens, lensSignature } from './lens.js';
+import { EditorView } from './view.js';
+const DEFAULT_TAB_SIZE = 4;
+const DEFAULT_LABEL = 'Code editor';
+const DEFAULT_WIDGET_OWNER = 'default';
+class SmartEditor {
+    model;
+    settings;
+    view;
+    controller;
+    changes = new Set();
+    textChanges = new Set();
+    carets = new Set();
+    caretOffset = 0;
+    saves = new Set();
+    blurs = new Set();
+    subscription;
+    language;
+    theme;
+    revision;
+    lensRows = new Map();
+    lensRevisions = new Map();
+    tokenizerRequest = 0;
+    settingText = false;
+    disposed = false;
+    engine;
+    constructor(engine, element, options) {
+        this.engine = engine;
+        this.model = new DocumentModel(options.text);
+        this.language = options.language;
+        this.theme = options.theme;
+        this.settings = {
+            language: options.language,
+            tabSize: options.indentation?.tabSize ?? DEFAULT_TAB_SIZE,
+            insertSpaces: options.indentation?.insertSpaces ?? true,
+            readOnly: options.readOnly ?? false,
+            readOnlyReason: options.readOnlyReason,
+            wrap: options.wrap ?? false,
+            smartKeys: resolveSmartKeys(options.smartKeys),
+            messages: options.messages ?? {},
+            label: options.label ?? DEFAULT_LABEL,
+            guides: options.guides !== false,
+            whitespace: options.whitespace === true,
+            rightMargin: options.rightMargin ?? null,
+            foldOutline: options.foldOutline ?? 'hover'
+        };
+        this.view = new EditorView(element, this.model, this.settings);
+        this.controller = new InputController(this.view, {
+            handBack: engine.handBack ?? [],
+            keymap: engine.keymap,
+            apple: engine.apple ?? false,
+            save: () => emit(this.saves),
+            blur: () => emit(this.blurs)
+        });
+        this.revision = this.model.getRevision();
+        this.caretOffset = this.model.getPrimary().head;
+        this.subscription = this.model.subscribe((snapshot) => {
+            this.caretMoved(snapshot.selections.at(-1).head);
+            if (snapshot.revision !== this.revision) {
+                this.revision = snapshot.revision;
+                if (snapshot.contentEdits !== undefined && snapshot.contentEdits.length > 0) {
+                    this.announceTextChange(snapshot.contentEdits, snapshot.source ?? 'external');
+                }
+                if (!this.settingText) {
+                    emit(this.changes);
+                }
+            }
+        });
+        this.loadTokenizer();
+        if (options.folds !== undefined || options.foldDefaults !== undefined) {
+            this.view.restoreFolds(options.folds ?? null, options.foldDefaults);
+        }
+        this.placeCursor(options);
+    }
+    /* Where the editor opens: on a line and column, scrolled to a position, or with that line in view. */
+    placeCursor(options) {
+        if (options.line !== undefined) {
+            const line = this.clampLine(options.line);
+            const bounds = this.model.getLine(line);
+            const offset = Math.min(bounds.end, bounds.start + Math.max(0, (options.column ?? 1) - 1));
+            this.model.setSelections([{ anchor: offset, head: offset }]);
+            if (options.scrollTop === undefined) {
+                // A file opens where it is told to, without travelling there.
+                this.view.revealOffset(offset, 'center', false);
+            }
+        }
+        if (options.scrollTop !== undefined) {
+            this.view.render();
+            this.view.viewport.scrollTop = options.scrollTop;
+            this.view.render();
+        }
+    }
+    loadTokenizer() {
+        const request = ++this.tokenizerRequest;
+        void this.engine
+            .scopeColors?.(this.theme)
+            .catch(() => null)
+            .then((colors) => {
+            if (!this.disposed && request === this.tokenizerRequest) {
+                this.view.setScopeColors(colors ?? null);
+            }
+        });
+        void this.engine
+            .tokenizer(this.language, this.theme, this.model.getText())
+            .catch(() => null)
+            .then((tokenizer) => {
+            if (!this.disposed && request === this.tokenizerRequest) {
+                this.view.setTokenizer(tokenizer);
+            }
+        });
+    }
+    getText() {
+        return this.model.getText();
+    }
+    setText(text) {
+        const spans = changedSpans(this.model.getText(), text);
+        if (spans.length === 0) {
+            return;
+        }
+        this.settingText = true;
+        try {
+            // Edits and not a reset, which would drop the undo history and put the cursor on line one.
+            this.model.applyEdits(spans.map((span) => ({ from: span.start, to: span.end, text: span.text })), { source: 'external' });
+        }
+        finally {
+            this.settingText = false;
+        }
+    }
+    onChange(listener) {
+        return subscribe(this.changes, listener);
+    }
+    onTextChange(listener) {
+        this.textChanges.add(listener);
+        return () => {
+            this.textChanges.delete(listener);
+        };
+    }
+    announceTextChange(edits, source) {
+        const change = {
+            source,
+            changes: edits.map((edit) => ({
+                range: { start: { line: edit.start.line, character: edit.start.column }, end: { line: edit.end.line, character: edit.end.column } },
+                text: edit.text
+            }))
+        };
+        for (const listener of [...this.textChanges]) {
+            listener(change);
+        }
+    }
+    caretMoved(head) {
+        if (head === this.caretOffset) {
+            return;
+        }
+        this.caretOffset = head;
+        const position = this.positionAt(head);
+        for (const listener of [...this.carets]) {
+            listener(position);
+        }
+    }
+    getCaret() {
+        return this.positionAt(this.model.getPrimary().head);
+    }
+    getScrollTop() {
+        return this.view.scrollPlace.y;
+    }
+    getSelection() {
+        const { anchor, head } = this.model.getPrimary();
+        return { start: this.positionAt(Math.min(anchor, head)), end: this.positionAt(Math.max(anchor, head)) };
+    }
+    getSelections() {
+        return this.model.getSelections().map(({ anchor, head }) => ({
+            start: this.positionAt(Math.min(anchor, head)),
+            end: this.positionAt(Math.max(anchor, head))
+        }));
+    }
+    getIndentation() {
+        return { tabSize: this.settings.tabSize, insertSpaces: this.settings.insertSpaces };
+    }
+    setCaret(position, reveal = 'relative') {
+        const offset = this.offsetAt(position);
+        this.model.setSelections([{ anchor: offset, head: offset }]);
+        this.view.revealOffset(offset, reveal);
+    }
+    setSelection(range, reveal = 'relative') {
+        const head = this.offsetAt(range.end);
+        this.model.setSelections([{ anchor: this.offsetAt(range.start), head }]);
+        this.view.revealOffset(head, reveal);
+    }
+    setSelections(ranges, reveal = 'relative') {
+        const last = ranges.at(-1);
+        if (last === undefined) {
+            return;
+        }
+        this.model.setSelections(ranges.map((range) => ({ anchor: this.offsetAt(range.start), head: this.offsetAt(range.end) })));
+        this.view.revealOffset(this.offsetAt(last.end), reveal);
+    }
+    onCaret(listener) {
+        this.carets.add(listener);
+        return () => {
+            this.carets.delete(listener);
+        };
+    }
+    onHover(listener) {
+        return this.view.onHover((offset) => {
+            const rect = offset === null ? null : this.view.clientRectOf(offset);
+            listener(offset === null || rect === null ? null : { position: this.positionAt(offset), rect });
+        });
+    }
+    rectAt(position) {
+        return this.view.clientRectOf(this.offsetAt(position));
+    }
+    onViewChange(listener) {
+        return this.view.onViewChange(listener);
+    }
+    onClick(handler) {
+        return this.controller.onClick(handler);
+    }
+    onContextMenu(listener) {
+        return this.controller.onContextMenu(listener);
+    }
+    onKeyDown(handler) {
+        return this.controller.onKeyDown(handler);
+    }
+    setSelectionRanges(provider) {
+        this.controller.setSelectionRanges(provider);
+    }
+    applyEdits(edits) {
+        if (this.settings.readOnly || edits.length === 0) {
+            return false;
+        }
+        try {
+            return this.model.applyEdits(edits.map((edit) => ({ from: this.offsetAt(edit.range.start), to: this.offsetAt(edit.range.end), text: edit.text })), { source: 'command' });
+        }
+        catch {
+            return false;
+        }
+    }
+    setMarkers(markers) {
+        this.view.setMarkers(markers.map((marker) => ({
+            severity: marker.severity,
+            from: this.offsetAt(marker.range.start),
+            to: this.offsetAt(marker.range.end),
+            unnecessary: marker.unnecessary === true,
+            deprecated: marker.deprecated === true,
+            ...(marker.message === undefined ? {} : { message: marker.message })
+        })));
+    }
+    setInlayHints(hints) {
+        this.view.setInlays(hints.map((hint, index) => ({ id: `hint-${index}`, at: this.offsetAt(hint.position), text: hint.label })));
+    }
+    setGhostText(ghost) {
+        this.view.setGhost(ghost === null ? null : { at: this.offsetAt(ghost.position), text: ghost.text, accessory: ghost.accessory });
+    }
+    setSemanticTokens(tokens) {
+        this.view.setSemanticTokens(tokens === null
+            ? null
+            : tokens.map((token) => {
+                const from = this.offsetAt({ line: token.line, character: token.character });
+                return { from, to: from + token.length, scopes: token.scopes };
+            }));
+    }
+    setHighlights(highlights) {
+        this.view.setOccurrences(highlights.map((highlight) => ({ from: this.offsetAt(highlight.range.start), to: this.offsetAt(highlight.range.end), kind: highlight.kind })));
+    }
+    setLink(range) {
+        this.view.setLink(range === null ? null : { from: this.offsetAt(range.start), to: this.offsetAt(range.end) });
+    }
+    getVisibleRange() {
+        const { first, last } = this.view.visibleLines();
+        return { start: { line: first, character: 0 }, end: this.positionAt(this.model.getLine(last).end) };
+    }
+    positionAt(offset) {
+        const { line, column } = this.model.positionAt(offset);
+        return { line, character: column };
+    }
+    textInRange(range) {
+        return this.model.slice(this.offsetAt(range.start), this.offsetAt(range.end));
+    }
+    offsetAt(position) {
+        return this.model.offsetAt({ line: Math.max(0, position.line), column: Math.max(0, position.character) });
+    }
+    onSave(listener) {
+        return subscribe(this.saves, listener);
+    }
+    onBlur(listener) {
+        return subscribe(this.blurs, listener);
+    }
+    revealLine(line, reveal = 'center') {
+        const bounds = this.model.getLine(this.clampLine(line));
+        this.model.setSelections([{ anchor: bounds.start, head: bounds.start }]);
+        this.view.revealOffset(bounds.start, reveal);
+    }
+    find(query) {
+        this.view.setFind(query, true);
+    }
+    findStep(direction) {
+        this.view.stepFind(direction);
+    }
+    replace(replacement, replaceOptions = {}) {
+        const { find } = this.view;
+        const mark = find.currentMark;
+        const query = find.activeQuery;
+        if (mark === null || query === null || this.blockedByReadOnly()) {
+            return false;
+        }
+        try {
+            const options = { caseSensitive: query.caseSensitive, wholeWord: query.wholeWord, regex: query.regex, from: mark.from, to: mark.to, maxResults: 1 };
+            const match = this.model.find(query.text, options)[0];
+            if (match === undefined) {
+                return false;
+            }
+            // The next match is looked for after what was written, or a replacement that holds the query would find itself again.
+            find.pendingAnchor = mark.from + replacementText(this.model.getText(), match, replacement, false, replaceOptions.preserveCase).length;
+            if (!this.model.replace(match, replacement, { preserveCase: replaceOptions.preserveCase })) {
+                find.pendingAnchor = undefined;
+                return false;
+            }
+        }
+        catch {
+            find.pendingAnchor = undefined;
+            return false;
+        }
+        this.view.revealFind();
+        this.view.render();
+        return true;
+    }
+    replaceAll(replacement, options = {}) {
+        const query = this.view.find.activeQuery;
+        if (query === null || this.blockedByReadOnly()) {
+            return 0;
+        }
+        try {
+            return this.model.replaceAll(query.text, replacement, {
+                caseSensitive: query.caseSensitive,
+                wholeWord: query.wholeWord,
+                regex: query.regex,
+                preserveCase: options.preserveCase,
+                ...this.view.find.scope
+            });
+        }
+        catch {
+            return 0;
+        }
+    }
+    setReplacePreview(replacement, options = {}) {
+        this.view.setReplacePreview(replacement, options.preserveCase === true);
+    }
+    selectFindMatches() {
+        const { find } = this.view;
+        const marks = find.matches;
+        if (marks.length === 0) {
+            return 0;
+        }
+        const current = find.current ?? marks.length - 1;
+        const ordered = [...marks.slice(0, current), ...marks.slice(current + 1), marks[current]];
+        this.view.setFind(null, false);
+        for (const mark of ordered) {
+            this.view.ensureVisible(mark.from);
+        }
+        this.model.setSelections(ordered.map((mark) => ({ anchor: mark.from, head: mark.to })));
+        this.view.revealCaret();
+        return ordered.length;
+    }
+    findFromCursor(query, direction) {
+        if (query.text === '') {
+            return false;
+        }
+        let matches;
+        try {
+            matches = this.model.find(query.text, { caseSensitive: query.caseSensitive, wholeWord: query.wholeWord, regex: query.regex });
+        }
+        catch {
+            return false;
+        }
+        if (matches.length === 0) {
+            return false;
+        }
+        const { anchor, head } = this.model.getPrimary();
+        const from = Math.min(anchor, head);
+        const to = Math.max(anchor, head);
+        const target = direction === 1 ? (matches.find((match) => match.from >= to) ?? matches[0]) : (matches.findLast((match) => match.to <= from) ?? matches.at(-1));
+        this.view.ensureVisible(target.from);
+        this.model.setSelections([direction === 1 ? { anchor: target.from, head: target.to } : { anchor: target.to, head: target.from }]);
+        this.view.revealCaret(target.from > head ? 'centerDown' : 'centerUp');
+        return true;
+    }
+    blockedByReadOnly() {
+        if (!this.settings.readOnly) {
+            return false;
+        }
+        if (this.settings.readOnlyReason) {
+            this.view.notify(this.settings.readOnlyReason);
+        }
+        return true;
+    }
+    onFind(listener) {
+        return this.view.onFind(listener);
+    }
+    endFind() {
+        const mark = this.view.find.currentMark;
+        this.view.setFind(null, false);
+        if (mark) {
+            this.view.ensureVisible(mark.from);
+            this.model.setSelections([{ anchor: mark.from, head: mark.to }]);
+            this.view.revealCaret();
+        }
+    }
+    setWrap(wrap) {
+        this.settings.wrap = wrap;
+        if (wrap) {
+            this.view.viewport.scrollLeft = 0;
+        }
+        this.view.applySettings();
+    }
+    setChangeMarks(marks) {
+        this.view.setChangeMarks(marks);
+    }
+    setAttributionMarks(marks) {
+        this.view.setAttributionMarks(marks);
+    }
+    setLineHighlights(highlights) {
+        this.view.setLineHighlights(highlights);
+    }
+    renderCode(container, text, options = {}) {
+        this.view.renderCode(container, text, options);
+    }
+    setRemoteCursors(cursors) {
+        this.view.setRemoteCarets(cursors.map((cursor) => ({ id: cursor.id, name: cursor.name, color: cursor.color, at: this.offsetAt(cursor.position) })));
+    }
+    onAttributionHover(listener) {
+        return this.view.onAttributionHover(listener);
+    }
+    setWidgets(widgets, owner = DEFAULT_WIDGET_OWNER) {
+        this.view.setBlockWidgets(owner, widgets.map((widget) => ({
+            id: `widget:${owner}:${widget.id}`,
+            at: this.offsetAt({ line: widget.line, character: 0 }),
+            placement: widget.placement ?? 'below',
+            height: widget.height,
+            render: (container) => {
+                container.classList.add('se-widget');
+                widget.render(container);
+            }
+        })));
+    }
+    setLineActions(actions, owner = DEFAULT_WIDGET_OWNER) {
+        this.view.setLineActions(owner, actions.map((action) => ({
+            id: action.id,
+            at: this.offsetAt({ line: action.line, character: 0 }),
+            render: (container) => action.render(container)
+        })));
+    }
+    trackRange(range) {
+        const tracked = this.view.trackRange(this.offsetAt(range.start), this.offsetAt(range.end));
+        return {
+            get: () => {
+                const offsets = tracked.get();
+                return offsets === null ? null : { start: this.positionAt(offsets.from), end: this.positionAt(offsets.to) };
+            },
+            dispose: () => tracked.dispose()
+        };
+    }
+    setCodeVision(rows) {
+        const current = new Map(rows.map((row) => [row.id, row]));
+        const revisions = new Map();
+        for (const row of rows) {
+            const signature = lensSignature(row.entries);
+            const before = this.lensRevisions.get(row.id);
+            revisions.set(row.id, {
+                signature,
+                revision: before === undefined || before.signature === signature ? (before?.revision ?? 0) : before.revision + 1
+            });
+        }
+        this.lensRows = current;
+        this.lensRevisions = revisions;
+        this.view.setLenses(rows.map((row) => ({
+            id: `lens:${row.id}`,
+            at: this.indentOffsetOf(row.line),
+            placement: 'above',
+            lens: true,
+            revision: revisions.get(row.id).revision,
+            render: (container) => fillLens(container, row.entries, (id) => this.lensRows.get(row.id)?.entries.find((entry) => entry.id === id))
+        })));
+    }
+    /* Where the text of a line begins after its indentation, so a row sitting there stays with the declaration when something is typed in front of it. */
+    indentOffsetOf(line) {
+        const { start, text } = this.model.getLine(Math.max(0, Math.min(line, this.model.getLineCount() - 1)));
+        return start + (/^[ \t]*/.exec(text)?.[0].length ?? 0);
+    }
+    setGutterAction(action) {
+        this.view.setGutterAction(action);
+    }
+    onGutterAction(listener) {
+        return this.view.onGutterAction(listener);
+    }
+    setGutterMarkers(markers, owner = 'default') {
+        this.view.setGutterMarkers(owner, markers);
+    }
+    onGutterMarker(listener) {
+        return this.view.onGutterMarker(listener);
+    }
+    setBlocks(blocks) {
+        this.view.setBlocks(blocks);
+    }
+    onScope(listener) {
+        return this.view.onScope(listener);
+    }
+    setGuides(guides) {
+        this.settings.guides = guides;
+        this.view.applySettings();
+    }
+    setWhitespace(whitespace) {
+        this.settings.whitespace = whitespace;
+        this.view.applySettings();
+    }
+    setRightMargin(column) {
+        this.settings.rightMargin = column;
+        this.view.applySettings();
+    }
+    setFoldOutline(outline) {
+        this.settings.foldOutline = outline;
+        this.view.applySettings();
+    }
+    setLabel(label) {
+        this.settings.label = label;
+        this.view.applySettings();
+    }
+    setFoldHints(hints) {
+        this.view.setFoldHints(hints === null
+            ? null
+            : {
+                symbols: (hints.symbols ?? []).map((symbol) => ({
+                    from: this.offsetAt(symbol.range.start),
+                    to: this.offsetAt(symbol.range.end),
+                    body: symbol.body
+                })),
+                ranges: (hints.ranges ?? []).map((range) => ({
+                    from: this.model.getLine(Math.min(range.startLine, this.model.getLineCount() - 1)).start,
+                    to: this.model.getLine(Math.min(range.endLine, this.model.getLineCount() - 1)).start,
+                    ...(range.kind === undefined ? {} : { kind: range.kind })
+                }))
+            });
+    }
+    setSmartKeys(keys) {
+        this.settings.smartKeys = { ...this.settings.smartKeys, ...keys };
+    }
+    setIndentation(indentation) {
+        if (indentation.tabSize === this.settings.tabSize && indentation.insertSpaces === this.settings.insertSpaces) {
+            return;
+        }
+        this.settings.tabSize = indentation.tabSize;
+        this.settings.insertSpaces = indentation.insertSpaces;
+        this.view.applySettings();
+    }
+    setTheme(theme) {
+        if (theme !== this.theme) {
+            this.theme = theme;
+            this.loadTokenizer();
+        }
+    }
+    refreshFont() {
+        this.view.refreshFont();
+    }
+    setReadOnly(readOnly, reason) {
+        this.settings.readOnly = readOnly;
+        this.settings.readOnlyReason = reason;
+        this.view.applySettings();
+    }
+    runCommand(command) {
+        return this.controller.command(command);
+    }
+    getFolds() {
+        return this.view.getFolds();
+    }
+    focus() {
+        this.view.focus();
+    }
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        this.changes.clear();
+        this.textChanges.clear();
+        this.carets.clear();
+        this.saves.clear();
+        this.blurs.clear();
+        this.subscription.dispose();
+        this.controller.dispose();
+        this.view.dispose();
+    }
+    clampLine(line) {
+        return Math.min(Math.max(1, Math.trunc(line) || 1), this.model.getLineCount()) - 1;
+    }
+}
+class SmartEditorEngine {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    mount(element, options) {
+        return new SmartEditor(this.options, element, options);
+    }
+}
+export function createSmartEditorEngine(options) {
+    return new SmartEditorEngine(options);
+}