# Insert widget but within paragraph

**URL:** <https://discuss.prosemirror.net/t/insert-widget-but-within-paragraph/1949>\
**Category:** Uncategorized\
**Created:** [May 13, 2019, 7:20am UTC](https://discuss.prosemirror.net/t/insert-widget-but-within-paragraph/1949 "2019-05-13T07:20:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Celestialray](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/c/a9a28c/32.png) [@Celestialray](https://discuss.prosemirror.net/u/Celestialray)\
**Post date:** [May 13, 2019, 7:20am UTC](https://discuss.prosemirror.net/t/insert-widget-but-within-paragraph/1949/1 "2019-05-13T07:20:46Z")

</div>

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): ![](https://discuss.prosemirror.net/uploads/secondsite/original/1X/9294ca2fde93926156dcfdb5ee0b1206bac7596f.png)

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.

---

<div class="post-metadata">

**Author:** ![Celestialray](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/c/a9a28c/32.png) [@Celestialray](https://discuss.prosemirror.net/u/Celestialray)\
**Post date:** [May 13, 2019, 7:49am UTC](https://discuss.prosemirror.net/t/insert-widget-but-within-paragraph/1949/2 "2019-05-13T07:49:11Z")

</div>

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.