Хром не может визуализировать эмодзи после вставки через JS

Question

У меня есть сборщик смайликов в проекте React, и я могу использовать его для вставки смайликов в текстовое поле. При вставке смайлики видны и отображаются правильно. Однако, если вставлен другой, все предыдущие смайлики заменяются неизвестным символом символа. Несмотря на то, что каждый смайлик является полным и действительным персонажем. Я также попытался сохранить сообщение в состоянии React и преобразовать их туда и обратно программно, но проблема остается. См. Пример кода: https://gist.github.com/J-Cake/8ab27a809aaf0cf14a7e2b78cbcbacf2 Мне интересно, есть ли в коде простая ошибка или я пропускаю что-то большее?

Редактировать: Я мог бы добавить, что я нахожусь на Ubuntu, где поддержка эмодзи может быть низкой, но, глядя на тестовые страницы смайликов / тот факт, что эмоджи действительно рендерится, показывает, что ничего не нужно делать с проблемой.

Редактировать 2: Я также обнаружил, что проблема сохраняется в консоли JS и в Firefox.

Answer 1

Я нашел ответ.

Я читал документы MDN и заметил этот отказ от ответственности:

Предупреждение: Когда используется пустая строка ("") в качестве разделителя строка не разделяется на воспринимаемые пользователем символы ( кластеры графемы ) или символы Unicode (кодовые точки), но на кодовые блоки UTF-16. Это уничтожает суррогатных пар. См. «Как получить строку в массив символов в JavaScript?» на StackOverflow.

Я бы полностью отклонил это, если бы не заметил что-то странное в консоли. Я заметил, что два персонажа были напечатаны на смайликах. Я подумал, что это странная ошибка с Unicode, и отклонил это. Оказывается, исправление было в функции numerify; Замените str.split на Array.from(str) и вот рабочий пример.

Answer 2

Вот как я использую эмодзи в проектах React:

emojis = [
  '128512',
  '128514',
  '128519'
];

emojis.map(emoji => <span>{String.fromCodePoint(emoji)}</span>)

Как видите, я использую десятичное написание. Думаю, что и шестнадцатеричный код тоже будет работать.

Я использую следующую таблицу: https://www.w3schools.com/charsets/ref_emoji_smileys.asp

Редактировать:

Несмотря на то, что вы уже исправили это, вот что я предлагаю:

insert(emoji: BaseEmoji) {
    this.setState((prev: State) => ({
      messageContent: [
        ...prev.messageContent.slice(0, prev.cursorStart),
        ...[emoji.native.codePointAt(0)],
        ...prev.messageContent.slice(prev.cursorEnd + 1),
      ],
      cursorStart: prev.cursorStart + 1,
      cursorEnd: prev.cursorStart + 1,
    }));
  }