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