@adecore/editor 0.41.1 → 0.43.0

package/dist/types.d.ts

@@ -1,9 +1,15 @@
 import type { EditorSearchClientOptions } from './search-client.ts';
 import type { Keymap } from './keymap-table.ts';
-import type { EditorCommand, FoldRole } from '@adecore/editor-core';
+import type { EditorCommand, FoldRole, WhitespaceCleanupOptions } from '@adecore/editor-core';
 export type { EditorCommand, FoldRole };
+export type EditorWhitespaceCleanup = WhitespaceCleanupOptions;
 export type EditorFoldOutline = 'off' | 'hover' | 'always';
-export type EditorViewCommand = 'collapseRegion' | 'expandRegion' | 'collapseAllRegions' | 'expandAllRegions' | 'collapseRegionRecursively' | 'expandRegionRecursively' | 'foldSelection' | 'collapseDocComments' | 'expandDocComments' | 'expandAllToLevel1' | 'expandAllToLevel2' | 'expandAllToLevel3' | 'expandAllToLevel4' | 'expandAllToLevel5' | 'toggleColumnMode';
+export type EditorViewCommand = 'collapseRegion' | 'expandRegion' | 'collapseAllRegions' | 'expandAllRegions' | 'collapseRegionRecursively' | 'expandRegionRecursively' | 'foldSelection' | 'collapseDocComments' | 'expandDocComments' | 'expandAllToLevel1' | 'expandAllToLevel2' | 'expandAllToLevel3' | 'expandAllToLevel4' | 'expandAllToLevel5' | 'toggleColumnMode' | 'increaseFontSize' | 'decreaseFontSize' | 'resetFontSize' | 'methodUp' | 'methodDown' | 'nextChange' | 'previousChange' | 'pasteAsPlainText';
+export interface EditorZoom {
+    readonly min?: number;
+    readonly max?: number;
+    readonly wheel?: boolean;
+}
 export type EditorRunCommand = EditorCommand | EditorViewCommand;
 export interface EditorFoldRange {
     readonly startLine: number;
@@ -38,6 +44,9 @@ export interface EditorOptions {
     readonly line?: number;
     readonly column?: number;
     readonly scrollTop?: number;
+    readonly todoWords?: readonly string[];
+    readonly fontSize?: number;
+    readonly zoom?: EditorZoom;
 }
 export interface EditorMessages {
     readonly noMoreOccurrences: string;
@@ -130,6 +139,15 @@ export interface EditorContentChange {
     readonly range: EditorRange;
     readonly text: string;
 }
+export interface EditorCopy {
+    readonly text: string;
+    readonly wholeLines: boolean;
+    readonly cut: boolean;
+}
+export interface EditorPasteOptions {
+    readonly wholeLines?: boolean;
+    readonly reindent?: boolean;
+}
 export interface EditorApplyEditsOptions {
     readonly mapSelections?: (range: EditorRange) => EditorRange;
     readonly mergeUndo?: boolean;
@@ -231,6 +249,7 @@ export interface EditorInlayHint {
     readonly parts?: readonly string[];
     readonly paddingLeft?: boolean;
     readonly paddingRight?: boolean;
+    readonly swatch?: string;
 }
 export interface EditorInlayTarget {
     readonly id: string;
@@ -324,8 +343,15 @@ export interface Editor {
     setWhitespace(whitespace: boolean): void;
     setRightMargin(column: number | null): void;
     setFoldOutline(outline: EditorFoldOutline): void;
+    setTodoWords?(words: readonly string[]): void;
     setLabel(label: string): void;
     setFoldHints(hints: EditorFoldHints | null): void;
+    setDeclarations?(positions: readonly EditorPosition[] | null): void;
+    onNavigate?(listener: (from: EditorPosition) => void): () => void;
+    hasFocus?(): boolean;
+    setWordSources?(source: (() => readonly string[]) | null): void;
+    onCopy?(listener: (copy: EditorCopy) => void): () => void;
+    paste?(text: string, options?: EditorPasteOptions): boolean;
     setChangeMarks(marks: readonly EditorChangeMark[], layer?: string): void;
     setBlocks(blocks: readonly EditorBlock[] | null): void;
     onScope(listener: (scope: readonly EditorBlock[]) => void): () => void;
@@ -341,7 +367,7 @@ export interface Editor {
     setHighlights(highlights: readonly EditorHighlight[]): void;
     setLink(range: EditorRange | null): void;
     setSemanticTokens(tokens: readonly EditorSemanticToken[] | null): void;
-    setInlayHints(hints: readonly EditorInlayHint[]): void;
+    setInlayHints(hints: readonly EditorInlayHint[], owner?: string): void;
     onInlayHover?(listener: (target: EditorInlayTarget | null) => void): () => void;
     onInlayClick?(handler: EditorInlayClickHandler): () => void;
     setInlayLink?(target: {
@@ -385,8 +411,13 @@ export interface Editor {
     setSelectionRanges(provider: EditorSelectionRanges | null): void;
     trackRange(range: EditorRange): EditorTrackedRange;
     applyEdits(edits: readonly EditorContentChange[], options?: EditorApplyEditsOptions): boolean;
+    cleanUpWhitespace?(options: EditorWhitespaceCleanup): boolean;
+    markSaved?(): void;
     setTheme(theme: EditorTheme): void;
     refreshFont(): void;
+    setFontSize?(size: number | null): void;
+    getFontSize?(): number;
+    onFontSizeChange?(listener: (size: number | null) => void): () => void;
     setReadOnly(readOnly: boolean, reason?: string): void;
     isReadOnly?(): boolean;
     runCommand(command: EditorRunCommand): boolean;

package/dist/view.d.ts

@@ -22,6 +22,7 @@ export interface ViewSettings {
     foldOutline: 'off' | 'hover' | 'always';
     folding?: boolean;
     stickyScroll?: boolean;
+    todoWords?: readonly string[];
 }
 export type ViewFold = Omit<FoldingRange, 'kind'> & {
     kind: FoldingRange['kind'] | 'custom';
@@ -59,6 +60,7 @@ export declare class EditorView {
     readonly layout: EditorLayout;
     readonly find: FindController;
     readonly tokens: TokenCache;
+    private readonly todos;
     private readonly content;
     private readonly gutter;
     private readonly gutterLines;
@@ -125,6 +127,7 @@ export declare class EditorView {
     private caretTimer;
     private caretKey;
     private renderedScroll;
+    private fontSize;
     private font;
     private layoutVersion;
     private revision;
@@ -140,6 +143,7 @@ export declare class EditorView {
     private lenses;
     private readonly replacements;
     private occurrences;
+    private hippieSource;
     private replacePreview;
     private dropCaret;
     private activeGuideCache;
@@ -154,6 +158,7 @@ export declare class EditorView {
     private customFolds;
     private collapsed;
     private foldHints;
+    private declarations;
     private defaultRoles;
     private settled;
     private foldTimer;
@@ -171,6 +176,8 @@ export declare class EditorView {
     applySettings(): void;
     repaint(): void;
     refreshFont(): void;
+    setFontSize(size: number | null): void;
+    getFontSize(): number;
     setTokenizer(tokenizer: LineTokenizer | null): void;
     grammarChanged(): void;
     setLineTokens(tokens: ((line: number) => readonly LineToken[] | null | undefined) | null): void;
@@ -183,6 +190,10 @@ export declare class EditorView {
     setLenses(lenses: readonly BlockWidget[]): void;
     private allBlocks;
     setOccurrences(occurrences: readonly Occurrence[]): void;
+    setHippieSource(range: {
+        from: number;
+        to: number;
+    } | null): void;
     setLink(link: {
         from: number;
         to: number;
@@ -190,6 +201,7 @@ export declare class EditorView {
     setSemanticTokens(tokens: readonly ViewSemanticToken[] | null): void;
     setScopeColors(colors: ScopeColors | null): void;
     private styledTokensOf;
+    private semanticTokensOf;
     private semanticSpans;
     setMarkers(markers: readonly ViewMarker[]): void;
     setComposition(text: string | undefined): void;
@@ -233,6 +245,7 @@ export declare class EditorView {
     private foldStates;
     private scheduleFolds;
     refreshFolds(): void;
+    structureRanges(): FoldingRange[];
     private withCustomFolds;
     private closerOf;
     private foldAt;
@@ -268,6 +281,10 @@ export declare class EditorView {
             endLine: number;
         }[];
     } | null, defaults?: readonly FoldRole[]): void;
+    setDeclarations(offsets: readonly number[] | null): void;
+    private methodStops;
+    goToChange(direction: -1 | 1): boolean;
+    goToMethod(direction: -1 | 1): boolean;
     setFoldHints(hints: FoldHints | null): void;
     private applyFoldDefaults;
     foldRole(role: FoldRole, collapse: boolean): void;

package/dist/view.js

@@ -5,6 +5,7 @@ import { createSearchClient } from './search-client.js';
 import { FindController } from './find.js';
 import { EditorLayout, RIGHT_PADDING, subRowBand } from './layout.js';
 import { createMetrics, readEditorFont } from './metrics.js';
+import { zoomedFont } from './zoom.js';
 import { AttributionRuns, colorValue, tintValue } from './attribution.js';
 import { renderCodeBlock } from './code-block.js';
 import { emit, subscribe } from './listeners.js';
@@ -16,6 +17,7 @@ import { Outline, scopeChain, stickyCover, stickyPlacements, structuralEntries }
 import { overviewTicks, paintOverview } from './overview.js';
 import { paintCarets, paintGutter, paintOver, paintOverlays, paintRemoteCarets, paintSigns, paintSticky, RowPainter } from './paint.js';
 import { overlayTokens } from './semantic.js';
+import { TodoMarks } from './todos.js';
 import { TokenCache } from './tokens.js';
 function sameRect(left, right) {
     return left.left === right.left && left.top === right.top && left.right === right.right && left.bottom === right.bottom;
@@ -79,6 +81,7 @@ export class EditorView {
     layout;
     find;
     tokens;
+    todos;
     content;
     gutter;
     gutterLines;
@@ -147,6 +150,8 @@ export class EditorView {
     caretTimer;
     caretKey = '';
     renderedScroll = { top: -1, left: -1 };
+    /* A size the code is zoomed to, over the page's; null draws it at the page's. */
+    fontSize = null;
     font;
     layoutVersion = 0;
     revision;
@@ -163,6 +168,7 @@ export class EditorView {
     lenses = [];
     replacements = new Map();
     occurrences = [];
+    hippieSource = null;
     replacePreview = null;
     dropCaret = null;
     activeGuideCache;
@@ -181,6 +187,7 @@ export class EditorView {
     collapsed = new Set();
     /* What a language server said about the folds, in offsets that follow the text through edits. */
     foldHints = null;
+    declarations = null;
     /* The roles that fold by themselves while the file is as it was opened; null once a person edited or the file opened with folds of its own. */
     defaultRoles = null;
     /* The folds somebody already decided on, a person or the defaults, so a later answer of a server leaves them as they are. */
@@ -281,6 +288,7 @@ export class EditorView {
             }
         });
         this.tokens = new TokenCache({ getLineCount: () => model.getLineCount(), getLineText: (line) => model.getLine(line).text });
+        this.todos = new TodoMarks(model, () => this.requestRender());
         const ResizeObserverClass = document.defaultView?.ResizeObserver;
         this.blockObserver = ResizeObserverClass
             ? new ResizeObserverClass((entries) => {
@@ -311,6 +319,7 @@ export class EditorView {
         this.root.dataset.readonly = String(this.settings.readOnly);
         this.root.dataset.wrap = String(this.settings.wrap);
         this.root.dataset.foldOutline = this.settings.foldOutline;
+        this.todos.configure(this.settings.language, this.settings.todoWords);
         this.layoutVersion++;
         this.layout.configure({ metrics: createMetrics(this.font, this.settings.tabSize, this.document) });
         this.render();
@@ -320,8 +329,26 @@ export class EditorView {
         this.render();
     }
     refreshFont() {
-        this.font = readEditorFont(this.root);
-        this.applySettings();
+        const style = this.root.style;
+        style.removeProperty('--code-font-size');
+        style.removeProperty('--code-line-height');
+        const base = readEditorFont(this.root);
+        this.font = this.fontSize === null ? base : zoomedFont(base, this.fontSize);
+        // On the element itself, so everything the editor draws at the code's size follows, and the page's size stays the base.
+        if (this.fontSize !== null) {
+            style.setProperty('--code-font-size', `${this.font.size}px`);
+            style.setProperty('--code-line-height', `${this.font.lineHeight}px`);
+        }
+        this.anchorScroll(() => this.applySettings());
+    }
+    /* Draws the code at a size of its own in whole pixels; null goes back to the page's. */
+    setFontSize(size) {
+        this.fontSize = size;
+        this.refreshFont();
+    }
+    /* The size the code is drawn at, in pixels. */
+    getFontSize() {
+        return this.font.size;
     }
     setTokenizer(tokenizer) {
         this.tokens.setTokenizer(tokenizer);
@@ -402,6 +429,14 @@ export class EditorView {
         this.occurrences = [...occurrences];
         this.render();
     }
+    /* The word Hippie completion took from this document, shown until the next key or edit; null takes the mark away. */
+    setHippieSource(range) {
+        if (range === null && this.hippieSource === null) {
+            return;
+        }
+        this.hippieSource = range;
+        this.render();
+    }
     /* A name underlined as a link a press follows, with the pointer to match; null takes it away. */
     setLink(link) {
         this.link = link;
@@ -421,8 +456,12 @@ export class EditorView {
         this.semanticLines.clear();
         this.render();
     }
-    /* The grammar's colors of a line with the servers' laid over them, the same object for as long as neither changed. */
+    /* The colors of a line with its TODOs drawn over them, the same object for as long as nothing under them changed. */
     styledTokensOf(line) {
+        return this.todos.styled(line, this.semanticTokensOf(line));
+    }
+    /* The grammar's colors of a line with the servers' laid over them, the same object for as long as neither changed. */
+    semanticTokensOf(line) {
         const base = this.lineTokenProvider === null ? this.tokens.tokensOf(line) : (this.lineTokenProvider(line) ?? null);
         if (base === null || this.semantic.length === 0 || this.scopeColors === null) {
             return base;
@@ -592,6 +631,7 @@ export class EditorView {
             this.markerVersion++;
             const anchor = this.topAnchor;
             this.occurrences = [];
+            this.hippieSource = null;
             this.link = null;
             this.content.classList.remove('se-content-link');
             this.outline.edited(batches);
@@ -615,6 +655,7 @@ export class EditorView {
             this.find.refresh();
             this.announceFind();
             this.scheduleFolds();
+            this.todos.schedule();
             this.colorAhead(true);
         }
         if (this.rowEndCaret !== null && this.model.getPrimary().head !== this.rowEndCaret) {
@@ -638,6 +679,9 @@ export class EditorView {
         if (this.foldHints !== null) {
             this.foldHints = mapFoldHints(this.foldHints, map);
         }
+        if (this.declarations !== null) {
+            this.declarations = this.declarations.map((offset) => map(offset));
+        }
         this.customFolds = this.customFolds.map((fold) => mapRange(fold, map));
         this.find.mapBounds(changes);
         for (const [layer, marks] of this.changeLayers) {
@@ -771,20 +815,25 @@ export class EditorView {
         if (this.disposed || this.settings.folding === false) {
             return;
         }
-        const ranges = this.model.getLength() > FOLD_LIMIT
-            ? []
-            : this.model.getFoldingRanges({
-                indentation: /^(python|py|yaml|yml)$/.test(this.settings.language ?? ''),
-                tabSize: this.settings.tabSize,
-                ...(this.settings.language === undefined ? {} : { language: this.settings.language }),
-                ...(this.foldHints === null ? {} : { hints: this.foldHints })
-            });
+        const ranges = this.structureRanges();
         this.foldRanges = this.withCustomFolds(ranges);
         this.outline.setStructure(structuralEntries(ranges, this.model, (from, to) => this.model.slice(from, to), (offset) => this.model.matchBracket(offset, this.settings.language)?.mate));
         const anchors = new Set(this.foldRanges.map((range) => range.from));
         this.collapsed = new Set([...this.collapsed].filter((anchor) => anchors.has(anchor)));
         this.refoldLayout();
     }
+    /* The folding ranges the document has now, a server's included, whether or not the folds are drawn. */
+    structureRanges() {
+        if (this.model.getLength() > FOLD_LIMIT) {
+            return [];
+        }
+        return this.model.getFoldingRanges({
+            indentation: /^(python|py|yaml|yml)$/.test(this.settings.language ?? ''),
+            tabSize: this.settings.tabSize,
+            ...(this.settings.language === undefined ? {} : { language: this.settings.language }),
+            ...(this.foldHints === null ? {} : { hints: this.foldHints })
+        });
+    }
     /* The folds a person made of a selection, which the document's own structure does not know, among the ones it does. */
     withCustomFolds(ranges) {
         const custom = this.customFolds.flatMap((fold) => {
@@ -993,6 +1042,49 @@ export class EditorView {
         this.applyFoldDefaults();
         this.refoldLayout();
     }
+    /* The places Method Up and Down stop at; they follow their text through edits until set again, and null goes back to the editor's own reading. */
+    setDeclarations(offsets) {
+        this.declarations = offsets === null ? null : [...new Set(offsets)].sort((left, right) => left - right);
+    }
+    methodStops() {
+        if (this.declarations !== null) {
+            return this.declarations;
+        }
+        const sections = this.foldRanges.filter((range) => range.kind === 'section').map((range) => this.model.getLine(range.startLine).start);
+        return [...new Set([...this.outline.declarationStops(this.model), ...sections])].sort((left, right) => left - right);
+    }
+    /* Moves the one caret to the first line of the next or previous change mark, of any layer. False when there is none. */
+    goToChange(direction) {
+        const line = this.model.positionAt(this.model.getPrimary().head).line;
+        const { runs } = this.resolvedChanges();
+        // A run the caret is in is where it already is; a deleted run is the line its mark sits on.
+        const target = direction === 1 ? runs.find((run) => run.start > line) : runs.findLast((run) => (run.kind === 'deleted' ? run.start : run.end) < line);
+        if (target === undefined) {
+            return false;
+        }
+        const offset = this.model.getLine(Math.min(target.start, this.model.getLineCount() - 1)).start;
+        this.model.setSelections([{ anchor: offset, head: offset }]);
+        this.revealOffset(offset, 'center');
+        return true;
+    }
+    /* Moves the one caret to the previous or next declaration on another line. False when there is none. */
+    goToMethod(direction) {
+        // The structure is read after a pause in typing, so a press right after an edit reads it now.
+        if (this.declarations === null) {
+            this.refreshFolds();
+        }
+        const line = this.model.positionAt(this.model.getPrimary().head).line;
+        const stops = this.methodStops();
+        const target = direction === 1
+            ? stops.find((offset) => this.model.positionAt(offset).line > line)
+            : stops.findLast((offset) => this.model.positionAt(offset).line < line);
+        if (target === undefined) {
+            return false;
+        }
+        this.model.setSelections([{ anchor: target, head: target }]);
+        this.revealOffset(target, direction === 1 ? 'centerDown' : 'centerUp');
+        return true;
+    }
     /* Hands over what a language server knows about the folds; null forgets it. The defaults fold what the answer names, once. */
     setFoldHints(hints) {
         this.foldHints = hints;
@@ -1836,6 +1928,9 @@ export class EditorView {
                 });
             }
         }
+        if (this.hippieSource !== null) {
+            marks.push({ className: 'se-hippie-source', rects: this.paintRectangles(this.hippieSource.from, this.hippieSource.to, rows) });
+        }
         const marginX = this.settings.rightMargin === null ? null : this.settings.rightMargin * this.layout.metrics.charWidth;
         // A margin past the content would stretch the scroll extent to itself, so it shows only where the text or the view reaches it.
         if (marginX !== null && marginX < Math.max(this.layout.width, this.viewportWidth)) {
@@ -2228,7 +2323,7 @@ export class EditorView {
         const matches = this.find.matches;
         const current = this.find.current;
         const alike = this.selectionOccurrences();
-        const key = `${this.revision}|${this.changeVersion}|${this.markerVersion}|${this.layout.height}|${trackHeight}|${matches.length}|${current}|${matches[0]?.from}|${matches.at(-1)?.from}|${this.selectionOccurrenceCache.key}`;
+        const key = `${this.revision}|${this.changeVersion}|${this.markerVersion}|${this.todos.version}|${this.layout.height}|${trackHeight}|${matches.length}|${current}|${matches[0]?.from}|${matches.at(-1)?.from}|${this.selectionOccurrenceCache.key}`;
         if (key === this.overviewKey) {
             return;
         }
@@ -2255,6 +2350,11 @@ export class EditorView {
                 });
             }
         }
+        for (const todo of this.todos.marks) {
+            if (todo.line < this.model.getLineCount()) {
+                spans.push({ kind: 'todo', top: rowTop(todo.line), bottom: rowBottom(todo.line), offset: todo.from, title: todo.text });
+            }
+        }
         for (const range of alike) {
             const line = this.model.positionAt(range.from).line;
             spans.push({ kind: 'occurrence', top: rowTop(line), bottom: rowBottom(line) });
@@ -2427,6 +2527,7 @@ export class EditorView {
         this.blockObserver?.disconnect();
         clearTimeout(this.bracketTimer);
         clearTimeout(this.foldTimer);
+        this.todos.dispose();
         clearTimeout(this.colorTimer);
         clearTimeout(this.noticeTimer);
         clearTimeout(this.liveTimer);

package/dist/zoom.d.ts

@@ -0,0 +1,18 @@
+import type { EditorFont } from './metrics.ts';
+import type { EditorZoom } from './types.ts';
+export declare const MIN_FONT_SIZE = 12;
+export declare const MAX_FONT_SIZE = 90;
+export interface FontSizeRange {
+    readonly min: number;
+    readonly max: number;
+}
+export declare function fontSizeRange(zoom: EditorZoom | undefined): FontSizeRange;
+export declare function clampFontSize(size: number, range: FontSizeRange): number;
+export declare function zoomedFont(base: EditorFont, size: number): EditorFont;
+export declare class WheelZoom {
+    private pending;
+    step(event: {
+        deltaY: number;
+        deltaMode: number;
+    }): number;
+}

package/dist/zoom.js

@@ -0,0 +1,41 @@
+/* Nothing a person reads is smaller. */
+export const MIN_FONT_SIZE = 12;
+export const MAX_FONT_SIZE = 90;
+/* A trackpad or a pinch sends the wheel in small steps; this many pixels of them are one step of the size. */
+const PIXELS_PER_STEP = 20;
+export function fontSizeRange(zoom) {
+    const min = Math.max(MIN_FONT_SIZE, Math.round(zoom?.min ?? MIN_FONT_SIZE));
+    return { min, max: Math.max(min, Math.round(zoom?.max ?? MAX_FONT_SIZE)) };
+}
+/* In whole pixels inside the range. */
+export function clampFontSize(size, range) {
+    return Math.min(range.max, Math.max(range.min, Math.round(size)));
+}
+/* The face at another size, with the line as much taller as the page's line is to its text, in whole pixels. */
+export function zoomedFont(base, size) {
+    return { family: base.family, size, lineHeight: Math.round((size * base.lineHeight) / base.size) };
+}
+/* Turns the wheel with the zoom modifier, or a pinch, into steps of one pixel: up and apart make the text larger. */
+export class WheelZoom {
+    pending = 0;
+    /* -1, 0 or 1. A mouse notch is one step however far the platform says it went. */
+    step(event) {
+        if (event.deltaY === 0) {
+            return 0;
+        }
+        if (event.deltaMode !== 0 || Math.abs(event.deltaY) >= PIXELS_PER_STEP) {
+            this.pending = 0;
+            return event.deltaY < 0 ? 1 : -1;
+        }
+        if (Math.sign(this.pending) !== 0 && Math.sign(this.pending) !== Math.sign(event.deltaY)) {
+            this.pending = 0;
+        }
+        this.pending += event.deltaY;
+        if (Math.abs(this.pending) < PIXELS_PER_STEP) {
+            return 0;
+        }
+        const direction = this.pending < 0 ? 1 : -1;
+        this.pending = 0;
+        return direction;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor",
-  "version": "0.41.1",
+  "version": "0.43.0",
   "type": "module",
   "exports": {
     ".": {
@@ -54,7 +54,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.41.1",
+    "@adecore/editor-core": "0.43.0",
     "linkedom": "^0.18.14",
     "shiki": "^4.5.0"
   },