Allow styling matched substrings in the completion dropdown

[juliusv]

It would be really cool to be able to highlight / make bold the parts of the completion item that are already matched by the typed string. Like this, in Monaco:

[marijnh]

My judgement, so far, is that this isn't all that useful (the fact that an item matches is the useful information,how it matched isn't terribly important), and makes it hard to allow things like completion-source-level filtering and displaying labels that aren't precisely identical to the matched string. But if you want to make a case for why this is important, I'm interested in hearing it.

[juliusv]

One argument is just the subjective "it's pretty and everyone does it", but a more useful one might be that it sometimes helps me find the right completion item faster. Often (with fuzzy matching) I am only looking for items that contain the typed substring either at the beginning, the end, or somewhere in the middle. Highlighting the matched substring(s) helps me to skip over / ignore the irrelevant items more quickly.

[Nexucis]

A compromise if you are not interested could be to just provide another implementation of autocompletePlugin that handle this problem.

And then it will be up to the user to activate it.

So far I didn't get how to change it, and also I supposed that ViewPlugin will have to know how the text has been filtered. Sounds quite complicate ....

But anyway would you be opened to have it ? From my point of view, it will be pretty cool that CodeMirror is providing it. It's quite weird to not have it actually since like Julius said, everybody does it. But really everybody, even your IDE is doing it.

And basically when you have it, usually you don't pay particular attention, but because it's usual to have it. Your eyes is used to have it. And I'm agree with Julius on the fact that it helps a lot to find what you are looking for. Specially when the fuzzy filtering is activated.
For other mode, since it's quite obvious how the text is matched, yes you don't really need it, but for the fuzzy it's important. It helps a lot to highlight the word you are typing, specially when each letters are separated by others noisy letter like
word is matching we have the opportunity to change the world. Would take a wild to see the term word in this sentence without the bold characters.

[Nexucis]

Actually I found something much simpler.

So the idea would be to allow the user to put some html in the field Completion.label
Today when you are trying that, here the result you have:

And when you are looking at the HTML, it looks like that the string <b>p</b>ush has been encoded. In the HTML you have this:

<b>p</b>ush

So if the system wouldn't encode the string, then the problem would be solved. Am I missing something in this picture ?

[Nexucis]

I guess the encoding is happening here:

https://github.com/codemirror/codemirror.next/blob/master/autocomplete/src/index.ts#L362

[Nexucis]

which could be changed like that:

    const className = themeClass("completionIcon" + (completion.type ? "." + completion.type : ""))
    li.innerHTML = '<div class="'+className+'"></div>' + completion.label
    li.setAttribute("role", "option")

But maybe there is a more elegant way to do it.

[marijnh]

Since everybody seems to like this feature, and completion filtering had to be moved into the library to allow more refined scoring anyway, I've implemented this in 0547455...fc352af