; + div.dataset.decoratorOpacity = `${this.opacity}%`; + div.dataset.decoratorLevel = this.level.toString(); + div.textContent = this.content; + return div; + } + + eq(other: HeadingGutterMarker): boolean { + return ( + this.content === other.content && + this.level === other.level && + this.opacity === other.opacity + ); + } +} + +export function createHeadingGutterExtension( + getPluginData: () => Promise, + showBeforeLineNumbers: boolean +): Array | ReturnType> { + const markers = ViewPlugin.fromClass( + class HeadingGutterViewPlugin { + markers: RangeSet = RangeSet.empty; + private getPluginData: () => Promise; + + constructor(view: EditorView) { + this.getPluginData = getPluginData; + this.buildMarkers(view, view.state.field(editorLivePreviewField)); + } + + update(update: ViewUpdate) { + if ( + update.docChanged || + update.viewportChanged || + update.transactions.some((tr) => + tr.effects.some((e) => e.is(updateEditorMode)) + ) + ) { + this.buildMarkers( + update.view, + update.state.field(editorLivePreviewField) + ); + } + } + + private async buildMarkers( + view: EditorView, + isLivePreviewMode: boolean + ) { + const pluginData = await this.getPluginData(); + + const enabled = + (isLivePreviewMode && pluginData.enabledInPreview) || + (!isLivePreviewMode && pluginData.enabledInSource); + + if (!enabled) { + this.markers = RangeSet.empty; + view.requestMeasure(); + return; + } + + const doc = view.state.doc; + const { gutterSettings } = pluginData; + const { opacity } = gutterSettings; + const counter = createCounterFromSettings(gutterSettings, doc); + + const builder = new RangeSetBuilder(); + const heading = new Heading(); + + for (let lineIndex = 1; lineIndex <= doc.lines; lineIndex++) { + const line = doc.line(lineIndex); + const lineText = line.text; + const nextLineIndex = lineIndex + 1; + const nextLineText = + nextLineIndex <= doc.lines ? doc.line(nextLineIndex).text : ""; + const level = heading.handler(lineIndex, lineText, nextLineText); + if (level === -1) { + continue; + } + + const content = counter.decorator(level); + if (content) { + const marker = new HeadingGutterMarker(content, level, opacity); + builder.add(line.from, line.from, marker); + } + } + + this.markers = builder.finish(); + view.requestMeasure(); + } + } + ); + + const gutterPrec = showBeforeLineNumbers ? Prec.high : Prec.low; + return [ + markers, + gutterPrec( + gutter({ + class: className.gutter, + markers(view) { + return view.plugin(markers)?.markers ?? RangeSet.empty; + }, + }) + ), + ]; +} + +type HeadingGutterViewPlugin = { + markers: RangeSet; +}; 25:T147f,@@ -9,19 +9,8 @@ import { import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state"; import { HeadingWidget } from "./weight"; import type { HeadingPluginData } from "../common/data"; -import { - className, - getUnorderedLevelHeadings, - getOrderedCustomIdents, - findFirstCharacterIndex, -} from "../common/data"; -import { - Querier, - UnorderedCounter, - OrderedCounter, - IndependentCounter, - SpliceCounter, -} from "../common/counter"; +import { className, findFirstCharacterIndex } from "../common/data"; +import { createCounterFromSettings } from "../common/counter-factory"; import { Heading } from "../common/heading"; /** A StateEffect for updating decorations */ @@ -103,113 +92,13 @@ export class HeadingEditorViewPlugin implements PluginV

Heading Decorator