@wallarm-org/design-system 1.30.0 → 1.31.0

package/dist/components/CodeEditor/engine/folds.js

@@ -0,0 +1,458 @@
+import { createElement } from "react";
+import { foldService } from "@codemirror/language";
+import { EditorSelection, Facet, Prec, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, GutterMarker, ViewPlugin, WidgetType, gutter, keymap } from "@codemirror/view";
+import { FoldSummary } from "../../CodeSnippet/internal/FoldSummary.js";
+import { FoldToggle } from "../../CodeSnippet/internal/FoldToggle.js";
+import { getFoldSummaryLabel, validateFolds } from "../../CodeSnippet/lib/foldUtils.js";
+const FOLDS_DEBOUNCE_MS = 150;
+const foldsConfig = Facet.define({
+    combine: (values)=>values[0] ?? null
+});
+const setFoldsEffect = StateEffect.define();
+const setCollapsedEffect = StateEffect.define();
+const portalIds = new WeakMap();
+const releasePortal = (portals, dom)=>{
+    const id = portalIds.get(dom);
+    if (void 0 === id) return;
+    portalIds.delete(dom);
+    portals.unregister(id);
+};
+const sameRegion = (a, b)=>a.id === b.id && a.startLine === b.startLine && a.endLine === b.endLine && a.label === b.label && a.toggleProps === b.toggleProps && a.summaryProps === b.summaryProps;
+const regionLineCount = (region)=>region.endLine - region.startLine + 1;
+const regionRange = (state, region, startingLineNumber)=>({
+        from: state.doc.line(region.startLine - startingLineNumber + 1).from,
+        to: state.doc.line(region.endLine - startingLineNumber + 1).to
+    });
+const startingLine = (state)=>state.facet(foldsConfig)?.startingLineNumber ?? 1;
+const computeRaw = (config, state)=>{
+    const folds = config?.folds;
+    if (void 0 === folds) return [];
+    if ('function' == typeof folds) return folds(state.doc.toString(), {
+        startingLineNumber: config?.startingLineNumber ?? 1
+    });
+    return folds;
+};
+const resolve = (raw, state, warn)=>validateFolds(raw, state.doc.lines, startingLine(state), {
+        warn
+    });
+class FoldSummaryWidget extends WidgetType {
+    region;
+    portals;
+    testId;
+    constructor(region, portals, testId){
+        super(), this.region = region, this.portals = portals, this.testId = testId;
+    }
+    eq(other) {
+        return sameRegion(this.region, other.region) && this.portals === other.portals && this.testId === other.testId;
+    }
+    toDOM(view) {
+        const host = document.createElement('span');
+        host.className = 'cm-ds-fold-summary';
+        const { id } = this.region;
+        const portalId = this.portals.register(host, createElement(FoldSummary, {
+            fold: this.region,
+            lineCount: regionLineCount(this.region),
+            onToggle: ()=>{
+                toggleFoldRegion(view, id);
+            },
+            testId: void 0 === this.testId ? void 0 : `${this.testId}--fold-summary`
+        }));
+        portalIds.set(host, portalId);
+        return host;
+    }
+    destroy(dom) {
+        releasePortal(this.portals, dom);
+    }
+    ignoreEvent() {
+        return true;
+    }
+}
+const buildDecorations = (state, regions, collapsed)=>{
+    const config = state.facet(foldsConfig);
+    if (!config || 0 === collapsed.size) return Decoration.none;
+    const ranges = [];
+    for (const region of regions){
+        if (!collapsed.has(region.id)) continue;
+        const { from, to } = regionRange(state, region, config.startingLineNumber);
+        ranges.push(Decoration.replace({
+            widget: new FoldSummaryWidget(region, config.portals, config.testId)
+        }).range(from, to));
+    }
+    return Decoration.set(ranges, true);
+};
+const selectionEntersRange = (range, from, to)=>range.head > from && range.head < to || !range.empty && range.from >= from && range.to <= to;
+const mapRegions = (raw, tr, startingLineNumber)=>{
+    const oldDoc = tr.startState.doc;
+    const newDoc = tr.state.doc;
+    const offset = startingLineNumber - 1;
+    return raw.map((region)=>{
+        const startLine = region.startLine - offset;
+        const endLine = region.endLine - offset;
+        if (startLine < 1 || endLine > oldDoc.lines || startLine > endLine) return region;
+        const from = tr.changes.mapPos(oldDoc.line(startLine).from, 1);
+        const to = tr.changes.mapPos(oldDoc.line(endLine).to, -1);
+        const nextStart = newDoc.lineAt(Math.min(from, to)).number + offset;
+        const nextEnd = newDoc.lineAt(to).number + offset;
+        if (nextStart === region.startLine && nextEnd === region.endLine) return region;
+        return {
+            ...region,
+            startLine: nextStart,
+            endLine: nextEnd
+        };
+    });
+};
+const sameSet = (a, b)=>a.size === b.size && [
+        ...a
+    ].every((id)=>b.has(id));
+const initialState = (state)=>{
+    const raw = computeRaw(state.facet(foldsConfig), state);
+    const regions = resolve(raw, state, true);
+    const collapsed = new Set(regions.filter((r)=>r.defaultCollapsed).map((r)=>r.id));
+    return {
+        raw,
+        regions,
+        collapsed,
+        seen: new Set(regions.map((r)=>r.id)),
+        decorations: Decoration.none
+    };
+};
+const updateState = (value, tr)=>{
+    const { state } = tr;
+    let { raw, regions } = value;
+    let validated = false;
+    if (tr.startState.facet(foldsConfig) !== state.facet(foldsConfig)) {
+        raw = computeRaw(state.facet(foldsConfig), state);
+        regions = resolve(raw, state, true);
+        validated = true;
+    }
+    for (const effect of tr.effects)if (effect.is(setFoldsEffect)) {
+        raw = effect.value;
+        regions = resolve(raw, state, true);
+        validated = true;
+    }
+    const isFunction = 'function' == typeof state.facet(foldsConfig)?.folds;
+    if (!validated && tr.docChanged) {
+        if (isFunction) raw = mapRegions(raw, tr, startingLine(state));
+        regions = resolve(raw, state, false);
+    }
+    const collapsed = new Set(value.collapsed);
+    let seen = value.seen;
+    if (regions !== value.regions) {
+        const nextSeen = new Set(seen);
+        for (const region of regions)if (!nextSeen.has(region.id)) {
+            nextSeen.add(region.id);
+            if (region.defaultCollapsed) collapsed.add(region.id);
+        }
+        seen = nextSeen;
+    }
+    for (const effect of tr.effects)if (effect.is(setCollapsedEffect)) if (effect.value.collapsed) collapsed.add(effect.value.id);
+    else collapsed.delete(effect.value.id);
+    if (validated || !isFunction) {
+        const ids = new Set(regions.map((r)=>r.id));
+        for (const id of [
+            ...collapsed
+        ])if (!ids.has(id)) collapsed.delete(id);
+    }
+    const userEdit = tr.docChanged && (tr.isUserEvent('input') || tr.isUserEvent('delete'));
+    if (collapsed.size > 0 && (tr.selection || userEdit)) {
+        const start = startingLine(state);
+        for (const region of regions){
+            if (!collapsed.has(region.id)) continue;
+            const { from, to } = regionRange(state, region, start);
+            const selected = void 0 !== tr.selection && state.selection.ranges.some((range)=>selectionEntersRange(range, from, to));
+            let edited = false;
+            if (userEdit) tr.changes.iterChangedRanges((_fromA, _toA, fromB, toB)=>{
+                if (fromB <= to && toB >= from) edited = true;
+            });
+            if (selected || edited) collapsed.delete(region.id);
+        }
+    }
+    const collapsedChanged = !sameSet(collapsed, value.collapsed);
+    if (regions === value.regions && !collapsedChanged && !tr.docChanged && seen === value.seen) return value;
+    const nextCollapsed = collapsedChanged ? collapsed : value.collapsed;
+    return {
+        raw,
+        regions,
+        collapsed: nextCollapsed,
+        seen,
+        decorations: buildDecorations(state, regions, nextCollapsed)
+    };
+};
+const foldsField = StateField.define({
+    create: (state)=>{
+        const value = initialState(state);
+        return {
+            ...value,
+            decorations: buildDecorations(state, value.regions, value.collapsed)
+        };
+    },
+    update: updateState,
+    provide: (field)=>EditorView.decorations.from(field, (value)=>value.decorations)
+});
+const functionFoldsPlugin = ViewPlugin.fromClass(class {
+    view;
+    timer = null;
+    constructor(view){
+        this.view = view;
+    }
+    update(update) {
+        if (!update.docChanged) return;
+        if ('function' != typeof update.state.facet(foldsConfig)?.folds) return;
+        this.clear();
+        this.timer = setTimeout(()=>{
+            this.timer = null;
+            const config = this.view.state.facet(foldsConfig);
+            const folds = config?.folds;
+            if ('function' != typeof folds) return;
+            const raw = folds(this.view.state.doc.toString(), {
+                startingLineNumber: config?.startingLineNumber ?? 1
+            });
+            this.view.dispatch({
+                effects: setFoldsEffect.of(raw)
+            });
+        }, FOLDS_DEBOUNCE_MS);
+    }
+    clear() {
+        if (null !== this.timer) clearTimeout(this.timer);
+        this.timer = null;
+    }
+    destroy() {
+        this.clear();
+    }
+});
+const readField = (state)=>state.field(foldsField, false);
+const setCollapsed = (view, targets, collapse)=>{
+    const { state } = view;
+    if (0 === targets.length) return false;
+    const start = startingLine(state);
+    const ranges = targets.map((region)=>regionRange(state, region, start));
+    const effects = targets.map((region)=>setCollapsedEffect.of({
+            id: region.id,
+            collapsed: collapse
+        }));
+    if (1 === targets.length && targets[0]) {
+        const label = getFoldSummaryLabel(targets[0], regionLineCount(targets[0]));
+        effects.push(EditorView.announce.of(`${collapse ? 'Folded' : 'Unfolded'} ${label}`));
+    }
+    let selection;
+    if (collapse) {
+        let moved = false;
+        const next = state.selection.ranges.map((range)=>{
+            const hit = ranges.find(({ from, to })=>selectionEntersRange(range, from, to));
+            if (!hit) return range;
+            moved = true;
+            return EditorSelection.cursor(hit.from);
+        });
+        if (moved) selection = EditorSelection.create(next, state.selection.mainIndex);
+    }
+    view.dispatch(selection ? {
+        effects,
+        selection
+    } : {
+        effects
+    });
+    return true;
+};
+const getCollapsedFoldIds = (state)=>readField(state)?.collapsed ?? new Set();
+const getVisibleRowCount = (state)=>{
+    const value = readField(state);
+    if (!value) return state.doc.lines;
+    let hidden = 0;
+    for (const region of value.regions)if (value.collapsed.has(region.id)) hidden += regionLineCount(region) - 1;
+    return state.doc.lines - hidden;
+};
+const getCollapsedRanges = (state)=>{
+    const value = readField(state);
+    if (!value || 0 === value.collapsed.size) return [];
+    const start = startingLine(state);
+    return value.regions.filter((region)=>value.collapsed.has(region.id)).map((region)=>regionRange(state, region, start));
+};
+const toggleFoldRegion = (view, id)=>{
+    const value = readField(view.state);
+    const region = value?.regions.find((r)=>r.id === id);
+    if (!value || !region) return false;
+    return setCollapsed(view, [
+        region
+    ], !value.collapsed.has(id));
+};
+const foldAllRegions = (view)=>{
+    const value = readField(view.state);
+    if (!value) return false;
+    return setCollapsed(view, value.regions.filter((r)=>!value.collapsed.has(r.id)), true);
+};
+const unfoldAllRegions = (view)=>{
+    const value = readField(view.state);
+    if (!value) return false;
+    return setCollapsed(view, value.regions.filter((r)=>value.collapsed.has(r.id)), false);
+};
+const regionAtCursor = (state)=>{
+    const value = readField(state);
+    if (!value) return;
+    const line = state.doc.lineAt(state.selection.main.head).number + startingLine(state) - 1;
+    return value.regions.find((r)=>r.startLine <= line && r.endLine >= line);
+};
+const foldRegionAtCursor = (view)=>{
+    const region = regionAtCursor(view.state);
+    if (!region || getCollapsedFoldIds(view.state).has(region.id)) return false;
+    return setCollapsed(view, [
+        region
+    ], true);
+};
+const unfoldRegionAtCursor = (view)=>{
+    const region = regionAtCursor(view.state);
+    if (!region || !getCollapsedFoldIds(view.state).has(region.id)) return false;
+    return setCollapsed(view, [
+        region
+    ], false);
+};
+const foldsKeymap = Prec.high(keymap.of([
+    {
+        key: 'Ctrl-Shift-[',
+        mac: 'Cmd-Alt-[',
+        run: foldRegionAtCursor
+    },
+    {
+        key: 'Ctrl-Shift-]',
+        mac: 'Cmd-Alt-]',
+        run: unfoldRegionAtCursor
+    },
+    {
+        key: 'Ctrl-Alt-[',
+        run: foldAllRegions
+    },
+    {
+        key: 'Ctrl-Alt-]',
+        run: unfoldAllRegions
+    }
+]));
+const regionsFoldService = foldService.of((state, lineStart)=>{
+    const value = readField(state);
+    if (!value) return null;
+    const start = startingLine(state);
+    const line = state.doc.lineAt(lineStart).number + start - 1;
+    const region = value.regions.find((r)=>r.startLine === line);
+    return region ? regionRange(state, region, start) : null;
+});
+const toggleHosts = new WeakMap();
+const toggleHostByDom = new WeakMap();
+const renderToggle = (view, regionId, testId)=>{
+    const value = readField(view.state);
+    const region = value?.regions.find((r)=>r.id === regionId);
+    if (!value || !region) return null;
+    return createElement(FoldToggle, {
+        fold: region,
+        isCollapsed: value.collapsed.has(regionId),
+        onToggle: ()=>{
+            toggleFoldRegion(view, regionId);
+        },
+        testId: void 0 === testId ? void 0 : `${testId}--fold-toggle`
+    });
+};
+class FoldToggleMarker extends GutterMarker {
+    region;
+    portals;
+    testId;
+    constructor(region, portals, testId){
+        super(), this.region = region, this.portals = portals, this.testId = testId;
+    }
+    eq(other) {
+        return other instanceof FoldToggleMarker && this.region.id === other.region.id && this.region.startLine === other.region.startLine && this.portals === other.portals && this.testId === other.testId;
+    }
+    toDOM(view) {
+        const host = document.createElement('span');
+        host.className = 'cm-ds-fold-toggle';
+        const { id } = this.region;
+        const portalId = this.portals.register(host, renderToggle(view, id, this.testId));
+        portalIds.set(host, portalId);
+        const entry = {
+            view,
+            regionId: id,
+            portalId,
+            portals: this.portals,
+            testId: this.testId
+        };
+        toggleHostByDom.set(host, entry);
+        let hosts = toggleHosts.get(view);
+        if (!hosts) {
+            hosts = new Set();
+            toggleHosts.set(view, hosts);
+        }
+        hosts.add(entry);
+        return host;
+    }
+    destroy(dom) {
+        const entry = toggleHostByDom.get(dom);
+        if (entry) {
+            toggleHostByDom.delete(dom);
+            toggleHosts.get(entry.view)?.delete(entry);
+        }
+        releasePortal(this.portals, dom);
+    }
+}
+const foldToggleUpdater = ViewPlugin.define((view)=>({
+        update (update) {
+            if (readField(update.startState) === readField(update.state)) return;
+            for (const entry of toggleHosts.get(view) ?? []){
+                const node = renderToggle(view, entry.regionId, entry.testId);
+                if (node) entry.portals.update(entry.portalId, node);
+            }
+        }
+    }));
+class FoldSpacerMarker extends GutterMarker {
+    eq(other) {
+        return other instanceof FoldSpacerMarker;
+    }
+    toDOM() {
+        const spacer = document.createElement('span');
+        spacer.className = 'cm-ds-fold-spacer';
+        return spacer;
+    }
+}
+const foldSpacer = new FoldSpacerMarker();
+const foldGutterTheme = EditorView.theme({
+    '.cm-ds-fold-gutter .cm-gutterElement': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '0 4px'
+    },
+    '.cm-ds-fold-spacer, .cm-ds-fold-toggle': {
+        display: 'flex',
+        width: '16px',
+        height: '16px'
+    }
+});
+const foldGutter = [
+    gutter({
+        class: 'cm-ds-fold-gutter',
+        renderEmptyElements: true,
+        lineMarker: (view, line)=>{
+            const { state } = view;
+            const value = readField(state);
+            const config = state.facet(foldsConfig);
+            if (!value || !config) return null;
+            const lineNumber = state.doc.lineAt(line.from).number + config.startingLineNumber - 1;
+            const region = value.regions.find((r)=>r.startLine === lineNumber);
+            if (!region) return null;
+            return new FoldToggleMarker(region, config.portals, config.testId);
+        },
+        lineMarkerChange: (update)=>readField(update.startState) !== readField(update.state),
+        initialSpacer: ()=>foldSpacer
+    }),
+    foldToggleUpdater,
+    foldGutterTheme
+];
+const foldsExtension = (config)=>({
+        extension: [
+            foldsConfig.of({
+                ...config
+            }),
+            foldsField,
+            functionFoldsPlugin,
+            foldsKeymap,
+            regionsFoldService
+        ],
+        gutter: void 0 === config.folds || Array.isArray(config.folds) && 0 === config.folds.length ? null : foldGutter
+    });
+export { FOLDS_DEBOUNCE_MS, foldAllRegions, foldsExtension, getCollapsedFoldIds, getCollapsedRanges, getVisibleRowCount, toggleFoldRegion, unfoldAllRegions };

package/dist/components/CodeEditor/engine/gutters.d.ts

@@ -0,0 +1,22 @@
+import { type Extension } from '@codemirror/state';
+import type { LineConfig } from '../../CodeSnippet/CodeSnippetContext';
+import type { PortalRegistry } from '../lib/portalRegistry';
+export interface GuttersConfig {
+    lines: Record<number, LineConfig>;
+    startingLineNumber: number;
+    lineNumbers: boolean;
+    foldGutter: Extension | null;
+    portals: PortalRegistry;
+    testId: string | undefined;
+    /** Diff mode (`original` set): `+` / `-` prefixes and colour sticks from the merge chunks. */
+    diff?: boolean;
+}
+/** Gutter wrapper classes (`.cm-gutter`), used by tests and the theme below. */
+export declare const STICK_GUTTER_CLASS = "cm-ds-stick";
+export declare const PREFIX_GUTTER_CLASS = "cm-ds-prefix";
+/**
+ * Gutters in CodeSnippet order: colour stick (only if any line has `color`, or diff mode) →
+ * line numbers (if `lineNumbers`) → fold gutter (if given) → prefix (only if any line has
+ * `prefix`, or diff mode). In diff mode the diff marker wins over the line's own stick/prefix.
+ */
+export declare const guttersExtension: (config: GuttersConfig) => Extension;

package/dist/components/CodeEditor/engine/gutters.js

@@ -0,0 +1,160 @@
+import { RangeSet, StateField } from "@codemirror/state";
+import { EditorView, GutterMarker, gutter, gutterLineClass, lineNumberMarkers, lineNumbers } from "@codemirror/view";
+import { cn } from "../../../utils/cn.js";
+import { LINE_COLOR_STYLES } from "../../CodeSnippet/lib/lineStyles.js";
+import { deletedRowCount, diffChunksChanged, isDiffInsertedLine } from "./diff.js";
+import { lineNumberToDocLine } from "./positions.js";
+const STICK_GUTTER_CLASS = 'cm-ds-stick';
+const PREFIX_GUTTER_CLASS = 'cm-ds-prefix';
+class ClassMarker extends GutterMarker {
+    elementClass;
+    constructor(elementClass){
+        super(), this.elementClass = elementClass;
+    }
+    eq(other) {
+        return other instanceof ClassMarker && other.elementClass === this.elementClass;
+    }
+}
+const STICK_BASE_CLASS = 'border-l-2 pl-12';
+const transparentStick = new ClassMarker(cn(STICK_BASE_CLASS, 'border-transparent'));
+const colorStickMarkers = new Map();
+const getStickMarker = (color)=>{
+    if (!color) return transparentStick;
+    let marker = colorStickMarkers.get(color);
+    if (!marker) {
+        marker = new ClassMarker(cn(STICK_BASE_CLASS, LINE_COLOR_STYLES[color].border));
+        colorStickMarkers.set(color, marker);
+    }
+    return marker;
+};
+const prefixPortalIds = new WeakMap();
+class PrefixMarker extends GutterMarker {
+    lineNumber;
+    prefix;
+    color;
+    portals;
+    elementClass;
+    constructor(lineNumber, prefix, color, portals){
+        super(), this.lineNumber = lineNumber, this.prefix = prefix, this.color = color, this.portals = portals;
+        this.elementClass = cn('px-8 text-center', color ? LINE_COLOR_STYLES[color].text : void 0);
+    }
+    eq(other) {
+        return other instanceof PrefixMarker && other.lineNumber === this.lineNumber && other.prefix === this.prefix && other.color === this.color && other.portals === this.portals;
+    }
+    toDOM(view) {
+        const host = view.dom.ownerDocument.createElement('span');
+        const { prefix } = this;
+        if ('string' == typeof prefix || 'number' == typeof prefix || 'bigint' == typeof prefix) host.textContent = String(prefix);
+        else if (null != prefix && 'boolean' != typeof prefix) prefixPortalIds.set(host, this.portals.register(host, prefix));
+        return host;
+    }
+    destroy(dom) {
+        const id = prefixPortalIds.get(dom);
+        if (void 0 !== id) {
+            prefixPortalIds.delete(dom);
+            this.portals.unregister(id);
+        }
+    }
+}
+class DeletedRowsMarker extends GutterMarker {
+    rows;
+    elementClass = cn('px-8 text-center', LINE_COLOR_STYLES.danger.text);
+    constructor(rows){
+        super(), this.rows = rows;
+    }
+    eq(other) {
+        return other instanceof DeletedRowsMarker && other.rows === this.rows;
+    }
+    toDOM(view) {
+        const doc = view.dom.ownerDocument;
+        const host = doc.createElement('span');
+        for(let row = 0; row < this.rows; row++){
+            const cell = doc.createElement('div');
+            cell.textContent = '-';
+            host.append(cell);
+        }
+        return host;
+    }
+}
+const absoluteLineAt = (state, block, startingLineNumber)=>state.doc.lineAt(block.from).number + startingLineNumber - 1;
+const gutterTheme = EditorView.theme({
+    '.cm-lineNumbers': {
+        color: 'var(--color-text-secondary)',
+        userSelect: 'none'
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+        padding: '0 8px',
+        minWidth: '0',
+        textAlign: 'right'
+    },
+    [`.${PREFIX_GUTTER_CLASS}`]: {
+        color: 'var(--color-syntax-no-syntax)',
+        userSelect: 'none'
+    }
+});
+const buildGutterClassSets = (state, lines, startingLineNumber)=>{
+    const background = [];
+    const numberText = [];
+    for (const [key, config] of Object.entries(lines)){
+        if (!config.color) continue;
+        const line = lineNumberToDocLine(state.doc, Number(key), startingLineNumber);
+        if (!line) continue;
+        const styles = LINE_COLOR_STYLES[config.color];
+        background.push(new ClassMarker(styles.bg).range(line.from));
+        numberText.push(new ClassMarker(styles.text).range(line.from));
+    }
+    return {
+        background: RangeSet.of(background, true),
+        numberText: RangeSet.of(numberText, true)
+    };
+};
+const guttersExtension = (config)=>{
+    const { lines, startingLineNumber, portals } = config;
+    const diff = true === config.diff;
+    const configs = Object.values(lines);
+    const hasColors = configs.some((line)=>null != line.color);
+    const hasPrefixes = configs.some((line)=>null != line.prefix);
+    if (!hasColors && !hasPrefixes && !diff && !config.lineNumbers && !config.foldGutter) return [];
+    const extensions = [
+        gutterTheme
+    ];
+    if (hasColors || diff) {
+        const classSets = StateField.define({
+            create: (state)=>buildGutterClassSets(state, lines, startingLineNumber),
+            update: (value, tr)=>tr.docChanged ? buildGutterClassSets(tr.state, lines, startingLineNumber) : value,
+            provide: (field)=>[
+                    gutterLineClass.from(field, (sets)=>sets.background),
+                    lineNumberMarkers.from(field, (sets)=>sets.numberText)
+                ]
+        });
+        extensions.push(classSets, gutter({
+            class: STICK_GUTTER_CLASS,
+            lineMarker: (view, block)=>getStickMarker(diff && isDiffInsertedLine(view.state, block.from) ? 'success' : lines[absoluteLineAt(view.state, block, startingLineNumber)]?.color),
+            widgetMarker: (view, _widget, block)=>diff && deletedRowCount(view.state, block) > 0 ? getStickMarker('danger') : null,
+            lineMarkerChange: diff ? diffChunksChanged : null,
+            initialSpacer: ()=>transparentStick
+        }));
+    }
+    if (config.lineNumbers) extensions.push(lineNumbers({
+        formatNumber: (lineNo)=>String(lineNo + startingLineNumber - 1)
+    }));
+    if (config.foldGutter) extensions.push(config.foldGutter);
+    if (hasPrefixes || diff) extensions.push(gutter({
+        class: PREFIX_GUTTER_CLASS,
+        lineMarker: (view, block)=>{
+            const absolute = absoluteLineAt(view.state, block, startingLineNumber);
+            if (diff && isDiffInsertedLine(view.state, block.from)) return new PrefixMarker(absolute, '+', 'success', portals);
+            const line = lines[absolute];
+            if (line?.prefix == null) return null;
+            return new PrefixMarker(absolute, line.prefix, line.color, portals);
+        },
+        widgetMarker: (view, _widget, block)=>{
+            if (!diff) return null;
+            const rows = deletedRowCount(view.state, block);
+            return rows > 0 ? new DeletedRowsMarker(rows) : null;
+        },
+        lineMarkerChange: diff ? diffChunksChanged : null
+    }));
+    return extensions;
+};
+export { PREFIX_GUTTER_CLASS, STICK_GUTTER_CLASS, guttersExtension };

package/dist/components/CodeEditor/engine/index.d.ts

@@ -0,0 +1,12 @@
+import { type AnnotationType, type ChangeSpec } from '@codemirror/state';
+import type { EditorHandle, EngineCallbacks, EngineOptions } from './types';
+/** Marks transactions that sync the `value` prop into the editor — never echoed to `onChange`. */
+export declare const externalChange: AnnotationType<boolean>;
+/**
+ * Smallest single replacement turning `from` into `to` (common prefix/suffix),
+ * so an external value sync does not move the cursor. Never splits a UTF-16
+ * surrogate pair. `null` when the strings are equal.
+ */
+export declare const minimalChange: (from: string, to: string) => ChangeSpec | null;
+export { searchConfigured } from './search';
+export declare const createEditor: (parent: HTMLElement, initialOptions: EngineOptions, callbacks: EngineCallbacks) => EditorHandle;