How to display Rich Text Editor in Azure Communication Service

Question

How to display Rich Text Editor in Azure Communication Service

Georgios Katsis 0

Hello.
I am trying to add Rich Text Editor feature in my chat (in react) using the Azure Communication Service. The project build successfully but when we deploy the files locally on IIS or Kubernetes cluster on Azure, the format button in send textbox is missing.
I am using the @azure/communication-react 1.21.0-beta.1. Do you know why this is happening and how I could fix it?
Thank you

Harshitha Veeramalla 1,306 Reputation points Microsoft External Staff Moderator

2025-01-28T07:06:56.1366667+00:00

@Georgios Katsis Did you get a chance to look into the similar issue in Q&A.

Georgios Katsis 0

@Harshitha Veeramalla Thank you for your answer. Yes I saw it this Q&A, I saw also that in ChatComposite component there is an option to enable or disable the rich text editor. This option locally is working. But does not works when I am trying to deploy the project on Azure for example.
Here is my code:

<ChatComposite
            adapter={adapter}
            fluentTheme={currentTheme.theme}
            options={{
              autoFocus: 'sendBoxTextField',
              topic: false,
              richTextEditor: true,
              participantPane: false,
              attachmentOptions: {
                uploadOptions: uploadOptions,
                downloadOptions: downloadOptions
              }

Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-04T07:28:59.7233333+00:00

@Georgios Katsis Just checking in to see if the provided answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further queries do let us know. You accept Your Own answer as well.
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-05T01:56:32.09+00:00

@Georgios Katsis, We still have not heard back from you.

Just wanted to check if the answer provided below was helpful? If it answers your query, please do click Accept Answer and Yes for the answer, as it might be beneficial to other community members reading this thread.

And, if you have any further query do let us know.
Georgios Katsis 0 Reputation points

2025-02-05T07:34:11.05+00:00

Yes I saw it this Q&A, I saw also that in ChatComposite component there is an option to enable or disable the rich text editor. This option locally is working. But does not works when I am trying to deploy the project on Azure for example. In the Q&A answer propose to create the rich text editor from another library. But I am not sure how to display the sent messages in chat thread.
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-05T07:43:11.7933333+00:00

@Georgios Katsis Can you please share the full error in text format in the above question?
Georgios Katsis 0 Reputation points

2025-02-05T08:10:20.12+00:00

The error I am getting is this "Can't find the selector for component, please check supported component list".
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-07T10:49:51.37+00:00

@Georgios Katsis Could please provide more details:

What command or YAML configuration are you using?

What exact selector are you applying?

Which Kubernetes version are you running?

Please share your yml, docker file .Your error, "Can't find the selector for component, please check supported component list," suggests that you might be using an unsupported field selector for a given resource type. Keep in mind:

Label selectors (-l or --selector) work for filtering resources based on labels.

Field selectors (--field-selector) work on specific supported fields per resource.

Not all components in Kubernetes support selectors in the same way.

Georgios Katsis 0

The commands I am using are npm install and npm run build. Nothing special.
The selector I am using is this:

<Stack className={chatScreenContainerStyle}>
        <Stack.Item className={chatCompositeContainerStyle} role="main">
          <ChatComposite
            adapter={adapter}
            fluentTheme={currentTheme.theme}
            options={{
              autoFocus: 'sendBoxTextField',
              topic: false,
              richTextEditor: true,
              participantPane: false,
              attachmentOptions: {
                uploadOptions: createUploadOptions(threadId),
                downloadOptions: downloadOptions
              }
              
            }}
            onRenderMessage={(messageProps, defaultOnRender) => {
              const customMessageProps = {
                ...messageProps,
                showDate: true,
                disableEditing: false
              };
              return defaultOnRender ? defaultOnRender(customMessageProps) : <></>;
            }}
          />
        </Stack.Item>
      </Stack>

Our Kubernetes version is 1.30 and the docker file is attached.

dockerfile.txt

SnehaAgrawal-MSFT 22,721 Reputation points Moderator

2025-03-04T05:57:07.9433333+00:00

@Georgios Katsis Thanks for sharing, Reached you privately.

Your answer

Harshitha Veeramalla 1,306 Reputation points Microsoft External Staff Moderator

2025-01-28T07:06:56.1366667+00:00

@Georgios Katsis Did you get a chance to look into the similar issue in Q&A.
Georgios Katsis 0 Reputation points

2025-01-28T08:13:15.19+00:00

@Harshitha Veeramalla Thank you for your answer. Yes I saw it this Q&A, I saw also that in ChatComposite component there is an option to enable or disable the rich text editor. This option locally is working. But does not works when I am trying to deploy the project on Azure for example.
Here is my code:

<ChatComposite adapter={adapter} fluentTheme={currentTheme.theme} options={{ autoFocus: 'sendBoxTextField', topic: false, richTextEditor: true, participantPane: false, attachmentOptions: { uploadOptions: uploadOptions, downloadOptions: downloadOptions }
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-04T07:28:59.7233333+00:00

@Georgios Katsis Just checking in to see if the provided answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further queries do let us know. You accept Your Own answer as well.
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-05T01:56:32.09+00:00

@Georgios Katsis, We still have not heard back from you.

Just wanted to check if the answer provided below was helpful? If it answers your query, please do click Accept Answer and Yes for the answer, as it might be beneficial to other community members reading this thread.

And, if you have any further query do let us know.
Georgios Katsis 0 Reputation points

2025-02-05T07:34:11.05+00:00

Yes I saw it this Q&A, I saw also that in ChatComposite component there is an option to enable or disable the rich text editor. This option locally is working. But does not works when I am trying to deploy the project on Azure for example. In the Q&A answer propose to create the rich text editor from another library. But I am not sure how to display the sent messages in chat thread.
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-05T07:43:11.7933333+00:00

@Georgios Katsis Can you please share the full error in text format in the above question?
Georgios Katsis 0 Reputation points

2025-02-05T08:10:20.12+00:00

The error I am getting is this "Can't find the selector for component, please check supported component list".
Sampath 3,875 Reputation points Microsoft External Staff Moderator

2025-02-07T10:49:51.37+00:00

@Georgios Katsis Could please provide more details:

What command or YAML configuration are you using?

What exact selector are you applying?

Which Kubernetes version are you running?

Please share your yml, docker file .Your error, "Can't find the selector for component, please check supported component list," suggests that you might be using an unsupported field selector for a given resource type. Keep in mind:

Label selectors (-l or --selector) work for filtering resources based on labels.

Field selectors (--field-selector) work on specific supported fields per resource.

Not all components in Kubernetes support selectors in the same way.
Georgios Katsis 0 Reputation points

2025-02-11T08:24:37.6066667+00:00

The commands I am using are npm install and npm run build. Nothing special.
The selector I am using is this:

<Stack className={chatScreenContainerStyle}> <Stack.Item className={chatCompositeContainerStyle} role="main"> <ChatComposite adapter={adapter} fluentTheme={currentTheme.theme} options={{ autoFocus: 'sendBoxTextField', topic: false, richTextEditor: true, participantPane: false, attachmentOptions: { uploadOptions: createUploadOptions(threadId), downloadOptions: downloadOptions } }} onRenderMessage={(messageProps, defaultOnRender) => { const customMessageProps = { ...messageProps, showDate: true, disableEditing: false }; return defaultOnRender ? defaultOnRender(customMessageProps) : <></>; }} /> </Stack.Item> </Stack>

Our Kubernetes version is 1.30 and the docker file is attached.

dockerfile.txt
SnehaAgrawal-MSFT 22,721 Reputation points Moderator

2025-03-04T05:57:07.9433333+00:00

@Georgios Katsis Thanks for sharing, Reached you privately.

Share via

How to display Rich Text Editor in Azure Communication Service

Your answer