Firstly, I don’t even know if it’s possible to attach event listeners to widgets, but that’s what I need and it’s quite mandatory. I have this html structure after I run a few plugins:
I use this plugin to create the left arrow widget (similarly for the right one):
const arrowLeftPlugin = new Plugin({
state:
{
init()
{
return{ commands: [], position: null };
},
apply(transaction, value, oldState, state)
{
const { $anchor } = state.selection;
const newValue = { selected: null };
state.doc.descendants((node, pos) =>
{
if ($anchor.parent === node)
{
newValue.selected =
{
from: pos,
to: pos + $anchor.parent.nodeSize
}
}
});
return newValue;
}
},
props:
{
decorations(state)
{
const { selected } = this.getState(state);
if (selected)
{
const { from, to, attrs } = selected;
console.log(selected);
let decos = []
decos.push(Decoration.inline(from, to, {}), Decoration.widget(state.selection.$anchor.pos - state.selection.$anchor.parentOffset, leftArrowIcon))
return DecorationSet.create(state.doc, decos);
}
return DecorationSet.empty;
}
}
});
function leftArrowIcon()
{
let icon = document.createElement("div")
icon.className = "left-arrow-indent fas fa-arrow-left"
return icon
}
What I need is to be able to remove an indentation level from the current selected paragraph by clicking the left arrow and add one level by clicking the right arrow. Moreover, I need to number inner levels with a chapter-like numbering (for example, the second level needs to have 2.1, 2.2, 2.3 etc., instead of 1., 2., 3.).
I found the ctrl+] and ctrl+[ commands which basically do the indentation/deindentation I need. Is there any way I could attach those commands to the arrow widgets as onclick event listeners? I’ll try to work with those and I’ll update this topic if I can manage that.
Any help is appreciated, thank you.