@azure/communication-react 1.16.0-alpha-202405080011 → 1.16.0

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.js

@@ -1,55 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { Icon, Stack } from '@fluentui/react';
-import { insertTable as insertTableAction } from './insertTableAction';
-import { insertTableMenuTablePane, ribbonTableButtonStyle } from '../../../styles/RichTextEditor.styles';
-import { RichTextInsertTablePane } from './RichTextInsertTablePane';
-import { ColumnRowReplaceString, parseKey } from '../../../utils/RichTextTableUtils';
-// This file uses RoosterJS React package implementation with updates to UI components and styles.
-/**
- * "Insert table" button for the RoosterJS ribbon
- */
-export 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);
-            insertTableAction(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(Stack, null,
-        React.createElement(Icon, { iconName: "RichTextInsertTableFilledIcon", className: 'ribbon-table-button-filled-icon' }),
-        React.createElement(Icon, { iconName: "RichTextInsertTableRegularIcon", className: 'ribbon-table-button-regular-icon' })));
-};
-//# sourceMappingURL=RichTextInsertTableButton.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextInsertTableButton.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AACzG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGrF,kGAAkG;AAElG;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAY,EACZ,aAAqB,EACrB,gBAAwB,EACF,EAAE;IACxB,OAAO;QACL,GAAG,EAAE,uBAAuB;QAC5B,eAAe,EAAE,cAAc;QAC/B,4CAA4C;QAC5C,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,MAAe,EAAE,GAAW,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YACtC,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE;gBACL,6DAA6D;gBAC7D,eAAe,EAAE,UAAU,sBAAsB,QAAQ;aAC1D;YACD,UAAU,EAAE,CACV,IAAyB,EACzB,OAAyG,EACzG,EAAE;gBACF,OAAO,CACL,oBAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;YACJ,CAAC;YACD,2BAA2B,EAAE;gBAC3B,SAAS,EAAE,wBAAwB;aACpC;SACF;QACD,oBAAoB,EAAE;YACpB,wBAAwB;YACxB,aAAa,EAAE;gBACb,MAAM,EAAE,IAAI;aACb;YACD,YAAY,EAAE,GAAG,EAAE;gBACjB,OAAO,oBAAC,SAAS,OAAG,CAAC;YACvB,CAAC;YACD,YAAY,EAAE,sBAAsB,CAAC,KAAK,CAAC;YAC3C,QAAQ,EAAE,KAAK;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAgB,EAAE;IAClC,OAAO;IACL,qGAAqG;IACrG,oBAAC,KAAK;QACJ,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\nimport { insertTable as insertTableAction } from './insertTableAction';\nimport type { RibbonButton } from 'roosterjs-react';\nimport type { IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, ribbonTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { ColumnRowReplaceString, parseKey } from '../../../utils/RichTextTableUtils';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\n\n/**\n * \"Insert table\" button for the RoosterJS ribbon\n */\nexport const insertTableButton = (\n  theme: Theme,\n  maxRowsNumber: number,\n  maxColumnsNumber: number\n): RibbonButton<string> => {\n  return {\n    key: 'buttonNameInsertTable',\n    unlocalizedText: 'Insert table',\n    // Icon will be set in onRenderIcon callback\n    iconName: '',\n    onClick: (editor: IEditor, key: string) => {\n      const { row, column } = parseKey(key);\n      insertTableAction(editor, column, row);\n    },\n    dropDownMenu: {\n      items: {\n        // the key of the item is also used as a key for localization\n        insertTablePane: `Insert ${ColumnRowReplaceString} table`\n      },\n      itemRender: (\n        item: IContextualMenuItem,\n        onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: IContextualMenuItem) => void\n      ) => {\n        return (\n          <RichTextInsertTablePane\n            item={item}\n            onClick={onClick}\n            maxColumnsNumber={maxColumnsNumber}\n            maxRowsNumber={maxRowsNumber}\n          />\n        );\n      },\n      commandBarSubMenuProperties: {\n        className: insertTableMenuTablePane\n      }\n    },\n    commandBarProperties: {\n      // hide the chevron icon\n      menuIconProps: {\n        hidden: true\n      },\n      onRenderIcon: () => {\n        return <TableIcon />;\n      },\n      buttonStyles: ribbonTableButtonStyle(theme),\n      canCheck: false\n    }\n  };\n};\n\nconst TableIcon = (): JSX.Element => {\n  return (\n    // update the visibility of the Table Icon with css classes that are triggered by command bar's state\n    <Stack>\n      <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n      <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { IContextualMenuItem } from '@fluentui/react';
-interface RichTextInsertTablePaneProps {
-    item: IContextualMenuItem;
-    onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;
-    maxRowsNumber: number;
-    maxColumnsNumber: number;
-}
-/**
- * @private
- * Component for the insert table pane
- */
-export declare const RichTextInsertTablePane: (props: RichTextInsertTablePaneProps) => JSX.Element;
-export {};
-//# sourceMappingURL=RichTextInsertTablePane.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.js

@@ -1,64 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useMemo } from 'react';
-import { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';
-import { insertTableMenuCellButtonSelectedStyles, insertTableMenuCellButtonStyles, insertTableMenuFocusZone, insertTableMenuTitleStyles } from '../../../styles/RichTextEditor.styles';
-import { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';
-import { useTheme } from '../../../../theming';
-// This file uses RoosterJS React package implementation with updates to UI components and styles.
-const RowColumnInitialValue = 0;
-/**
- * @private
- * Component for the insert table pane
- */
-export const RichTextInsertTablePane = (props) => {
-    const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
-    const [column, setColumn] = React.useState(RowColumnInitialValue);
-    const [row, setRow] = React.useState(RowColumnInitialValue);
-    const theme = useTheme();
-    const updateSize = React.useCallback((target) => {
-        if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
-            const column = parseInt(target.dataset.column);
-            const row = parseInt(target.dataset.row);
-            if (column >= RowColumnInitialValue &&
-                column < maxColumnsNumber &&
-                row >= RowColumnInitialValue &&
-                row < maxRowsNumber) {
-                setColumn(column);
-                setRow(row);
-            }
-        }
-    }, [maxColumnsNumber, maxRowsNumber]);
-    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 items = React.useMemo(() => {
-        var _a;
-        const items = [];
-        for (let i = 0; i < maxRowsNumber; i++) {
-            for (let j = 0; j < maxColumnsNumber; j++) {
-                const key = `cell_${i}_${j}`;
-                const isSelected = j <= column && i <= row;
-                items.push(React.createElement("button", { className: mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
-            }
-        }
-        return items;
-    }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);
-    const text = useMemo(() => {
-        var _a;
-        return formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(row), formatRowColumnText(column));
-    }, [column, item.text, row]);
-    return (React.createElement("div", null,
-        React.createElement("div", { className: insertTableMenuTitleStyles }, text),
-        React.createElement(FocusZone, { defaultTabbableElement: `cell_${RowColumnInitialValue}_${RowColumnInitialValue}`, direction: FocusZoneDirection.bidirectional, onActiveElementChanged: updateSize, className: insertTableMenuFocusZone(theme) }, items)));
-};
-const formatText = (text, row, column) => {
-    return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);
-};
-const formatRowColumnText = (value) => {
-    return value + 1;
-};
-//# sourceMappingURL=RichTextInsertTablePane.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';\nimport type { IContextualMenuItem } from '@fluentui/react';\nimport {\n  insertTableMenuCellButtonSelectedStyles,\n  insertTableMenuCellButtonStyles,\n  insertTableMenuFocusZone,\n  insertTableMenuTitleStyles\n} from '../../../styles/RichTextEditor.styles';\nimport { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';\nimport { useTheme } from '../../../../theming';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\nconst RowColumnInitialValue = 0;\n\ninterface RichTextInsertTablePaneProps {\n  item: IContextualMenuItem;\n  onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;\n  maxRowsNumber: number;\n  maxColumnsNumber: number;\n}\n\n/**\n * @private\n * Component for the insert table pane\n */\nexport const RichTextInsertTablePane = (props: RichTextInsertTablePaneProps): JSX.Element => {\n  const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;\n  const [column, setColumn] = React.useState(RowColumnInitialValue);\n  const [row, setRow] = React.useState(RowColumnInitialValue);\n  const theme = useTheme();\n\n  const updateSize = React.useCallback(\n    (target?: HTMLElement) => {\n      if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {\n        const column = parseInt(target.dataset.column);\n        const row = parseInt(target.dataset.row);\n\n        if (\n          column >= RowColumnInitialValue &&\n          column < maxColumnsNumber &&\n          row >= RowColumnInitialValue &&\n          row < maxRowsNumber\n        ) {\n          setColumn(column);\n          setRow(row);\n        }\n      }\n    },\n    [maxColumnsNumber, maxRowsNumber]\n  );\n\n  const onMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      updateSize(e.target as HTMLElement);\n    },\n    [updateSize]\n  );\n\n  const onClickButton = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick(e, {\n        ...item,\n        key: createKey(formatRowColumnText(row), formatRowColumnText(column))\n      });\n    },\n    [row, column, onClick, item]\n  );\n\n  const items = React.useMemo(() => {\n    const items: JSX.Element[] = [];\n\n    for (let i = 0; i < maxRowsNumber; i++) {\n      for (let j = 0; j < maxColumnsNumber; j++) {\n        const key = `cell_${i}_${j}`;\n        const isSelected = j <= column && i <= row;\n        items.push(\n          <button\n            className={mergeStyles(\n              insertTableMenuCellButtonStyles(theme),\n              isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined\n            )}\n            onClick={onClickButton}\n            key={key}\n            id={key}\n            data-column={j}\n            data-row={i}\n            data-is-focusable={true}\n            onMouseEnter={onMouseEnter}\n            aria-label={formatText(item.text ?? '', formatRowColumnText(i), formatRowColumnText(j))}\n            data-testid={key}\n          />\n        );\n      }\n    }\n\n    return items;\n  }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);\n\n  const text = useMemo(() => {\n    return formatText(item.text ?? '', formatRowColumnText(row), formatRowColumnText(column));\n  }, [column, item.text, row]);\n\n  return (\n    <div>\n      <div className={insertTableMenuTitleStyles}>{text}</div>\n      <FocusZone\n        defaultTabbableElement={`cell_${RowColumnInitialValue}_${RowColumnInitialValue}`}\n        direction={FocusZoneDirection.bidirectional}\n        onActiveElementChanged={updateSize}\n        className={insertTableMenuFocusZone(theme)}\n      >\n        {items}\n      </FocusZone>\n    </div>\n  );\n};\n\nconst formatText = (text: string, row: number, column: number): string => {\n  return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);\n};\n\nconst formatRowColumnText = (value: number): number => {\n  return value + 1;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.d.ts

@@ -1,8 +0,0 @@
-import { EditorPlugin } from 'roosterjs-editor-types-compatible';
-import { LocalizedStrings } from 'roosterjs-react';
-/**
- * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
- * @returns A new ContextMenuProvider
- */
-export declare const createTableEditMenuProvider: (strings?: LocalizedStrings<string>) => EditorPlugin;
-//# sourceMappingURL=RichTextTableContextMenu.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.js

@@ -1,66 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { editTable } from 'roosterjs-editor-api';
-import { CompatibleTableOperation } from 'roosterjs-editor-types-compatible';
-import { createContextMenuProvider } from 'roosterjs-react';
-import { tableContextMenuStrings } from '../../../utils/RichTextEditorStringsUtils';
-import { tableContextMenuIconStyles } from '../../../styles/RichTextEditor.styles';
-const onClick = (key, editor) => {
-    editor.focus();
-    const operation = TableEditOperationMap[key];
-    if (typeof operation === 'number') {
-        editTable(editor, operation);
-    }
-};
-const TableEditOperationMap = {
-    menuNameTableInsertAbove: CompatibleTableOperation.InsertAbove,
-    menuNameTableInsertBelow: CompatibleTableOperation.InsertBelow,
-    menuNameTableInsertLeft: CompatibleTableOperation.InsertLeft,
-    menuNameTableInsertRight: CompatibleTableOperation.InsertRight,
-    menuNameTableDeleteTable: CompatibleTableOperation.DeleteTable,
-    menuNameTableDeleteColumn: CompatibleTableOperation.DeleteColumn,
-    menuNameTableDeleteRow: 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
- */
-export const createTableEditMenuProvider = (strings) => {
-    return 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;
-};
-//# sourceMappingURL=RichTextTableContextMenu.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextTableContextMenu.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,mCAAmC,CAAC;AACpG,OAAO,EAAmB,yBAAyB,EAAoB,MAAM,iBAAiB,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,MAAe,EAAQ,EAAE;IACrD,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,SAAS,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAC7C,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAsD;IAC/E,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,uBAAuB,EAAE,wBAAwB,CAAC,UAAU;IAC5D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,yBAAyB,EAAE,wBAAwB,CAAC,YAAY;IAChE,sBAAsB,EAAE,wBAAwB,CAAC,SAAS;CAC3D,CAAC;AAEF,MAAM,uBAAuB,GAA4B;IACvD,GAAG,EAAE,qBAAqB;IAC1B,eAAe,EAAE,QAAQ;IACzB,QAAQ,EAAE;QACR,wBAAwB,EAAE,cAAc;QACxC,wBAAwB,EAAE,cAAc;QACxC,uBAAuB,EAAE,aAAa;QACtC,wBAAwB,EAAE,cAAc;KACzC;IACD,OAAO;IACP,SAAS,EAAE;QACT,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE;KAC7C;CACF,CAAC;AAEF,MAAM,uBAAuB,GAA4B;IACvD,GAAG,EAAE,qBAAqB;IAC1B,eAAe,EAAE,QAAQ;IACzB,QAAQ,EAAE;QACR,yBAAyB,EAAE,eAAe;QAC1C,sBAAsB,EAAE,YAAY;QACpC,wBAAwB,EAAE,cAAc;KACzC;IACD,OAAO;IACP,SAAS,EAAE;QACT,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE;KAC7C;CACF,CAAC;AAEF,MAAM,YAAY,GAA8B,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAkC,EAAgB,EAAE;IAC9F,OAAO,yBAAyB,CAC9B,WAAW,EACX,YAAY,EACZ,uBAAuB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EACtC,CAAC,MAAe,EAAE,IAAU,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAgE,EAAE;IACpH,MAAM,EAAE,GAAG,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAyB,CAAC;IAC5E,MAAM,KAAK,GAAG,EAAE,IAAK,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAsB,CAAC;IAEjF,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,EAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AACzD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { editTable } from 'roosterjs-editor-api';\nimport { CompatibleTableOperation, EditorPlugin, IEditor } from 'roosterjs-editor-types-compatible';\nimport { ContextMenuItem, createContextMenuProvider, LocalizedStrings } from 'roosterjs-react';\nimport { tableContextMenuStrings } from '../../../utils/RichTextEditorStringsUtils';\nimport { tableContextMenuIconStyles } from '../../../styles/RichTextEditor.styles';\n\nconst onClick = (key: string, editor: IEditor): void => {\n  editor.focus();\n  const operation = TableEditOperationMap[key];\n  if (typeof operation === 'number') {\n    editTable(editor, operation);\n  }\n};\n\nconst TableEditOperationMap: Partial<Record<string, CompatibleTableOperation>> = {\n  menuNameTableInsertAbove: CompatibleTableOperation.InsertAbove,\n  menuNameTableInsertBelow: CompatibleTableOperation.InsertBelow,\n  menuNameTableInsertLeft: CompatibleTableOperation.InsertLeft,\n  menuNameTableInsertRight: CompatibleTableOperation.InsertRight,\n  menuNameTableDeleteTable: CompatibleTableOperation.DeleteTable,\n  menuNameTableDeleteColumn: CompatibleTableOperation.DeleteColumn,\n  menuNameTableDeleteRow: CompatibleTableOperation.DeleteRow\n};\n\nconst tableEditInsertMenuItem: ContextMenuItem<string> = {\n  key: 'menuNameTableInsert',\n  unlocalizedText: 'Insert',\n  subItems: {\n    menuNameTableInsertAbove: 'Insert above',\n    menuNameTableInsertBelow: 'Insert below',\n    menuNameTableInsertLeft: 'Insert left',\n    menuNameTableInsertRight: 'Insert right'\n  },\n  onClick,\n  iconProps: {\n    iconName: 'RichTextTableInsertMenuIcon',\n    styles: { root: tableContextMenuIconStyles }\n  }\n};\n\nconst tableEditDeleteMenuItem: ContextMenuItem<string> = {\n  key: 'menuNameTableDelete',\n  unlocalizedText: 'Delete',\n  subItems: {\n    menuNameTableDeleteColumn: 'Delete column',\n    menuNameTableDeleteRow: 'Delete row',\n    menuNameTableDeleteTable: 'Delete table'\n  },\n  onClick,\n  iconProps: {\n    iconName: 'RichTextTableDeleteMenuIcon',\n    styles: { root: tableContextMenuIconStyles }\n  }\n};\n\nconst tableActions: ContextMenuItem<string>[] = [tableEditInsertMenuItem, tableEditDeleteMenuItem];\n\n/**\n * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu\n * @returns A new ContextMenuProvider\n */\nexport const createTableEditMenuProvider = (strings?: LocalizedStrings<string>): EditorPlugin => {\n  return createContextMenuProvider(\n    'tableEdit',\n    tableActions,\n    tableContextMenuStrings(strings ?? {}),\n    (editor: IEditor, node: Node) => !!getEditingTable(editor, node)\n  );\n};\n\nconst getEditingTable = (editor: IEditor, node: Node): { table: HTMLTableElement; td: HTMLTableCellElement } | null => {\n  const td = editor.getElementAtCursor('TD,TH', node) as HTMLTableCellElement;\n  const table = td && (editor.getElementAtCursor('table', td) as HTMLTableElement);\n\n  return table?.isContentEditable ? { table, td } : null;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.d.ts

@@ -1,9 +0,0 @@
-import type { IEditor } from 'roosterjs-editor-types-compatible';
-/**
- * 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
- */
-export declare const insertTable: (editor: IEditor, columns: number, rows: number) => void;
-//# sourceMappingURL=insertTableAction.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js

@@ -1,56 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { Position, VTable } from 'roosterjs-editor-dom';
-import { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';
-// 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
- */
-export 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 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 Position(table, CompatiblePositionType.After));
-            editor.insertNode(document.createElement('br'));
-        }
-        editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));
-    }, CompatibleChangeSource.Format, undefined /* canUndoByBackspace */, {
-        formatApiName: 'insertTable'
-    });
-};
-function getTableCellWidth(columns) {
-    if (columns <= 4) {
-        return '120px';
-    }
-    else if (columns <= 6) {
-        return '100px';
-    }
-    else {
-        return '70px';
-    }
-}
-//# sourceMappingURL=insertTableAction.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"insertTableAction.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEnG,+GAA+G;AAE/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAe,EAAE,OAAe,EAAE,IAAY,EAAQ,EAAE;IAClF,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAwB,CAAC;QAC/D,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAyB,CAAC;YAChE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACnB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;YAE7C,+DAA+D;YAC/D,6DAA6D;YAC7D,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,CAAC,eAAe,CACpB,GAAG,EAAE;QACH,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzB,MAAM,qBAAqB,GAAG,KAAK,CAAC,kBAAkB,CAAC;QAEvD,6DAA6D;QAC7D,IAAI,qBAAqB,KAAK,IAAI,EAAE,CAAC;YACnC,4BAA4B;YAC5B,gDAAgD;YAChD,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC;YACjE,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QAClD,CAAC;QAED,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC5G,CAAC,EACD,sBAAsB,CAAC,MAAM,EAC7B,SAAS,CAAC,wBAAwB,EAClC;QACE,aAAa,EAAE,aAAa;KAC7B,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,iBAAiB,CAAC,OAAe;IACxC,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC;IAChB,CAAC;AACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Position, VTable } from 'roosterjs-editor-dom';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\nimport { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';\n\n// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles\n\n/**\n * Insert table into editor at current selection\n * @param editor The editor instance\n * @param columns Number of columns in table\n * @param rows Number of rows in table\n */\nexport const insertTable = (editor: IEditor, columns: number, rows: number): void => {\n  const document = editor.getDocument();\n  const table = document.createElement('table') as HTMLTableElement;\n  for (let i = 0; i < rows; i++) {\n    const tr = document.createElement('tr') as HTMLTableRowElement;\n    table.appendChild(tr);\n    for (let j = 0; j < columns; j++) {\n      const td = document.createElement('td') as HTMLTableCellElement;\n      tr.appendChild(td);\n      td.appendChild(document.createElement('br'));\n\n      // set the width as otherwise insets doesn't work well in table\n      // review if it's needed when content model packages are used\n      td.style.width = getTableCellWidth(columns);\n    }\n  }\n\n  editor.focus();\n  editor.addUndoSnapshot(\n    () => {\n      const vTable = new VTable(table);\n      vTable.writeBack();\n      editor.insertNode(table);\n      const nextElementAfterTable = table.nextElementSibling;\n\n      // insert br only if there is no next element after the table\n      if (nextElementAfterTable === null) {\n        // insert br after the table\n        // so users can easily input content after table\n        editor.select(new Position(table, CompatiblePositionType.After));\n        editor.insertNode(document.createElement('br'));\n      }\n\n      editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));\n    },\n    CompatibleChangeSource.Format,\n    undefined /* canUndoByBackspace */,\n    {\n      formatApiName: 'insertTable'\n    }\n  );\n};\n\nfunction getTableCellWidth(columns: number): string {\n  if (columns <= 4) {\n    return '120px';\n  } else if (columns <= 6) {\n    return '100px';\n  } else {\n    return '70px';\n  }\n}\n"]}

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

@@ -1,23 +0,0 @@
-import type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-editor-types';
-/**
- * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
- */
-export default class CopyPastePlugin implements EditorPlugin {
-    private editor;
-    getName(): string;
-    initialize(editor: IEditor): void;
-    dispose(): void;
-    onPluginEvent(event: PluginEvent): void;
-}
-/**
- * @internal
- * Exported only for unit testing
- */
-export declare const removeImageElement: (event: PluginEvent) => void;
-/**
- * Scrolls the editor's scroll container to the bottom after content is pasted.
- * @param event - The plugin event.
- * @param editor - The editor instance.
- */
-export declare const scrollToBottomAfterContentPaste: (event: PluginEvent, editor: IEditor) => void;
-//# sourceMappingURL=CopyPastePlugin.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js

@@ -1,78 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { getPositionRect, normalizeRect } from 'roosterjs-editor-dom';
-import { CompatiblePluginEventType, CompatiblePasteType, CompatibleChangeSource } from 'roosterjs-editor-types-compatible';
-/**
- * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
- */
-export default class CopyPastePlugin {
-    constructor() {
-        this.editor = null;
-    }
-    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
- */
-export const removeImageElement = (event) => {
-    // We don't support the pasting options such as paste as image yet.
-    if (event.eventType === CompatiblePluginEventType.BeforePaste && event.pasteType === 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;
-            }
-            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.
- */
-export const scrollToBottomAfterContentPaste = (event, editor) => {
-    if (event.eventType === CompatiblePluginEventType.ContentChanged && event.source === CompatibleChangeSource.Paste) {
-        // current focused position in the editor
-        const focusedPosition = editor.getFocusedPosition();
-        // the cursor position relative to the viewport
-        const cursorRect = focusedPosition && getPositionRect(focusedPosition);
-        // the scroll container of the editor
-        const scrollContainer = editor.getScrollContainer();
-        // the scrollContainer position relative to the viewport
-        const scrollContainerRect = 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'
-            });
-        }
-    }
-};
-//# sourceMappingURL=CopyPastePlugin.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { getPositionRect, normalizeRect } from 'roosterjs-editor-dom';\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-editor-types';\nimport {\n  CompatiblePluginEventType,\n  CompatiblePasteType,\n  CompatibleChangeSource\n} from 'roosterjs-editor-types-compatible';\n\n/**\n * CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n */\nexport default class CopyPastePlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  onPluginEvent(event: PluginEvent): void {\n    removeImageElement(event);\n\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event, this.editor);\n    }\n  }\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const removeImageElement = (event: PluginEvent): void => {\n  // We don't support the pasting options such as paste as image yet.\n  if (event.eventType === CompatiblePluginEventType.BeforePaste && event.pasteType === CompatiblePasteType.Normal) {\n    event.fragment.querySelectorAll('img').forEach((image) => {\n      // If the image is the only child of its parent, remove all the parents of this img element.\n      let parentNode: HTMLElement | null = image.parentElement;\n      let currentNode: HTMLElement = image;\n      while (parentNode?.childNodes.length === 1) {\n        currentNode = parentNode;\n        parentNode = parentNode.parentElement;\n      }\n      currentNode?.remove();\n    });\n  }\n};\n\n/**\n * Scrolls the editor's scroll container to the bottom after content is pasted.\n * @param event - The plugin event.\n * @param editor - The editor instance.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent, editor: IEditor): void => {\n  if (event.eventType === CompatiblePluginEventType.ContentChanged && event.source === CompatibleChangeSource.Paste) {\n    // current focused position in the editor\n    const focusedPosition = editor.getFocusedPosition();\n    // the cursor position relative to the viewport\n    const cursorRect = focusedPosition && getPositionRect(focusedPosition);\n    // the scroll container of the editor\n    const scrollContainer = editor.getScrollContainer();\n    // the scrollContainer position relative to the viewport\n    const scrollContainerRect = normalizeRect(scrollContainer.getBoundingClientRect());\n    if (focusedPosition !== null && cursorRect !== null && cursorRect !== undefined && scrollContainerRect !== null) {\n      const textElement = focusedPosition.element;\n      // the caret height is typically the same as the font size of the text\n      const caretHeight = parseFloat(window.getComputedStyle(textElement).fontSize);\n      // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.\n      // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to\n      // translate the scroll position from being relative to the document to being relative to the viewport.\n      // 3. add the top position of the cursor (cursorRect.top) to moves the scroll position to the cursor's position.\n      // 4. subtract a caret height to add some space between the cursor and the top edge of the scrollContainer.\n      const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top - caretHeight;\n      scrollContainer.scrollTo({\n        top: updatedScrollTop,\n        behavior: 'smooth'\n      });\n    }\n  }\n};\n"]}

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { RichTextSendBoxStrings } from './RichTextSendBox';
-/**
- * Props for {@link RichTextEditor}.
- *
- * @private
- */
-export interface RichTextEditorStyleProps {
-    minHeight: string;
-    maxHeight: string;
-}
-/**
- * Props for {@link RichTextEditor}.
- *
- * @private
- */
-export interface RichTextEditorProps {
-    initialContent?: string;
-    content?: string;
-    onChange: (newValue?: string) => void;
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
-    placeholderText?: string;
-    strings: Partial<RichTextSendBoxStrings>;
-    showRichTextEditorFormatting: boolean;
-    styles: RichTextEditorStyleProps;
-    autoFocus?: 'sendBoxTextField';
-}
-/**
- * Props for {@link RichTextEditor}.
- *
- * @beta
- */
-/**
- * Represents a reference to the RichTextEditor component.
- */
-export interface RichTextEditorComponentRef {
-    /**
-     * Sets focus on the RichTextEditor component.
-     */
-    focus: () => void;
-    /**
-     * Sets the content of the RichTextEditor component to an empty string.
-     */
-    setEmptyContent: () => void;
-    /**
-     * Retrieves the plain text content of the RichTextEditor component.
-     * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.
-     */
-    getPlainContent: () => string | undefined;
-}
-/**
- * A component to wrap RoosterJS Rich Text Editor.
- *
- * @beta
- */
-export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RichTextEditorComponentRef>>;
-//# sourceMappingURL=RichTextEditor.d.ts.map