CODEWITHSUNDEEP
reactjsdraftjsemojione
asubanovsky
asubanovsky

Reputation: 1748

DraftJS Modifier.insertText(): Insert Unicode

I've list of emojis. Each of them has its own unicode. With Modifier.insertText(), I would like to insert them to the text. 

_addEmoji(text) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const txt = '&#x' + text + ';';
    let nextEditorState = EditorState.createEmpty();
    if (selection.isCollapsed()) {
      const nextContentState = Modifier.insertText(contentState, selection, txt);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    } else {
      const nextContentState = Modifier.replaceText(contentState, selection, text);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    }
    this.onChange(nextEditorState);
  }

I expect to see 😄 inserted to the editor but it displays row 😄 instead.

I've inserted <meta charset="utf-8" /> to <head /> and the list of emoji is rendered perfectly. The main problem is the draftjs editor displays raw unicode instead of the emoji.

Any thoughts to fix this? Thanks.

Upvotes: 6

Views: 6850

Answers (1)

stefan
stefan

Reputation: 2477

Cause insertText will parse your & to &amp; with HTML encoding.

You should type the character directly there, or use String.fromCharCode.

e.g.:

Modifier.insertText(contentState, selection, 😄);

or

Modifier.insertText(contentState, selection, String.fromCharCode(0xd83d, 0xde04));

Cause

'😄'.charCodeAt(0).toString(16); //d83d
'😄'.charCodeAt(1).toString(16); //de04

Upvotes: 4

Related Questions