when rendering custom <li> items, highlighting breaks

[ManuZenou]

when adding a custom render functionality, for example:

render: function(item) {
                    return '<li class="rich-text-editor-dropdown-item">' +
                                '<a href="javascript:;"><span class="dropdown-icon"><span class="fa mceNonEditable"></span></span><span class="dropdown-text"></span></a>' +
                            '</li>';
                },

(I'm using the fontawesome plugin as well)

In that case, the highlighting breaks, because it assumes that the text() functions returns values from only one .

line232:

$element.html($element.html().replace($element.text(), _this.highlighter($element.text())));

[StevenDevooght]

The text function returns both the characters within the mceNonEditable span and the dropdown-text span. In that case the replace function does not work indeed.

When I have time I will look into it or feel free to propose a fix yourself. :smile:

[hammygoonan]

This still seems to be an issue. I had a quick poke around but it looked like it needed some deeper investigation. Is it on your 'to do' list @StevenDevooght

[StevenDevooght]

Hi, It's not on my todo list atm. Feel free to have a look 😄

[TKharaishvili]

Here's what I did to work around this issue:

var q = null;

mentions: {
    source: function (query, process, delimiter) {
        q = query; //save the query in the variable above
        //fetch data
    },
    render: function (item) {
        if (q) {
            //return highlighted version of the list item
        } else {
            //return regular version of the list item
        }
    },
    highlighter: function (text) {
        //turn off the built-in highlighter
        return text;
    }
}

Sure this is a hack but it's kind of reliable as the source function always runs before the render function does thus guaranteeing the q variable to always be up to date. (Or at least that's what my testing of version 4.0.2 showed)