@azure/communication-react 1.16.0-beta.1 → 1.17.0-alpha-202405150013

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

@@ -23,19 +23,17 @@ const TableEditOperationMap = {
 };
 const tableEditInsertMenuItem = {
     key: 'menuNameTableInsert',
-    unlocalizedText: 'Insert123',
+    unlocalizedText: 'Insert',
     subItems: {
-        menuNameTableInsertAbove: 'Insert above121312 ',
+        menuNameTableInsertAbove: 'Insert above',
         menuNameTableInsertBelow: 'Insert below',
-        menuNameTableInsertLeft: 'Insert left123 ',
+        menuNameTableInsertLeft: 'Insert left',
         menuNameTableInsertRight: 'Insert right'
     },
     onClick,
     iconProps: {
         iconName: 'RichTextTableInsertMenuIcon',
-        styles: {
-            root: tableContextMenuIconStyles
-        }
+        styles: { root: tableContextMenuIconStyles }
     }
 };
 const tableEditDeleteMenuItem = {
@@ -49,9 +47,7 @@ const tableEditDeleteMenuItem = {
     onClick,
     iconProps: {
         iconName: 'RichTextTableDeleteMenuIcon',
-        styles: {
-            root: tableContextMenuIconStyles
-        }
+        styles: { root: tableContextMenuIconStyles }
     }
 };
 const tableActions = [tableEditInsertMenuItem, tableEditDeleteMenuItem];
@@ -65,9 +61,6 @@ export const createTableEditMenuProvider = (strings) => {
 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;
+    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 +1 @@
-{"version":3,"file":"RichTextTableContextMenu.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/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;AACnF,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;AACF,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;AACF,MAAM,uBAAuB,GAA4B;IACvD,GAAG,EAAE,qBAAqB;IAC1B,eAAe,EAAE,WAAW;IAC5B,QAAQ,EAAE;QACR,wBAAwB,EAAE,qBAAqB;QAC/C,wBAAwB,EAAE,cAAc;QACxC,uBAAuB,EAAE,iBAAiB;QAC1C,wBAAwB,EAAE,cAAc;KACzC;IACD,OAAO;IACP,SAAS,EAAE;QACT,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE;YACN,IAAI,EAAE,0BAA0B;SACjC;KACF;CACF,CAAC;AACF,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;YACN,IAAI,EAAE,0BAA0B;SACjC;KACF;CACF,CAAC;AACF,MAAM,YAAY,GAA8B,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAkC,EAAgB,EAAE;IAC9F,OAAO,yBAAyB,CAAC,WAAW,EAAE,YAAY,EAAE,uBAAuB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EAAE,CAAC,MAAe,EAAE,IAAU,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AACxK,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAG3C,EAAE;IACT,MAAM,EAAE,GAAI,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAA0B,CAAC;IAC9E,MAAM,KAAK,GAAG,EAAE,IAAK,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAsB,CAAC;IACjF,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,EAAC,CAAC,CAAC;QAChC,KAAK;QACL,EAAE;KACH,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,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';\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};\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};\nconst tableEditInsertMenuItem: ContextMenuItem<string> = {\n  key: 'menuNameTableInsert',\n  unlocalizedText: 'Insert123',\n  subItems: {\n    menuNameTableInsertAbove: 'Insert above121312 ',\n    menuNameTableInsertBelow: 'Insert below',\n    menuNameTableInsertLeft: 'Insert left123 ',\n    menuNameTableInsertRight: 'Insert right'\n  },\n  onClick,\n  iconProps: {\n    iconName: 'RichTextTableInsertMenuIcon',\n    styles: {\n      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: {\n      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('tableEdit', tableActions, tableContextMenuStrings(strings ?? {}), (editor: IEditor, node: Node) => !!getEditingTable(editor, node));\n};\nconst getEditingTable = (editor: IEditor, node: Node): {\n  table: HTMLTableElement;\n  td: HTMLTableCellElement;\n} | null => {\n  const td = (editor.getElementAtCursor('TD,TH', node) as HTMLTableCellElement);\n  const table = td && (editor.getElementAtCursor('table', td) as HTMLTableElement);\n  return table?.isContentEditable ? {\n    table,\n    td\n  } : null;\n};"]}
+{"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.js

@@ -37,7 +37,7 @@ export const insertTable = (editor, columns, rows) => {
             editor.select(new Position(table, CompatiblePositionType.After));
             editor.insertNode(document.createElement('br'));
         }
-        editor.runAsync(editor => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));
+        editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));
     }, CompatibleChangeSource.Format, undefined /* canUndoByBackspace */, {
         formatApiName: 'insertTable'
     });

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

@@ -1 +1 @@
-{"version":3,"file":"insertTableAction.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/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,GAAI,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAsB,CAAC;IACpE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,GAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAyB,CAAC;QACjE,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,GAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAA0B,CAAC;YAClE,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;IACD,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE;QAC1B,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;QACD,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC,EAAE,sBAAsB,CAAC,MAAM,EAAE,SAAS,CAAC,wBAAwB,EAAE;QACpE,aAAa,EAAE,aAAa;KAC7B,CAAC,CAAC;AACL,CAAC,CAAC;AACF,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  editor.focus();\n  editor.addUndoSnapshot(() => {\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    editor.runAsync(editor => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));\n  }, CompatibleChangeSource.Format, undefined /* canUndoByBackspace */, {\n    formatApiName: 'insertTable'\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}"]}
+{"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.js

@@ -31,7 +31,7 @@ export default class CopyPastePlugin {
 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 => {
+        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;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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 { CompatiblePluginEventType, CompatiblePasteType, CompatibleChangeSource } 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  getName(): string {\n    return 'CopyPastePlugin';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n  dispose(): void {}\n  onPluginEvent(event: PluginEvent): void {\n    removeImageElement(event);\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};"]}
+{"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.js

@@ -81,19 +81,26 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             onChange && onChange(content);
         });
         const copyPastePlugin = new CopyPastePlugin();
-        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin, contextPlugin, tableEditMenuProvider, copyPastePlugin];
+        return [
+            contentEdit,
+            placeholderPlugin,
+            updateContentPlugin,
+            ribbonPlugin,
+            contextPlugin,
+            tableEditMenuProvider,
+            copyPastePlugin
+        ];
     }, [onChange, placeholderPlugin, ribbonPlugin, strings]);
     const ribbon = useMemo(() => {
         const buttons = ribbonButtons(theme);
-        return React.createElement(Ribbon, { styles: ribbonStyle, buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
+        return (React.createElement(Ribbon, { styles: ribbonStyle, buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
                 styles: ribbonButtonStyle(theme),
                 menuProps: {
-                    items: [],
-                    // CommandBar will determine items rendered in overflow
+                    items: [], // CommandBar will determine items rendered in overflow
                     isBeakVisible: false,
                     styles: ribbonOverflowButtonStyle(theme)
                 }
-            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' });
+            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
     }, [strings, ribbonPlugin, theme]);
     const defaultFormat = useMemo(() => {
         // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)
@@ -103,7 +110,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             backgroundColor: 'transparent'
         };
     }, []);
-    return React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && ribbon,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
             React.createElement(Rooster, { defaultFormat: defaultFormat, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
@@ -112,7 +119,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 // doNotAdjustEditorColor is used to fix the default background color for Rooster component
                 doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
                 // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
-                onKeyDown: props.onKeyDown, focusOnInit: autoFocus === 'sendBoxTextField' })));
+                onKeyDown: props.onKeyDown, focusOnInit: autoFocus === 'sendBoxTextField' }))));
 });
 const focusAndUpdateContent = (editor, content) => {
     // setting focus before setting content, works for Chrome and Edge but not Safari
@@ -120,9 +127,7 @@ const focusAndUpdateContent = (editor, content) => {
     // this is a recommended way (by RoosterJS team) to set focus at the end of the text
     // RoosterJS v9 has this issue fixed and this code can be removed
     // CompatibleContentPosition.DomEnd shouldn't be used here as it set focus after the editor div
-    editor.insertContent('<span id="focus-position-span"></span>', {
-        position: CompatibleContentPosition.End
-    });
+    editor.insertContent('<span id="focus-position-span"></span>', { position: CompatibleContentPosition.End });
     const elements = editor.queryElements('#focus-position-span');
     if (elements.length > 0) {
         const placeholder = editor.queryElements('#focus-position-span')[0];

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { DefaultFormat, EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { CompatibleContentPosition, CompatibleGetContentMode, CompatiblePositionType } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon, createContextMenuPlugin } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonOverflowButtonStyle, ribbonStyle, richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons } from './Buttons/RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';\nimport { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\n/**\n * Represents a reference to the RichTextEditor component.\n */\nexport interface RichTextEditorComponentRef {\n  /**\n   * Sets focus on the RichTextEditor component.\n   */\n  focus: () => void;\n\n  /**\n   * Sets the content of the RichTextEditor component to an empty string.\n   */\n  setEmptyContent: () => void;\n\n  /**\n   * Retrieves the plain text content of the RichTextEditor component.\n   * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n   */\n  getPlainContent: () => string | undefined;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const {\n    initialContent,\n    onChange,\n    placeholderText,\n    strings,\n    showRichTextEditorFormatting,\n    content,\n    autoFocus\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const contentValue = useRef<string | undefined>(content);\n  const theme = useTheme();\n  useImperativeHandle(ref, () => {\n    return {\n      focus() {\n        if (editor.current) {\n          editor.current.focus();\n        }\n      },\n      setEmptyContent() {\n        if (editor.current) {\n          editor.current.setContent('');\n        }\n      },\n      getPlainContent() {\n        return editor?.current?.getContent(CompatibleGetContentMode.PlainTextFast);\n      }\n    };\n  }, []);\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    const editorValue = new Editor(div, options);\n    // this is to fix issue when editor is created or re-rendered and has existing text\n    // Content model package has a correct behavior and this fix can be deleted\n    if (contentValue.current !== undefined && contentValue.current.length > 0) {\n      // in case if initialContent is not empty, RoosterJS doesn't set caret position to the end.\n      focusAndUpdateContent(editorValue, contentValue.current);\n    } else if (initialContent !== undefined && initialContent.length > 0) {\n      // changing layout in rich text send box cause the editor to be recreated\n      // to keep the content, we need to set messageContent to the current content\n      focusAndUpdateContent(editorValue, initialContent);\n    }\n    editor.current = editorValue;\n    return editorValue;\n  },\n  // trigger force editor reset when strings are changed to update context menu strings\n  // see RosterJS documentation for 'editorCreator' for more details\n  // the editorCreator callback shouldn't be updated when the initialContent is changed\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  [strings]);\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n  const plugins = useMemo(() => {\n    // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n    const contextPlugin = createContextMenuPlugin();\n    const tableEditMenuProvider = createTableEditMenuProvider(strings);\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content: string) => {\n      onChange && onChange(content);\n    });\n    const copyPastePlugin = new CopyPastePlugin();\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin, contextPlugin, tableEditMenuProvider, copyPastePlugin];\n  }, [onChange, placeholderPlugin, ribbonPlugin, strings]);\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n    return <Ribbon styles={ribbonStyle} buttons={buttons} plugin={ribbonPlugin} overflowButtonProps={{\n      styles: ribbonButtonStyle(theme),\n      menuProps: {\n        items: [],\n        // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    }} strings={ribbonButtonsStrings(strings)} data-testid={'rich-text-editor-ribbon'} />;\n  }, [strings, ribbonPlugin, theme]);\n  const defaultFormat: DefaultFormat = useMemo(() => {\n    // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)\n    // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75\n    // this issue is fixed for content model package\n    return {\n      backgroundColor: 'transparent'\n    };\n  }, []);\n  return <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster defaultFormat={defaultFormat} inDarkMode={isDarkThemed(theme)} plugins={plugins} className={richTextEditorStyle(props.styles)} editorCreator={editorCreator}\n      // TODO: confirm the color during inline images implementation\n      imageSelectionBorderColor={'blue'}\n      // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n      doNotAdjustEditorColor={true} data-testid={'rooster-rich-text-editor'}\n      // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n      onKeyDown={props.onKeyDown} focusOnInit={autoFocus === 'sendBoxTextField'} />\n      </div>\n    </div>;\n});\nconst focusAndUpdateContent = (editor: Editor, content: string): void => {\n  // setting focus before setting content, works for Chrome and Edge but not Safari\n  editor.setContent(content);\n  // this is a recommended way (by RoosterJS team) to set focus at the end of the text\n  // RoosterJS v9 has this issue fixed and this code can be removed\n  // CompatibleContentPosition.DomEnd shouldn't be used here as it set focus after the editor div\n  editor.insertContent('<span id=\"focus-position-span\"></span>', {\n    position: CompatibleContentPosition.End\n  });\n  const elements = editor.queryElements('#focus-position-span');\n  if (elements.length > 0) {\n    const placeholder = editor.queryElements('#focus-position-span')[0];\n    editor.select(placeholder, CompatiblePositionType.Before);\n    placeholder.remove();\n  }\n};"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { DefaultFormat, EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport {\n  CompatibleContentPosition,\n  CompatibleGetContentMode,\n  CompatiblePositionType\n} from 'roosterjs-editor-types-compatible';\nimport {\n  Rooster,\n  createUpdateContentPlugin,\n  UpdateMode,\n  createRibbonPlugin,\n  Ribbon,\n  createContextMenuPlugin\n} from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons } from './Buttons/RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';\nimport { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\n/**\n * Represents a reference to the RichTextEditor component.\n */\nexport interface RichTextEditorComponentRef {\n  /**\n   * Sets focus on the RichTextEditor component.\n   */\n  focus: () => void;\n\n  /**\n   * Sets the content of the RichTextEditor component to an empty string.\n   */\n  setEmptyContent: () => void;\n\n  /**\n   * Retrieves the plain text content of the RichTextEditor component.\n   * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n   */\n  getPlainContent: () => string | undefined;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content, autoFocus } =\n    props;\n  const editor = useRef<IEditor | null>(null);\n  const contentValue = useRef<string | undefined>(content);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        },\n        getPlainContent() {\n          return editor?.current?.getContent(CompatibleGetContentMode.PlainTextFast);\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback(\n    (div: HTMLDivElement, options: EditorOptions) => {\n      const editorValue = new Editor(div, options);\n      // this is to fix issue when editor is created or re-rendered and has existing text\n      // Content model package has a correct behavior and this fix can be deleted\n      if (contentValue.current !== undefined && contentValue.current.length > 0) {\n        // in case if initialContent is not empty, RoosterJS doesn't set caret position to the end.\n        focusAndUpdateContent(editorValue, contentValue.current);\n      } else if (initialContent !== undefined && initialContent.length > 0) {\n        // changing layout in rich text send box cause the editor to be recreated\n        // to keep the content, we need to set messageContent to the current content\n        focusAndUpdateContent(editorValue, initialContent);\n      }\n      editor.current = editorValue;\n      return editorValue;\n    },\n    // trigger force editor reset when strings are changed to update context menu strings\n    // see RosterJS documentation for 'editorCreator' for more details\n    // the editorCreator callback shouldn't be updated when the initialContent is changed\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [strings]\n  );\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n    const contextPlugin = createContextMenuPlugin();\n    const tableEditMenuProvider = createTableEditMenuProvider(strings);\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    const copyPastePlugin = new CopyPastePlugin();\n    return [\n      contentEdit,\n      placeholderPlugin,\n      updateContentPlugin,\n      ribbonPlugin,\n      contextPlugin,\n      tableEditMenuProvider,\n      copyPastePlugin\n    ];\n  }, [onChange, placeholderPlugin, ribbonPlugin, strings]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  const defaultFormat: DefaultFormat = useMemo(() => {\n    // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)\n    // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75\n    // this issue is fixed for content model package\n    return {\n      backgroundColor: 'transparent'\n    };\n  }, []);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          defaultFormat={defaultFormat}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n          focusOnInit={autoFocus === 'sendBoxTextField'}\n        />\n      </div>\n    </div>\n  );\n});\n\nconst focusAndUpdateContent = (editor: Editor, content: string): void => {\n  // setting focus before setting content, works for Chrome and Edge but not Safari\n  editor.setContent(content);\n  // this is a recommended way (by RoosterJS team) to set focus at the end of the text\n  // RoosterJS v9 has this issue fixed and this code can be removed\n  // CompatibleContentPosition.DomEnd shouldn't be used here as it set focus after the editor div\n  editor.insertContent('<span id=\"focus-position-span\"></span>', { position: CompatibleContentPosition.End });\n  const elements = editor.queryElements('#focus-position-span');\n  if (elements.length > 0) {\n    const placeholder = editor.queryElements('#focus-position-span')[0];\n    editor.select(placeholder, CompatiblePositionType.Before);\n    placeholder.remove();\n  }\n};\n"]}

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

@@ -19,19 +19,26 @@ export const RichTextInputBoxComponent = (props) => {
     hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content, autoFocus, onTyping } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);
-    const onRenderRichTextEditorIcon = useCallback((isHover) => React.createElement(Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) }), [disabled, showRichTextEditorFormatting, theme]);
+    const onRenderRichTextEditorIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
     const actionButtons = useMemo(() => {
-        return React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
+        return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
             React.createElement(Stack, { horizontal: true },
-                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: e => {
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
                         var _a;
                         setShowRichTextEditorFormatting(!showRichTextEditorFormatting);
                         (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                         e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
                     }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button' }),
                 React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
-                actionComponents));
-    }, [actionComponents, editorComponentRef, onRenderRichTextEditorIcon, showRichTextEditorFormatting, strings.richTextFormatButtonTooltip, theme]);
+                actionComponents)));
+    }, [
+        actionComponents,
+        editorComponentRef,
+        onRenderRichTextEditorIcon,
+        showRichTextEditorFormatting,
+        strings.richTextFormatButtonTooltip,
+        theme
+    ]);
     const richTextEditorStyle = useMemo(() => {
         return richTextEditorStyleProps(showRichTextEditorFormatting);
     }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
@@ -48,17 +55,24 @@ export const RichTextInputBoxComponent = (props) => {
         }
     }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);
     const useHorizontalLayout = useMemo(() => {
-        return !isHorizontalLayoutDisabled && !showRichTextEditorFormatting && /* @conditional-compile-remove(attachment-upload) */ !hasAttachments;
-    }, [isHorizontalLayoutDisabled, showRichTextEditorFormatting, /* @conditional-compile-remove(attachment-upload) */ hasAttachments]);
-    return React.createElement("div", { className: richTextBorderBoxStyle({
+        return (!isHorizontalLayoutDisabled &&
+            !showRichTextEditorFormatting &&
+            /* @conditional-compile-remove(attachment-upload) */ !hasAttachments);
+    }, [
+        isHorizontalLayoutDisabled,
+        showRichTextEditorFormatting,
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachments
+    ]);
+    return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
             disabled: !!disabled
         }) },
         React.createElement(Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
-                    React.createElement(RichTextEditor, { content: content, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle, autoFocus: autoFocus })), /* @conditional-compile-remove(attachment-upload) */
-                onRenderAttachmentUploads && onRenderAttachmentUploads()),
-            actionButtons));
+                    React.createElement(RichTextEditor, { content: content, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle, autoFocus: autoFocus })),
+                /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
+                    onRenderAttachmentUploads()),
+            actionButtons)));
 };
 //# sourceMappingURL=RichTextInputBoxComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport { richTextActionButtonsDividerStyle, richTextActionButtonsStackStyle, richTextActionButtonsStyle, richTextFormatButtonIconStyle } from '../styles/RichTextEditor.styles';\nimport { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRichTextStackStyle, richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-upload) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n  autoFocus?: 'sendBoxTextField';\n  onTyping?: () => Promise<void>;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    content,\n    autoFocus,\n    onTyping\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n  const onRenderRichTextEditorIcon = useCallback((isHover: boolean) => <Icon iconName={isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'} className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))} />, [disabled, showRichTextEditorFormatting, theme]);\n  const actionButtons = useMemo(() => {\n    return <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton onRenderIcon={onRenderRichTextEditorIcon} onClick={e => {\n          setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n          editorComponentRef.current?.focus();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }} ariaLabel={strings.richTextFormatButtonTooltip} tooltipContent={strings.richTextFormatButtonTooltip} className={richTextActionButtonsStyle} data-testId={'rich-text-input-box-format-button'} />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>;\n  }, [actionComponents, editorComponentRef, onRenderRichTextEditorIcon, showRichTextEditorFormatting, strings.richTextFormatButtonTooltip, theme]);\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n  const onKeyDown = useCallback((ev: React.KeyboardEvent<HTMLElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev)) {\n      return;\n    }\n    if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    } else {\n      onTyping?.();\n    }\n  }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);\n  const useHorizontalLayout = useMemo(() => {\n    return !isHorizontalLayoutDisabled && !showRichTextEditorFormatting && /* @conditional-compile-remove(attachment-upload) */!hasAttachments;\n  }, [isHorizontalLayoutDisabled, showRichTextEditorFormatting, /* @conditional-compile-remove(attachment-upload) */hasAttachments]);\n  return <div className={richTextBorderBoxStyle({\n    theme: theme,\n    disabled: !!disabled\n  })}>\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack grow horizontal={useHorizontalLayout} horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'} className={inputBoxContentStackStyle} wrap={useHorizontalLayout}>\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor content={content} initialContent={initialContent} placeholderText={placeholderText} onChange={onChange} onKeyDown={onKeyDown} ref={editorComponentRef} strings={strings} showRichTextEditorFormatting={showRichTextEditorFormatting} styles={richTextEditorStyle} autoFocus={autoFocus} />\n          </Stack.Item>\n          {/* @conditional-compile-remove(attachment-upload) */onRenderAttachmentUploads && onRenderAttachmentUploads()}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>;\n};"]}
+{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-upload) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n  autoFocus?: 'sendBoxTextField';\n  onTyping?: () => Promise<void>;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    content,\n    autoFocus,\n    onTyping\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      } else {\n        onTyping?.();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    return (\n      !isHorizontalLayoutDisabled &&\n      !showRichTextEditorFormatting &&\n      /* @conditional-compile-remove(attachment-upload) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(attachment-upload) */ hasAttachments\n  ]);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              content={content}\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting}\n              styles={richTextEditorStyle}\n              autoFocus={autoFocus}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n              onRenderAttachmentUploads()\n          }\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -1,44 +1,51 @@
 /// <reference types="react" />
 import { SendBoxStrings } from '../SendBox';
-import { AttachmentMetadataWithProgress } from '../../types/Attachment';
+import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui-common/src";
 /**
  * Strings of {@link RichTextSendBox} that can be overridden.
  *
  * @beta
  */
-export interface RichTextSendBoxStrings extends SendBoxStrings {
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+/**
+ * Strings of RichText that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextStrings {
     /**
      * Tooltip text for the bold button.
      */
-    boldTooltip: string;
+    richTextBoldTooltip: string;
     /**
      * Tooltip text for the italic button.
      */
-    italicTooltip: string;
+    richTextItalicTooltip: string;
     /**
      * Tooltip text for the underline button.
      */
-    underlineTooltip: string;
+    richTextUnderlineTooltip: string;
     /**
      * Tooltip text for the bullet list button.
      */
-    bulletListTooltip: string;
+    richTextBulletListTooltip: string;
     /**
      * Tooltip text for the number list button.
      */
-    numberListTooltip: string;
+    richTextNumberListTooltip: string;
     /**
      * Tooltip text for the increase indent button.
      */
-    increaseIndentTooltip: string;
+    richTextIncreaseIndentTooltip: string;
     /**
      * Tooltip text for the decrease indent button.
      */
-    decreaseIndentTooltip: string;
+    richTextDecreaseIndentTooltip: string;
     /**
      * Tooltip text insert table button.
      */
-    insertTableTooltip: string;
+    richTextInsertTableTooltip: string;
     /**
      * Tooltip text for the rich text format button button.
      */
@@ -46,43 +53,43 @@ export interface RichTextSendBoxStrings extends SendBoxStrings {
     /**
      * Text for the insert menu item.
      */
-    insertRowOrColumnMenu: string;
+    richTextInsertRowOrColumnMenu: string;
     /**
      * Title for the insert table menu.
      */
-    insertTableMenuTitle: string;
+    richTextInsertTableMenuTitle: string;
     /**
      * Text for the insert menu item to insert row above the current selection.
      */
-    insertRowAboveMenu: string;
+    richTextInsertRowAboveMenu: string;
     /**
      * Text for the insert menu item to insert row below the current selection.
      */
-    insertRowBelowMenu: string;
+    richTextInsertRowBelowMenu: string;
     /**
      * Text for the insert menu item to insert column to the left from the current selection.
      */
-    insertColumnLeftMenu: string;
+    richTextInsertColumnLeftMenu: string;
     /**
      * Text for the insert menu item to insert column to the right from the current selection.
      */
-    insertColumnRightMenu: string;
+    richTextInsertColumnRightMenu: string;
     /**
      * Text for the delete row or column menu.
      */
-    deleteRowOrColumnMenu: string;
+    richTextDeleteRowOrColumnMenu: string;
     /**
      * Text for the delete column menu.
      */
-    deleteColumnMenu: string;
+    richTextDeleteColumnMenu: string;
     /**
      * Text for the delete row menu.
      */
-    deleteRowMenu: string;
+    richTextDeleteRowMenu: string;
     /**
      * Text for the delete table menu.
      */
-    deleteTableMenu: string;
+    richTextDeleteTableMenu: string;
 }
 /**
  * Props for {@link RichTextSendBox}.
@@ -104,11 +111,11 @@ export interface RichTextSendBoxProps {
      */
     systemMessage?: string;
     /**
-     * Optional array of type {@link AttachmentMetadataWithProgress}
+     * Optional array of type {@link AttachmentMetadataInProgress}
      * to render attachments being uploaded in the SendBox.
      * @beta
      */
-    attachmentsWithProgress?: AttachmentMetadataWithProgress[];
+    attachments?: AttachmentMetadataInProgress[];
     /**
      * enumerable to determine if the input box has focus on render or not.
      * When undefined nothing has focus on render
@@ -123,7 +130,7 @@ export interface RichTextSendBoxProps {
     /**
      * Callback function used when the send button is clicked.
      */
-    onSendMessage: (content: string) => Promise<void>;
+    onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
     /**
      * Optional callback called when user is typing
      */