Hi, I have an extension which toggles heading levels. I made a button with text inside which indicates which heading level is currently active for the selection (so it changes when I change the selection). Currently I did that by using onSelectionChange, like follows:
let HeadingExtension = Heading.extend({
onSelectionUpdate() {
let button = document.querySelector(
'[data-key^="heading-dropdown"]'
) as HTMLElement;
if (button) {
let span = button.querySelector(
'[data-key="innerText"]'
) as HTMLSpanElement;
if (span) {
if (this.editor.isActive("paragraph")) {
span.innerText = "Paragraph";
} else {
let levels: number[] = [1, 2, 3, 4, 5, 6];
for (let level of levels) {
if (this.editor.isActive("heading", { level: level })) {
span.innerText = "Heading " + level;
return;
}
}
span.innerText = "Paragraph";
}
}
}
},
});
Is it the correct way or there is more elegant one?