highlightActiveLine and widget before line?

Hi!

I had two questions:

  • Is it possible to register highlightActiveLine only for codeblocks for example? If I register it in the onload method of the class, then it is registered for all lines. I would like to use it only inside codeblocks (node.type.id === 5).

  • I have a widget (TextAboveCodeblockWidget) which inserts a HTML tag before the first codeline. Well, it should do that. But now it appends it to the first codeblock line. Can I somehow insert a HTML tag before the first codeblock line? I want to display an optional filename there, but now since it is appended to the first line, the two are one, and makes styling much more difficult. I hope it is understandable what I mean.

Thanks in advance!

Here is my code:

export const lineNumberField = StateField.define<DecorationSet>({
  create(state): DecorationSet {
    return Decoration.none;
  },
  update(oldState: DecorationSet, transaction: Transaction): DecorationSet {
    const builder = new RangeSetBuilder<Decoration>();
    syntaxTree(transaction.state).iterate({
      enter(node) {
        if (node.type.id === 3 ) {
            // opening ```            
            var fileName = "test.cpp";
            builder.add(node.from, node.from, Decoration.widget({
              widget: new TextAboveCodeblockWidget(fileName),})
            );            
          }
        }
        if (node.type.id === 5 ) {
          // code lines
          // register highlightActiveLine() here???
        }
        if (node.type.id === 6 ) {
          // closing ```
        }
      },
    });
    return builder.finish();
  },
  provide(field: StateField<DecorationSet>): Extension {
    return EditorView.decorations.from(field);
  },
});

class TextAboveCodeblockWidget extends WidgetType {
  constructor(private text: string) {
    super();
  }

 toDOM(view: EditorView): HTMLElement {
    const container = document.createElement("div");
    container.classList.add("codeblock-header");

    const span = document.createElement("span");
    span.innerText = this.text;
    span.classList.add("codeblock-header-text");
    
    container.appendChild(span);
    
    return container;
  }
}// TextAboveCodeblockWidget 

export default class LineNumberingPlugin extends Plugin  {
  async onload() {   
    this.registerEditorExtension(lineNumberField);
    //this.registerEditorExtension(highlightActiveLine());
    console.log("Plugin is registered");
   }// onload
}// LineNumberingPlugin

No. You’d have to write a separate extension that does that.

If you mean for it to show up above the line, look into block widgets.

Yes, that was it! Thank you!
Sorry, I had another quick question. Is it possible to collapse lines somehow? I want to add a button or icon or something similar to this HTML tag what I just inserted above the line, which when clicked collapses the whole codeblock.

Yes. See Decoration.replace. It may be worth giving the decoration example another good read before asking for guidance on every step here.

Ok, thank you!