hint "content" run-on with custom tag

Using your example on your hint examples page (http://summernote.org/examples/#hint) I modified slightly the “content:” to highlight the item:

$(".hint2mention").summernote({
  height: 100,
  toolbar: false,
  hint: {
    mentions: ['jayden', 'sam', 'alvin', 'david'],
    match: /\B@(\w*)$/,
    search: function (keyword, callback) {
      callback($.grep(this.mentions, function (item) {
        return item.indexOf(keyword) == 0;
      }));
    },
    content: function (item) {
      return $("<b>").html('@' + item)[0];     // Changed from return '@'+item
    }    
  }
});

browser: Chrominium Version 50.0.2661.94 (64-bit) OS: Linux Mint 17.3 64 bit Summernote source used: http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js

result is like this:

here is text @sam words beyond selection are stil bold

I cannot seem to terminate the ‘bold’.

[Horndev]

For anyone wondering, I solved this by modifying the summernote code:

HintPopover.prototype.replace = function () {
          var $item = this.$content.find('.note-hint-item.active');
          if ($item.length) {
              var node = this.nodeFromItem($item);
              // XXX: consider to move codes to editor for recording redo/undo.
              this.lastWordRange.insertNode(node);
              range.createFromNode(node).collapse().select();
              this.lastWordRange = null;
              this.hide();
              this.context.triggerEvent('change', this.$editable.html(), this.$editable[0]);
              this.context.invoke('editor.focus');
              //hack to move cursor right
              this.context.invoke('editor.pasteHTML', '‌')
          }
      };

I added the last line so that it jumps out of the span.

[Arunadevi]

This method returns the original set of elements for chaining purposes.(http://api.jquery.com/wrap/).

Guess we can’t really wrap it yet.

This works: return $("<span>").html('<strong>@' + item.name + '</strong><span>&nbsp;</span>')[0]