I'm having a few issues implementing the Mentions plugin in CKEditor4:

1. The outputTemplate isn't acting as expected. The <span class="tag is-delete"></span> from the template is completely omitted when inserted into the editor after selecting from the mentions dropdown.
2. The outputTemplate is inserted in a separate <p> tag all by itself, whereas I want the tags to be inline.
   • Example of current output:

   <p>After looking into this issue, I can confirm</p> 
   <p><a data-value="1" class="tags has-addons"><span class="tag is-info">John Doe</span></a></p>
   <p>'s bug report is reproducible in all major production releases; therefore, further escalation is required.</p>
   

   • Example of expected/desired output:

   <p>After looking into this issue, I can confirm <a data-value="1" class="tags has-addons"><span class="tag is-info">John Doe</span><span class="tag is-delete"></span></a>'s bug report is reproducible in all major production releases; therefore, further escalation is required.</p>
   

My relevant code

My exact CKEditor configuration can be viewed here.
I'm using the Div Editing Area plugin in place of the iframe, so that my global css (Bulma) is utilized for the tags inside the wysiwyg editor.

<div class="field">
    <p class="control" id="discussion-inputs">
        <textarea id="discussion-textarea" class="textarea" placeholder="Add a comment..." style="margin-top: 0px; margin-bottom: 0px; height: 128px;"></textarea>
    </p>
</div>

CKEDITOR.replace( document.querySelector( '#discussion-textarea' ), {
    allowedContent: true,
    mentions: [
        {
            marker: '@',
            minChars: 3,
            feed: "{{ url_for('api.user_list') }}",
            itemTemplate: '<li data-id="{id}" class="dropdown-item">{name}</li>',
            outputTemplate: '<a data-value="{id}" class="tags has-addons"><span class="tag is-info">{name}</span><span class="tag is-delete"></span></a>'
        }
    ]
});

Small sample of the output received from the api.user_list endpoint

[
  {
    "email": "johnd@email.com", 
    "id": 1, 
    "name": "John Doe"
  }, 
  {
    "email": "janed@email.com", 
    "id": 2, 
    "name": "Jane Doe"
  }
]

My questions

1. How can I make the entire outputTemplate actually output without being truncated or stripped of any of the supplied html tags/classes?
2. How can I make sure the tags are inserted inline instead of as separate, new <p> tags, so there are no unneccessary linebreaks added to the typed message?
3. Bonus: How can I make it so the mention tag, after it's properly inserted into the editor area, when clicked will be removed instead of the cursor being placed at the spot of the text that was clicked? The idea is to prevent the user from being able to modify the @'d username to one that is not valid.