How to update start and end positions in an eventListener?


Sorry for my amateur questions again. I want to insert a widget above codeblocks, and when this widget is clicked then it should collapse the codelines below it. If clicked again, then it should uncollapse the lines. I got it working (there is probably a much easier way to do this), but the problem is, that when the code is edited, and more code is added then the end position is increased. When I created my widget, I set the start and end parameters of the codelines, which should be collapsed.
So, my question is:

  • How can I update these start and end position if the code was edited, so it matches the current content?
  • When enabling the plugin, how can I immediately collapse specific blocks?
  • Is it possible to combine CodeblockHeader and markField?

Thanks in advance!

Here is my code:

export const CodeblockHeader = StateField.define<DecorationSet>({
  create(state): DecorationSet {
    return Decoration.none;
  update(oldState: DecorationSet, transaction: Transaction): DecorationSet {
    const builder = new RangeSetBuilder<Decoration>();
    let CollapseStart = null;
    let CollapseEnd = null;
    let WidgetStart;
      enter(node) {
        const lineText = transaction.state.doc.slice(node.from,;
        if ( === 3 ) {
          CollapseStart = node.from
          WidgetStart = node.from;
        if ( === 6 ) {
          CollapseEnd =;
          if (CollapseStart != null && CollapseEnd!= null ){
            builder.add(WidgetStart, WidgetStart, Decoration.widget({
              widget: new TextAboveCodeblockWidget("Testing", CollapseStart, CollapseEnd),
              block: true
            );// builder          
            CollapseStart = null;
            CollapseEnd = null;
      },// enter
    });// syntaxTree 
    return builder.finish();
  },// update
  provide(field: StateField<DecorationSet>): Extension {
    return EditorView.decorations.from(field);
  },// provide
});// CodeblockHeader

const Collapse = StateEffect.define(), UnCollapse = StateEffect.define()

const markField = StateField.define({
  create() { return Decoration.none },
  update(value, tr) {
    value =
    for (let effect of tr.effects) {
      if ( value = value.update({add: effect.value, sort: true})
      else if ( value = value.update({filter: effect.value})
    return value
  provide: f => EditorView.decorations.from(f)

const doFold = Decoration.replace({block: true})

class TextAboveCodeblockWidget extends WidgetType {
  constructor(private text: string,private CollapseStart: number, private CollapseEnd: number, private isCollapsed: boolean) {
     this.folded = isCollapsed;
  eq(other: TextAboveCodeblockWidget) { return other.folded == this.folded }
  toDOM(view: EditorView): HTMLElement {
    const container = document.createElement("div");
    container.addEventListener('click', function() {
      if (this.folded) {
          effects: UnCollapse.of((from, to) => to <= this.CollapseStart || from >= this.CollapseEnd)
      } else {
          effects: Collapse.of([doFold.range(this.CollapseStart, this.CollapseEnd)])
      this.folded = !this.folded;
    const span = document.createElement("div");
    span.innerText = this.text;
    const line = document.createElement("hr");
    line.classList.add("codeblock-header-line"); = '1px solid #46cced';
    return container;
  ignoreEvent() { return false }
}// TextAboveCodeblockWidget

export default class LineNumberingPlugin extends Plugin  {
  async onload() {    
    console.log("Plugin is registered");

I figured out the first question. If I create a Viewplugin, I can set up an Eventhandler there, and from there I can dispatch the correct values.

The easiest way to do this is probably to map the range set holding your decorations through update.changes in your plugin’s update method.

Thank you for your help! I figured it out. I didn’t do it the way you suggested, because I didn’t really understand, but it works now. Thank you!