MatchedText with font bold style cause emoji render error

oeyoews · January 18, 2024, 7:46am

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

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

marijn · January 18, 2024, 12:20pm

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.

oeyoews · January 18, 2024, 2:43pm

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

github.com

oeyoews/cm6-project/blob/main/src/main.ts

import './style.css';

import { EditorView, basicSetup } from 'codemirror';
import { autocompletion } from '@codemirror/autocomplete';
import { CompletionContext } from '@codemirror/autocomplete';
import { syntaxTree } from '@codemirror/language';

const tagOptions = [
  'constructor',
  'deprecated',
  'link',
  'param',
  'returns',
  'type',
].map((tag) => ({
  label: '@' + tag + '😄', // emoji normal
  type: 'keyword',
  displayLabel: '😄' + tag, // use displayLabel for emoji bug: emoji error
}));

This file has been truncated. show original

oeyoews · January 18, 2024, 2:49pm

Screenity video - Jan 18, 2024 (3)

marijn · January 18, 2024, 2:58pm

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.

oeyoews · January 18, 2024, 3:03pm

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

oeyoews · January 18, 2024, 3:12pm

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.

marijn · January 18, 2024, 3:14pm

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

oeyoews · January 18, 2024, 3:16pm

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