MatchedText with font bold style cause emoji render error

  return {
    from: wordStart,
    // filter: false,
    getMatch: (compltion, matched) => {
      return matched as [];

Since emoji is divided into two characters, if font-weight: bold is added, the emoji will display garbled characters. However, the default font-weight: 400 will not cause this situation.

Emoji should not belong to matched text by default, but it is still split. Is there something wrong with the getMatch function? @marijn

I cannot reproduce this when I use a completion result like the one you show, with a single returned option whose label starts with an astral character.

I just created a minimal reproducible example. According to the completeJSDoc example on the official website, I found that if overwrite is used directly, emoji will render normally, but if it is placed in a specific language, such as javascript, emoji rendering problems will occur. I used displayLabel

codesanbox example

Screenity video - Jan 18, 2024 (3)

Well, yes, if you use a displayLabel that doesn’t match the label, and do nothing in getMatch, your matched ranges will be wrong, and you can create this problem. That’s not a library problem.

Yes, I also discovered this situation, so is it not recommended to use displayLabel and getMatch at the same time?


If you enter inb, the previous emoji will also be matched, causing the emoji to be separated. If add font-weight style, this problem will be displayed directly on the UI.

It is, but you have to actually return something meaningful from getMatch, that fits your label indices.

Okay, I need to take a closer look at the usage of getMatch