Pass ref from CommandBar

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

@@ -44,7 +44,7 @@ import {
   removeLocalBlobs,
   cleanAllLocalBlobs
 } from '../utils/RichTextEditorUtils';
-import { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';
+import { ContextualMenu, ICommandBar, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';
 import { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';
 import { getFormatState, setDirection } from 'roosterjs-content-model-api';
 import UndoRedoPlugin from './Plugins/UndoRedoPlugin';
@@ -130,7 +130,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
   } = props;
   const editor = useRef<IEditor | null>(null);
   const editorDiv = useRef<HTMLDivElement>(null);
-  const toolbarRef = useRef<HTMLDivElement>(null);
+  const commandBar = useRef<ICommandBar>(null);
   const theme = useTheme();
   const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);
   const previousThemeDirection = useRef(themeDirection(theme));
@@ -210,12 +210,12 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
   }, [placeholderPlugin, placeholderText]);
 
   const toolbar = useMemo(() => {
-    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;
-  }, [strings, toolbarPlugin]);
+    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} ref={commandBar} />;
+  }, [strings, toolbarPlugin, commandBar]);
 
   useEffect(() => {
     if (showRichTextEditorFormatting) {
-      toolbarRef.current?.focus();
+      commandBar.current?.focus();
     }
   }, [showRichTextEditorFormatting]);
 
@@ -467,9 +467,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
 
   return (
     <div data-testid={'rich-text-editor-wrapper'}>
-      <div ref={toolbarRef} tabIndex={-1}>
-        {showRichTextEditorFormatting && toolbar}
-      </div>
+      {showRichTextEditorFormatting && toolbar}
       <div className={richTextEditorWrapperStyle(theme)}>
         {/* div that is used by Rooster JS as a parent of the editor */}
         <div

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

@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';
 import { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';
-import type { ICommandBarItemProps, Theme } from '@fluentui/react';
+import type { ICommandBar, ICommandBarItemProps, Theme } from '@fluentui/react';
 import {
   toolbarButtonStyle,
   ribbonDividerStyle,
@@ -44,7 +44,7 @@ export interface RichTextToolbarProps {
  *
  * @beta
  */
-export const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {
+export const RichTextToolbar = React.forwardRef<ICommandBar, RichTextToolbarProps>((props, ref) => {
   const { plugin, strings } = props;
   const theme = useTheme();
   // need to re-render the buttons when format state changes
@@ -252,16 +252,25 @@ export const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {
     };
   }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
 
+  // useImperativeHandle(ref, () => ({
+  //   focus: () => {
+  //     // Implement focus logic here
+  //   },
+  //   remeasure: () => {
+  //     // Implement remeasure logic here
+  //   }
+  // }));
+
   return (
     <CommandBar
       items={buttons}
       data-testid={'rich-text-editor-toolbar'}
       styles={richTextToolbarStyle}
       overflowButtonProps={overflowButtonProps}
-      aria-live={'polite'}
+      componentRef={ref as React.RefObject<ICommandBar>}
     />
   );
-};
+});
 
 const getCommandBarItem = ({
   key,