@azure/communication-react 1.18.0-alpha-202407200014 → 1.18.0-alpha-202407262302

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAUxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC1F,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACb,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAoD,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAyD3E;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7G,MAAM,EACJ,cAAc,EACd,QAAQ,EACR,eAAe,EACf,OAAO,EACP,4BAA4B,EAC5B,SAAS,EACT,SAAS,EACT,oBAAoB,EACpB,YAAY;IACZ,gEAAgE;IAChE,OAAO;IACP,gEAAgE;IAChE,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA8B,IAAI,CAAC,CAAC;IAC5F,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAE7D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,KAAK;gBACH,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;YACD,eAAe;gBACb,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,0DAA0D;oBAC1D,+DAA+D;oBAC/D,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KAAyC,EAAW,EAAE;wBACvF,qDAAqD;wBACrD,+EAA+E;wBAC/E,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;wBACpC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;wBAC/B,OAAO,IAAI,CAAC;oBACd,CAAC,CAAC,CAAC;oBACH,qBAAqB;oBACrB,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;gBACnG,CAAC;YACH,CAAC;YACD,eAAe;gBACb,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,OAAO,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;gBACxD,CAAC;qBAAM,CAAC;oBACN,OAAO,SAAS,CAAC;gBACnB,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,IAAI,qBAAqB,EAAE,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,CAAC;QAClD,OAAO,IAAI,iBAAiB,CAC1B,EAAE,EACF,SAAS;YACP,CAAC,CAAC;gBACE,SAAS,EAAE,SAAS;aACrB;YACH,CAAC,CAAC,SAAS,CACd,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,oBAAC,eAAe,IAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;IACtE,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,IAAI,mBAAmB,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,eAAe,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,wFAAwF;QACxF,YAAY,CAAC,QAAQ,GAAG,CAAC,KAAa,EAAE,aAA6B,EAAE,EAAE;YACvE,IAAI,MAAM,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YACD,IAAI,KAAK,KAAK,WAAW,CAAC,IAAI,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;gBAChE,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;YACnG,CAAC;iBAAM,CAAC;gBACN,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC;YACrE,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEnD,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;IAC5D,CAAC,EAAE,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE3C,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,IAAI,mBAAmB,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,wFAAwF;QACxF,mBAAmB,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C,CAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,CAAC;IAErC,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,IAAI,4BAA4B,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtC,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,SAAsB,EAAE,KAA4B,EAAE,SAAqB,EAAQ,EAAE;QACpF,mBAAmB,CAAC;YAClB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC;IACL,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAS,EAAE;QAClD,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,MAAM,OAAO,GAAmB,OAAO,CAAC,GAAG,EAAE;QAC3C,MAAM,WAAW,GAAG,IAAI,UAAU,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5D,4DAA4D;QAC5D,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACzG,MAAM,kBAAkB,GAAG,IAAI,WAAW,CAAC,KAAK,EAAE;YAChD,wBAAwB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC;YACpE,qBAAqB,EAAE,EAAE;YACzB,eAAe,EAAE,iBAAiB;YAClC,mBAAmB,EAAE,EAAE;SACxB,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAC5C,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;QAC3F,OAAO;YACL,iBAAiB;YACjB,mBAAmB;YACnB,WAAW;YACX,gBAAgB;YAChB,YAAY;YACZ,eAAe;YACf,kBAAkB;YAClB,aAAa;YACb,cAAc;YACd,yFAAyF;YACzF,iBAAiB;YACjB,sBAAsB;SACvB,CAAC;IACJ,CAAC,EAAE;QACD,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,mBAAmB;QACnB,YAAY;QACZ,eAAe;QACf,aAAa;QACb,sBAAsB;KACvB,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,GAAyB,EAAU,EAAE;;QACpC,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,wBAAwB;gBAC3B,OAAO,MAAA,OAAO,CAAC,uCAAuC,mCAAI,EAAE,CAAC;YAC/D,KAAK,2BAA2B;gBAC9B,OAAO,MAAA,OAAO,CAAC,uCAAuC,mCAAI,EAAE,CAAC;YAC/D,KAAK,yBAAyB;gBAC5B,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,uCAAuC,EAAE,OAAO,CAAC,uCAAuC,CAAC,CACnG,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,wBAAwB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAC5E,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE;gBAC7C,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC;gBAC/B,qGAAqG;gBACrG,sBAAsB,EAAE,IAAI;gBAC5B,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;gBACrD,iCAAiC,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;gBAC7D,OAAO,EAAE,OAAO;gBAChB,YAAY,EAAE,YAAY;gBAC1B,wBAAwB,EAAE;oBACxB,qBAAqB,EAAE;wBACrB,6CAA6C;wBAC7C,MAAM,EAAE,aAAa;wBACrB,OAAO,EAAE,cAAc;qBACxB;iBACF;gBACD,qBAAqB,EAAE,qBAAqB;aAC7C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,SAAS,KAAK,kBAAkB,EAAE,CAAC;YACrC,MAAA,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;gBACnB,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBACzB,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,+FAA+F;QAC/F,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAClD,0DAA0D;QAC1D,sEAAsE;QACtE,IAAI,MAAM,CAAC,OAAO,IAAI,sBAAsB,CAAC,OAAO,KAAK,mBAAmB,EAAE,CAAC;YAC7E,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC9C,IAAI,MAAM,CAAC,SAAS,KAAK,mBAAmB,EAAE,CAAC;gBAC7C,mFAAmF;gBACnF,wHAAwH;gBACxH,qDAAqD;gBACrD,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YAC1D,CAAC;YACD,sBAAsB,CAAC,OAAO,GAAG,mBAAmB,CAAC;QACvD,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,4CAAkB,0BAA0B;QACzC,4BAA4B,IAAI,OAAO;QACxC,6BAAK,SAAS,EAAE,0BAA0B,CAAC,KAAK,CAAC;YAE/C,6BACE,EAAE,EAAC,iBAAiB,EACpB,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,oBACC,MAAM,iBACR,0BAA0B,EACvC,SAAS,EAAE,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,gBAChC,eAAe,GAC3B,CACE;QACL,gBAAgB,IAAI,oBAAC,cAAc,oBAAK,gBAAgB,IAAE,YAAY,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CACjG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,CAC/B,cAAuB,EACvB,YAAmC,EACD,EAAE;IACpC,IAAI,YAAY,EAAE,CAAC;QACjB,oDAAoD;QACpD,OAAO,YAAY,CAAC;IACtB,CAAC;SAAM,CAAC;QACN,MAAM,mBAAmB,GAAG,cAAc,CAAC;QAC3C,MAAM,YAAY,GAChB,mBAAmB,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/G,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,6EAA6E;YAC7E,yCAAyC;YACzC,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACtE,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,MAAK,WAAW,EAAE,CAAC;gBACzC,6BAA6B;gBAC7B,4BAA4B,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;gBACrC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAChC,4BAA4B,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;gBAClD,iFAAiF;gBACjF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,KAAqC,EAAE,KAA4B,EAAQ,EAAE;IACjH,MAAM,MAAM,GAAG,qBAAqB,EAAE,CAAC;IACvC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5B,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAY,EAAiB,EAAE;IACrD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;AACnC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n  ContentModelDocument,\n  ContentModelParagraph,\n  EditorPlugin,\n  IEditor,\n  ReadonlyContentModelBlockGroup,\n  ShallowMutableContentModelDocument,\n  KnownAnnounceStrings\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport {\n  createBr,\n  createEmptyModel,\n  createParagraph,\n  createSelectionMarker,\n  setSelection\n} from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport {\n  AutoFormatPlugin,\n  EditPlugin,\n  PastePlugin,\n  ShortcutPlugin,\n  DefaultSanitizers\n} from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\n\n/**\n * Style 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  onChange: (newValue?: string, imageSrcArray?: Array<string>) => void;\n  onKeyDown?: (ev: KeyboardEvent) => void;\n  // update the current content of the rich text editor\n  onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;\n  contentModel?: ContentModelDocument | undefined;\n  placeholderText?: string;\n  strings: Partial<RichTextStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n}\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    autoFocus,\n    onKeyDown,\n    onContentModelUpdate,\n    contentModel,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const editorDiv = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);\n  const previousThemeDirection = useRef(themeDirection(theme));\n\n  useImperativeHandle(ref, () => {\n    return {\n      focus() {\n        if (editor.current) {\n          editor.current.focus();\n        }\n      },\n      setEmptyContent() {\n        if (editor.current) {\n          // remove all content from the editor and update the model\n          // ContentChanged event will be sent by RoosterJS automatically\n          editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n            // Create a new empty paragraph with selection marker\n            // this is needed for correct processing of images after the content is deleted\n            const newModel = createEmptyModel();\n            model.blocks = newModel.blocks;\n            return true;\n          });\n          //reset content model\n          onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n        }\n      },\n      getPlainContent() {\n        if (editor.current) {\n          return exportContent(editor.current, 'PlainTextFast');\n        } else {\n          return undefined;\n        }\n      }\n    };\n  }, [onContentModelUpdate]);\n\n  const toolbarPlugin = React.useMemo(() => {\n    return new RichTextToolbarPlugin();\n  }, []);\n\n  const placeholderPlugin = useMemo(() => {\n    const textColor = theme.palette?.neutralSecondary;\n    return new PlaceholderPlugin(\n      '',\n      textColor\n        ? {\n            textColor: textColor\n          }\n        : undefined\n    );\n  }, [theme]);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updatePlaceholder(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const toolbar = useMemo(() => {\n    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n  }, [strings, toolbarPlugin]);\n\n  const updatePlugin = useMemo(() => {\n    return new UpdateContentPlugin();\n  }, []);\n\n  const copyPastePlugin = useMemo(() => {\n    return new CopyPastePlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    updatePlugin.onUpdate = (event: string, imageSrcArray?: Array<string>) => {\n      if (editor.current === null) {\n        return;\n      }\n      if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {\n        onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n      } else {\n        onChange && onChange(exportContent(editor.current), imageSrcArray);\n      }\n    };\n  }, [onChange, onContentModelUpdate, updatePlugin]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onUploadInlineImage = onUploadInlineImage;\n  }, [copyPastePlugin, onUploadInlineImage]);\n\n  const keyboardInputPlugin = useMemo(() => {\n    return new KeyboardInputPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    keyboardInputPlugin.onKeyDown = onKeyDown;\n  }, [keyboardInputPlugin, onKeyDown]);\n\n  const tableContextMenuPlugin = useMemo(() => {\n    return new TableEditContextMenuProvider();\n  }, []);\n\n  useEffect(() => {\n    tableContextMenuPlugin.updateStrings(strings);\n  }, [tableContextMenuPlugin, strings]);\n\n  const onContextMenuRender = useCallback(\n    (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n      setContextMenuProps({\n        items: items,\n        target: container,\n        onDismiss: onDismiss\n      });\n    },\n    []\n  );\n\n  const onContextMenuDismiss = useCallback((): void => {\n    setContextMenuProps(null);\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onPaste = onPaste;\n  }, [copyPastePlugin, onPaste]);\n\n  const plugins: EditorPlugin[] = useMemo(() => {\n    const contentEdit = new EditPlugin({ handleTabKey: false });\n    // AutoFormatPlugin previously was a part of the edit plugin\n    const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n    const roosterPastePlugin = new PastePlugin(false, {\n      additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n      additionalAllowedTags: [],\n      styleSanitizers: DefaultSanitizers,\n      attributeSanitizers: {}\n    });\n\n    const shortcutPlugin = new ShortcutPlugin();\n    const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n    return [\n      placeholderPlugin,\n      keyboardInputPlugin,\n      contentEdit,\n      autoFormatPlugin,\n      updatePlugin,\n      copyPastePlugin,\n      roosterPastePlugin,\n      toolbarPlugin,\n      shortcutPlugin,\n      // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n      contextMenuPlugin,\n      tableContextMenuPlugin\n    ];\n  }, [\n    onContextMenuRender,\n    onContextMenuDismiss,\n    placeholderPlugin,\n    keyboardInputPlugin,\n    updatePlugin,\n    copyPastePlugin,\n    toolbarPlugin,\n    tableContextMenuPlugin\n  ]);\n\n  const announcerStringGetter = useCallback(\n    (key: KnownAnnounceStrings): string => {\n      switch (key) {\n        case 'announceListItemBullet':\n          return strings.richTextNewBulletedListItemAnnouncement ?? '';\n        case 'announceListItemNumbering':\n          return strings.richTextNewNumberedListItemAnnouncement ?? '';\n        case 'announceOnFocusLastCell':\n          return '';\n      }\n    },\n    [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]\n  );\n\n  useEffect(() => {\n    const initialModel = createEditorInitialModel(initialContent, contentModel);\n    if (editorDiv.current) {\n      editor.current = new Editor(editorDiv.current, {\n        inDarkMode: isDarkThemed(theme),\n        // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n        doNotAdjustEditorColor: true,\n        imageSelectionBorderColor: theme.palette.themePrimary,\n        tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n        plugins: plugins,\n        initialModel: initialModel,\n        defaultModelToDomOptions: {\n          formatApplierOverride: {\n            // apply border and dataset formats for table\n            border: borderApplier,\n            dataset: dataSetApplier\n          }\n        },\n        announcerStringGetter: announcerStringGetter\n      });\n    }\n\n    if (autoFocus === 'sendBoxTextField') {\n      editor.current?.focus();\n    }\n\n    return () => {\n      if (editor.current) {\n        editor.current.dispose();\n        editor.current = null;\n      }\n    };\n    // don't update the editor on deps update as everything is handled in separate hooks or plugins\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [theme, plugins, announcerStringGetter]);\n\n  useEffect(() => {\n    const themeDirectionValue = themeDirection(theme);\n    // check that editor exists and theme was actually changed\n    // as format.direction will be undefined if setDirection is not called\n    if (editor.current && previousThemeDirection.current !== themeDirectionValue) {\n      const format = getFormatState(editor.current);\n      if (format.direction !== themeDirectionValue) {\n        // should be set after the hook where editor is created as the editor might be null\n        // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)\n        // that's why it's not part of the create editor hook\n        setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');\n      }\n      previousThemeDirection.current = themeDirectionValue;\n    }\n  }, [theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && toolbar}\n      <div className={richTextEditorWrapperStyle(theme)}>\n        {/* div that is used by Rooster JS as a parent of the editor */}\n        <div\n          id=\"richTextSendBox\"\n          ref={editorDiv}\n          tabIndex={0}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          data-testid={'rooster-rich-text-editor'}\n          className={richTextEditorStyle(props.styles)}\n          aria-label={placeholderText}\n        />\n      </div>\n      {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n    </div>\n  );\n});\n\nconst createEditorInitialModel = (\n  initialContent?: string,\n  contentModel?: ContentModelDocument\n): ContentModelDocument | undefined => {\n  if (contentModel) {\n    // contentModel is the current content of the editor\n    return contentModel;\n  } else {\n    const initialContentValue = initialContent;\n    const initialModel =\n      initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n    if (initialModel && initialModel.blocks.length > 0) {\n      // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n      // to set focus to the end of the content\n      const lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n      if (lastBlock?.blockType === 'Paragraph') {\n        // now lastBlock is paragraph\n        setSelectionAfterLastSegment(initialModel, lastBlock);\n      } else {\n        const block = createParagraph(false);\n        initialModel.blocks.push(block);\n        setSelectionAfterLastSegment(initialModel, block);\n        // add content to the paragraph, otherwise height might be calculated incorrectly\n        block.segments.push(createBr());\n      }\n    }\n    return initialModel;\n  }\n};\n\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n  const marker = createSelectionMarker();\n  block.segments.push(marker);\n  setSelection(model, marker);\n};\n\nconst themeDirection = (theme: Theme): 'rtl' | 'ltr' => {\n  return theme.rtl ? 'rtl' : 'ltr';\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, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n  ContentModelDocument,\n  ContentModelParagraph,\n  EditorPlugin,\n  IEditor,\n  ReadonlyContentModelBlockGroup,\n  ShallowMutableContentModelDocument\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier, DefaultSanitizers } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\n\n/**\n * Style 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  onChange: (newValue?: string, imageSrcArray?: Array<string>) => void;\n  onKeyDown?: (ev: KeyboardEvent) => void;\n  // update the current content of the rich text editor\n  onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;\n  contentModel?: ContentModelDocument | undefined;\n  placeholderText?: string;\n  strings: Partial<RichTextStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n}\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    autoFocus,\n    onKeyDown,\n    onContentModelUpdate,\n    contentModel,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const editorDiv = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);\n  const previousThemeDirection = useRef(themeDirection(theme));\n\n  useImperativeHandle(ref, () => {\n    return {\n      focus() {\n        if (editor.current) {\n          editor.current.focus();\n        }\n      },\n      setEmptyContent() {\n        if (editor.current) {\n          // remove all content from the editor and update the model\n          // ContentChanged event will be sent by RoosterJS automatically\n          editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n            // Create a new empty paragraph with selection marker\n            // this is needed for correct processing of images after the content is deleted\n            const block = createParagraph(true);\n            setSelectionAfterLastSegment(model, block);\n            model.blocks = [block];\n            return true;\n          });\n          //reset content model\n          onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n        }\n      },\n      getPlainContent() {\n        if (editor.current) {\n          return exportContent(editor.current, 'PlainTextFast');\n        } else {\n          return undefined;\n        }\n      }\n    };\n  }, [onContentModelUpdate]);\n\n  const toolbarPlugin = React.useMemo(() => {\n    return new RichTextToolbarPlugin();\n  }, []);\n\n  const isDarkThemedValue = useMemo(() => {\n    return isDarkThemed(theme);\n  }, [theme]);\n\n  useEffect(() => {\n    editor.current?.setDarkModeState(isDarkThemedValue);\n  }, [isDarkThemedValue]);\n\n  const placeholderPlugin = useMemo(() => {\n    const textColor = theme.palette?.neutralSecondary;\n    return new PlaceholderPlugin(\n      '',\n      textColor\n        ? {\n            textColor: textColor\n          }\n        : undefined\n    );\n  }, [theme]);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updatePlaceholder(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const toolbar = useMemo(() => {\n    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n  }, [strings, toolbarPlugin]);\n\n  const updatePlugin = useMemo(() => {\n    return new UpdateContentPlugin();\n  }, []);\n\n  const copyPastePlugin = useMemo(() => {\n    return new CopyPastePlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    updatePlugin.onUpdate = (event: string, imageSrcArray?: Array<string>) => {\n      if (editor.current === null) {\n        return;\n      }\n      if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {\n        onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n      } else {\n        onChange && onChange(exportContent(editor.current), imageSrcArray);\n      }\n    };\n  }, [onChange, onContentModelUpdate, updatePlugin]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onUploadInlineImage = onUploadInlineImage;\n  }, [copyPastePlugin, onUploadInlineImage]);\n\n  const keyboardInputPlugin = useMemo(() => {\n    return new KeyboardInputPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    keyboardInputPlugin.onKeyDown = onKeyDown;\n  }, [keyboardInputPlugin, onKeyDown]);\n\n  const tableContextMenuPlugin = useMemo(() => {\n    return new TableEditContextMenuProvider();\n  }, []);\n\n  useEffect(() => {\n    tableContextMenuPlugin.updateStrings(strings);\n  }, [tableContextMenuPlugin, strings]);\n\n  const onContextMenuRender = useCallback(\n    (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n      setContextMenuProps({\n        items: items,\n        target: container,\n        onDismiss: onDismiss\n      });\n    },\n    []\n  );\n\n  const onContextMenuDismiss = useCallback((): void => {\n    setContextMenuProps(null);\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onPaste = onPaste;\n  }, [copyPastePlugin, onPaste]);\n\n  const plugins: EditorPlugin[] = useMemo(() => {\n    const contentEdit = new EditPlugin({ handleTabKey: false });\n    // AutoFormatPlugin previously was a part of the edit plugin\n    const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n    const roosterPastePlugin = new PastePlugin(false, {\n      additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n      additionalAllowedTags: [],\n      styleSanitizers: DefaultSanitizers,\n      attributeSanitizers: {}\n    });\n\n    const shortcutPlugin = new ShortcutPlugin();\n    const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n    return [\n      placeholderPlugin,\n      keyboardInputPlugin,\n      contentEdit,\n      autoFormatPlugin,\n      updatePlugin,\n      copyPastePlugin,\n      roosterPastePlugin,\n      toolbarPlugin,\n      shortcutPlugin,\n      // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n      contextMenuPlugin,\n      tableContextMenuPlugin\n    ];\n  }, [\n    onContextMenuRender,\n    onContextMenuDismiss,\n    placeholderPlugin,\n    keyboardInputPlugin,\n    updatePlugin,\n    copyPastePlugin,\n    toolbarPlugin,\n    tableContextMenuPlugin\n  ]);\n\n  useEffect(() => {\n    const initialModel = createEditorInitialModel(initialContent, contentModel);\n    if (editorDiv.current) {\n      editor.current = new Editor(editorDiv.current, {\n        inDarkMode: isDarkThemedValue,\n        // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n        doNotAdjustEditorColor: true,\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor: 'blue',\n        tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n        plugins: plugins,\n        initialModel: initialModel,\n        defaultModelToDomOptions: {\n          formatApplierOverride: {\n            // apply border and dataset formats for table\n            border: borderApplier,\n            dataset: dataSetApplier\n          }\n        }\n      });\n    }\n\n    if (autoFocus === 'sendBoxTextField') {\n      editor.current?.focus();\n    }\n\n    return () => {\n      if (editor.current) {\n        editor.current.dispose();\n        editor.current = null;\n      }\n    };\n    // don't update the editor on deps update as everything is handled in separate hooks or plugins\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [theme, plugins]);\n\n  useEffect(() => {\n    const themeDirectionValue = themeDirection(theme);\n    // check that editor exists and theme was actually changed\n    // as format.direction will be undefined if setDirection is not called\n    if (editor.current && previousThemeDirection.current !== themeDirectionValue) {\n      const format = getFormatState(editor.current);\n      if (format.direction !== themeDirectionValue) {\n        // should be set after the hook where editor is created as the editor might be null\n        // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)\n        // that's why it's not part of the create editor hook\n        setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');\n      }\n      previousThemeDirection.current = themeDirectionValue;\n    }\n  }, [theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && toolbar}\n      <div className={richTextEditorWrapperStyle(theme)}>\n        {/* div that is used by Rooster JS as a parent of the editor */}\n        <div\n          id=\"richTextSendBox\"\n          ref={editorDiv}\n          tabIndex={0}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          data-testid={'rooster-rich-text-editor'}\n          className={richTextEditorStyle(props.styles)}\n          aria-label={placeholderText}\n        />\n      </div>\n      {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n    </div>\n  );\n});\n\nconst createEditorInitialModel = (\n  initialContent?: string,\n  contentModel?: ContentModelDocument\n): ContentModelDocument | undefined => {\n  if (contentModel) {\n    // contentModel is the current content of the editor\n    return contentModel;\n  } else {\n    const initialContentValue = initialContent;\n    const initialModel =\n      initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n    if (initialModel && initialModel.blocks.length > 0) {\n      // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n      // to set focus to the end of the content\n      let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n      if (lastBlock?.blockType === 'Paragraph') {\n        // now lastBlock is paragraph\n      } else {\n        lastBlock = createParagraph(true);\n        initialModel.blocks.push(lastBlock);\n      }\n      setSelectionAfterLastSegment(initialModel, lastBlock);\n    }\n    return initialModel;\n  }\n};\n\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n  const marker = createSelectionMarker();\n  block.segments.push(marker);\n  setSelection(model, marker);\n};\n\nconst themeDirection = (theme: Theme): 'rtl' | 'ltr' => {\n  return theme.rtl ? 'rtl' : 'ltr';\n};\n"]}

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

@@ -8,39 +8,6 @@ import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui
  */
 export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
 }
-/**
- * Options for the rich text editor configuration.
- *
- * @beta
- */
-export interface RichTextEditorOptions {
-    /**
-     * Optional callback to handle paste event.
-     */
-    onPaste?: (event: {
-        content: DocumentFragment;
-    }) => void;
-}
-/**
- * Options for the rich text editor send box configuration.
- *
- * @beta
- */
-export interface RichTextSendBoxOptions extends RichTextEditorOptions {
-    /**
-     * Optional callback to upload an inline image in the rich text editor.
-     */
-    onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;
-    /**
-     * Optional callback to remove the attachment upload or delete the image before sending.
-     */
-    onCancelInlineImageUpload?: (imageId: string) => void;
-    /**
-     * Optional Array of type {@link AttachmentMetadataInProgress}
-     * to render inline images being uploaded in the RichTextSendBox.
-     */
-    imageUploadsInProgress?: AttachmentMetadataInProgress[];
-}
 /**
  * Strings of RichText that can be overridden.
  *
@@ -127,22 +94,6 @@ export interface RichTextStrings {
      * Text for the rich text toolbar more button.
      */
     richTextToolbarMoreButtonAriaLabel: string;
-    /**
-     * Text for announcement when a new bulleted list item is added.
-     */
-    richTextNewBulletedListItemAnnouncement: string;
-    /**
-     * Text for announcement when a new numbered list item is added.
-     */
-    richTextNewNumberedListItemAnnouncement: string;
-    /**
-     * Text for announcement when the bulleted list style is applied.
-     */
-    richTextBulletedListAppliedAnnouncement: string;
-    /**
-     * Text for announcement when the numbered list style is applied.
-     */
-    richTextNumberedListAppliedAnnouncement: string;
 }
 /**
  * Props for {@link RichTextSendBox}.

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

@@ -69,13 +69,7 @@ export const RichTextSendBox = (props) => {
     const onChangeHandler = useCallback((newValue, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageSrcArray) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        cancelInlineImageUpload({
-            imageSrcArray,
-            imageUploadsInProgress,
-            messageId: undefined,
-            editBoxOnCancelInlineImageUpload: undefined,
-            sendBoxOnCancelInlineImageUpload: onCancelInlineImageUpload
-        });
+        cancelInlineImageUpload(imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload);
         setContent(newValue);
     }, [
         setContent,
@@ -90,6 +84,7 @@ export const RichTextSendBox = (props) => {
         return sanitizeText(contentValue !== null && contentValue !== void 0 ? contentValue : '').length > 0 && sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length > 0;
     }, [contentValue]);
     const sendMessageOnClick = useCallback(() => {
+        var _a, _b;
         if (disabled || contentValueOverflow) {
             return;
         }
@@ -104,33 +99,25 @@ export const RichTextSendBox = (props) => {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
         }
+        let message = contentValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (hasContent ||
             /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments) ||
             /* @conditional-compile-remove(rich-text-editor-image-upload) */ isAttachmentUploadCompleted(imageUploadsInProgress)) {
-            const sendMessage = (content) => {
-                var _a, _b;
-                onSendMessage(content, 
-                /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
-                {
-                    /* @conditional-compile-remove(file-sharing-acs) */
-                    attachments: toAttachmentMetadata(attachments),
-                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
-                    type: 'html'
-                });
-                setContentValue('');
-                (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
-                (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-            };
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            if (isAttachmentUploadCompleted(imageUploadsInProgress)) {
-                insertImagesToContentString(contentValue, imageUploadsInProgress, (content) => {
-                    sendMessage(content);
-                });
-                return;
-            }
-            sendMessage(contentValue);
+            message = insertImagesToContentString(contentValue, imageUploadsInProgress);
+            onSendMessage(message, 
+            /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
+            {
+                /* @conditional-compile-remove(file-sharing-acs) */
+                attachments: toAttachmentMetadata(attachments),
+                /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                type: 'html'
+            });
+            setContentValue('');
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
+            (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [
         disabled,
@@ -178,20 +165,16 @@ export const RichTextSendBox = (props) => {
             }) }));
     }, [disabled, hasContent, hasErrorMessage, theme]);
     const sendBoxErrorsProps = useMemo(() => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         /* @conditional-compile-remove(file-sharing-acs) */
         const uploadErrorMessage = (_b = (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        const imageUploadErrorMessage = (_d = (_c = imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.filter((image) => image.error).pop()) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.message;
-        /* @conditional-compile-remove(file-sharing-acs) */
-        const errorMessage = uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;
         return {
             /* @conditional-compile-remove(file-sharing-acs) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
             /* @conditional-compile-remove(file-sharing-acs) */
-            attachmentProgressError: errorMessage
+            attachmentProgressError: uploadErrorMessage
                 ? {
-                    message: errorMessage,
+                    message: uploadErrorMessage,
                     timestamp: Date.now()
                 }
                 : undefined,
@@ -204,8 +187,6 @@ export const RichTextSendBox = (props) => {
         contentTooLongMessage,
         /* @conditional-compile-remove(file-sharing-acs) */
         attachmentUploadsPendingError,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        imageUploadsInProgress,
         systemMessage
     ]);
     /* @conditional-compile-remove(file-sharing-acs) */

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,mDAAmD;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAA8B,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACpG,gEAAgE;AAChE,OAAO,EAAE,2BAA2B,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAE7F,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACzG,mDAAmD;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAG7E,mDAAmD;AACnD,OAAO,EACL,2BAA2B,EAC3B,8BAA8B,EAC9B,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,mDAAmD;AACnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,mDAAmD;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAgO5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,SAAS,EACT,aAAa,EACb,QAAQ;IACR,mDAAmD;IACnD,WAAW;IACX,mDAAmD;IACnD,wBAAwB;IACxB,gEAAgE;IAChE,OAAO;IACP,gEAAgE;IAChE,mBAAmB;IACnB,gEAAgE;IAChE,sBAAsB;IACtB,gEAAgE;IAChE,yBAAyB,EAC1B,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,OAAO,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACtC,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAChC,CAAC,EAAE,CAAC,mDAAmD,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,uCAAY,aAAa,GAAK,KAAK,CAAC,OAAO,EAAG;IAChD,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,mDAAmD;IACnD,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAChF,SAAS,CACV,CAAC;IACF,MAAM,kBAAkB,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAEpE,mDAAmD;IACnD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9D,CAAC,oBAAoB,EAAE,OAAO,CAAC,WAAW,CAAC,CAC5C,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,QAAiB,EAAQ,EAAE;QACzD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,uBAAuB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3D,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,QAAiB;IACjB,gEAAgE,CAAC,aAA6B,EAC9F,EAAE;QACF,gEAAgE;QAChE,uBAAuB,CAAC;YACtB,aAAa;YACb,sBAAsB;YACtB,SAAS,EAAE,SAAS;YACpB,gCAAgC,EAAE,SAAS;YAC3C,gCAAgC,EAAE,yBAAyB;SAC5D,CAAC,CAAC;QACH,UAAU,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD;QACE,UAAU;QACV,gEAAgE,CAAC,yBAAyB;QAC1F,gEAAgE,CAAC,sBAAsB;KACxF,CACF,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC9B,0EAA0E;QAC1E,iEAAiE;QACjE,MAAM,gBAAgB,GAAG,MAAA,kBAAkB,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAC;QACvE,OAAO,YAAY,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAS,EAAE;QAChD,IAAI,QAAQ,IAAI,oBAAoB,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,2EAA2E;QAC3E,mDAAmD;QACnD,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAE5C,mDAAmD;QACnD,gEAAgE;QAChE;QACE,mDAAmD,CAAC,8BAA8B,CAAC,WAAW,CAAC;YAC/F,gEAAgE,CAAC,8BAA8B,CAC7F,sBAAsB,CACvB,EACD,CAAC;YACD,gCAAgC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,6BAA6B,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC5G,OAAO;QACT,CAAC;QAED,wEAAwE;QACxE,6DAA6D;QAC7D,IACE,UAAU;YACV,mDAAmD,CAAC,2BAA2B,CAAC,WAAW,CAAC;YAC5F,gEAAgE,CAAC,2BAA2B,CAC1F,sBAAsB,CACvB,EACD,CAAC;YACD,MAAM,WAAW,GAAG,CAAC,OAAe,EAAQ,EAAE;;gBAC5C,aAAa,CACX,OAAO;gBACP,mDAAmD,CAAC,qEAAqE;gBACzH;oBACE,mDAAmD;oBACnD,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;oBAC9C,qEAAqE;oBACrE,IAAI,EAAE,MAAM;iBACb,CACF,CAAC;gBACF,eAAe,CAAC,EAAE,CAAC,CAAC;gBACpB,MAAA,kBAAkB,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAC;gBAC9C,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YACtC,CAAC,CAAC;YAEF,gEAAgE;YAChE,IAAI,2BAA2B,CAAC,sBAAsB,CAAC,EAAE,CAAC;gBACxD,2BAA2B,CAAC,YAAY,EAAE,sBAAsB,EAAE,CAAC,OAAe,EAAE,EAAE;oBACpF,WAAW,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,CAAC,CAAC;gBACH,OAAO;YACT,CAAC;YAED,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE;QACD,QAAQ;QACR,oBAAoB;QACpB,mDAAmD;QACnD,WAAW;QACX,gEAAgE;QAChE,sBAAsB;QACtB,YAAY;QACZ,UAAU;QACV,mDAAmD;QACnD,gEAAgE;QAChE,OAAO,CAAC,6BAA6B;QACrC,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;;QACnC,OAAO,CACL,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,qBAAqB;YACvB,mDAAmD;YACnD,CAAC,CAAC,6BAA6B;YAC/B,mDAAmD;YACnD,CAAC,CAAC,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,CAAA;YAChF,gEAAgE;YAChE,CAAC,CAAC,CAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,CAAA,CACtE,CAAC;IACJ,CAAC,EAAE;QACD,mDAAmD;QACnD,WAAW;QACX,qBAAqB;QACrB,mDAAmD;QACnD,6BAA6B;QAC7B,aAAa;QACb,gEAAgE;QAChE,sBAAsB;KACvB,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EAAE,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EACtE,SAAS,EAAE,aAAa,CAAC;gBACvB,KAAK;gBACL,OAAO,EAAE,UAAU;gBACnB,mDAAmD;gBACnD,aAAa,EAAE,KAAK;gBACpB,eAAe,EAAE,eAAe;gBAChC,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;gBAChD,QAAQ,EAAE,QAAQ;aACnB,CAAC,GACF,CACH,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,MAAM,kBAAkB,GAA+B,OAAO,CAAC,GAAG,EAAE;;QAClE,mDAAmD;QACnD,MAAM,kBAAkB,GAAG,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,0CAAE,OAAO,CAAC;QACnH,gEAAgE;QAChE,MAAM,uBAAuB,GAAG,MAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,0CAAE,OAAO,CAAC;QAC7G,mDAAmD;QACnD,MAAM,YAAY,GAChB,kBAAkB,IAAI,gEAAgE,CAAC,uBAAuB,CAAC;QACjH,OAAO;YACL,mDAAmD;YACnD,6BAA6B,EAAE,6BAA6B;YAE5D,mDAAmD;YACnD,uBAAuB,EAAE,YAAY;gBACnC,CAAC,CAAC;oBACE,OAAO,EAAE,YAAY;oBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;iBACtB;gBACH,CAAC,CAAC,SAAS;YACb,aAAa,EAAE,aAAa;YAC5B,kBAAkB,EAAE,qBAAqB;SAC1C,CAAC;IACJ,CAAC,EAAE;QACD,mDAAmD;QACnD,WAAW;QACX,qBAAqB;QACrB,mDAAmD;QACnD,6BAA6B;QAC7B,gEAAgE;QAChE,sBAAsB;QACtB,aAAa;KACd,CAAC,CAAC;IAEH,mDAAmD;IACnD,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,2BAA2B;YAC3C,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,eAAe;gBAC9E,oBAAC,sBAAsB,IACrB,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,wBAAwB,EAClD,OAAO,EAAE;wBACP,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;wBAC1C,SAAS,EAAE,OAAO,CAAC,SAAS;wBAC5B,eAAe,EAAE,OAAO,CAAC,eAAe;wBACxC,kBAAkB,EAAE,OAAO,CAAC,kBAAkB;qBAC/C,EACD,QAAQ,EAAE,QAAQ,GAClB,CACoB,CAClB,CACT,CAAC;IACJ,CAAC,EAAE;QACD,KAAK;QACL,cAAc,CAAC,eAAe;QAC9B,WAAW;QACX,wBAAwB;QACxB,OAAO,CAAC,gBAAgB;QACxB,OAAO,CAAC,SAAS;QACjB,OAAO,CAAC,eAAe;QACvB,OAAO,CAAC,kBAAkB;QAC1B,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,gCAAgC,GAAG,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO,2BAA2B,CAAC;YACjC,UAAU;YACV,mDAAmD,CAAC,6BAA6B,EAC/E,2BAA2B,CAAC,WAAW,CAAC;YAC1C,QAAQ,EAAE,eAAe;YACzB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,mDAAmD,CAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAE7G,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,oBAAC,cAAc,IACb,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,kBAAkB,EAAE,CAAC;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,gFAAgF;YACvG,CAAC,EACD,SAAS,EAAE,0BAA0B,EACrC,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAC5C,cAAc,EAAE,aAAa,CAAC,mBAAmB,EACjD,YAAY,EAAE,gCAAgC,GAC9C,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,gCAAgC,EAAE,aAAa,CAAC,mBAAmB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEhH,mDAAmD;IACnD,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,2BAA2B,CAAC,WAAW,CAAC,IAAI,8BAA8B,CAAC,WAAW,CAAC,CAAC;IACjG,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,qBAAqB,oBAAK,kBAAkB,EAAI;QACjD,oBAAC,yBAAyB,IACxB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,UAAU,EAC5B,wBAAwB,EAAE,0BAA0B;YACpD,mDAAmD;YACnD,yBAAyB,EAAE,yBAAyB;YACpD,mDAAmD;YACnD,cAAc,EAAE,oBAAoB;YACpC,gEAAgE;YAChE,OAAO,EAAE,OAAO;YAChB,gEAAgE;YAChE,mBAAmB,EAAE,mBAAmB,GACxC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useV9CustomStyles } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, isSendBoxButtonAriaDisabled, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { insertImagesToContentString, cancelInlineImageUpload } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n  isAttachmentUploadCompleted,\n  hasIncompleteAttachmentUploads,\n  toAttachmentMetadata\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * Options for the rich text editor configuration.\n *\n * @beta\n */\nexport interface RichTextEditorOptions {\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to handle paste event.\n   */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * Options for the rich text editor send box configuration.\n *\n * @beta\n */\nexport interface RichTextSendBoxOptions extends RichTextEditorOptions {\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to upload an inline image in the rich text editor.\n   */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to remove the attachment upload or delete the image before sending.\n   */\n  onCancelInlineImageUpload?: (imageId: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional Array of type {@link AttachmentMetadataInProgress}\n   * to render inline images being uploaded in the RichTextSendBox.\n   */\n  imageUploadsInProgress?: AttachmentMetadataInProgress[];\n}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  richTextBoldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  richTextItalicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  richTextUnderlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  richTextBulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  richTextNumberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  richTextIncreaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  richTextDecreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  richTextInsertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  richTextInsertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  richTextInsertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  richTextInsertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  richTextInsertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  richTextInsertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  richTextInsertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  richTextDeleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  richTextDeleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  richTextDeleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  richTextDeleteTableMenu: string;\n  /**\n   * Text for the rich text toolbar more button.\n   */\n  richTextToolbarMoreButtonAriaLabel: string;\n  /**\n   * Text for announcement when a new bulleted list item is added.\n   */\n  richTextNewBulletedListItemAnnouncement: string;\n  /**\n   * Text for announcement when a new numbered list item is added.\n   */\n  richTextNewNumberedListItemAnnouncement: string;\n  /**\n   * Text for announcement when the bulleted list style is applied.\n   */\n  richTextBulletedListAppliedAnnouncement: string;\n  /**\n   * Text for announcement when the numbered list style is applied.\n   */\n  richTextNumberedListAppliedAnnouncement: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to handle paste event.\n   */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render attachments being uploaded in the SendBox.\n   * @beta\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to remove the attachment upload or delete the image before sending.\n   */\n  onCancelInlineImageUpload?: (imageId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to upload an inline image in the rich text editor.\n   */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render inline images being uploaded in the RichTextSendBox.\n   */\n  imageUploadsInProgress?: AttachmentMetadataInProgress[];\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    autoFocus,\n    onSendMessage,\n    onTyping,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    onCancelAttachmentUpload,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onCancelInlineImageUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const customV9Styles = useV9CustomStyles();\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const onChangeHandler = useCallback(\n    (\n      newValue?: string,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageSrcArray?: Array<string>\n    ) => {\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      cancelInlineImageUpload({\n        imageSrcArray,\n        imageUploadsInProgress,\n        messageId: undefined,\n        editBoxOnCancelInlineImageUpload: undefined,\n        sendBoxOnCancelInlineImageUpload: onCancelInlineImageUpload\n      });\n      setContent(newValue);\n    },\n    [\n      setContent,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ onCancelInlineImageUpload,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadsInProgress\n    ]\n  );\n\n  const hasContent = useMemo(() => {\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editorComponentRef.current?.getPlainContent();\n    return sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n  }, [contentValue]);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing-acs) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing-acs) */\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (\n      /* @conditional-compile-remove(file-sharing-acs) */ hasIncompleteAttachmentUploads(attachments) ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasIncompleteAttachmentUploads(\n        imageUploadsInProgress\n      )\n    ) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      hasContent ||\n      /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments) ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ isAttachmentUploadCompleted(\n        imageUploadsInProgress\n      )\n    ) {\n      const sendMessage = (content: string): void => {\n        onSendMessage(\n          content,\n          /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n          {\n            /* @conditional-compile-remove(file-sharing-acs) */\n            attachments: toAttachmentMetadata(attachments),\n            /* @conditional-compile-remove(rich-text-editor-composite-support) */\n            type: 'html'\n          }\n        );\n        setContentValue('');\n        editorComponentRef.current?.setEmptyContent();\n        editorComponentRef.current?.focus();\n      };\n\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      if (isAttachmentUploadCompleted(imageUploadsInProgress)) {\n        insertImagesToContentString(contentValue, imageUploadsInProgress, (content: string) => {\n          sendMessage(content);\n        });\n        return;\n      }\n\n      sendMessage(contentValue);\n    }\n  }, [\n    disabled,\n    contentValueOverflow,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    contentValue,\n    hasContent,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    strings.attachmentUploadsPendingError,\n    onSendMessage\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing-acs) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing-acs) */\n      !!attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      !!imageUploadsInProgress?.filter((image) => image.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => {\n      return (\n        <Icon\n          iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n          className={sendIconStyle({\n            theme,\n            hasText: hasContent,\n            /* @conditional-compile-remove(file-sharing-acs) */\n            hasAttachment: false,\n            hasErrorMessage: hasErrorMessage,\n            defaultTextColor: theme.palette.neutralSecondary,\n            disabled: disabled\n          })}\n        />\n      );\n    },\n    [disabled, hasContent, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    /* @conditional-compile-remove(file-sharing-acs) */\n    const uploadErrorMessage = attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error?.message;\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    const imageUploadErrorMessage = imageUploadsInProgress?.filter((image) => image.error).pop()?.error?.message;\n    /* @conditional-compile-remove(file-sharing-acs) */\n    const errorMessage =\n      uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;\n    return {\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentProgressError: errorMessage\n        ? {\n            message: errorMessage,\n            timestamp: Date.now()\n          }\n        : undefined,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentUploadsPendingError,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n          <_AttachmentUploadCards\n            attachments={attachments}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n            disabled={disabled}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    theme,\n    customV9Styles.clearBackground,\n    attachments,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploading,\n    strings.uploadCompleted,\n    strings.attachmentMoreMenu,\n    disabled\n  ]);\n\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent,\n      /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads:\n        isAttachmentUploadCompleted(attachments),\n      hasError: hasErrorMessage,\n      disabled\n    });\n  }, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasErrorMessage]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n        ariaDisabled={isSendBoxButtonAriaDisabledValue}\n      />\n    );\n  }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasAttachmentUploads = useMemo(() => {\n    return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);\n  }, [attachments]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        autoFocus={autoFocus}\n        onChange={onChangeHandler}\n        onEnterKeyDown={sendMessageOnClick}\n        onTyping={onTyping}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        hasAttachments={hasAttachmentUploads}\n        /* @conditional-compile-remove(rich-text-editor-image-upload) */\n        onPaste={onPaste}\n        /* @conditional-compile-remove(rich-text-editor-image-upload) */\n        onUploadInlineImage={onUploadInlineImage}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useV9CustomStyles } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, isSendBoxButtonAriaDisabled, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { insertImagesToContentString, cancelInlineImageUpload } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n  isAttachmentUploadCompleted,\n  hasIncompleteAttachmentUploads,\n  toAttachmentMetadata\n} from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  richTextBoldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  richTextItalicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  richTextUnderlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  richTextBulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  richTextNumberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  richTextIncreaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  richTextDecreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  richTextInsertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  richTextInsertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  richTextInsertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  richTextInsertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  richTextInsertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  richTextInsertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  richTextInsertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  richTextDeleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  richTextDeleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  richTextDeleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  richTextDeleteTableMenu: string;\n  /**\n   * Text for the rich text toolbar more button.\n   */\n  richTextToolbarMoreButtonAriaLabel: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to handle paste event.\n   */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render attachments being uploaded in the SendBox.\n   * @beta\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to remove the attachment upload or delete the image before sending.\n   */\n  onCancelInlineImageUpload?: (imageId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to upload an inline image in the rich text editor.\n   */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render inline images being uploaded in the RichTextSendBox.\n   */\n  imageUploadsInProgress?: AttachmentMetadataInProgress[];\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    autoFocus,\n    onSendMessage,\n    onTyping,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    onCancelAttachmentUpload,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onCancelInlineImageUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const customV9Styles = useV9CustomStyles();\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const onChangeHandler = useCallback(\n    (\n      newValue?: string,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageSrcArray?: Array<string>\n    ) => {\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      cancelInlineImageUpload(imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload);\n      setContent(newValue);\n    },\n    [\n      setContent,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ onCancelInlineImageUpload,\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadsInProgress\n    ]\n  );\n\n  const hasContent = useMemo(() => {\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editorComponentRef.current?.getPlainContent();\n    return sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n  }, [contentValue]);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing-acs) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing-acs) */\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (\n      /* @conditional-compile-remove(file-sharing-acs) */ hasIncompleteAttachmentUploads(attachments) ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasIncompleteAttachmentUploads(\n        imageUploadsInProgress\n      )\n    ) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    let message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      hasContent ||\n      /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments) ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ isAttachmentUploadCompleted(\n        imageUploadsInProgress\n      )\n    ) {\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      message = insertImagesToContentString(contentValue, imageUploadsInProgress);\n\n      onSendMessage(\n        message,\n        /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        {\n          /* @conditional-compile-remove(file-sharing-acs) */\n          attachments: toAttachmentMetadata(attachments),\n          /* @conditional-compile-remove(rich-text-editor-composite-support) */\n          type: 'html'\n        }\n      );\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n      editorComponentRef.current?.focus();\n    }\n  }, [\n    disabled,\n    contentValueOverflow,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    contentValue,\n    hasContent,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    strings.attachmentUploadsPendingError,\n    onSendMessage\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing-acs) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing-acs) */\n      !!attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error ||\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      !!imageUploadsInProgress?.filter((image) => image.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => {\n      return (\n        <Icon\n          iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n          className={sendIconStyle({\n            theme,\n            hasText: hasContent,\n            /* @conditional-compile-remove(file-sharing-acs) */\n            hasAttachment: false,\n            hasErrorMessage: hasErrorMessage,\n            defaultTextColor: theme.palette.neutralSecondary,\n            disabled: disabled\n          })}\n        />\n      );\n    },\n    [disabled, hasContent, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    /* @conditional-compile-remove(file-sharing-acs) */\n    const uploadErrorMessage = attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error?.message;\n    return {\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentProgressError: uploadErrorMessage\n        ? {\n            message: uploadErrorMessage,\n            timestamp: Date.now()\n          }\n        : undefined,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n          <_AttachmentUploadCards\n            attachments={attachments}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n            disabled={disabled}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    theme,\n    customV9Styles.clearBackground,\n    attachments,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploading,\n    strings.uploadCompleted,\n    strings.attachmentMoreMenu,\n    disabled\n  ]);\n\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent,\n      /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads:\n        isAttachmentUploadCompleted(attachments),\n      hasError: hasErrorMessage,\n      disabled\n    });\n  }, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasErrorMessage]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n        ariaDisabled={isSendBoxButtonAriaDisabledValue}\n      />\n    );\n  }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasAttachmentUploads = useMemo(() => {\n    return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);\n  }, [attachments]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        autoFocus={autoFocus}\n        onChange={onChangeHandler}\n        onEnterKeyDown={sendMessageOnClick}\n        onTyping={onTyping}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        hasAttachments={hasAttachmentUploads}\n        /* @conditional-compile-remove(rich-text-editor-image-upload) */\n        onPaste={onPaste}\n        /* @conditional-compile-remove(rich-text-editor-image-upload) */\n        onUploadInlineImage={onUploadInlineImage}\n      />\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js

@@ -74,23 +74,14 @@ export const RichTextToolbar = (props) => {
             icon: 'RichTextBulletListButtonIcon',
             onClick: () => {
                 plugin.onToolbarButtonClick((editor) => {
-                    // check the format state to see if the bulleted list is already applied
-                    const isBullet = formatState === null || formatState === void 0 ? void 0 : formatState.isBullet;
                     toggleBullet(editor);
-                    // the bulleted list was added
-                    if (!isBullet) {
-                        setTimeout(() => {
-                            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });
-                        }, 50);
-                    }
                 });
             },
             text: strings.richTextBulletListTooltip,
             checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isBullet) === true,
             theme: theme
         });
-    }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);
+    }, [formatState, plugin, strings.richTextBulletListTooltip, theme]);
     const numberListButton = useMemo(() => {
         return getCommandBarItem({
             dataTestId: 'rich-text-toolbar-number-list-button',
@@ -98,23 +89,14 @@ export const RichTextToolbar = (props) => {
             icon: 'RichTextNumberListButtonIcon',
             onClick: () => {
                 plugin.onToolbarButtonClick((editor) => {
-                    // check the format state to see if the numbered list is already applied
-                    const isNumbering = formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering;
                     toggleNumbering(editor);
-                    // the numbered list was added
-                    if (!isNumbering) {
-                        // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
-                        setTimeout(() => {
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });
-                        }, 50);
-                    }
                 });
             },
             text: strings.richTextNumberListTooltip,
             checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering) === true,
             theme: theme
         });
-    }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);
+    }, [formatState, plugin, strings.richTextNumberListTooltip, theme]);
     const indentDecreaseButton = useMemo(() => {
         return getCommandBarItem({
             dataTestId: 'rich-text-toolbar-indent-decrease-button',

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\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"]}
+{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBullet(editor);\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleNumbering(editor);\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\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"]}

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

@@ -20,8 +20,7 @@ export { MessageStatusIndicator } from './MessageStatusIndicator';
 export type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';
 export { MessageThread } from './MessageThread';
 export type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, JumpToNewMessageButtonProps, MessageRenderer, UpdateMessageCallback, CancelEditCallback } from './MessageThread';
-export type { RichTextEditorOptions, RichTextSendBoxOptions } from './RichTextEditor/RichTextSendBox';
-export type { RichTextEditBoxOptions } from './MessageThread';
+export type { RichTextEditorOptions } from './MessageThread';
 export { StreamMedia } from './StreamMedia';
 export type { StreamMediaProps } from './StreamMedia';
 export type { LoadingState } from './StreamMedia';