@azure/communication-react 1.17.0-alpha-202405160013 → 1.17.0-alpha-202405180013

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

@@ -1,7 +0,0 @@
-import { Theme } from '@fluentui/react';
-import { RibbonButton } from 'roosterjs-react';
-/**
- * @private
- */
-export declare const ribbonButtons: (theme: Theme) => RibbonButton<string>[];
-//# sourceMappingURL=RichTextRibbonButtons.d.ts.map

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

@@ -1,86 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { ContextualMenuItemType, Icon } from '@fluentui/react';
-import { KnownRibbonButtonKey, getButtons } from 'roosterjs-react';
-import { ribbonButtonStyle, ribbonDividerStyle } from '../../styles/RichTextEditor.styles';
-import { insertTableButton } from './Table/RichTextInsertTableButton';
-import React from 'react';
-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: ContextualMenuItemType.Divider,
-            // this is still needed to remove checkmark icon space even though it is a divider
-            canCheck: false,
-            onRender: () => React.createElement(Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
-        }
-    };
-};
-const boldButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RichTextBoldButtonIcon');
-};
-const italicButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RichTextItalicButtonIcon');
-};
-const underlineButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RichTextUnderlineButtonIcon');
-};
-const bulletListButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RichTextBulletListButtonIcon');
-};
-const numberListButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RichTextNumberListButtonIcon');
-};
-const indentIncreaseButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RichTextIndentIncreaseButtonIcon');
-};
-const indentDecreaseButton = (theme) => {
-    return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RichTextIndentDecreaseButtonIcon');
-};
-const createKnownRibbonButton = (key, theme, icon) => {
-    var _a;
-    const buttons = 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
- */
-export 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);
-        }
-    });
-    return buttons;
-};
-//# sourceMappingURL=RichTextRibbonButtons.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextRibbonButtons.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Buttons/RichTextRibbonButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenuItemType, Icon, Theme } from '@fluentui/react';\nimport { KnownRibbonButtonKey, RibbonButton, getButtons } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonDividerStyle } from '../../styles/RichTextEditor.styles';\nimport { insertTableButton } from './Table/RichTextInsertTableButton';\nimport React from 'react';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\nconst dividerRibbonButton = (theme: Theme, key: string): RibbonButton<string> => {\n  return {\n    key: key,\n    // the icon will be set in `onRender` callback\n    // this is needed to make the divider unavailable for keyboard navigation\n    iconName: '',\n    // no text is needed here as we don't want to show a tooltip for the divider\n    unlocalizedText: '',\n    onClick: () => {},\n    isDisabled: () => true,\n    commandBarProperties: {\n      // show the item correctly for the overflow menu\n      itemType: ContextualMenuItemType.Divider,\n      // this is still needed to remove checkmark icon space even though it is a divider\n      canCheck: false,\n      onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n    }\n  };\n};\n\nconst boldButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RichTextBoldButtonIcon');\n};\n\nconst italicButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RichTextItalicButtonIcon');\n};\n\nconst underlineButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RichTextUnderlineButtonIcon');\n};\n\nconst bulletListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RichTextBulletListButtonIcon');\n};\n\nconst numberListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RichTextNumberListButtonIcon');\n};\n\nconst indentIncreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RichTextIndentIncreaseButtonIcon');\n};\n\nconst indentDecreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RichTextIndentDecreaseButtonIcon');\n};\n\nconst createKnownRibbonButton = (\n  key: KnownRibbonButtonKey,\n  theme: Theme,\n  icon: string\n): RibbonButton<string> | undefined => {\n  const buttons = getButtons([key]);\n  if (buttons.length > 0) {\n    const button = buttons[0];\n    // AllButtonStringKeys is a union of all the string keys of all the buttons\n    const result = buttons[0] as RibbonButton<typeof button.key>;\n    button.iconName = icon;\n    button.commandBarProperties = {\n      ...button.commandBarProperties,\n      buttonStyles: {\n        ...button.commandBarProperties?.buttonStyles,\n        ...ribbonButtonStyle(theme)\n      },\n      canCheck: false\n    };\n    return result;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const ribbonButtons = (theme: Theme): RibbonButton<string>[] => {\n  const buttons: RibbonButton<string>[] = [];\n  [\n    boldButton(theme),\n    italicButton(theme),\n    underlineButton(theme),\n    dividerRibbonButton(theme, 'RichTextRibbonTextFormatDivider'),\n    bulletListButton(theme),\n    numberListButton(theme),\n    indentDecreaseButton(theme),\n    indentIncreaseButton(theme),\n    dividerRibbonButton(theme, 'RichTextRibbonTableDivider'),\n    insertTableButton(theme, MaxRowsNumber, MaxColumnsNumber)\n  ].forEach((item) => {\n    if (item !== undefined) {\n      buttons.push(item);\n    }\n  });\n\n  return buttons;\n};\n"]}

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

@@ -1,7 +0,0 @@
-import type { RibbonButton } from 'roosterjs-react';
-import type { Theme } from '@fluentui/react';
-/**
- * "Insert table" button for the RoosterJS ribbon
- */
-export declare const insertTableButton: (theme: Theme, maxRowsNumber: number, maxColumnsNumber: number) => RibbonButton<string>;
-//# sourceMappingURL=RichTextInsertTableButton.d.ts.map

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.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EACL,uCAAuC,EACvC,+BAA+B,EAC/B,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,kGAAkG;AAClG,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAShC;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAC5D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,MAAoB,EAAE,EAAE;QACvB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACpG,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAEzC,IACE,MAAM,IAAI,qBAAqB;gBAC/B,MAAM,GAAG,gBAAgB;gBACzB,GAAG,IAAI,qBAAqB;gBAC5B,GAAG,GAAG,aAAa,EACnB,CAAC;gBACD,SAAS,CAAC,MAAM,CAAC,CAAC;gBAClB,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAClC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAsC,EAAE,EAAE;QACzC,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,CAAsC,EAAE,EAAE;QACzC,OAAO,CAAC,CAAC,kCACJ,IAAI,KACP,GAAG,EAAE,SAAS,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,IACrE,CAAC;IACL,CAAC,EACD,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAC7B,CAAC;IAEF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QAC/B,MAAM,KAAK,GAAkB,EAAE,CAAC;QAEhC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC1C,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,MAAM,UAAU,GAAG,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC;gBAC3C,KAAK,CAAC,IAAI,CACR,gCACE,SAAS,EAAE,WAAW,CACpB,+BAA+B,CAAC,KAAK,CAAC,EACtC,UAAU,CAAC,CAAC,CAAC,uCAAuC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CACxE,EACD,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,iBACM,CAAC,cACJ,CAAC,uBACQ,IAAI,EACvB,YAAY,EAAE,YAAY,gBACd,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,iBAC1E,GAAG,GAChB,CACH,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElG,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;;QACxB,OAAO,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,0BAA0B,IAAG,IAAI,CAAO;QACxD,oBAAC,SAAS,IACR,sBAAsB,EAAE,QAAQ,qBAAqB,IAAI,qBAAqB,EAAE,EAChF,SAAS,EAAE,kBAAkB,CAAC,aAAa,EAC3C,sBAAsB,EAAE,UAAU,EAClC,SAAS,EAAE,wBAAwB,CAAC,KAAK,CAAC,IAEzC,KAAK,CACI,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,MAAc,EAAU,EAAE;IACvE,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,sBAAsB,EAAE,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAC/F,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAU,EAAE;IACpD,OAAO,KAAK,GAAG,CAAC,CAAC;AACnB,CAAC,CAAC","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/utils/RichTextEditorStringsUtils.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1,39 +0,0 @@
-// 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.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
-    };
-};
-/**
- * @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.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
-    };
-};
-//# sourceMappingURL=RichTextEditorStringsUtils.js.map

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

@@ -1 +0,0 @@
-{"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,mBAAmB;QAC3C,gBAAgB,EAAE,OAAO,CAAC,qBAAqB;QAC/C,mBAAmB,EAAE,OAAO,CAAC,wBAAwB;QACrD,sBAAsB,EAAE,OAAO,CAAC,yBAAyB;QACzD,sBAAsB,EAAE,OAAO,CAAC,yBAAyB;QACzD,wBAAwB,EAAE,OAAO,CAAC,6BAA6B;QAC/D,wBAAwB,EAAE,OAAO,CAAC,6BAA6B;QAC/D,qBAAqB,EAAE,OAAO,CAAC,0BAA0B;QACzD,eAAe,EAAE,OAAO,CAAC,4BAA4B;KACtD,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,OAAwC,EAA4B,EAAE;IAC5G,OAAO;QACL,mBAAmB,EAAE,OAAO,CAAC,6BAA6B;QAC1D,wBAAwB,EAAE,OAAO,CAAC,0BAA0B;QAC5D,wBAAwB,EAAE,OAAO,CAAC,0BAA0B;QAC5D,uBAAuB,EAAE,OAAO,CAAC,4BAA4B;QAC7D,wBAAwB,EAAE,OAAO,CAAC,6BAA6B;QAC/D,mBAAmB,EAAE,OAAO,CAAC,6BAA6B;QAC1D,yBAAyB,EAAE,OAAO,CAAC,wBAAwB;QAC3D,sBAAsB,EAAE,OAAO,CAAC,qBAAqB;QACrD,wBAAwB,EAAE,OAAO,CAAC,uBAAuB;KAC1D,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.richTextBoldTooltip,\n    buttonNameItalic: strings.richTextItalicTooltip,\n    buttonNameUnderline: strings.richTextUnderlineTooltip,\n    buttonNameBulletedList: strings.richTextBulletListTooltip,\n    buttonNameNumberedList: strings.richTextNumberListTooltip,\n    buttonNameIncreaseIndent: strings.richTextIncreaseIndentTooltip,\n    buttonNameDecreaseIndent: strings.richTextDecreaseIndentTooltip,\n    buttonNameInsertTable: strings.richTextInsertTableTooltip,\n    insertTablePane: strings.richTextInsertTableMenuTitle\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.richTextInsertRowOrColumnMenu,\n    menuNameTableInsertAbove: strings.richTextInsertRowAboveMenu,\n    menuNameTableInsertBelow: strings.richTextInsertRowBelowMenu,\n    menuNameTableInsertLeft: strings.richTextInsertColumnLeftMenu,\n    menuNameTableInsertRight: strings.richTextInsertColumnRightMenu,\n    menuNameTableDelete: strings.richTextDeleteRowOrColumnMenu,\n    menuNameTableDeleteColumn: strings.richTextDeleteColumnMenu,\n    menuNameTableDeleteRow: strings.richTextDeleteRowMenu,\n    menuNameTableDeleteTable: strings.richTextDeleteTableMenu\n  };\n};\n"]}