@adecore/editor 0.42.0 → 0.43.0

package/dist/layout.js

@@ -11,6 +11,8 @@ export function subRowBand(top, subRows, lineHeight, window, block = 1) {
         last: Math.min(subRows - 1, Math.ceil((last + 1) / block) * block - 1)
     };
 }
+/* The side of a swatch in pixels, without its gaps. */
+export const SWATCH_SIZE = 12;
 export const TEXT_PADDING = 0;
 export const BOTTOM_PADDING = 8;
 export const RIGHT_PADDING = 16;
@@ -154,9 +156,12 @@ export function scanDenseLine(line, metrics, limit, lineInlays) {
             flushRun(offset);
             const inlay = lineInlays[nextInlay++];
             const shown = visibleBidi(inlay.text);
+            const gaps = (inlay.gapLeft ?? 0) + (inlay.gapRight ?? 0);
             const width = inlay.composition || inlay.ghost
                 ? metrics.measureText(shown)
-                : Math.max(8, metrics.measureInlay(shown) + 12) + (inlay.gapLeft ?? 0) + (inlay.gapRight ?? 0);
+                : inlay.swatch !== undefined
+                    ? SWATCH_SIZE + gaps
+                    : Math.max(8, metrics.measureInlay(shown) + 12) + gaps;
             geometry.inlays.push({ inlay, x, width, subRow: row });
             x += width;
         }

package/dist/outline.d.ts

@@ -37,6 +37,7 @@ export declare class Outline {
     setStructure(entries: OutlineEntry[]): void;
     setProvided(blocks: readonly EditorBlock[] | null, document: OutlineDocument): void;
     edited(batches: readonly (readonly DocumentChange[])[]): void;
+    declarationStops(document: OutlineDocument): number[];
     blocks(document: OutlineDocument): readonly OutlineBlock[];
 }
 export interface StickyRows {

package/dist/outline.js

@@ -140,6 +140,16 @@ export class Outline {
         this.provided = this.provided === null ? null : move(this.provided);
         this.version++;
     }
+    /* Where the named blocks of the structure declare their name, in no order: the stops of Method Up and Down. */
+    declarationStops(document) {
+        return this.structure.flatMap((entry) => {
+            if (entry.name === undefined) {
+                return [];
+            }
+            const header = document.getLine(document.positionAt(entry.from).line);
+            return [header.start + Math.max(0, header.text.indexOf(entry.name))];
+        });
+    }
     /* Outermost first. Of two blocks that start on one line, only the larger one. */
     blocks(document) {
         if (this.cache?.version !== this.version) {

package/dist/paint.js

@@ -102,10 +102,20 @@ export function lineElement(document, geometry, tokens, lineHeight, band, whites
             continue;
         }
         const span = document.createElement('span');
-        span.className = box.inlay.ghost ? 'se-ghost' : box.inlay.composition ? 'se-composition' : 'se-inlay';
+        span.className = box.inlay.ghost
+            ? 'se-ghost'
+            : box.inlay.composition
+                ? 'se-composition'
+                : box.inlay.swatch !== undefined
+                    ? 'se-inlay se-swatch'
+                    : 'se-inlay';
         span.dataset.inlayId = box.inlay.id;
         const { parts } = box.inlay;
-        if (parts === undefined) {
+        if (box.inlay.swatch !== undefined) {
+            span.style.backgroundColor = box.inlay.swatch;
+            span.setAttribute('aria-label', box.inlay.text);
+        }
+        else if (parts === undefined) {
             span.textContent = visibleBidi(box.inlay.text);
         }
         else {

package/dist/types.d.ts

@@ -4,7 +4,7 @@ import type { EditorCommand, FoldRole, WhitespaceCleanupOptions } from '@adecore
 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' | 'increaseFontSize' | 'decreaseFontSize' | 'resetFontSize';
+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;
@@ -139,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;
@@ -240,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;
@@ -336,6 +346,12 @@ export interface Editor {
     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;
@@ -351,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: {

package/dist/view.d.ts

@@ -143,6 +143,7 @@ export declare class EditorView {
     private lenses;
     private readonly replacements;
     private occurrences;
+    private hippieSource;
     private replacePreview;
     private dropCaret;
     private activeGuideCache;
@@ -157,6 +158,7 @@ export declare class EditorView {
     private customFolds;
     private collapsed;
     private foldHints;
+    private declarations;
     private defaultRoles;
     private settled;
     private foldTimer;
@@ -188,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;
@@ -239,6 +245,7 @@ export declare class EditorView {
     private foldStates;
     private scheduleFolds;
     refreshFolds(): void;
+    structureRanges(): FoldingRange[];
     private withCustomFolds;
     private closerOf;
     private foldAt;
@@ -274,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

@@ -168,6 +168,7 @@ export class EditorView {
     lenses = [];
     replacements = new Map();
     occurrences = [];
+    hippieSource = null;
     replacePreview = null;
     dropCaret = null;
     activeGuideCache;
@@ -186,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. */
@@ -427,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;
@@ -621,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);
@@ -668,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) {
@@ -801,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) => {
@@ -1023,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;
@@ -1866,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)) {

package/package.json

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

package/src/controller.ts

@@ -15,7 +15,9 @@ import type {
     EditorInlayClick,
     EditorInlayClickHandler,
     EditorContextMenu,
+    EditorCopy,
     EditorKeyHandler,
+    EditorPasteOptions,
     EditorPosition,
     EditorRunCommand,
     EditorSelectionRanges,
@@ -45,9 +47,12 @@ const MODIFYING = new Set<EditorCommand>([
     'deleteLine',
     'moveLineUp',
     'moveLineDown',
+    'moveStatementUp',
+    'moveStatementDown',
     'toggleLineComment',
     'toggleBlockComment',
     'startNewLine',
+    'completeCurrentStatement',
     'startNewLineBefore',
     'splitLine',
     'joinLines',
@@ -63,9 +68,13 @@ const MODIFYING = new Set<EditorCommand>([
     'reverseLines',
     'uniqueLines',
     'convertIndentsToSpaces',
-    'convertIndentsToTabs'
+    'convertIndentsToTabs',
+    'hippieCompletion',
+    'hippieBackwardCompletion'
 ]);
 
+const CODE_BLOCK_COMMANDS = new Set<EditorCommand>(['codeBlockStart', 'codeBlockEnd', 'codeBlockStartWithSelection', 'codeBlockEndWithSelection']);
+
 const VIEW_COMMANDS = new Set<EditorViewCommand>([
     'collapseRegion',
     'expandRegion',
@@ -84,7 +93,12 @@ const VIEW_COMMANDS = new Set<EditorViewCommand>([
     'toggleColumnMode',
     'increaseFontSize',
     'decreaseFontSize',
-    'resetFontSize'
+    'resetFontSize',
+    'methodUp',
+    'methodDown',
+    'nextChange',
+    'previousChange',
+    'pasteAsPlainText'
 ]);
 
 const ZOOM_STEPS = { increaseFontSize: 1, decreaseFontSize: -1, resetFontSize: 0 } as const satisfies Partial<Record<EditorViewCommand, -1 | 0 | 1>>;
@@ -92,6 +106,14 @@ const ZOOM_STEPS = { increaseFontSize: 1, decreaseFontSize: -1, resetFontSize: 0
 /* 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(',');
 }
@@ -111,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>();
@@ -240,7 +265,7 @@ 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));
@@ -312,6 +337,8 @@ export class InputController {
 
         this.cleanup.length = 0;
         this.keyHandlers.clear();
+        this.navigateListeners.clear();
+        this.copyListeners.clear();
     }
 
     private blockedByReadOnly(): boolean {
@@ -356,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 {
@@ -381,15 +422,23 @@ 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;
@@ -400,11 +449,43 @@ export class InputController {
             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<Exclude<EditorViewCommand, keyof typeof ZOOM_STEPS>, () => 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),
@@ -529,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(),
@@ -544,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;
@@ -837,6 +935,8 @@ export class InputController {
             return;
         }
 
+        this.view.setHippieSource(null);
+
         const added = this.gesture.keydown(event);
 
         if (added !== null) {
@@ -933,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

@@ -652,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);
 }
@@ -747,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;