[RTE] Fix selected format styles in rich text toolbar when editing messages (#4940)

Author: vhuseinova-msft

change-beta/@azure-communication-react-ffb8d80e-6bd1-4986-98ea-bae389cec127.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Fix for an issue where toolbar didn't correctly show the selected style format during message editing",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-ffb8d80e-6bd1-4986-98ea-bae389cec127.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Fix for an issue where toolbar didn't correctly show the selected style format during message editing",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.tsx

@@ -54,7 +54,7 @@ export class RichTextToolbarPlugin implements EditorPlugin {
    * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback
    * if there is any difference between the new and the current format states.
    */
-  private updateFormat(): void {
+  updateFormat(): void {
     if (this.editor && this.onFormatChanged) {
       const newFormatState = getFormatState(this.editor);
       // use keys from the format that has more keys or the new format state if there is no current format state

packages/react-components/src/components/RichTextEditor/RichTextEditor.tsx

@@ -401,7 +401,9 @@ const createEditorInitialModel = (
 };
 
 const setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {
-  const marker = createSelectionMarker();
+  //selection marker should have the same format as the last segment if any
+  const format = block.segments.length > 0 ? block.segments[block.segments.length - 1].format : undefined;
+  const marker = createSelectionMarker(format);
   block.segments.push(marker);
   setSelection(model, marker);
 };

packages/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx

@@ -53,6 +53,9 @@ export const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {
   useEffect(() => {
     // update the format state on editor events
     plugin.onFormatChanged = setFormatState;
+    // plugin editor ready event may happen before onFormatChanged is set
+    // call update format function to ensure the format state is set
+    plugin.updateFormat();
   }, [plugin]);
 
   const boldButton: ICommandBarItemProps = useMemo(() => {

packages/storybook/stories/MessageThread/MessageThread.stories.tsx

@@ -525,7 +525,8 @@ const MessageThreadStory = (args): JSX.Element => {
     if (message.messageType === 'chat') {
       message.content = content;
       message.editedOn = new Date(Date.now());
-      if (args.richTextEditor === true) {
+      // args will get string type when value is updated and page is reloaded (without updating switch again)
+      if (args.richTextEditor === true || args.richTextEditor === 'true') {
         message.contentType = 'html';
       }
     }

packages/storybook8/stories/Components/MessageThread/MessageThread.story.tsx

@@ -114,7 +114,8 @@ const MessageThreadStory = (args): JSX.Element => {
     if (message.messageType === 'chat') {
       message.content = content;
       message.editedOn = new Date(Date.now());
-      if (args.richTextEditor === true) {
+      // args will get string type when value is updated and page is reloaded (without updating switch again)
+      if (args.richTextEditor === true || args.richTextEditor === 'true') {
         message.contentType = 'html';
       }
     }