Update paddings and theme handling for rich text editor toolbar (#4852)

Author: vhuseinova-msft

change-beta/@azure-communication-react-cf3347b6-3db1-4e18-8f7f-56b270e10876.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Update paddings and theme handling for rich text editor toolbar",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-cf3347b6-3db1-4e18-8f7f-56b270e10876.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Update paddings and theme handling for rich text editor toolbar",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -24,8 +24,9 @@ import { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';
 import { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';
 import { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';
 import { borderApplier, dataSetApplier, DefaultSanitizers } from '../utils/RichTextEditorUtils';
-import { ContextualMenu, IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';
+import { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';
 import { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';
+import { getFormatState, setDirection } from 'roosterjs-content-model-api';
 
 /**
  * Style props for {@link RichTextEditor}.
@@ -107,6 +108,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
   const editorDiv = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);
+  const previousThemeDirection = useRef(themeDirection(theme));
 
   useImperativeHandle(ref, () => {
     return {
@@ -313,10 +315,26 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [theme, plugins]);
 
+  useEffect(() => {
+    const themeDirectionValue = themeDirection(theme);
+    // check that editor exists and theme was actually changed
+    // as format.direction will be undefined if setDirection is not called
+    if (editor.current && previousThemeDirection.current !== themeDirectionValue) {
+      const format = getFormatState(editor.current);
+      if (format.direction !== themeDirectionValue) {
+        // should be set after the hook where editor is created as the editor might be null
+        // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)
+        // that's why it's not part of the create editor hook
+        setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');
+      }
+      previousThemeDirection.current = themeDirectionValue;
+    }
+  }, [theme]);
+
   return (
     <div data-testid={'rich-text-editor-wrapper'}>
       {showRichTextEditorFormatting && toolbar}
-      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>
+      <div className={richTextEditorWrapperStyle(theme)}>
         {/* div that is used by Rooster JS as a parent of the editor */}
         <div
           id="richTextSendBox"
@@ -366,3 +384,7 @@ const setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, blo
   block.segments.push(marker);
   setSelection(model, marker);
 };
+
+const themeDirection = (theme: Theme): 'rtl' | 'ltr' => {
+  return theme.rtl ? 'rtl' : 'ltr';
+};

packages/react-components/src/components/styles/RichTextEditor.styles.ts

@@ -15,21 +15,15 @@ export const richTextEditorStyle = (props: { minHeight: string; maxHeight: strin
     minHeight: props.minHeight,
     maxHeight: props.maxHeight,
     maxWidth: '100%',
-    // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and
-    // it gets both horizontal margins because of the user agent stylesheet
-    // remove this code when RoosterJS content model packages are used as they use different approach for indentation
-    '& blockquote': {
-      marginInlineEnd: '0'
-    }
+    paddingTop: '0.5rem'
   });
 };
 
 /**
  * @private
  */
-export const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {
+export const richTextEditorWrapperStyle = (theme: Theme): string => {
   return mergeStyles({
-    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,
     paddingInlineStart: `0.75rem`,
     paddingInlineEnd: `0.75rem`,
     maxWidth: '100%',
@@ -116,7 +110,7 @@ const ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {
       },
       '.ribbon-table-button-regular-icon': {
         display: 'inline-block',
-        margin: '-0.25rem 0.25rem 0 0.25rem',
+        margin: '0 0.25rem 0 0.25rem',
         width: '1.25rem',
         height: '1.25rem'
       },
@@ -157,8 +151,8 @@ const ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): ISty
  */
 export const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {
   return {
-    icon: { color: theme.palette.neutralPrimary, height: 'auto' },
-    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+    icon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
+    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
     root: { minWidth: 'auto', backgroundColor: 'transparent' },
     rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
     // there is a bug for Android where the press action is considered hover sometimes
@@ -200,14 +194,14 @@ const ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle
       '.ribbon-table-button-regular-icon': {
         width: '1.25rem',
         height: '1.25rem',
-        margin: '-0.25rem 0.25rem 0 0.25rem',
+        margin: '0 0.25rem 0 0.25rem',
         color: theme.palette.neutralPrimary,
         display: isSelected ? 'none' : 'inline-block'
       },
       '.ribbon-table-button-filled-icon': {
         width: '1.25rem',
         height: '1.25rem',
-        margin: '-0.25rem 0.25rem 0 0.25rem',
+        margin: '0 0.25rem 0 0.25rem',
         color: theme.palette.themePrimary,
         display: isSelected ? 'inline-block' : 'none'
       }
@@ -222,7 +216,7 @@ export const ribbonDividerStyle = (theme: Theme): string => {
   return mergeStyles({
     color: theme.palette.neutralQuaternaryAlt,
     margin: '0 -0.5rem',
-    paddingTop: '0.5rem'
+    paddingTop: '0.25rem'
   });
 };
 
@@ -231,7 +225,7 @@ export const ribbonDividerStyle = (theme: Theme): string => {
  */
 export const richTextToolbarStyle: Partial<ICommandBarStyles> = {
   // Override for the default white color of the Ribbon component
-  root: { backgroundColor: 'transparent', padding: '0px' }
+  root: { backgroundColor: 'transparent', padding: '0.25rem 0 0 0', height: '2rem' }
 };
 
 /**

packages/react-components/tests/browser/RichTextInputBoxComponent.spec.tsx

@@ -106,5 +106,8 @@ const addList = async (listButtonLabel: string, component: Locator): Promise<voi
   await editor.pressSequentially('First submenu');
   await editor.press('Enter');
   await component.getByLabel('Decrease indent').click();
+  // the tests are fast and sometimes UI state for "decrease indent" button doesn't have enough time to update
+  // this call is to fix it
+  editor.click();
   await editor.pressSequentially('Third line');
 };