@azure/communication-react 1.17.0-alpha-202405170014 → 1.17.0-alpha-202405220013

package/dist/dist-cjs/communication-react/{index-C9I6Mcil.js → index-DO36MBbq.js}

@@ -15,12 +15,10 @@ var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var react$1 = require('@griffel/react');
-var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
-var roosterjsEditorCore = require('roosterjs-editor-core');
-var roosterjsEditorTypesCompatible = require('roosterjs-editor-types-compatible');
-var roosterjsReact = require('roosterjs-react');
-var roosterjsEditorDom = require('roosterjs-editor-dom');
-var roosterjsEditorApi = require('roosterjs-editor-api');
+var roosterjsContentModelCore = require('roosterjs-content-model-core');
+var roosterjsContentModelDom = require('roosterjs-content-model-dom');
+var roosterjsContentModelPlugins = require('roosterjs-content-model-plugins');
+var roosterjsContentModelApi = require('roosterjs-content-model-api');
 var reactChat = require('@fluentui-contrib/react-chat');
 var uuid = require('uuid');
 var parse = require('html-react-parser');
@@ -176,7 +174,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.17.0-alpha-202405170014';
+var telemetryVersion = '1.17.0-alpha-202405220013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6132,9 +6130,7 @@ const SAFARI_COMPOSITION_KEYCODE = 229;
  */
 const isEnterKeyEventFromCompositionSession = (e) => 
 // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
-e.nativeEvent.isComposing ||
-    e.nativeEvent.keyCode === SAFARI_COMPOSITION_KEYCODE ||
-    e.nativeEvent.which === SAFARI_COMPOSITION_KEYCODE;
+e.isComposing || e.keyCode === SAFARI_COMPOSITION_KEYCODE || e.which === SAFARI_COMPOSITION_KEYCODE;
 /**
  * @private
  */
@@ -8147,7 +8143,7 @@ const TextFieldWithMention = (props) => {
         // as onMouseUp can be triggered before or after onSelect event
         // because its order depends on mouse events not selection.
         setShouldHandleOnMouseDownDuringSelect(false);
-        if (isEnterKeyEventFromCompositionSession(ev)) {
+        if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {
             return;
         }
         let isActiveSuggestionIndexUpdated = false;
@@ -8617,7 +8613,7 @@ const InputBoxComponent = (props) => {
         }
     });
     const onTextFieldKeyDown = React.useCallback((ev) => {
-        if (isEnterKeyEventFromCompositionSession(ev)) {
+        if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {
             return;
         }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
@@ -9949,7 +9945,6 @@ const richTextEditorWrapperStyle = (theme, addTopOffset) => {
         paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,
         paddingInlineStart: `0.75rem`,
         paddingInlineEnd: `0.75rem`,
-        lineHeight: '1.25rem',
         maxWidth: '100%',
         color: theme.palette.neutralPrimary,
         '& table': {
@@ -10050,7 +10045,7 @@ const ribbonButtonRootStyles = (theme) => {
 /**
  * @private
  */
-const ribbonButtonStyle = (theme) => {
+const toolbarButtonStyle = (theme) => {
     return {
         icon: { color: theme.palette.neutralPrimary, height: 'auto' },
         menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
@@ -10071,7 +10066,7 @@ const rootRibbonTableButtonStyle = (theme) => {
 /**
  * @private
  */
-const ribbonTableButtonStyle = (theme) => {
+const toolbarTableButtonStyle = (theme) => {
     return {
         icon: { height: 'auto' },
         menuIcon: { height: 'auto' },
@@ -10119,9 +10114,9 @@ const ribbonDividerStyle = (theme) => {
 /**
  * @private
  */
-const ribbonStyle = {
+const richTextToolbarStyle = {
     // Override for the default white color of the Ribbon component
-    root: { backgroundColor: 'transparent' }
+    root: { backgroundColor: 'transparent', padding: '0px' }
 };
 /**
  * @private
@@ -10211,55 +10206,217 @@ const tableContextMenuIconStyles = react.mergeStyles({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles
-/**
- * Insert table into editor at current selection
- * @param editor The editor instance
- * @param columns Number of columns in table
- * @param rows Number of rows in table
- */
-const insertTable = (editor, columns, rows) => {
-    const document = editor.getDocument();
-    const table = document.createElement('table');
-    for (let i = 0; i < rows; i++) {
-        const tr = document.createElement('tr');
-        table.appendChild(tr);
-        for (let j = 0; j < columns; j++) {
-            const td = document.createElement('td');
-            tr.appendChild(td);
-            td.appendChild(document.createElement('br'));
-            // set the width as otherwise insets doesn't work well in table
-            // review if it's needed when content model packages are used
-            td.style.width = getTableCellWidth(columns);
-        }
-    }
-    editor.focus();
-    editor.addUndoSnapshot(() => {
-        const vTable = new roosterjsEditorDom.VTable(table);
-        vTable.writeBack();
-        editor.insertNode(table);
-        const nextElementAfterTable = table.nextElementSibling;
-        // insert br only if there is no next element after the table
-        if (nextElementAfterTable === null) {
-            // insert br after the table
-            // so users can easily input content after table
-            editor.select(new roosterjsEditorDom.Position(table, roosterjsEditorTypesCompatible.CompatiblePositionType.After));
-            editor.insertNode(document.createElement('br'));
-        }
-        editor.runAsync((editor) => editor.select(new roosterjsEditorDom.Position(table, roosterjsEditorTypesCompatible.CompatiblePositionType.Begin).normalize()));
-    }, roosterjsEditorTypesCompatible.CompatibleChangeSource.Format, undefined /* canUndoByBackspace */, {
-        formatApiName: 'insertTable'
-    });
+/**
+ * Plugin event type for RoosterJS plugins
+ * @private
+ */
+var PluginEventType;
+(function (PluginEventType) {
+    PluginEventType["EditorReady"] = "editorReady";
+    PluginEventType["BeforeDispose"] = "beforeDispose";
+    PluginEventType["ContentChanged"] = "contentChanged";
+    PluginEventType["Input"] = "input";
+    PluginEventType["KeyDown"] = "keyDown";
+    PluginEventType["BeforePaste"] = "beforePaste";
+    PluginEventType["ZoomChanged"] = "zoomChanged";
+    PluginEventType["MouseUp"] = "mouseUp";
+})(PluginEventType || (PluginEventType = {}));
+/**
+ * ContentChanged event source for RoosterJS
+ * @private
+ */
+var ContentChangedEventSource;
+(function (ContentChangedEventSource) {
+    ContentChangedEventSource["Paste"] = "Paste";
+})(ContentChangedEventSource || (ContentChangedEventSource = {}));
+/**
+ * Applies the border format to the specified element.
+ * If the element is an HTMLTableCellElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, the default format applier is used.
+ */
+const borderApplier = (format, element, context) => {
+    if (element instanceof HTMLTableCellElement) ;
+    else if (context.defaultFormatAppliers.border) {
+        // apply default formats for all other cases
+        context.defaultFormatAppliers.border(format, element, context);
+    }
 };
-function getTableCellWidth(columns) {
-    if (columns <= 4) {
-        return '120px';
+/**
+ * Applies the dataset format to the given HTML element.
+ * If the element is an HTMLTableElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, it applies the default formats.
+ */
+const dataSetApplier = (format, element, context) => {
+    if (element instanceof HTMLTableElement) ;
+    else if (context.defaultFormatAppliers.dataset) {
+        // apply default formats for all other cases
+        context.defaultFormatAppliers.dataset(format, element, context);
     }
-    else if (columns <= 6) {
-        return '100px';
+};
+
+/**
+ * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
+ */
+class CopyPastePlugin {
+    constructor() {
+        this.editor = null;
     }
-    else {
-        return '70px';
+    getName() {
+        return 'CopyPastePlugin';
+    }
+    initialize(editor) {
+        this.editor = editor;
+    }
+    dispose() { }
+    onPluginEvent(event) {
+        removeImageElement(event);
+        if (this.editor !== null && !this.editor.isDisposed()) {
+            // scroll the editor to the correct position after pasting content
+            scrollToBottomAfterContentPaste(event, this.editor);
+        }
+    }
+}
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+const removeImageElement = (event) => {
+    // We don't support the pasting options such as paste as image yet.
+    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
+        event.fragment.querySelectorAll('img').forEach((image) => {
+            // If the image is the only child of its parent, remove all the parents of this img element.
+            let parentNode = image.parentElement;
+            let currentNode = image;
+            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
+                currentNode = parentNode;
+                parentNode = parentNode.parentElement;
+            }
+            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
+        });
+    }
+};
+/**
+ * Scrolls the editor's scroll container to the bottom after content is pasted.
+ * @param event - The plugin event.
+ * @param editor - The editor instance.
+ */
+const scrollToBottomAfterContentPaste = (event, editor) => {
+    if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
+        const scrollContainer = editor.getScrollContainer();
+        // get current selection for the editor
+        const selection = document.getSelection();
+        // if selection exists
+        if (selection && selection.rangeCount > 0) {
+            // the range for the selection
+            const range = selection.getRangeAt(0);
+            // the selection position relative to the viewport
+            const cursorRect = range.getBoundingClientRect();
+            // the scrollContainer position relative to the viewport
+            const scrollContainerRect = scrollContainer.getBoundingClientRect();
+            // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
+            // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
+            // translate the scroll position from being relative to the document to being relative to the viewport.
+            // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.
+            const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;
+            scrollContainer.scrollTo({
+                top: updatedScrollTop,
+                behavior: 'smooth'
+            });
+        }
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
+ */
+class KeyboardInputPlugin {
+    constructor() {
+        // don't set callback in constructor to be able to update callback without plugin recreation
+        this.onKeyDown = null;
+    }
+    getName() {
+        return 'KeyboardInputPlugin';
+    }
+    initialize() { }
+    dispose() { }
+    onPluginEvent(event) {
+        if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {
+            this.onKeyDown(event.rawEvent);
+        }
+    }
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * An update mode to indicate when the content update happens
+ */
+var UpdateEvent;
+(function (UpdateEvent) {
+    UpdateEvent["Init"] = "Init";
+    UpdateEvent["Dispose"] = "Dispose";
+    UpdateEvent["ContentChanged"] = "ContentChanged";
+    UpdateEvent["UserInput"] = "UserInput";
+    UpdateEvent["Blur"] = "Blur";
+})(UpdateEvent || (UpdateEvent = {}));
+/**
+ * A plugin to handle content update
+ */
+class UpdateContentPlugin {
+    constructor() {
+        this.editor = null;
+        this.disposer = null;
+        // don't set callback in constructor to be able to update callback without plugin recreation
+        this.onUpdate = null;
+        this.onBlur = () => {
+            if (this.onUpdate === null) {
+                return;
+            }
+            this.onUpdate(UpdateEvent.Blur);
+        };
+    }
+    getName() {
+        return 'UpdateContentPlugin';
+    }
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor) {
+        this.editor = editor;
+        this.disposer = this.editor.attachDomEvent({
+            blur: { beforeDispatch: this.onBlur }
+        });
+    }
+    dispose() {
+        this.editor = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+    }
+    onPluginEvent(event) {
+        if (this.onUpdate === null) {
+            return;
+        }
+        switch (event.eventType) {
+            case PluginEventType.EditorReady:
+                this.onUpdate(UpdateEvent.Init);
+                break;
+            case PluginEventType.BeforeDispose:
+                this.onUpdate(UpdateEvent.Dispose);
+                break;
+            case PluginEventType.ContentChanged:
+                this.onUpdate(UpdateEvent.ContentChanged);
+                break;
+            case PluginEventType.Input:
+                this.onUpdate(UpdateEvent.UserInput);
+                break;
+        }
     }
 }
 
@@ -10291,6 +10448,99 @@ function parseKey(key) {
         column: parseInt(column)
     };
 }
+/**
+ * Returns an array of context menu items for editing a rich text table.
+ *
+ * @param editor - The editor instance.
+ * @param strings - An object containing localized strings for the context menu items.
+ * @returns An array of context menu items.
+ */
+const getTableEditContextMenuItems = (editor, strings) => {
+    return [
+        {
+            key: 'RichTextTableEditMenuTableInsert',
+            text: strings.richTextInsertRowOrColumnMenu,
+            ariaLabel: strings.richTextInsertRowOrColumnMenu,
+            iconProps: {
+                iconName: 'RichTextTableInsertMenuIcon',
+                styles: { root: tableContextMenuIconStyles }
+            },
+            subMenuProps: {
+                items: [
+                    {
+                        key: 'RichTextTableEditMenuTableInsertRowAbove',
+                        text: strings.richTextInsertRowAboveMenu,
+                        ariaLabel: strings.richTextInsertRowAboveMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'insertAbove');
+                        }
+                    },
+                    {
+                        key: 'RichTextTableEditMenuTableInsertRowBelow',
+                        text: strings.richTextInsertRowBelowMenu,
+                        ariaLabel: strings.richTextInsertRowBelowMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'insertBelow');
+                        }
+                    },
+                    {
+                        key: 'RichTextTableEditMenuTableInsertColumnLeft',
+                        text: strings.richTextInsertColumnLeftMenu,
+                        ariaLabel: strings.richTextInsertColumnLeftMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'insertLeft');
+                        }
+                    },
+                    {
+                        key: 'RichTextTableEditMenuTableInsertColumnRight',
+                        text: strings.richTextInsertColumnRightMenu,
+                        ariaLabel: strings.richTextInsertColumnRightMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'insertRight');
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            key: 'RichTextTableEditMenuTableDelete',
+            text: strings.richTextDeleteRowOrColumnMenu,
+            ariaLabel: strings.richTextDeleteRowOrColumnMenu,
+            iconProps: {
+                iconName: 'RichTextTableDeleteMenuIcon',
+                styles: { root: tableContextMenuIconStyles }
+            },
+            subMenuProps: {
+                items: [
+                    {
+                        key: 'RichTextTableEditMenuTableDeleteRow',
+                        text: strings.richTextDeleteRowMenu,
+                        ariaLabel: strings.richTextDeleteRowMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'deleteRow');
+                        }
+                    },
+                    {
+                        key: 'RichTextTableEditMenuTableDeleteColumn',
+                        text: strings.richTextDeleteColumnMenu,
+                        ariaLabel: strings.richTextDeleteColumnMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'deleteColumn');
+                        }
+                    },
+                    {
+                        key: 'RichTextTableEditMenuTableDeleteTable',
+                        text: strings.richTextDeleteTableMenu,
+                        ariaLabel: strings.richTextDeleteTableMenu,
+                        onClick: () => {
+                            roosterjsContentModelApi.editTable(editor, 'deleteTable');
+                        }
+                    }
+                ]
+            }
+        }
+    ];
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -10321,9 +10571,9 @@ const RichTextInsertTablePane = (props) => {
     const onMouseEnter = React.useCallback((e) => {
         updateSize(e.target);
     }, [updateSize]);
-    const onClickButton = React.useCallback((e) => {
-        onClick(e, Object.assign(Object.assign({}, item), { key: createKey(formatRowColumnText(row), formatRowColumnText(column)) }));
-    }, [row, column, onClick, item]);
+    const onClickButton = React.useCallback(() => {
+        onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));
+    }, [row, column, onClick]);
     const items = React.useMemo(() => {
         var _a;
         const items = [];
@@ -10353,310 +10603,435 @@ const formatRowColumnText = (value) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-// This file uses RoosterJS React package implementation with updates to UI components and styles.
 /**
- * "Insert table" button for the RoosterJS ribbon
+ * Renders the icon component for the insert table button in the rich text editor toolbar.
  */
-const insertTableButton = (theme, maxRowsNumber, maxColumnsNumber) => {
-    return {
-        key: 'buttonNameInsertTable',
-        unlocalizedText: 'Insert table',
-        // Icon will be set in onRenderIcon callback
-        iconName: '',
-        onClick: (editor, key) => {
-            const { row, column } = parseKey(key);
-            insertTable(editor, column, row);
-        },
-        dropDownMenu: {
-            items: {
-                // the key of the item is also used as a key for localization
-                insertTablePane: `Insert ${ColumnRowReplaceString} table`
-            },
-            itemRender: (item, onClick) => {
-                return (React.createElement(RichTextInsertTablePane, { item: item, onClick: onClick, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
-            },
-            commandBarSubMenuProperties: {
-                className: insertTableMenuTablePane
-            }
-        },
-        commandBarProperties: {
-            // hide the chevron icon
-            menuIconProps: {
-                hidden: true
-            },
-            onRenderIcon: () => {
-                return React.createElement(TableIcon, null);
-            },
-            buttonStyles: ribbonTableButtonStyle(theme),
-            canCheck: false
-        }
-    };
-};
-const TableIcon = () => {
-    return (
-    // update the visibility of the Table Icon with css classes that are triggered by command bar's state
-    React.createElement(react.Stack, null,
+const RichTextToolbarTableIcon = () => {
+    return (React.createElement(react.Stack, null,
         React.createElement(react.Icon, { iconName: "RichTextInsertTableFilledIcon", className: 'ribbon-table-button-filled-icon' }),
         React.createElement(react.Icon, { iconName: "RichTextInsertTableRegularIcon", className: 'ribbon-table-button-regular-icon' })));
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const MaxRowsNumber = 5;
-const MaxColumnsNumber = 5;
-const dividerRibbonButton = (theme, key) => {
-    return {
-        key: key,
-        // the icon will be set in `onRender` callback
-        // this is needed to make the divider unavailable for keyboard navigation
-        iconName: '',
-        // no text is needed here as we don't want to show a tooltip for the divider
-        unlocalizedText: '',
-        onClick: () => { },
-        isDisabled: () => true,
-        commandBarProperties: {
-            // show the item correctly for the overflow menu
-            itemType: react.ContextualMenuItemType.Divider,
-            // this is still needed to remove checkmark icon space even though it is a divider
-            canCheck: false,
-            onRender: () => React.createElement(react.Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
-        }
-    };
-};
-const boldButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Bold, theme, 'RichTextBoldButtonIcon');
-};
-const italicButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Italic, theme, 'RichTextItalicButtonIcon');
-};
-const underlineButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Underline, theme, 'RichTextUnderlineButtonIcon');
-};
-const bulletListButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.BulletedList, theme, 'RichTextBulletListButtonIcon');
-};
-const numberListButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.NumberedList, theme, 'RichTextNumberListButtonIcon');
-};
-const indentIncreaseButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.IncreaseIndent, theme, 'RichTextIndentIncreaseButtonIcon');
-};
-const indentDecreaseButton = (theme) => {
-    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.DecreaseIndent, theme, 'RichTextIndentDecreaseButtonIcon');
-};
-const createKnownRibbonButton = (key, theme, icon) => {
-    var _a;
-    const buttons = roosterjsReact.getButtons([key]);
-    if (buttons.length > 0) {
-        const button = buttons[0];
-        // AllButtonStringKeys is a union of all the string keys of all the buttons
-        const result = buttons[0];
-        button.iconName = icon;
-        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)), canCheck: false });
-        return result;
-    }
-    return undefined;
-};
 /**
- * @private
+ * "Insert table" command bar item for the rich text toolbar
  */
-const ribbonButtons = (theme) => {
-    const buttons = [];
-    [
-        boldButton(theme),
-        italicButton(theme),
-        underlineButton(theme),
-        dividerRibbonButton(theme, 'RichTextRibbonTextFormatDivider'),
-        bulletListButton(theme),
-        numberListButton(theme),
-        indentDecreaseButton(theme),
-        indentIncreaseButton(theme),
-        dividerRibbonButton(theme, 'RichTextRibbonTableDivider'),
-        insertTableButton(theme, MaxRowsNumber, MaxColumnsNumber)
-    ].forEach((item) => {
-        if (item !== undefined) {
-            buttons.push(item);
+const richTextInsertTableCommandBarItem = (theme, maxRowsNumber, maxColumnsNumber, strings, onClick) => {
+    return {
+        'data-testid': 'rich-text-toolbar-insert-table-button',
+        key: 'RichTextToolbarInsertTableButton',
+        text: strings.richTextInsertTableTooltip,
+        ariaLabel: strings.richTextInsertTableTooltip,
+        // hide the chevron icon
+        menuIconProps: {
+            hidden: true
+        },
+        onRenderIcon: () => {
+            return React.createElement(RichTextToolbarTableIcon, null);
+        },
+        buttonStyles: toolbarTableButtonStyle(theme),
+        canCheck: false,
+        iconOnly: true,
+        subMenuProps: {
+            calloutProps: { isBeakVisible: false },
+            shouldFocusOnMount: true,
+            className: insertTableMenuTablePane,
+            focusZoneProps: { direction: react.FocusZoneDirection.bidirectional },
+            items: [
+                {
+                    key: 'RichTextToolbarInsertTableMenu',
+                    text: strings.richTextInsertTableMenuTitle,
+                    canCheck: false,
+                    onRender: (item) => {
+                        return (React.createElement(RichTextInsertTablePane, { item: item, onClick: (key) => {
+                                const { row, column } = parseKey(key);
+                                onClick(column, row);
+                            }, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
+                    }
+                }
+            ]
         }
-    });
-    return buttons;
+    };
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+const MaxRowsNumber = 5;
+const MaxColumnsNumber = 5;
 /**
- * @private
+ * A component to display rich text toolbar.
  *
- * Strings for the ribbon buttons where key should match `key` prop if any or the name of the item.
+ * @beta
  */
-const ribbonButtonsStrings = (strings) => {
+const RichTextToolbar = (props) => {
+    const { plugin, strings } = props;
+    const theme = useTheme();
+    // need to re-render the buttons when format state changes
+    const [formatState, setFormatState] = React.useState(undefined);
+    React.useEffect(() => {
+        // update the format state on editor events
+        plugin.onFormatChanged = setFormatState;
+    }, [plugin]);
+    const boldButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-bold-button',
+            key: 'RichTextToolbarBoldButton',
+            icon: 'RichTextBoldButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.toggleBold(editor);
+                });
+            },
+            text: strings.richTextBoldTooltip,
+            checked: formatState !== undefined && formatState.isBold === true,
+            theme: theme
+        });
+    }, [formatState, plugin, strings.richTextBoldTooltip, theme]);
+    const italicButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-italic-button',
+            key: 'RichTextToolbarItalicButton',
+            icon: 'RichTextItalicButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.toggleItalic(editor);
+                });
+            },
+            text: strings.richTextItalicTooltip,
+            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isItalic) === true,
+            theme: theme
+        });
+    }, [formatState, plugin, strings.richTextItalicTooltip, theme]);
+    const underlineButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-underline-button',
+            key: 'RichTextToolbarUnderlineButton',
+            icon: 'RichTextUnderlineButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.toggleUnderline(editor);
+                });
+            },
+            text: strings.richTextUnderlineTooltip,
+            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isUnderline) === true,
+            theme: theme
+        });
+    }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);
+    const bulletListButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-bullet-list-button',
+            key: 'RichTextToolbarBulletListButton',
+            icon: 'RichTextBulletListButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.toggleBullet(editor);
+                });
+            },
+            text: strings.richTextBulletListTooltip,
+            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isBullet) === true,
+            theme: theme
+        });
+    }, [formatState, plugin, strings.richTextBulletListTooltip, theme]);
+    const numberListButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-number-list-button',
+            key: 'RichTextToolbarNumberListButton',
+            icon: 'RichTextNumberListButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.toggleNumbering(editor);
+                });
+            },
+            text: strings.richTextNumberListTooltip,
+            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering) === true,
+            theme: theme
+        });
+    }, [formatState, plugin, strings.richTextNumberListTooltip, theme]);
+    const indentDecreaseButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-indent-decrease-button',
+            key: 'RichTextToolbarIndentDecreaseButton',
+            icon: 'RichTextIndentDecreaseButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.setIndentation(editor, 'outdent');
+                });
+            },
+            text: strings.richTextDecreaseIndentTooltip,
+            canCheck: false,
+            theme: theme
+        });
+    }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);
+    const indentIncreaseButton = React.useMemo(() => {
+        return getCommandBarItem({
+            dataTestId: 'rich-text-toolbar-indent-increase-button',
+            key: 'RichTextToolbarIndentIncreaseButton',
+            icon: 'RichTextIndentIncreaseButtonIcon',
+            onClick: () => {
+                plugin.onToolbarButtonClick((editor) => {
+                    roosterjsContentModelApi.setIndentation(editor, 'indent');
+                });
+            },
+            text: strings.richTextIncreaseIndentTooltip,
+            canCheck: false,
+            theme: theme
+        });
+    }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);
+    const divider = React.useCallback((key) => {
+        return dividerCommandBarItem(theme, key);
+    }, [theme]);
+    const tableButton = React.useMemo(() => {
+        return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column, row) => {
+            plugin.onToolbarButtonClick((editor) => {
+                //add format
+                roosterjsContentModelApi.insertTable(editor, column, row);
+                // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu
+                // set focus to editor on next re-render
+                setTimeout(() => {
+                    editor.focus();
+                });
+            });
+        });
+    }, [plugin, strings, theme]);
+    const buttons = React.useMemo(() => {
+        return [
+            boldButton,
+            italicButton,
+            underlineButton,
+            divider('RichTextRibbonTextFormatDivider'),
+            bulletListButton,
+            numberListButton,
+            indentDecreaseButton,
+            indentIncreaseButton,
+            divider('RichTextRibbonTableDivider'),
+            tableButton
+        ];
+    }, [
+        boldButton,
+        italicButton,
+        underlineButton,
+        divider,
+        bulletListButton,
+        numberListButton,
+        indentDecreaseButton,
+        indentIncreaseButton,
+        tableButton
+    ]);
+    const overflowButtonProps = React.useMemo(() => {
+        return {
+            ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,
+            styles: toolbarButtonStyle(theme),
+            menuProps: {
+                items: [], // CommandBar will determine items rendered in overflow
+                isBeakVisible: false,
+                styles: ribbonOverflowButtonStyle(theme)
+            }
+        };
+    }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
+    return (React.createElement(react.CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps }));
+};
+const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
     return {
-        buttonNameBold: strings.richTextBoldTooltip,
-        buttonNameItalic: strings.richTextItalicTooltip,
-        buttonNameUnderline: strings.richTextUnderlineTooltip,
-        buttonNameBulletedList: strings.richTextBulletListTooltip,
-        buttonNameNumberedList: strings.richTextNumberListTooltip,
-        buttonNameIncreaseIndent: strings.richTextIncreaseIndentTooltip,
-        buttonNameDecreaseIndent: strings.richTextDecreaseIndentTooltip,
-        buttonNameInsertTable: strings.richTextInsertTableTooltip,
-        insertTablePane: strings.richTextInsertTableMenuTitle
+        'data-testid': dataTestId,
+        key: key,
+        iconProps: { iconName: icon },
+        onClick: onClick,
+        text: text,
+        ariaLabel: text,
+        iconOnly: true,
+        canCheck: canCheck,
+        buttonStyles: Object.assign({}, toolbarButtonStyle(theme)),
+        checked: checked,
+        disabled: disabled
     };
 };
-/**
- * @private
- *
- * Strings for the table context menu  where key should match `key` prop if any or the name of the item.
- */
-const tableContextMenuStrings = (strings) => {
+const dividerCommandBarItem = (theme, key) => {
     return {
-        menuNameTableInsert: strings.richTextInsertRowOrColumnMenu,
-        menuNameTableInsertAbove: strings.richTextInsertRowAboveMenu,
-        menuNameTableInsertBelow: strings.richTextInsertRowBelowMenu,
-        menuNameTableInsertLeft: strings.richTextInsertColumnLeftMenu,
-        menuNameTableInsertRight: strings.richTextInsertColumnRightMenu,
-        menuNameTableDelete: strings.richTextDeleteRowOrColumnMenu,
-        menuNameTableDeleteColumn: strings.richTextDeleteColumnMenu,
-        menuNameTableDeleteRow: strings.richTextDeleteRowMenu,
-        menuNameTableDeleteTable: strings.richTextDeleteTableMenu
+        key: key,
+        disabled: true,
+        // show the item correctly for the overflow menu
+        itemType: react.ContextualMenuItemType.Divider,
+        // this is still needed to remove checkmark icon space even though it is a divider
+        canCheck: false,
+        onRender: () => React.createElement(react.Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
     };
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const onClick = (key, editor) => {
-    editor.focus();
-    const operation = TableEditOperationMap[key];
-    if (typeof operation === 'number') {
-        roosterjsEditorApi.editTable(editor, operation);
-    }
-};
-const TableEditOperationMap = {
-    menuNameTableInsertAbove: roosterjsEditorTypesCompatible.CompatibleTableOperation.InsertAbove,
-    menuNameTableInsertBelow: roosterjsEditorTypesCompatible.CompatibleTableOperation.InsertBelow,
-    menuNameTableInsertLeft: roosterjsEditorTypesCompatible.CompatibleTableOperation.InsertLeft,
-    menuNameTableInsertRight: roosterjsEditorTypesCompatible.CompatibleTableOperation.InsertRight,
-    menuNameTableDeleteTable: roosterjsEditorTypesCompatible.CompatibleTableOperation.DeleteTable,
-    menuNameTableDeleteColumn: roosterjsEditorTypesCompatible.CompatibleTableOperation.DeleteColumn,
-    menuNameTableDeleteRow: roosterjsEditorTypesCompatible.CompatibleTableOperation.DeleteRow
-};
-const tableEditInsertMenuItem = {
-    key: 'menuNameTableInsert',
-    unlocalizedText: 'Insert',
-    subItems: {
-        menuNameTableInsertAbove: 'Insert above',
-        menuNameTableInsertBelow: 'Insert below',
-        menuNameTableInsertLeft: 'Insert left',
-        menuNameTableInsertRight: 'Insert right'
-    },
-    onClick,
-    iconProps: {
-        iconName: 'RichTextTableInsertMenuIcon',
-        styles: { root: tableContextMenuIconStyles }
-    }
-};
-const tableEditDeleteMenuItem = {
-    key: 'menuNameTableDelete',
-    unlocalizedText: 'Delete',
-    subItems: {
-        menuNameTableDeleteColumn: 'Delete column',
-        menuNameTableDeleteRow: 'Delete row',
-        menuNameTableDeleteTable: 'Delete table'
-    },
-    onClick,
-    iconProps: {
-        iconName: 'RichTextTableDeleteMenuIcon',
-        styles: { root: tableContextMenuIconStyles }
-    }
-};
-const tableActions = [tableEditInsertMenuItem, tableEditDeleteMenuItem];
-/**
- * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
- * @returns A new ContextMenuProvider
- */
-const createTableEditMenuProvider = (strings) => {
-    return roosterjsReact.createContextMenuProvider('tableEdit', tableActions, tableContextMenuStrings(strings !== null && strings !== void 0 ? strings : {}), (editor, node) => !!getEditingTable(editor, node));
-};
-const getEditingTable = (editor, node) => {
-    const td = editor.getElementAtCursor('TD,TH', node);
-    const table = td && editor.getElementAtCursor('table', td);
-    return (table === null || table === void 0 ? void 0 : table.isContentEditable) ? { table, td } : null;
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
- * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
  */
-class CopyPastePlugin {
+class RichTextToolbarPlugin {
     constructor() {
+        this.formatState = null;
         this.editor = null;
+        this.onFormatChanged = null;
     }
     getName() {
-        return 'CopyPastePlugin';
+        return 'RichTextToolbarPlugin';
     }
     initialize(editor) {
         this.editor = editor;
     }
-    dispose() { }
+    dispose() {
+        this.editor = null;
+    }
     onPluginEvent(event) {
-        removeImageElement(event);
-        if (this.editor !== null && !this.editor.isDisposed()) {
-            // scroll the editor to the correct position after pasting content
-            scrollToBottomAfterContentPaste(event, this.editor);
+        switch (event.eventType) {
+            // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user
+            case PluginEventType.EditorReady:
+            case PluginEventType.ContentChanged:
+            case PluginEventType.ZoomChanged:
+            case PluginEventType.KeyDown:
+            case PluginEventType.MouseUp:
+                this.updateFormat();
+                break;
+        }
+    }
+    /**
+     * Handles the click event of a toolbar button.
+     * @param buttonAction - The action to be performed when the button is clicked.
+     */
+    onToolbarButtonClick(buttonAction) {
+        if (this.editor && !this.editor.isDisposed()) {
+            buttonAction(this.editor);
+            this.updateFormat();
+        }
+    }
+    /**
+     * 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.
+     */
+    updateFormat() {
+        if (this.editor && this.onFormatChanged) {
+            const newFormatState = roosterjsContentModelApi.getFormatState(this.editor);
+            // use keys from the format that has more keys or the new format state if there is no current format state
+            const keys = !this.formatState || roosterjsContentModelDom.getObjectKeys(newFormatState).length > roosterjsContentModelDom.getObjectKeys(this.formatState).length
+                ? roosterjsContentModelDom.getObjectKeys(newFormatState)
+                : roosterjsContentModelDom.getObjectKeys(this.formatState);
+            // check if there is any difference between the new format state and the current format state
+            // otherwise the states will produce new objects every time even when the format state is the same
+            if (!this.formatState || keys.some((key) => { var _a; return newFormatState[key] !== ((_a = this.formatState) === null || _a === void 0 ? void 0 : _a[key]); })) {
+                this.formatState = newFormatState;
+                this.onFormatChanged(newFormatState);
+            }
         }
     }
 }
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
- * @internal
- * Exported only for unit testing
+ * Represents a plugin that adds a context menu to the rich text editor.
  */
-const removeImageElement = (event) => {
-    // We don't support the pasting options such as paste as image yet.
-    if (event.eventType === roosterjsEditorTypesCompatible.CompatiblePluginEventType.BeforePaste && event.pasteType === roosterjsEditorTypesCompatible.CompatiblePasteType.Normal) {
-        event.fragment.querySelectorAll('img').forEach((image) => {
-            // If the image is the only child of its parent, remove all the parents of this img element.
-            let parentNode = image.parentElement;
-            let currentNode = image;
-            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
-                currentNode = parentNode;
-                parentNode = parentNode.parentElement;
+class ContextMenuPlugin extends roosterjsContentModelPlugins.ContextMenuPluginBase {
+    constructor(onRender, onDismiss) {
+        super({
+            /**
+             * Renders the context menu in the specified container with the provided items.
+             * @param container - The container element where the context menu should be rendered.
+             * @param items - The items to be displayed in the context menu.
+             * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.
+             */
+            render: (container, items, onDismissCallback) => {
+                const filteredItems = items.filter((item) => item !== null);
+                onRender(container, filteredItems, onDismissCallback);
+            },
+            /**
+             * Dismisses the context menu.
+             */
+            dismiss: () => {
+                onDismiss();
             }
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
         });
     }
-};
+}
+
 /**
- * Scrolls the editor's scroll container to the bottom after content is pasted.
- * @param event - The plugin event.
- * @param editor - The editor instance.
+ * Provides a context menu for editing tables in the rich text editor.
  */
-const scrollToBottomAfterContentPaste = (event, editor) => {
-    if (event.eventType === roosterjsEditorTypesCompatible.CompatiblePluginEventType.ContentChanged && event.source === roosterjsEditorTypesCompatible.CompatibleChangeSource.Paste) {
-        // current focused position in the editor
-        const focusedPosition = editor.getFocusedPosition();
-        // the cursor position relative to the viewport
-        const cursorRect = focusedPosition && roosterjsEditorDom.getPositionRect(focusedPosition);
-        // the scroll container of the editor
-        const scrollContainer = editor.getScrollContainer();
-        // the scrollContainer position relative to the viewport
-        const scrollContainerRect = roosterjsEditorDom.normalizeRect(scrollContainer.getBoundingClientRect());
-        if (focusedPosition !== null && cursorRect !== null && cursorRect !== undefined && scrollContainerRect !== null) {
-            const textElement = focusedPosition.element;
-            // the caret height is typically the same as the font size of the text
-            const caretHeight = parseFloat(window.getComputedStyle(textElement).fontSize);
-            // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
-            // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
-            // translate the scroll position from being relative to the document to being relative to the viewport.
-            // 3. add the top position of the cursor (cursorRect.top) to moves the scroll position to the cursor's position.
-            // 4. subtract a caret height to add some space between the cursor and the top edge of the scrollContainer.
-            const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top - caretHeight;
-            scrollContainer.scrollTo({
-                top: updatedScrollTop,
-                behavior: 'smooth'
-            });
+class TableEditContextMenuProvider {
+    constructor() {
+        this.editor = null;
+        this.strings = {};
+        this.items = null;
+    }
+    updateStrings(strings) {
+        this.strings = strings;
+        if (this.editor) {
+            this.items = getTableEditContextMenuItems(this.editor, this.strings);
+        }
+    }
+    getName() {
+        return 'TableEditContextMenuProvider';
+    }
+    initialize(editor) {
+        this.editor = editor;
+        this.items = getTableEditContextMenuItems(editor, this.strings);
+    }
+    /**
+     * Dispose this plugin
+     */
+    dispose() {
+        this.editor = null;
+    }
+    getContextMenuItems(node) {
+        // return this.items;
+        if (this.editor && isTableEditable(this.editor, node)) {
+            return this.items;
+        }
+        else {
+            return null;
         }
     }
+}
+const isTableEditable = (editor, node) => {
+    const domHelper = editor.getDOMHelper();
+    const td = domHelper.findClosestElementAncestor(node, 'TD,TH');
+    const table = td && domHelper.findClosestElementAncestor(td, 'table');
+    return (table === null || table === void 0 ? void 0 : table.isContentEditable) === true;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.
+ */
+class PlaceholderPlugin extends roosterjsContentModelPlugins.WatermarkPlugin {
+    constructor() {
+        super(...arguments);
+        this.isPlaceholderShown = false;
+        this.editorValue = null;
+    }
+    updatePlaceholder(placeholder) {
+        this.watermark = placeholder;
+        // hide and show the placeholder to show the latest one
+        // this needs to be done only if the placeholder is currently shown
+        if (this.editorValue && this.isPlaceholderShown) {
+            this.hide(this.editorValue);
+            this.show(this.editorValue);
+        }
+    }
+    initialize(editor) {
+        this.editorValue = editor;
+        super.initialize(editor);
+    }
+    dispose() {
+        this.editorValue = null;
+        super.dispose();
+    }
+    show(editor) {
+        super.show(editor);
+        this.isPlaceholderShown = true;
+    }
+    hide(editor) {
+        super.hide(editor);
+        this.isPlaceholderShown = false;
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -10665,10 +11040,11 @@ const scrollToBottomAfterContentPaste = (event, editor) => {
  * @beta
  */
 const RichTextEditor = React.forwardRef((props, ref) => {
-    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content, autoFocus } = props;
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onContentModelUpdate, contentModel } = props;
     const editor = React.useRef(null);
-    const contentValue = React.useRef(content);
+    const editorDiv = React.useRef(null);
     const theme = useTheme();
+    const [contextMenuProps, setContextMenuProps] = React.useState(null);
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -10678,108 +11054,179 @@ const RichTextEditor = React.forwardRef((props, ref) => {
             },
             setEmptyContent() {
                 if (editor.current) {
-                    editor.current.setContent('');
+                    // remove all content from the editor and update the model
+                    // ContentChanged event will be sent by RoosterJS automatically
+                    editor.current.formatContentModel((model) => {
+                        model.blocks = [];
+                        return true;
+                    });
+                    //reset content model
+                    onContentModelUpdate && onContentModelUpdate(undefined);
                 }
             },
             getPlainContent() {
-                var _a;
-                return (_a = editor === null || editor === void 0 ? void 0 : editor.current) === null || _a === void 0 ? void 0 : _a.getContent(roosterjsEditorTypesCompatible.CompatibleGetContentMode.PlainTextFast);
+                if (editor.current) {
+                    return roosterjsContentModelCore.exportContent(editor.current, 'PlainTextFast');
+                }
+                else {
+                    return undefined;
+                }
             }
         };
+    }, [onContentModelUpdate]);
+    const toolbarPlugin = React.useMemo(() => {
+        return new RichTextToolbarPlugin();
     }, []);
-    const ribbonPlugin = React.useMemo(() => {
-        return roosterjsReact.createRibbonPlugin();
-    }, []);
-    const editorCreator = React.useCallback((div, options) => {
-        const editorValue = new roosterjsEditorCore.Editor(div, options);
-        // this is to fix issue when editor is created or re-rendered and has existing text
-        // Content model package has a correct behavior and this fix can be deleted
-        if (contentValue.current !== undefined && contentValue.current.length > 0) {
-            // in case if initialContent is not empty, RoosterJS doesn't set caret position to the end.
-            focusAndUpdateContent(editorValue, contentValue.current);
-        }
-        else if (initialContent !== undefined && initialContent.length > 0) {
-            // changing layout in rich text send box cause the editor to be recreated
-            // to keep the content, we need to set messageContent to the current content
-            focusAndUpdateContent(editorValue, initialContent);
-        }
-        editor.current = editorValue;
-        return editorValue;
-    }, 
-    // trigger force editor reset when strings are changed to update context menu strings
-    // see RosterJS documentation for 'editorCreator' for more details
-    // the editorCreator callback shouldn't be updated when the initialContent is changed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [strings]);
+    const isDarkThemedValue = React.useMemo(() => {
+        return isDarkThemed(theme);
+    }, [theme]);
+    React.useEffect(() => {
+        var _a;
+        (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setDarkModeState(isDarkThemedValue);
+    }, [isDarkThemedValue]);
     const placeholderPlugin = React.useMemo(() => {
-        return new roosterjsEditorPlugins.Watermark('');
+        return new PlaceholderPlugin('');
     }, []);
     React.useEffect(() => {
         if (placeholderText !== undefined) {
-            placeholderPlugin.updateWatermark(placeholderText);
+            placeholderPlugin.updatePlaceholder(placeholderText);
         }
     }, [placeholderPlugin, placeholderText]);
-    const plugins = React.useMemo(() => {
-        // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
-        const contextPlugin = roosterjsReact.createContextMenuPlugin();
-        const tableEditMenuProvider = createTableEditMenuProvider(strings);
-        const contentEdit = new roosterjsEditorPlugins.ContentEdit();
-        const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
-            onChange && onChange(content);
+    const toolbar = React.useMemo(() => {
+        return React.createElement(RichTextToolbar, { plugin: toolbarPlugin, strings: strings });
+    }, [strings, toolbarPlugin]);
+    const updatePlugin = React.useMemo(() => {
+        return new UpdateContentPlugin();
+    }, []);
+    React.useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        updatePlugin.onUpdate = (event) => {
+            if (editor.current === null) {
+                return;
+            }
+            if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {
+                onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));
+            }
+            else {
+                onChange && onChange(roosterjsContentModelCore.exportContent(editor.current));
+            }
+        };
+    }, [onChange, onContentModelUpdate, updatePlugin]);
+    const keyboardInputPlugin = React.useMemo(() => {
+        return new KeyboardInputPlugin();
+    }, []);
+    React.useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        keyboardInputPlugin.onKeyDown = onKeyDown;
+    }, [keyboardInputPlugin, onKeyDown]);
+    const tableContextMenuPlugin = React.useMemo(() => {
+        return new TableEditContextMenuProvider();
+    }, []);
+    React.useEffect(() => {
+        tableContextMenuPlugin.updateStrings(strings);
+    }, [tableContextMenuPlugin, strings]);
+    const onContextMenuRender = React.useCallback((container, items, onDismiss) => {
+        setContextMenuProps({
+            items: items,
+            target: container,
+            onDismiss: onDismiss
         });
+    }, []);
+    const onContextMenuDismiss = React.useCallback(() => {
+        setContextMenuProps(null);
+    }, []);
+    const plugins = React.useMemo(() => {
+        const contentEdit = new roosterjsContentModelPlugins.EditPlugin();
+        // AutoFormatPlugin previously was a part of the edit plugin
+        const autoFormatPlugin = new roosterjsContentModelPlugins.AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });
         const copyPastePlugin = new CopyPastePlugin();
+        const roosterPastePlugin = new roosterjsContentModelPlugins.PastePlugin(false);
+        const shortcutPlugin = new roosterjsContentModelPlugins.ShortcutPlugin();
+        const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);
         return [
-            contentEdit,
             placeholderPlugin,
-            updateContentPlugin,
-            ribbonPlugin,
-            contextPlugin,
-            tableEditMenuProvider,
-            copyPastePlugin
+            keyboardInputPlugin,
+            contentEdit,
+            autoFormatPlugin,
+            updatePlugin,
+            copyPastePlugin,
+            roosterPastePlugin,
+            toolbarPlugin,
+            shortcutPlugin,
+            // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
+            contextMenuPlugin,
+            tableContextMenuPlugin
         ];
-    }, [onChange, placeholderPlugin, ribbonPlugin, strings]);
-    const ribbon = React.useMemo(() => {
-        const buttons = ribbonButtons(theme);
-        return (React.createElement(roosterjsReact.Ribbon, { styles: ribbonStyle, buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
-                styles: ribbonButtonStyle(theme),
-                menuProps: {
-                    items: [], // CommandBar will determine items rendered in overflow
-                    isBeakVisible: false,
-                    styles: ribbonOverflowButtonStyle(theme)
+    }, [
+        onContextMenuRender,
+        onContextMenuDismiss,
+        placeholderPlugin,
+        keyboardInputPlugin,
+        updatePlugin,
+        toolbarPlugin,
+        tableContextMenuPlugin
+    ]);
+    React.useEffect(() => {
+        var _a;
+        const initialModel = createEditorInitialModel(initialContent, contentModel);
+        if (editorDiv.current) {
+            editor.current = new roosterjsContentModelCore.Editor(editorDiv.current, {
+                inDarkMode: isDarkThemedValue,
+                // doNotAdjustEditorColor is used to disable default color and background color for Rooster component
+                doNotAdjustEditorColor: true,
+                // TODO: confirm the color during inline images implementation
+                imageSelectionBorderColor: 'blue',
+                plugins: plugins,
+                initialModel: initialModel,
+                defaultModelToDomOptions: {
+                    formatApplierOverride: {
+                        // apply border and dataset formats for table
+                        border: borderApplier,
+                        dataset: dataSetApplier
+                    }
                 }
-            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
-    }, [strings, ribbonPlugin, theme]);
-    const defaultFormat = React.useMemo(() => {
-        // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)
-        // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75
-        // this issue is fixed for content model package
-        return {
-            backgroundColor: 'transparent'
+            });
+        }
+        if (autoFocus === 'sendBoxTextField') {
+            (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return () => {
+            if (editor.current) {
+                editor.current.dispose();
+                editor.current = null;
+            }
         };
+        // don't update the editor on deps update as everything is handled in separate hooks or plugins
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
-        showRichTextEditorFormatting && ribbon,
+        showRichTextEditorFormatting && toolbar,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
-            React.createElement(roosterjsReact.Rooster, { defaultFormat: defaultFormat, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
-                // TODO: confirm the color during inline images implementation
-                imageSelectionBorderColor: 'blue', 
-                // doNotAdjustEditorColor is used to fix the default background color for Rooster component
-                doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
-                // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
-                onKeyDown: props.onKeyDown, focusOnInit: autoFocus === 'sendBoxTextField' }))));
+            React.createElement("div", { ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles) })),
+        contextMenuProps && React.createElement(react.ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: { isBeakVisible: false } }))));
 });
-const focusAndUpdateContent = (editor, content) => {
-    // setting focus before setting content, works for Chrome and Edge but not Safari
-    editor.setContent(content);
-    // this is a recommended way (by RoosterJS team) to set focus at the end of the text
-    // RoosterJS v9 has this issue fixed and this code can be removed
-    // CompatibleContentPosition.DomEnd shouldn't be used here as it set focus after the editor div
-    editor.insertContent('<span id="focus-position-span"></span>', { position: roosterjsEditorTypesCompatible.CompatibleContentPosition.End });
-    const elements = editor.queryElements('#focus-position-span');
-    if (elements.length > 0) {
-        const placeholder = editor.queryElements('#focus-position-span')[0];
-        editor.select(placeholder, roosterjsEditorTypesCompatible.CompatiblePositionType.Before);
-        placeholder.remove();
+const createEditorInitialModel = (initialContent, contentModel) => {
+    if (contentModel) {
+        // contentModel is the current content of the editor
+        return contentModel;
+    }
+    else {
+        const initialContentValue = initialContent;
+        const initialModel = initialContentValue && initialContentValue.length > 0 ? roosterjsContentModelCore.createModelFromHtml(initialContentValue) : undefined;
+        if (initialModel && initialModel.blocks.length > 0) {
+            // lastBlock should have blockType = paragraph, otherwise add a new paragraph
+            // to set focus to the end of the content
+            let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];
+            if ((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.blockType) === 'Paragraph') ;
+            else {
+                lastBlock = roosterjsContentModelDom.createParagraph(true);
+                initialModel.blocks.push(lastBlock);
+            }
+            const marker = roosterjsContentModelDom.createSelectionMarker();
+            lastBlock.segments.push(marker);
+            roosterjsContentModelDom.setSelection(initialModel, marker);
+        }
+        return initialModel;
     }
 };
 
@@ -10825,37 +11272,50 @@ const RichTextInputBoxComponent = (props) => {
     /* @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentUploads, 
     /* @conditional-compile-remove(attachment-upload) */
-    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content, autoFocus, onTyping } = props;
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, autoFocus, onTyping } = props;
     const theme = useTheme();
-    const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = React.useState(false);
-    const onRenderRichTextEditorIcon = React.useCallback((isHover) => (React.createElement(react.Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
+    // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet
+    const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = React.useState(undefined);
+    const [contentModel, setContentModel] = React.useState(undefined);
+    const onRenderRichTextEditorIcon = React.useCallback((isHover) => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        return (React.createElement(react.Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) }));
+    }, [disabled, showRichTextEditorFormatting, theme]);
+    React.useEffect(() => {
+        var _a;
+        if (showRichTextEditorFormatting !== undefined) {
+            // Focus the editor when toolbar shown/hidden
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // we don't need execute this useEffect if editorComponentRef is changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showRichTextEditorFormatting]);
     const actionButtons = React.useMemo(() => {
         return (React.createElement(react.Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
             React.createElement(react.Stack, { horizontal: true },
                 React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
-                        var _a;
-                        setShowRichTextEditorFormatting(!showRichTextEditorFormatting);
-                        (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+                        setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);
                         e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
                     }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button' }),
                 React.createElement(react.Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
                 actionComponents)));
     }, [
         actionComponents,
-        editorComponentRef,
         onRenderRichTextEditorIcon,
         showRichTextEditorFormatting,
         strings.richTextFormatButtonTooltip,
         theme
     ]);
     const richTextEditorStyle = React.useMemo(() => {
-        return richTextEditorStyleProps(showRichTextEditorFormatting);
+        return richTextEditorStyleProps(showRichTextEditorFormatting === true);
     }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
     const onKeyDown = React.useCallback((ev) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
         }
-        if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {
             ev.preventDefault();
             onEnterKeyDown && onEnterKeyDown();
         }
@@ -10864,14 +11324,18 @@ const RichTextInputBoxComponent = (props) => {
         }
     }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);
     const useHorizontalLayout = React.useMemo(() => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
         return (!isHorizontalLayoutDisabled &&
-            !showRichTextEditorFormatting &&
+            !isRichTextEditorToolbarShown &&
             /* @conditional-compile-remove(attachment-upload) */ !hasAttachments);
     }, [
         isHorizontalLayoutDisabled,
         showRichTextEditorFormatting,
         /* @conditional-compile-remove(attachment-upload) */ hasAttachments
     ]);
+    const onContentModelUpdate = React.useCallback((contentModel) => {
+        setContentModel(contentModel);
+    }, []);
     return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
             disabled: !!disabled
@@ -10879,7 +11343,7 @@ const RichTextInputBoxComponent = (props) => {
         React.createElement(react.Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
             React.createElement(react.Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(react.Stack.Item, { className: inputBoxRichTextStackItemStyle },
-                    React.createElement(RichTextEditor, { content: content, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle, autoFocus: autoFocus })),
+                    React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate })),
                 /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
                     onRenderAttachmentUploads()),
             actionButtons)));
@@ -10986,6 +11450,13 @@ const RichTextSendBox = (props) => {
         setContentValueOverflow(isMessageTooLong(newValue.length));
         setContentValue(newValue);
     }, []);
+    const hasContent = React.useMemo(() => {
+        var _a;
+        // get plain text content from the editor to check if the message is empty
+        // as the content may contain tags even when the content is empty
+        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
+        return sanitizeText(contentValue !== null && contentValue !== void 0 ? contentValue : '').length > 0 && sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length > 0;
+    }, [contentValue]);
     /* @conditional-compile-remove(attachment-upload) */
     const toAttachmentMetadata = React.useCallback((attachmentsWithProgress) => {
         return attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachment) => {
@@ -11001,7 +11472,7 @@ const RichTextSendBox = (props) => {
         });
     }, []);
     const sendMessageOnClick = React.useCallback(() => {
-        var _a, _b, _c;
+        var _a, _b;
         if (disabled || contentValueOverflow) {
             return;
         }
@@ -11014,14 +11485,6 @@ const RichTextSendBox = (props) => {
             return;
         }
         const message = contentValue;
-        // get plain text content from the editor to check if the message is empty
-        // as the content may contain tags even when the content is empty
-        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
-        const hasContent = !isContentEmpty({
-            plainTextContent,
-            content: message,
-            placeholder: strings.placeholderText
-        });
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (hasContent || /* @conditional-compile-remove(attachment-upload) */ isAttachmentUploadCompleted(attachments)) {
@@ -11034,8 +11497,8 @@ const RichTextSendBox = (props) => {
                 type: 'html'
             });
             setContentValue('');
-            (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.setEmptyContent();
-            (_c = editorComponentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
+            (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [
         disabled,
@@ -11043,7 +11506,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(attachment-upload) */
         attachments,
         contentValue,
-        strings.placeholderText,
+        hasContent,
         /* @conditional-compile-remove(attachment-upload) */
         strings.attachmentUploadsPendingError,
         onSendMessage,
@@ -11066,17 +11529,6 @@ const RichTextSendBox = (props) => {
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    const hasContent = React.useMemo(() => {
-        var _a;
-        // get plain text content from the editor to check if the message is empty
-        // as the content may contain tags even when the content is empty
-        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
-        return !isContentEmpty({
-            plainTextContent: plainTextContent,
-            content: contentValue,
-            placeholder: strings.placeholderText
-        });
-    }, [contentValue, strings.placeholderText]);
     const onRenderSendIcon = React.useCallback((isHover) => {
         return (React.createElement(react.Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
                 theme,
@@ -11152,34 +11604,12 @@ const RichTextSendBox = (props) => {
     }, [attachments]);
     return (React.createElement(react.Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
-        React.createElement(RichTextInputBoxComponent
-        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
-        // setting the content will ensure that the latest content is used when editor is re-rendered
-        , { 
-            // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
-            // setting the content will ensure that the latest content is used when editor is re-rendered
-            content: contentValue, placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, onTyping: onTyping, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
+        React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, onTyping: onTyping, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
             /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads: onRenderAttachmentUploads, 
             /* @conditional-compile-remove(attachment-upload) */
             hasAttachments: hasAttachmentUploads })));
 };
-/**
- * Checks if the content of the rich text editor is empty.
- *
- * @param {Object} params - The parameters for the function.
- * @param {string | undefined} params.plainTextContent - The plain text content of the editor.
- * @param {string} params.content - The HTML content of the editor.
- * @param {string} params.placeholder - The placeholder text of the editor.
- * @returns {boolean} - True if the content is empty, false otherwise.
- */
-const isContentEmpty = ({ plainTextContent, content, placeholder }) => {
-    // RoosterJS returns placeholder text as plain text when the editor is empty and in this case,
-    // plainTextContent contains only placeholder text but content doesn't include the placeholder text
-    // this needs to be reviewed after migration to the content model packages.
-    const plainTextContainsPlaceholderOnly = plainTextContent === placeholder && !content.includes(placeholder);
-    return plainTextContainsPlaceholderOnly || sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length === 0;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -11420,7 +11850,9 @@ const useChatMessageStyles = reactComponents.makeStyles({
         }, '& video': {
             maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element
             height: 'auto !important'
-        }, '& p': Object.assign({}, reactComponents.shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, reactComponents.shorthands.border('solid')), reactComponents.shorthands.borderRadius('4px')), reactComponents.shorthands.borderWidth('1px')), reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }) }),
+        }, '& p': Object.assign({}, reactComponents.shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, reactComponents.shorthands.border('solid')), reactComponents.shorthands.borderRadius('4px')), reactComponents.shorthands.borderWidth('1px')), reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& code': {
+            whiteSpace: 'pre-wrap'
+        } }),
     bodyWithPlaceholderImage: {
         '& img[src=""]': {
             display: 'block',
@@ -11782,9 +12214,7 @@ const MessageStatusIcon = (props) => {
     const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
     return (React.createElement(React.Fragment, null,
         ariaLabel && shouldAnnounce && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
-        React.createElement("div", { 
-            // make icon accessible
-            tabIndex: 0 },
+        React.createElement("div", null,
             React.createElement(react.Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
 };
 
@@ -13079,7 +13509,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BLFNaheX.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CDsn-zU7.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -13087,7 +13517,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BLFNaheX.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CDsn-zU7.js'); });
 /**
  * @private
  */
@@ -20628,7 +21058,7 @@ const ReactionButton = (props) => {
             React.createElement(react.IconButton, { key: index, onClick: () => {
                     props.onReactionClick(emoji);
                     dismissMenu();
-                }, className: classname })));
+                }, className: classname, ariaLabel: emojiButtonTooltip.get(emoji) })));
     })));
     const emojiList = [
         { key: 'reactions', itemType: react.ContextualMenuItemType.Normal, onRender: renderEmoji }
@@ -22015,15 +22445,9 @@ const _VideoEffectsItem = (props) => {
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
-    const componentRef = React.createRef();
-    React.useEffect(() => {
-        if (props.focusOnMount && componentRef.current) {
-            componentRef.current.focus();
-        }
-    }, [componentRef, props.focusOnMount]);
     return (React.createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(react.Stack, { key: props.itemKey, className: react.mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item`, "aria-label": (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : props.itemKey, "aria-disabled": props.disabled },
-            React.createElement(react.DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: componentRef, autoFocus: props.focusOnMount },
+            React.createElement(react.DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef },
                 React.createElement(react.Stack, { horizontalAlign: 'center' },
                     props.iconProps && (React.createElement(react.Stack.Item, { className: iconContainerStyles },
                         React.createElement(react.Icon, Object.assign({}, props.iconProps)))),
@@ -22072,7 +22496,7 @@ const _VideoBackgroundEffectsPicker = (props) => {
             return (React.createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
                 options.map((option, i) => {
                     if (i === 0 && rowIndex === 0) {
-                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: !props.ignoreFocusOnMount })));
+                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef })));
                     }
                     return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
                 }),
@@ -27190,7 +27614,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BhTpuspw.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Dm4S2bpT.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -27198,7 +27622,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BhTpuspw.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Dm4S2bpT.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -32160,9 +32584,9 @@ const VideoEffectsPaneContent = (props) => {
         };
         adapter.updateSelectedVideoBackgroundEffect(noneEffect);
     }
-    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange);
+    return VideoEffectsPaneTrampoline(onDismissError, props.updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange);
 };
-const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
+const VideoEffectsPaneTrampoline = (onDismissError, updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
     const selectedEffect = useSelector$1(activeVideoBackgroundEffectSelector);
     const isCameraOn = useSelector$1(localVideoSelector).isAvailable;
     const showWarning = !isCameraOn && selectedEffect !== 'none';
@@ -32170,7 +32594,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     return (React.createElement(react.Stack, { tokens: { childrenGap: '0.75rem' }, className: react.mergeStyles({ paddingLeft: '0.5rem' }) },
         activeVideoEffectError && isCameraOn && (React.createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React.createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
-        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
+        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect, componentRef: updateFocusHandle })));
 };
 const backgroundPickerStyles = {
     label: {
@@ -32199,12 +32623,13 @@ const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, o
         return (React.createElement(SidePaneHeader, { onClose: closePane, headingText: locale.strings.call.videoEffectsPaneTitle, dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView }));
     }, [closePane, locale.strings, mobileView]);
     const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');
+    const updateFocusHandle = React.useMemo(() => React.createRef(), []);
     const onRenderContent = React.useCallback(() => {
         return (React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                 // Clear any existing video effects error when the user clicks on a new video effect
                 latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
-            } }));
-    }, [latestVideoEffectError, onDismissError]);
+            }, updateFocusHandle: updateFocusHandle }));
+    }, [latestVideoEffectError, onDismissError, updateFocusHandle]);
     const sidePaneRenderer = React.useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -32212,7 +32637,9 @@ const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, o
     }), [onRenderContent, onRenderHeader]);
     const openPane = React.useCallback(() => {
         updateSidePaneRenderer(sidePaneRenderer);
-    }, [sidePaneRenderer, updateSidePaneRenderer]);
+        // Run in a setTimeout as it must be called only once the imperative handle is available
+        setTimeout(() => { var _a; return (_a = updateFocusHandle.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);
     const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     // Update pane renderer if it is open and the openPane dep changes
     React.useEffect(() => {
@@ -39878,4 +40305,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-C9I6Mcil.js.map
+//# sourceMappingURL=index-DO36MBbq.js.map