How can I add a rich text editor to my chat sendbox with Azure Communication Service?

Question

Hello community,

Lately, I have been working on a PoC chat application that simply lets users chat with each other.
I know that messages in a chat thread can be of type 'text', 'html' and system. With html type, I'm pretty sure it is doable to send edited messages with rich text.

Now I have the problem, how I can add a rich text editor above my sendbox? I am using the communication-ui-library that contains ready to use UI components and composites. Does this library allow to add rich text and how?

In case not, are there some samples that cover this?

Thank you for your time,

Vincent

Answer 1

The Azure Communication Services communication-ui-library provides ready-to-use UI components and composites for building chat applications. However, it does not include a specific rich text editor component out of the box.

To add a rich text editor above your sendbox, you can make use of existing JavaScript libraries that provide rich text editing capabilities. Here's a general approach you can follow:

Choose a rich text editor library: Select a popular rich text editor library that suits your requirements. Some popular options include Quill, TinyMCE, and Draft.js.

Install the rich text editor library: Follow the installation instructions for the chosen library and integrate it into your project. This usually involves adding the necessary JavaScript and CSS files to your project.

Add the rich text editor component: Create a container element (e.g., a <div>) above your sendbox in your chat application's UI. Initialize the rich text editor component provided by the library within this container element.

Get the edited content: Most rich text editor libraries provide methods or events to retrieve the content entered or edited by the user. You can listen for these events or call the appropriate methods to get the content from the rich text editor component.

Send the rich text content: When the user submits the message, retrieve the content from the rich text editor component and send it as a message in the chat thread. Set the message type to 'html' to indicate that it contains rich text.

Remember to handle any necessary sanitization or validation of the rich text content to ensure security and prevent malicious code injection.

While the communication-ui-library doesn't have a built-in rich text editor, you can integrate any popular JavaScript rich text editor library of your choice into your chat application to enable rich text editing capabilities.