Summernote User Mention unable to wrap mentioned user issue

Question

Hey there Stack Overflow,

I am facing a javascript issue with my text area editor using summernote. I have made an API call which will retrieve my users from the database with the @ symbol but when the user is select and the username is returned, the textarea doesn't seem to properly wrap the tagged user. Here's what I mean:

Text area selecting a user:

Text area after selecting a user and when I try to continue typing

My Js Code:

$("#editor").summernote({
        height: 100,
        hint: {
            match: /\B@(\w*)$/,
            users: function(keyword, callback) {
            $.ajax({
                url: '/api/mentions/users?q=' + keyword + '&c=name',
                type: 'get',
                async: true
            }).done(callback);
        },
        search: function (keyword, callback) {
            this.users(keyword, callback); //callback must be an array
        },
        content: function (item) {
            return $('<b class="btn btn-primary">@' + item+'</b>')[0];
        }
        }
    });