@adecore/editor 0.41.1 → 0.43.0

package/src/controller.ts

@@ -8,13 +8,16 @@ import { NativeInput } from './native-input.ts';
 import { columnSelections, sameCell } from './column-selection.ts';
 import { PointerSelection } from './pointer.ts';
 import { TouchSelection } from './touch.ts';
+import { WheelZoom } from './zoom.ts';
 import type {
     EditorClick,
     EditorClickHandler,
     EditorInlayClick,
     EditorInlayClickHandler,
     EditorContextMenu,
+    EditorCopy,
     EditorKeyHandler,
+    EditorPasteOptions,
     EditorPosition,
     EditorRunCommand,
     EditorSelectionRanges,
@@ -29,6 +32,10 @@ export interface ControllerOptions {
     apple: boolean;
     save(): void;
     blur(): void;
+    /* One pixel larger (1) or smaller (-1), or back to the page's size (0). */
+    zoom(step: -1 | 0 | 1): void;
+    /* Whether the zoom modifier with the wheel, or a pinch, zooms. */
+    wheelZooms(): boolean;
 }
 
 const MODIFYING = new Set<EditorCommand>([
@@ -40,9 +47,12 @@ const MODIFYING = new Set<EditorCommand>([
     'deleteLine',
     'moveLineUp',
     'moveLineDown',
+    'moveStatementUp',
+    'moveStatementDown',
     'toggleLineComment',
     'toggleBlockComment',
     'startNewLine',
+    'completeCurrentStatement',
     'startNewLineBefore',
     'splitLine',
     'joinLines',
@@ -53,9 +63,18 @@ const MODIFYING = new Set<EditorCommand>([
     'outdent',
     'insertNewline',
     'smartBackspace',
-    'deleteForward'
+    'deleteForward',
+    'sortLines',
+    'reverseLines',
+    'uniqueLines',
+    'convertIndentsToSpaces',
+    'convertIndentsToTabs',
+    'hippieCompletion',
+    'hippieBackwardCompletion'
 ]);
 
+const CODE_BLOCK_COMMANDS = new Set<EditorCommand>(['codeBlockStart', 'codeBlockEnd', 'codeBlockStartWithSelection', 'codeBlockEndWithSelection']);
+
 const VIEW_COMMANDS = new Set<EditorViewCommand>([
     'collapseRegion',
     'expandRegion',
@@ -71,12 +90,30 @@ const VIEW_COMMANDS = new Set<EditorViewCommand>([
     'expandAllToLevel3',
     'expandAllToLevel4',
     'expandAllToLevel5',
-    'toggleColumnMode'
+    'toggleColumnMode',
+    'increaseFontSize',
+    'decreaseFontSize',
+    'resetFontSize',
+    'methodUp',
+    'methodDown',
+    'nextChange',
+    'previousChange',
+    'pasteAsPlainText'
 ]);
 
+const ZOOM_STEPS = { increaseFontSize: 1, decreaseFontSize: -1, resetFontSize: 0 } as const satisfies Partial<Record<EditorViewCommand, -1 | 0 | 1>>;
+
 /* The clipboard text of the last copy or cut of a bare caret, which pastes back as whole lines. Shared, since it can be pasted in another editor. */
 let lineClip: string | null = null;
 
+/*
+ * Makes `text` the copy that pastes back as whole lines (or not), for a paste from a history that kept what the
+ * copy was. The clipboard itself is the caller's.
+ */
+export function rememberCopy(text: string, wholeLines: boolean): void {
+    lineClip = wholeLines ? text : null;
+}
+
 function selectionSignature(selections: readonly Selection[]): string {
     return selections.map((selection) => `${selection.anchor}:${selection.head}`).join(',');
 }
@@ -96,6 +133,9 @@ export class InputController {
     private readonly touch: TouchSelection;
     private readonly cleanup: (() => void)[] = [];
     private readonly keyHandlers = new Set<EditorKeyHandler>();
+    private readonly navigateListeners = new Set<(from: number) => void>();
+    private readonly copyListeners = new Set<(copy: EditorCopy) => void>();
+    private wordSources: (() => readonly string[]) | null = null;
     private readonly gesture: DoubleModifierGesture;
     private readonly clickHandlers = new Set<EditorClickHandler>();
     private readonly inlayHandlers = new Set<EditorInlayClickHandler>();
@@ -109,6 +149,7 @@ export class InputController {
     /* The Extend Selection presses that wait for a server's ranges, which are answered one after the other. */
     private expansions: Promise<void> = Promise.resolve();
     private lastInputAt = 0;
+    private readonly wheelZoom = new WheelZoom();
     private desiredXs: number[] = [];
     private keepDesiredXs = false;
     private readonly view: EditorView;
@@ -224,13 +265,13 @@ export class InputController {
 
         this.listen(input, 'paste', (event) => {
             event.preventDefault();
-            this.paste(event.clipboardData?.getData('text/plain') ?? '');
+            this.pasteText(event.clipboardData?.getData('text/plain') ?? '');
         });
 
         this.listen(input, 'copy', (event) => this.copy(event, false));
         this.listen(input, 'cut', (event) => this.copy(event, true));
         this.listen(viewport, 'scroll', () => this.view.scrolled());
-        this.listen(viewport, 'wheel', () => this.view.cancelScroll());
+        this.listen(viewport, 'wheel', (event) => this.wheel(event));
         this.listen(viewport, 'pointermove', (event) => this.view.hoverMoved(event));
 
         this.listen(viewport, 'pointerleave', () => {
@@ -296,6 +337,8 @@ export class InputController {
 
         this.cleanup.length = 0;
         this.keyHandlers.clear();
+        this.navigateListeners.clear();
+        this.copyListeners.clear();
     }
 
     private blockedByReadOnly(): boolean {
@@ -340,16 +383,30 @@ export class InputController {
         }
     }
 
-    private paste(text: string): void {
+    /* Pastes as a paste from the clipboard does; false when a read-only editor refused. */
+    pasteText(text: string, options: EditorPasteOptions = {}): boolean {
         if (this.blockedByReadOnly()) {
-            return;
+            return false;
         }
 
         this.unfoldCarets();
         this.historyGroup++;
-        this.view.model.paste(this.native.normalizeNewlines(text), { ...this.commandOptions(), wholeLines: text !== '' && text === lineClip });
+
+        const pasted = this.view.model.paste(this.native.normalizeNewlines(text), {
+            ...this.commandOptions(),
+            ...(options.reindent === false ? { indentOnPaste: false } : {}),
+            wholeLines: options.wholeLines ?? (text !== '' && text === lineClip)
+        });
+
         this.historyGroup++;
         this.view.revealCaret();
+
+        return pasted;
+    }
+
+    /* Told what a copy or cut put on the clipboard. */
+    onCopy(listener: (copy: EditorCopy) => void): () => void {
+        return subscribe(this.copyListeners, listener);
     }
 
     private commandOptions(): CommandOptions {
@@ -365,24 +422,70 @@ export class InputController {
             tabOutOfClosers: keys.tabOutOfClosers,
             smartEnter: keys.smartIndentOnEnter,
             indentOnPaste: keys.indentOnPaste,
+            indentGuides: settings.guides,
             smartSemicolon: keys.smartSemicolon,
             smartArrow: keys.smartArrow,
             language: settings.language ?? 'plaintext',
             camelCase: keys.camelHumps,
             visualLine: (offset) => this.view.rowOf(offset),
-            lineSpan: (line) => this.view.lineSpan(line)
+            lineSpan: (line) => this.view.lineSpan(line),
+            structure: () => this.view.structureRanges(),
+            ...(this.wordSources === null ? {} : { wordSources: this.wordSources })
         };
     }
 
+    /* The texts Hippie completion takes words from after those of this document; null takes them away. */
+    setWordSources(source: (() => readonly string[]) | null): void {
+        this.wordSources = source;
+    }
+
     /* Folding is the view's, since it knows where the ranges are. */
     private viewCommand(name: EditorViewCommand): boolean {
         const { view } = this;
 
+        if (name in ZOOM_STEPS) {
+            this.options.zoom(ZOOM_STEPS[name as keyof typeof ZOOM_STEPS]);
+
+            return true;
+        }
+
+        if (name === 'methodUp' || name === 'methodDown') {
+            const from = view.model.getPrimary().head;
+            const moved = view.goToMethod(name === 'methodUp' ? -1 : 1);
+
+            if (moved) {
+                emit(this.navigateListeners, from);
+            }
+
+            return moved;
+        }
+
+        if (name === 'pasteAsPlainText') {
+            // The clipboard is read once a person asks, and an editor with no way to read it does nothing.
+            if (this.blockedByReadOnly() || globalThis.navigator?.clipboard?.readText === undefined) {
+                return false;
+            }
+
+            void navigator.clipboard.readText().then(
+                (text) => this.pasteText(text, { reindent: false }),
+                () => undefined
+            );
+
+            return true;
+        }
+
+        if (name === 'nextChange' || name === 'previousChange') {
+            return view.goToChange(name === 'nextChange' ? 1 : -1);
+        }
+
         if (view.settings.folding === false && name !== 'toggleColumnMode') {
             return false;
         }
 
-        const run: Record<EditorViewCommand, () => void> = {
+        const run: Record<
+            Exclude<EditorViewCommand, keyof typeof ZOOM_STEPS | 'methodUp' | 'methodDown' | 'nextChange' | 'previousChange' | 'pasteAsPlainText'>,
+            () => void
+        > = {
             collapseRegion: () => view.collapseRegion(),
             expandRegion: () => view.expandRegion(),
             collapseAllRegions: () => view.foldAll(true),
@@ -400,11 +503,27 @@ export class InputController {
             toggleColumnMode: () => this.toggleColumnMode()
         };
 
-        run[name]();
+        run[name as keyof typeof run]();
 
         return true;
     }
 
+    /* A pinch comes as the wheel with Ctrl, on every platform. */
+    private wheel(event: WheelEvent): void {
+        this.view.cancelScroll();
+
+        if (!(event.ctrlKey || (this.options.apple && event.metaKey)) || !this.options.wheelZooms()) {
+            return;
+        }
+
+        event.preventDefault();
+        const step = this.wheelZoom.step(event);
+
+        if (step !== 0) {
+            this.options.zoom(step as -1 | 1);
+        }
+    }
+
     /* Runs a model command on every caret, with the folds that would hide its result opened first. */
     command(name: EditorRunCommand): boolean {
         if (VIEW_COMMANDS.has(name as EditorViewCommand)) {
@@ -491,7 +610,11 @@ export class InputController {
             }
         }
 
-        const folded = name === 'moveLineUp' || name === 'moveLineDown' ? this.view.getFolds().collapsed : [];
+        const before = model.getPrimary().head;
+        const folded =
+            name === 'moveLineUp' || name === 'moveLineDown' || name === 'moveStatementUp' || name === 'moveStatementDown'
+                ? this.view.getFolds().collapsed
+                : [];
 
         const result = model.execute(name, {
             ...this.commandOptions(),
@@ -506,11 +629,24 @@ export class InputController {
             this.view.markRowEnd(model.getPrimary().head);
         }
 
+        if (name === 'hippieCompletion' || name === 'hippieBackwardCompletion') {
+            this.view.setHippieSource(model.hippieSource);
+        }
+
         this.view.revealCaret();
 
+        if (CODE_BLOCK_COMMANDS.has(name) && model.getPrimary().head !== before) {
+            emit(this.navigateListeners, before);
+        }
+
         return result;
     }
 
+    /* Told the offset the primary caret left when a command that navigates moved it. */
+    onNavigate(listener: (from: number) => void): () => void {
+        return subscribe(this.navigateListeners, listener);
+    }
+
     private typeText(text: string): void {
         if (this.blockedByReadOnly()) {
             return;
@@ -799,6 +935,8 @@ export class InputController {
             return;
         }
 
+        this.view.setHippieSource(null);
+
         const added = this.gesture.keydown(event);
 
         if (added !== null) {
@@ -895,6 +1033,7 @@ export class InputController {
 
         event.clipboardData?.setData('text/plain', text);
         lineClip = empty ? text : null;
+        emit(this.copyListeners, { text, wholeLines: empty, cut });
 
         if (!cut || this.blockedByReadOnly()) {
             return;

package/src/editor.css

@@ -17,6 +17,7 @@
     --editor-added: var(--status-idle);
     --editor-modified: var(--accent);
     --editor-deleted: var(--status-error);
+    --editor-todo: var(--status-running);
     --editor-mark-number-mix: 72%;
     --editor-mark-bar-width: 3px;
     --editor-mark-gap: 4px;
@@ -38,6 +39,7 @@
     --editor-margin: color-mix(in srgb, var(--text) 16%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 32%, transparent);
     --editor-hatch: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-todo: var(--status-idle);
     --editor-mark-number-mix: 82%;
     --editor-sticky-shadow: color-mix(in srgb, black 60%, transparent);
 }
@@ -478,11 +480,15 @@
     left: 6px;
     background: var(--editor-occurrence);
 }
+.se-tick-todo,
 .se-tick-error,
 .se-tick-warning,
 .se-tick-info {
     left: 10px;
 }
+.se-tick-todo {
+    background: var(--editor-todo);
+}
 /* The only part of the track that takes the pointer, with a wider reach than the 4px it draws. */
 .se-tick[data-offset] {
     pointer-events: auto;
@@ -646,11 +652,16 @@
 .se-find-match,
 .se-find-current,
 .se-occurrence,
+.se-hippie-source,
 .se-bracket-match,
 .se-bracket-unmatched {
     position: absolute;
     border-radius: var(--radius-xs);
 }
+.se-hippie-source {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
+    border-radius: var(--radius-sm);
+}
 .se-find-match {
     background: var(--find-match);
 }
@@ -741,6 +752,14 @@
     white-space: pre;
     cursor: default;
 }
+.se-swatch {
+    height: 12px;
+    margin-top: calc((var(--code-line-height, 20px) - 12px) / 2);
+    padding: 0;
+    border-radius: var(--radius-sm);
+    box-shadow: inset 0 0 0 1px var(--border);
+    cursor: pointer;
+}
 .se-inlay-link {
     text-decoration: underline;
     text-underline-offset: 2px;

package/src/engine.ts

@@ -17,6 +17,7 @@ import type {
     EditorCodeVision,
     EditorClickHandler,
     EditorContextMenu,
+    EditorCopy,
     EditorContentChange,
     EditorEngine,
     EditorFindQuery,
@@ -36,6 +37,7 @@ import type {
     EditorInlayHint,
     EditorInlayTarget,
     EditorKeyHandler,
+    EditorPasteOptions,
     EditorInputPopup,
     EditorMarker,
     EditorMessages,
@@ -53,11 +55,13 @@ import type {
     EditorTextChange,
     EditorTrackedRange,
     EditorTheme,
+    EditorWhitespaceCleanup,
     EditorWidget,
     SmartEditorEngineOptions
 } from './types.ts';
 import { fillLens, lensSignature } from './lens.ts';
 import { EditorView, type ViewSettings } from './view.ts';
+import { clampFontSize, type FontSizeRange, fontSizeRange } from './zoom.ts';
 
 const DEFAULT_TAB_SIZE = 4;
 const DEFAULT_LABEL = 'Code editor';
@@ -77,6 +81,9 @@ class SmartEditor implements Editor {
     private caretOffset = 0;
     private readonly saves = new Set<Listener>();
     private readonly blurs = new Set<Listener>();
+    private readonly fontSizes = new Set<(size: number | null) => void>();
+    private readonly fontSizeRange: FontSizeRange;
+    private fontSize: number | null = null;
     private readonly subscription: { dispose(): void };
     private language: string | undefined;
     private theme: EditorTheme;
@@ -85,12 +92,15 @@ class SmartEditor implements Editor {
     private lensRevisions = new Map<string, { signature: string; revision: number }>();
     private tokenizerRequest = 0;
     private settingText = false;
+    /* The hints of each owner, in the order the owners first set theirs. */
+    private readonly inlayOwners = new Map<string, readonly EditorInlayHint[]>();
     private disposed = false;
 
     private readonly engine: SmartEditorEngineOptions;
 
     constructor(engine: SmartEditorEngineOptions, element: HTMLElement, options: EditorOptions) {
         this.engine = engine;
+        this.fontSizeRange = fontSizeRange(options.zoom);
         this.model = new DocumentModel(options.text);
         this.language = options.language;
         this.theme = options.theme;
@@ -111,7 +121,8 @@ class SmartEditor implements Editor {
             whitespace: options.whitespace === true,
             rightMargin: options.rightMargin ?? null,
             foldOutline: options.foldOutline ?? 'hover',
-            folding: options.folding !== false
+            folding: options.folding !== false,
+            todoWords: options.todoWords
         };
 
         this.view = new EditorView(element, this.model, this.settings);
@@ -122,9 +133,15 @@ class SmartEditor implements Editor {
             keymap: engine.keymap,
             apple: engine.apple ?? false,
             save: () => emit(this.saves),
-            blur: () => emit(this.blurs)
+            blur: () => emit(this.blurs),
+            zoom: (step) => this.zoom(step),
+            wheelZooms: () => options.zoom?.wheel !== false
         });
 
+        if (options.fontSize !== undefined) {
+            this.setFontSize(options.fontSize);
+        }
+
         this.revision = this.model.getRevision();
         this.caretOffset = this.model.getPrimary().head;
 
@@ -392,6 +409,17 @@ class SmartEditor implements Editor {
         }
     }
 
+    cleanUpWhitespace(options: EditorWhitespaceCleanup): boolean {
+        const changed = !this.settings.readOnly && this.model.cleanUpWhitespace({ ...options, language: this.settings.language });
+        this.model.markSaved();
+
+        return changed;
+    }
+
+    markSaved(): void {
+        this.model.markSaved();
+    }
+
     setMarkers(markers: readonly EditorMarker[]): void {
         this.view.setMarkers(
             markers.map((marker) => ({
@@ -405,15 +433,21 @@ class SmartEditor implements Editor {
         );
     }
 
-    setInlayHints(hints: readonly EditorInlayHint[]): void {
+    setInlayHints(hints: readonly EditorInlayHint[], owner: string = DEFAULT_WIDGET_OWNER): void {
+        if (hints.length === 0) {
+            this.inlayOwners.delete(owner);
+        } else {
+            this.inlayOwners.set(owner, hints);
+        }
         this.view.setInlays(
-            hints.map((hint, index) => ({
+            [...this.inlayOwners.values()].flat().map((hint, index) => ({
                 id: hint.id ?? `hint-${index}`,
                 at: this.offsetAt(hint.position),
                 text: hint.label,
                 ...(hint.parts === undefined ? {} : { parts: hint.parts }),
                 ...(hint.paddingLeft ? { gapLeft: INLAY_GAP } : {}),
-                ...(hint.paddingRight ? { gapRight: INLAY_GAP } : {})
+                ...(hint.paddingRight ? { gapRight: INLAY_GAP } : {}),
+                ...(hint.swatch === undefined ? {} : { swatch: hint.swatch })
             }))
         );
     }
@@ -905,10 +939,39 @@ class SmartEditor implements Editor {
         this.view.applySettings();
     }
 
+    setTodoWords(words: readonly string[]): void {
+        this.settings.todoWords = [...words];
+        this.view.applySettings();
+    }
+
     setFoldHints(hints: EditorFoldHints | null): void {
         this.view.setFoldHints(hints === null ? null : this.foldHintsByOffset(hints));
     }
 
+    setDeclarations(positions: readonly EditorPosition[] | null): void {
+        this.view.setDeclarations(positions === null ? null : positions.map((position) => this.offsetAt(position)));
+    }
+
+    onNavigate(listener: (from: EditorPosition) => void): () => void {
+        return this.controller.onNavigate((from) => listener(this.positionAt(from)));
+    }
+
+    hasFocus(): boolean {
+        return this.view.focused;
+    }
+
+    setWordSources(source: (() => readonly string[]) | null): void {
+        this.controller.setWordSources(source);
+    }
+
+    onCopy(listener: (copy: EditorCopy) => void): () => void {
+        return this.controller.onCopy(listener);
+    }
+
+    paste(text: string, options?: EditorPasteOptions): boolean {
+        return this.controller.pasteText(text, options);
+    }
+
     private foldHintsByOffset(hints: EditorFoldHints): FoldHints {
         const lineOf = (line: number): { start: number; end: number } => this.model.getLine(Math.min(line, this.model.getLineCount() - 1));
 
@@ -960,6 +1023,40 @@ class SmartEditor implements Editor {
         this.view.refreshFont();
     }
 
+    setFontSize(size: number | null): void {
+        const next = size === null || !Number.isFinite(size) ? null : clampFontSize(size, this.fontSizeRange);
+
+        if (next !== this.fontSize) {
+            this.fontSize = next;
+            this.view.setFontSize(next);
+        }
+    }
+
+    getFontSize(): number {
+        return this.view.getFontSize();
+    }
+
+    onFontSizeChange(listener: (size: number | null) => void): () => void {
+        return subscribe(this.fontSizes, listener);
+    }
+
+    /* Steps from the size on screen, so the first step from the page's size is one pixel away from it. */
+    private zoom(step: -1 | 0 | 1): void {
+        const before = this.fontSize;
+        const current = this.view.getFontSize();
+
+        // A page size outside the range must not make a step the other way.
+        if (step !== 0 && Math.sign(clampFontSize(current + step, this.fontSizeRange) - current) !== step) {
+            return;
+        }
+
+        this.setFontSize(step === 0 ? null : current + step);
+
+        if (this.fontSize !== before) {
+            emit(this.fontSizes, this.fontSize);
+        }
+    }
+
     setReadOnly(readOnly: boolean, reason?: string): void {
         this.settings.readOnly = readOnly;
         this.settings.readOnlyReason = reason;
@@ -994,6 +1091,7 @@ class SmartEditor implements Editor {
         this.carets.clear();
         this.saves.clear();
         this.blurs.clear();
+        this.fontSizes.clear();
         this.subscription.dispose();
         this.controller.dispose();
         this.view.dispose();