@azure/communication-react 1.14.1-alpha-202403270012 → 1.14.1-alpha-202403280012

package/dist/dist-esm/react-components/src/components/VideoGallery/LargeGalleryLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\nconst REM_TO_PIXEL = 16;\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'\n  });\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}
+{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\nconst REM_TO_PIXEL = 16;\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.d.ts

@@ -1,4 +1,4 @@
-import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, Theme } from '@fluentui/react';
+import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme } from '@fluentui/react';
 import { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';
 /**
  * @private
@@ -31,6 +31,10 @@ export declare const ribbonOverflowButtonStyle: (theme: Theme) => Partial<IConte
  * @private
  */
 export declare const ribbonButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonTableButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
 /**
  * @private
  */
@@ -51,4 +55,24 @@ export declare const editBoxRichTextEditorStyle: () => RichTextEditorStyleProps;
  * @private
  */
 export declare const sendBoxRichTextEditorStyle: (isExpanded: boolean) => RichTextEditorStyleProps;
+/**
+ * @private
+ */
+export declare const insertTableMenuCellButtonStyles: (theme: Theme) => IStyle;
+/**
+ * @private
+ */
+export declare const insertTableMenuCellButtonSelectedStyles: (theme: Theme) => IStyle;
+/**
+ * @private
+ */
+export declare const insertTableMenuTablePane: string;
+/**
+ * @private
+ */
+export declare const insertTableMenuFocusZone: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const insertTableMenuTitleStyles: string;
 //# sourceMappingURL=RichTextEditor.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js

@@ -25,7 +25,26 @@ export const richTextEditorWrapperStyle = (theme, addTopOffset) => {
         paddingInlineEnd: `0.75rem`,
         lineHeight: '1.25rem',
         maxWidth: '100%',
-        color: theme.palette.neutralPrimary
+        color: theme.palette.neutralPrimary,
+        '& table': {
+            background: 'transparent',
+            borderCollapse: 'collapse',
+            width: '100%',
+            borderSpacing: '0',
+            // don't shrink/expand cells during the input to the table
+            tableLayout: 'fixed',
+            '& tr': {
+                background: 'transparent',
+                border: `1px solid ${theme.palette.neutralLight}`,
+                '& td': {
+                    background: 'transparent',
+                    border: `1px solid ${theme.palette.neutralLight}`,
+                    wordBreak: 'normal',
+                    padding: '0.125rem 0.25rem',
+                    verticalAlign: 'top'
+                }
+            }
+        }
     });
 };
 /**
@@ -76,6 +95,15 @@ const ribbonOverflowButtonRootStyles = (theme) => {
                         color: theme.palette.neutralPrimary
                     }
                 }
+            },
+            '.ribbon-table-button-regular-icon': {
+                display: 'inline-block',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
+                width: '1.25rem',
+                height: '1.25rem'
+            },
+            '.ribbon-table-button-filled-icon': {
+                display: 'none'
             }
         }
     };
@@ -111,13 +139,67 @@ export const ribbonButtonStyle = (theme) => {
         rootExpandedHovered: ribbonButtonRootStyles(theme)
     };
 };
+const rootRibbonTableButtonStyle = (theme) => {
+    // merge IStyles props
+    return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));
+};
+/**
+ * @private
+ */
+export const ribbonTableButtonStyle = (theme) => {
+    return {
+        icon: { height: 'auto' },
+        menuIcon: { height: 'auto' },
+        root: rootRibbonTableButtonStyle(theme),
+        rootChecked: ribbonTableButtonRootStyles(theme, true),
+        rootHovered: ribbonTableButtonRootStyles(theme, true),
+        rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),
+        rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),
+        rootPressed: ribbonTableButtonRootStyles(theme, true),
+        rootExpanded: ribbonTableButtonRootStyles(theme, true),
+        rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)
+    };
+};
+const ribbonTableButtonRootStyles = (theme, isSelected) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            '.ribbon-table-button-regular-icon': {
+                width: '1.25rem',
+                height: '1.25rem',
+                marginTop: '-0.25rem',
+                color: theme.palette.neutralPrimary,
+                display: isSelected ? 'none' : 'inline-block'
+            },
+            '.ribbon-table-button-filled-icon': {
+                width: '1.25rem',
+                height: '1.25rem',
+                marginTop: '-0.25rem',
+                color: theme.palette.themePrimary,
+                display: isSelected ? 'inline-block' : 'none'
+            }
+        }
+    };
+};
 /**
  * @private
  */
 export const ribbonDividerStyle = (theme) => {
     return {
         icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
-        root: { margin: '0', padding: '0', minWidth: 'auto' }
+        root: { margin: '0', padding: '0', minWidth: 'auto' },
+        rootHovered: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.neutralQuaternaryAlt
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.neutralQuaternaryAlt
+                }
+            }
+        }
     };
 };
 /**
@@ -153,4 +235,52 @@ export const sendBoxRichTextEditorStyle = (isExpanded) => {
         maxHeight: '5rem'
     };
 };
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonStyles = (theme) => {
+    return {
+        width: '1rem',
+        height: '1rem',
+        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`,
+        display: 'inline-block',
+        cursor: 'pointer',
+        background: 'transparent'
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonSelectedStyles = (theme) => {
+    return {
+        background: theme.palette.themePrimary
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuTablePane = mergeStyles({
+    padding: '0.5rem 0.625rem 0.75rem 0.625rem',
+    boxSizing: 'content-box',
+    minWidth: 'auto'
+});
+/**
+ * @private
+ */
+export const insertTableMenuFocusZone = (theme) => {
+    return mergeStyles({
+        lineHeight: '12px',
+        width: '5rem',
+        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`
+    });
+};
+/**
+ * @private
+ */
+export const insertTableMenuTitleStyles = mergeStyles({
+    width: '100%',
+    height: '1rem',
+    fontSize: '0.75rem',
+    marginBottom: '0.5rem'
+});
 //# sourceMappingURL=RichTextEditor.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n  return mergeStyles({\n    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    lineHeight: '1.25rem',\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '.ms-Button-icon': {\n        color: theme.palette.themePrimary\n      },\n      '.ms-Button-menuIcon': {\n        color: theme.palette.themePrimary\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme),\n    rootHovered: ribbonButtonRootStyles(theme),\n    rootCheckedHovered: ribbonButtonRootStyles(theme),\n    rootCheckedPressed: ribbonButtonRootStyles(theme),\n    rootPressed: ribbonButtonRootStyles(theme),\n    rootExpanded: ribbonButtonRootStyles(theme),\n    rootExpandedHovered: ribbonButtonRootStyles(theme)\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '2.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '5rem' : '1.25rem',\n    maxHeight: '5rem'\n  };\n};\n"]}
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n  return mergeStyles({\n    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    lineHeight: '1.25rem',\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary,\n\n    '& table': {\n      background: 'transparent',\n      borderCollapse: 'collapse',\n      width: '100%',\n      borderSpacing: '0',\n      // don't shrink/expand cells during the input to the table\n      tableLayout: 'fixed',\n\n      '& tr': {\n        background: 'transparent',\n        border: `1px solid ${theme.palette.neutralLight}`,\n\n        '& td': {\n          background: 'transparent',\n          border: `1px solid ${theme.palette.neutralLight}`,\n          wordBreak: 'normal',\n          padding: '0.125rem 0.25rem',\n          verticalAlign: 'top'\n        }\n      }\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      },\n      '.ribbon-table-button-regular-icon': {\n        display: 'inline-block',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        width: '1.25rem',\n        height: '1.25rem'\n      },\n      '.ribbon-table-button-filled-icon': {\n        display: 'none'\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '.ms-Button-icon': {\n        color: theme.palette.themePrimary\n      },\n      '.ms-Button-menuIcon': {\n        color: theme.palette.themePrimary\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme),\n    rootHovered: ribbonButtonRootStyles(theme),\n    rootCheckedHovered: ribbonButtonRootStyles(theme),\n    rootCheckedPressed: ribbonButtonRootStyles(theme),\n    rootPressed: ribbonButtonRootStyles(theme),\n    rootExpanded: ribbonButtonRootStyles(theme),\n    rootExpandedHovered: ribbonButtonRootStyles(theme)\n  };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n  // merge IStyles props\n  return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/**\n * @private\n */\nexport const ribbonTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { height: 'auto' },\n    menuIcon: { height: 'auto' },\n    root: rootRibbonTableButtonStyle(theme),\n    rootChecked: ribbonTableButtonRootStyles(theme, true),\n    rootHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n    rootPressed: ribbonTableButtonRootStyles(theme, true),\n    rootExpanded: ribbonTableButtonRootStyles(theme, true),\n    rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n  };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      '.ribbon-table-button-regular-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        marginTop: '-0.25rem',\n        color: theme.palette.neutralPrimary,\n        display: isSelected ? 'none' : 'inline-block'\n      },\n      '.ribbon-table-button-filled-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        marginTop: '-0.25rem',\n        color: theme.palette.themePrimary,\n        display: isSelected ? 'inline-block' : 'none'\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' },\n    rootHovered: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.neutralQuaternaryAlt\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.neutralQuaternaryAlt\n        }\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '2.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '5rem' : '1.25rem',\n    maxHeight: '5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n  return {\n    width: '1rem',\n    height: '1rem',\n    border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`,\n    display: 'inline-block',\n    cursor: 'pointer',\n    background: 'transparent'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n  return {\n    background: theme.palette.themePrimary\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTablePane = mergeStyles({\n  padding: '0.5rem 0.625rem 0.75rem 0.625rem',\n  boxSizing: 'content-box',\n  minWidth: 'auto'\n});\n\n/**\n * @private\n */\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n  return mergeStyles({\n    lineHeight: '12px',\n    width: '5rem',\n    border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`\n  });\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTitleStyles = mergeStyles({\n  width: '100%',\n  height: '1rem',\n  fontSize: '0.75rem',\n  marginBottom: '0.5rem'\n});\n"]}

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorStringsUtils.d.ts

@@ -0,0 +1,15 @@
+import type { LocalizedStrings } from 'roosterjs-react';
+import type { RichTextSendBoxStrings } from '../RichTextEditor/RichTextSendBox';
+/**
+ * @private
+ *
+ * Strings for the ribbon buttons where key should match `key` prop if any or the name of the item.
+ */
+export declare const ribbonButtonsStrings: (strings: Partial<RichTextSendBoxStrings>) => LocalizedStrings<string>;
+/**
+ * @private
+ *
+ * Strings for the table context menu  where key should match `key` prop if any or the name of the item.
+ */
+export declare const tableContextMenuStrings: (strings: Partial<RichTextSendBoxStrings>) => LocalizedStrings<string>;
+//# sourceMappingURL=RichTextEditorStringsUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorStringsUtils.js

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ *
+ * Strings for the ribbon buttons where key should match `key` prop if any or the name of the item.
+ */
+export const ribbonButtonsStrings = (strings) => {
+    return {
+        buttonNameBold: strings.boldTooltip,
+        buttonNameItalic: strings.italicTooltip,
+        buttonNameUnderline: strings.underlineTooltip,
+        buttonNameBulletedList: strings.bulletListTooltip,
+        buttonNameNumberedList: strings.numberListTooltip,
+        buttonNameIncreaseIndent: strings.increaseIndentTooltip,
+        buttonNameDecreaseIndent: strings.decreaseIndentTooltip,
+        buttonNameInsertTable: strings.insertTableTooltip,
+        insertTablePane: strings.insertTableMenuTitle
+    };
+};
+/**
+ * @private
+ *
+ * Strings for the table context menu  where key should match `key` prop if any or the name of the item.
+ */
+export const tableContextMenuStrings = (strings) => {
+    return {
+        menuNameTableInsert: strings.insertRowOrColumnMenu,
+        menuNameTableInsertAbove: strings.insertRowAboveMenu,
+        menuNameTableInsertBelow: strings.insertRowBelowMenu,
+        menuNameTableInsertLeft: strings.insertColumnLeftMenu,
+        menuNameTableInsertRight: strings.insertColumnRightMenu,
+        menuNameTableDelete: strings.deleteRowOrColumnMenu,
+        menuNameTableDeleteColumn: strings.deleteColumnMenu,
+        menuNameTableDeleteRow: strings.deleteRowMenu,
+        menuNameTableDeleteTable: strings.deleteTableMenu
+    };
+};
+//# sourceMappingURL=RichTextEditorStringsUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorStringsUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorStringsUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextEditorStringsUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAwC,EAA4B,EAAE;IACzG,OAAO;QACL,cAAc,EAAE,OAAO,CAAC,WAAW;QACnC,gBAAgB,EAAE,OAAO,CAAC,aAAa;QACvC,mBAAmB,EAAE,OAAO,CAAC,gBAAgB;QAC7C,sBAAsB,EAAE,OAAO,CAAC,iBAAiB;QACjD,sBAAsB,EAAE,OAAO,CAAC,iBAAiB;QACjD,wBAAwB,EAAE,OAAO,CAAC,qBAAqB;QACvD,wBAAwB,EAAE,OAAO,CAAC,qBAAqB;QACvD,qBAAqB,EAAE,OAAO,CAAC,kBAAkB;QACjD,eAAe,EAAE,OAAO,CAAC,oBAAoB;KAC9C,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,OAAwC,EAA4B,EAAE;IAC5G,OAAO;QACL,mBAAmB,EAAE,OAAO,CAAC,qBAAqB;QAClD,wBAAwB,EAAE,OAAO,CAAC,kBAAkB;QACpD,wBAAwB,EAAE,OAAO,CAAC,kBAAkB;QACpD,uBAAuB,EAAE,OAAO,CAAC,oBAAoB;QACrD,wBAAwB,EAAE,OAAO,CAAC,qBAAqB;QACvD,mBAAmB,EAAE,OAAO,CAAC,qBAAqB;QAClD,yBAAyB,EAAE,OAAO,CAAC,gBAAgB;QACnD,sBAAsB,EAAE,OAAO,CAAC,aAAa;QAC7C,wBAAwB,EAAE,OAAO,CAAC,eAAe;KAClD,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { LocalizedStrings } from 'roosterjs-react';\nimport type { RichTextSendBoxStrings } from '../RichTextEditor/RichTextSendBox';\n/**\n * @private\n *\n * Strings for the ribbon buttons where key should match `key` prop if any or the name of the item.\n */\nexport const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {\n  return {\n    buttonNameBold: strings.boldTooltip,\n    buttonNameItalic: strings.italicTooltip,\n    buttonNameUnderline: strings.underlineTooltip,\n    buttonNameBulletedList: strings.bulletListTooltip,\n    buttonNameNumberedList: strings.numberListTooltip,\n    buttonNameIncreaseIndent: strings.increaseIndentTooltip,\n    buttonNameDecreaseIndent: strings.decreaseIndentTooltip,\n    buttonNameInsertTable: strings.insertTableTooltip,\n    insertTablePane: strings.insertTableMenuTitle\n  };\n};\n\n/**\n * @private\n *\n * Strings for the table context menu  where key should match `key` prop if any or the name of the item.\n */\nexport const tableContextMenuStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {\n  return {\n    menuNameTableInsert: strings.insertRowOrColumnMenu,\n    menuNameTableInsertAbove: strings.insertRowAboveMenu,\n    menuNameTableInsertBelow: strings.insertRowBelowMenu,\n    menuNameTableInsertLeft: strings.insertColumnLeftMenu,\n    menuNameTableInsertRight: strings.insertColumnRightMenu,\n    menuNameTableDelete: strings.deleteRowOrColumnMenu,\n    menuNameTableDeleteColumn: strings.deleteColumnMenu,\n    menuNameTableDeleteRow: strings.deleteRowMenu,\n    menuNameTableDeleteTable: strings.deleteTableMenu\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @private
+ *
+ * String to be replaces by actual values of row and column.
+ */
+export declare const ColumnRowReplaceString = "{column} x {row}";
+/**
+ * @private
+ *
+ * Function to create key pair for the selected table size.
+ */
+export declare function createKey(row: number, column: number): string;
+/**
+ * @private
+ *
+ * Function to parse key to the selected table size valules.
+ */
+export declare function parseKey(key: string): {
+    row: number;
+    column: number;
+};
+//# sourceMappingURL=RichTextTableUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ *
+ * String to be replaces by actual values of row and column.
+ */
+export const ColumnRowReplaceString = '{column} x {row}';
+/**
+ * @private
+ *
+ * Function to create key pair for the selected table size.
+ */
+export function createKey(row, column) {
+    return `${row},${column}`;
+}
+/**
+ * @private
+ *
+ * Function to parse key to the selected table size valules.
+ */
+export function parseKey(key) {
+    const [row, column] = key.split(',');
+    return {
+        row: parseInt(row),
+        column: parseInt(column)
+    };
+}
+//# sourceMappingURL=RichTextTableUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextTableUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextTableUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,kBAAkB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,GAAW,EAAE,MAAc;IACnD,OAAO,GAAG,GAAG,IAAI,MAAM,EAAE,CAAC;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,GAAW;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO;QACL,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC;QAClB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;KACzB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n *\n * String to be replaces by actual values of row and column.\n */\nexport const ColumnRowReplaceString = '{column} x {row}';\n\n/**\n * @private\n *\n * Function to create key pair for the selected table size.\n */\nexport function createKey(row: number, column: number): string {\n  return `${row},${column}`;\n}\n\n/**\n * @private\n *\n * Function to parse key to the selected table size valules.\n */\nexport function parseKey(key: string): { row: number; column: number } {\n  const [row, column] = key.split(',');\n  return {\n    row: parseInt(row),\n    column: parseInt(column)\n  };\n}\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -44,7 +44,18 @@
         "numberListTooltip": "Numbered list",
         "increaseIndentTooltip": "Increase indent",
         "decreaseIndentTooltip": "Decrease indent",
-        "richTextFormatButtonTooltip": "Format"
+        "insertTableTooltip": "Insert table",
+        "richTextFormatButtonTooltip": "Format",
+        "insertRowOrColumnMenu": "Insert",
+        "insertTableMenuTitle": "Insert {column} x {row} table",
+        "insertRowAboveMenu": "Insert above",
+        "insertRowBelowMenu": "Insert below",
+        "insertColumnLeftMenu": "Insert left",
+        "insertColumnRightMenu": "Insert right",
+        "deleteRowOrColumnMenu": "Delete",
+        "deleteColumnMenu": "Delete column",
+        "deleteRowMenu": "Delete row",
+        "deleteTableMenu": "Delete table"
     },
     "mentionPopover": {
         "mentionPopoverHeader": "Suggestions"

package/dist/dist-esm/react-components/src/theming/icons.d.ts

@@ -118,5 +118,9 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     RichTextDividerIcon: React.JSX.Element;
     RichTextEditorButtonIcon: React.JSX.Element;
     RichTextEditorButtonIconFilled: React.JSX.Element;
+    RichTextInsertTableRegularIcon: React.JSX.Element;
+    RichTextInsertTableFilledIcon: React.JSX.Element;
+    RichTextTableInsertMenuIcon: React.JSX.Element;
+    RichTextTableDeleteMenuIcon: React.JSX.Element;
 };
 //# sourceMappingURL=icons.d.ts.map

package/dist/dist-esm/react-components/src/theming/icons.js

@@ -5,7 +5,7 @@ import { mergeStyles } from '@fluentui/react';
 import { Stack } from '@fluentui/react';
 import { ArrowClockwise16Regular, CallEnd20Filled, Checkmark20Regular, CheckmarkCircle16Regular, Circle16Regular, Delete20Regular, Dismiss20Regular, Dismiss16Regular, Edit20Regular, ErrorCircle16Regular, Eye16Regular, MicOff16Filled, MicOff16Regular, MicOff20Filled, Mic16Filled, Mic20Filled, Mic20Regular, MoreHorizontal20Filled, MoreHorizontal20Regular, People20Filled, Settings20Filled, Send20Filled, Send20Regular, ShareScreenStart20Filled, ShareScreenStop20Filled, Speaker220Regular, Video16Filled, Video20Filled, Video20Regular, VideoOff20Filled, ChevronLeft20Regular, ChevronRight20Regular, WifiWarning20Filled, SpeakerMute16Filled, MicProhibited16Filled, VideoProhibited16Filled, Pin16Filled, Pin16Regular, PinOff16Regular, ScaleFit20Regular, ScaleFill20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(rich-text-editor) */
-import { TextBold20Regular, TextItalic20Regular, TextUnderlineCharacterU20Regular, TextBulletList20Regular, TextNumberListLtr20Regular, TextIndentDecrease20Regular, TextIndentIncrease20Regular, DividerTall24Regular, TextEditStyle20Regular, TextEditStyle20Filled } from '@fluentui/react-icons';
+import { TextBold20Regular, TextItalic20Regular, TextUnderlineCharacterU20Regular, TextBulletList20Regular, TextNumberListLtr20Regular, TextIndentDecrease20Regular, TextIndentIncrease20Regular, DividerTall24Regular, TextEditStyle20Regular, TextEditStyle20Filled, Table20Regular, Table20Filled, TableAdd20Regular, TableDismiss20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(reaction) */
 import { Emoji20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(end-of-call-survey) */
@@ -265,6 +265,14 @@ export const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(rich-text-editor) */
     RichTextEditorButtonIcon: React.createElement(TextEditStyle20Regular, null),
     /* @conditional-compile-remove(rich-text-editor) */
-    RichTextEditorButtonIconFilled: React.createElement(TextEditStyle20Filled, null)
+    RichTextEditorButtonIconFilled: React.createElement(TextEditStyle20Filled, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RichTextInsertTableRegularIcon: React.createElement(Table20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RichTextInsertTableFilledIcon: React.createElement(Table20Filled, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RichTextTableInsertMenuIcon: React.createElement(TableAdd20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RichTextTableDeleteMenuIcon: React.createElement(TableDismiss20Regular, null)
 };
 //# sourceMappingURL=icons.js.map