Insert widget but within paragraph

1

I have a plugin that inserts an arrow when I click a paragraph. It should insert an arrow within the selected paragraph, but instead the arrow div is inserted outside the paragraph, just above. This makes it very hard to position the arrow properly. Here’s my code for the plugin:

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;
        let decos = []
        decos.push(Decoration.inline(from, to, {}), Decoration.widget(from, 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
}

This is how it looks like (the html):

Basically, I want the div to be within the paragraph. How can I do that? I looked over the lint example and apparently it succeeds in doing that, but I don’t know what I am doing differently.

2

I solved this by passing state.selection.$anchor.parentOffset to the Decoration.widget constructor like so:

Decoration.widget(state.selection.$anchor.parentOffset, leftArrowIcon)

Apparently, I inserted the arrow at the start of the node, but that’s outside of the paragraph.