How to Switch Between Emoji and Unicode in React Rich Text Editor?

4 mins read

In the React Rich Text Editor, emojis are retained in the source code view by default. However, a solution has been implemented to convert emojis to their Unicode representation when switching from preview mode to source code view. This process occurs during the actionBegin and actionComplete events.

Implementation Details

Importing Required Libraries and Components

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { addClass, removeClass, Browser } from '@syncfusion/ej2-base';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Inject,
  Toolbar,
  QuickToolbar,
  EmojiPicker,
  PasteCleanup,
} from '@syncfusion/ej2-react-richtexteditor';

Defining Toolbar Items

This section sets up the toolbar items and configuration for the Rich Text Editor.

  let rteObj;
  const items = [
    'Bold',
    'Italic',
    'Underline',
    '|',
    'EmojiPicker',
    'SourceCode',
    '|',
    'Undo',
    'Redo',
  ];
  
  // Toolbar Settings Configuration
  const toolbarSettings = {
    items: items,
  };

Event Handlers

Event handlers manage the conversion of emojis to Unicode and vice versa during specific user interactions.

actionBegin Handler

This function processes actions when the Source Code view is activated by converting emojis to their Unicode representation.

  function actionBegin(args) {
    if (args.requestType === 'SourceCode') {
      const htmlContent = rteObj.inputElement.innerHTML;
      const emojiRegex = /([\p{Emoji}\p{Emoji_Presentation}])/gu;
      const updatedHTML = htmlContent.replace(
        emojiRegex,
        (char) => `U+${char.codePointAt(0).toString(16).toUpperCase()}`
      );
      rteObj.inputElement.innerHTML = updatedHTML;
      console.log(updatedHTML);
    }
  }

actionComplete Handler

This function is invoked when switching back to the Preview mode, reverting Unicode representations to emojis.

  function actionComplete(args) {
    actionCompleteHandler();
    if (args.requestType === 'Preview') {
      const htmlContent1 = rteObj.inputElement.innerHTML;
      const unicodeRegex = /U\+([A-F0-9]+)/g;
      const updatedHTML1 = htmlContent1.replace(unicodeRegex, (_, hex) =>
        String.fromCodePoint(parseInt(hex, 16))
      );
      rteObj.inputElement.innerHTML = updatedHTML1;
      console.log('Converted back to Emoji:', updatedHTML1);
    }
  }

Rendering the Rich Text Editor

Below is how the Rich Text Editor is rendered, with inclusion of toolbar settings and event handlers.

  <RichTextEditorComponent
    id="clientsideRTE"
    ref={(richtexteditor) => {
      rteObj = richtexteditor;
    }}
    toolbarSettings={toolbarSettings}
    actionBegin={actionBegin.bind(this)}
    actionComplete={actionComplete.bind(this)}
  >
    <p>
      The Rich Text Editor component is a WYSIWYG ("what you see is what
      you get")😃 editor that provides the best user experience to
      create and update content. Users can format their content using standard toolbar commands.😂
    </p>
    <Inject
      services={[
        HtmlEditor,
        Toolbar,
        QuickToolbar,
        EmojiPicker,
        PasteCleanup,
      ]}
    />
  </RichTextEditorComponent>

Summary

This implementation allows for seamless switching between emoji and Unicode representations in the Rich Text Editor, enhancing the user experience while maintaining the integrity of the content.

Additional References

Conclusion
I hope you enjoyed learning how to switching between emoji and unicode in React Rich Text Editor.
You can refer to our React Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Rich Text Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)