Perform list indentation/de-indentation on widget click

#1

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.

#2

Adding an event listener to the DOM node and having it call those commands should work.

1 Like
#3

How do I exactly call those commands? I don’t see the command I want within the commands module.

#4

The commands that the example setup binds to ctrl-[ and ctrl-] come from the prosemirror-schema-list package.