npm - @azure/communication-react - Versions diffs - 1.21.0-alpha-202410250016 → 1.21.0-alpha-202410260016 - Mend

@azure/communication-react 1.21.0-alpha-202410250016 → 1.21.0-alpha-202410260016

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/dist/dist-esm/react-components/src/components/RealTimeText.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RealTimeText.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RealTimeText.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,sCAAsC;AACtC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,sCAAsC;AACtC,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAGjC,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoD5C,sCAAsC;AACtC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC;IAC9C,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,aAAa,EAAC,OAAO,EACrB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC;QAE1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,IAAC,SAAS,EAAE,6BAA6B,EAAE,UAAU;gBACzD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ;gBAC1D,QAAQ,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAQ,CAChF;YACR,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport { IPersona, Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport React from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(rtt) */\nimport {\n captionClassName,\n captionsContentContainerClassName,\n displayNameClassName,\n displayNameContainerClassName,\n iconClassName,\n isTypingClassName,\n rttContainerClassName\n} from './styles/Captions.style';\n/* @conditional-compile-remove(rtt) */\nimport { _CaptionsInfo } from './CaptionsBanner';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * strings for rtt\n */\nexport interface RealTimeTextStrings {\n /**\n * String indicating that the user is typing\n */\n isTypingText?: string;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * Props for a single line of RealTimeText.\n */\nexport interface RealTimeTextProps {\n /**\n * RealTimeText id\n */\n id: string;\n /**\n * Display name of the user\n */\n displayName: string;\n /**\n * RealTimeText content\n */\n captionText: string;\n /**\n * user id of the user\n */\n userId?: string;\n /**\n * Optional callback to override render of the avatar.\n *\n * @param userId - user Id\n */\n onRenderAvatar?: OnRenderAvatarCallback;\n /**\n * Boolean indicating whether the RealTimeText is still in progress\n */\n isTyping?: boolean;\n /**\n * Strings for RealTimeText\n */\n strings?: RealTimeTextStrings;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * A component for displaying a single line of RealTimeText\n */\nexport const RealTimeText = (props: RealTimeTextProps): JSX.Element => {\n const { displayName, userId, captionText, onRenderAvatar, isTyping } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.rtt;\n const strings = { ...localeStrings, ...props.strings };\n\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: displayName,\n showOverflowTooltip: false,\n imageShouldStartVisible: true,\n initialsTextColor: 'white',\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n\n const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n return (\n <Stack\n horizontal\n verticalAlign=\"start\"\n horizontalAlign=\"start\"\n className={rttContainerClassName(theme, isTyping ?? false)}\n >\n <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n <Stack className={displayNameContainerClassName} horizontal>\n <Text className={displayNameClassName}>{displayName}</Text>\n {isTyping && <Text className={isTypingClassName(theme)}>{strings?.isTypingText}</Text>}\n </Stack>\n <Stack.Item className={captionClassName} dir=\"auto\">\n {captionText}\n </Stack.Item>\n </Stack>\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js CHANGED Viewed

@@ -34,6 +34,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     onInsertInlineImage } = props;
     const editor = useRef(null);
     const editorDiv = useRef(null);
+    const toolbarRef = useRef(null);
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = useState(null);
     const previousThemeDirection = useRef(themeDirection(theme));
@@ -51,6 +52,17 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         // This effect should only run once when the component is unmounted, so we don't need to add any dependencies
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if (editor.current) {
+            if (showRichTextEditorFormatting) {
+                (_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = editor.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [showRichTextEditorFormatting]);
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -321,7 +333,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         }
     }, [theme]);
     return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
-        showRichTextEditorFormatting && toolbar,
+        React.createElement("div", { ref: toolbarRef }, showRichTextEditorFormatting && toolbar),
         React.createElement("div", { className: richTextEditorWrapperStyle(theme) },
             React.createElement("div", { id: "richTextSendBox", ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles), "aria-label": placeholderText })),
         contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: { isBeakVisible: false } }))));

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

	@@ -1 +1 @@
1	- {"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 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';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n getPreviousInlineImages,\n getRemovedInlineImages,\n removeLocalBlobs,\n cleanAllLocalBlobs\n} from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\nimport UndoRedoPlugin from './Plugins/UndoRedoPlugin';\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: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => 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 onInsertInlineImage?: (imageAttributes: Record<string, 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 onInsertInlineImage\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n // This will be set when the editor is initialized and when the content is updated.\n const [previousInlineImages, setPreviousInlineImages] = useState<Record<string, string>[]>([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState<Record<string, string>>({});\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n return () => {\n // Cleanup Local Blob URLs when the component is unmounted\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n };\n // This effect should only run once when the component is unmounted, so we don't need to add any dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n },\n setEmptyContent() {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n\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 }, [/ @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs, 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 const onChangeContent = useCallback(\n (/ @conditional-compile-remove(rich-text-editor-image-upload) / shouldUpdateInlineImages?: boolean) => {\n if (editor.current === null) {\n return;\n }\n const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldUpdateInlineImages) {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n },\n [onChange, / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages]\n );\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (\n event: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / shouldRemoveInlineImages?: boolean\n ) => {\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 const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldRemoveInlineImages) {\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n if (removedInlineImages.length > 0) {\n removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);\n }\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n }\n };\n }, [\n onChange,\n onContentModelUpdate,\n updatePlugin,\n / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages,\n / @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs\n ]);\n\n const undoRedoPlugin = useMemo(() => {\n return new UndoRedoPlugin();\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n if (onInsertInlineImage) {\n copyPastePlugin.onInsertInlineImage = (imageAttributes: Record<string, string>) => {\n const { id, src } = imageAttributes;\n setInlineImageLocalBlobs((prev) => {\n if (!id \|\| !src) {\n return prev;\n }\n return { ...prev, [id]: src };\n });\n onInsertInlineImage(imageAttributes);\n };\n } else {\n copyPastePlugin.onInsertInlineImage = undefined;\n }\n undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;\n }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);\n\n useEffect(() => {\n undoRedoPlugin.onUpdateContent = () => {\n onChangeContent(/ @conditional-compile-remove(rich-text-editor-image-upload) / true);\n };\n }, [onChangeContent, undoRedoPlugin]);\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 undoRedoPlugin\n ];\n }, [\n onContextMenuRender,\n onContextMenuDismiss,\n placeholderPlugin,\n keyboardInputPlugin,\n updatePlugin,\n copyPastePlugin,\n toolbarPlugin,\n tableContextMenuPlugin,\n undoRedoPlugin\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n const prevInlineImage = getPreviousInlineImages(initialContent);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(prevInlineImage);\n\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 //selection marker should have the same format as the last segment if any\n const format = block.segments.length > 0 ? block.segments[block.segments.length - 1]?.format : undefined;\n const marker = createSelectionMarker(format);\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"]}
1	+ {"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 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';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n getPreviousInlineImages,\n getRemovedInlineImages,\n removeLocalBlobs,\n cleanAllLocalBlobs\n} from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\nimport UndoRedoPlugin from './Plugins/UndoRedoPlugin';\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: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => 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 onInsertInlineImage?: (imageAttributes: Record<string, 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 onInsertInlineImage\n } = props;\n const editor = useRef<IEditor \| null>(null);\n const editorDiv = useRef<HTMLDivElement>(null);\n const toolbarRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps \| null>(null);\n const previousThemeDirection = useRef(themeDirection(theme));\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n // This will be set when the editor is initialized and when the content is updated.\n const [previousInlineImages, setPreviousInlineImages] = useState<Record<string, string>[]>([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState<Record<string, string>>({});\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n return () => {\n // Cleanup Local Blob URLs when the component is unmounted\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n };\n // This effect should only run once when the component is unmounted, so we don't need to add any dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (editor.current) {\n if (showRichTextEditorFormatting) {\n toolbarRef.current?.focus();\n } else {\n editor.current?.focus();\n }\n }\n }, [showRichTextEditorFormatting]);\n\n useImperativeHandle(ref, () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n },\n setEmptyContent() {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n\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 }, [/ @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs, 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 const onChangeContent = useCallback(\n (/ @conditional-compile-remove(rich-text-editor-image-upload) / shouldUpdateInlineImages?: boolean) => {\n if (editor.current === null) {\n return;\n }\n const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldUpdateInlineImages) {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n },\n [onChange, / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages]\n );\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (\n event: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / shouldRemoveInlineImages?: boolean\n ) => {\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 const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldRemoveInlineImages) {\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n if (removedInlineImages.length > 0) {\n removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);\n }\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n }\n };\n }, [\n onChange,\n onContentModelUpdate,\n updatePlugin,\n / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages,\n / @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs\n ]);\n\n const undoRedoPlugin = useMemo(() => {\n return new UndoRedoPlugin();\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n if (onInsertInlineImage) {\n copyPastePlugin.onInsertInlineImage = (imageAttributes: Record<string, string>) => {\n const { id, src } = imageAttributes;\n setInlineImageLocalBlobs((prev) => {\n if (!id \|\| !src) {\n return prev;\n }\n return { ...prev, [id]: src };\n });\n onInsertInlineImage(imageAttributes);\n };\n } else {\n copyPastePlugin.onInsertInlineImage = undefined;\n }\n undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;\n }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);\n\n useEffect(() => {\n undoRedoPlugin.onUpdateContent = () => {\n onChangeContent(/ @conditional-compile-remove(rich-text-editor-image-upload) / true);\n };\n }, [onChangeContent, undoRedoPlugin]);\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 undoRedoPlugin\n ];\n }, [\n onContextMenuRender,\n onContextMenuDismiss,\n placeholderPlugin,\n keyboardInputPlugin,\n updatePlugin,\n copyPastePlugin,\n toolbarPlugin,\n tableContextMenuPlugin,\n undoRedoPlugin\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n const prevInlineImage = getPreviousInlineImages(initialContent);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(prevInlineImage);\n\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 <div ref={toolbarRef}>{showRichTextEditorFormatting && toolbar}</div>\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 //selection marker should have the same format as the last segment if any\n const format = block.segments.length > 0 ? block.segments[block.segments.length - 1]?.format : undefined;\n const marker = createSelectionMarker(format);\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/RichTextInputBoxComponent.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { RichTextEditor } from './RichTextEditor';
 import { useTheme } from '../../theming';
 import { Icon, Stack } from '@fluentui/react';
@@ -27,15 +27,6 @@ export const RichTextInputBoxComponent = (props) => {
         const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
         return (React.createElement(Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) }));
     }, [disabled, showRichTextEditorFormatting, theme]);
-    useEffect(() => {
-        var _a;
-        if (showRichTextEditorFormatting !== undefined) {
-            // Focus the editor when toolbar shown/hidden
-            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        // we don't need execute this useEffect if editorComponentRef is changed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [showRichTextEditorFormatting]);
     const actionButtons = useMemo(() => {
         return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
             React.createElement(Stack, { horizontal: true },
@@ -86,7 +77,13 @@ export const RichTextInputBoxComponent = (props) => {
             theme: theme,
             disabled: !!disabled
         }) },
-        React.createElement(Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
+        React.createElement("div", { className: inputBoxContentStackStyle, style: {
+                display: 'flex',
+                flexGrow: 1,
+                flexDirection: useHorizontalLayout ? 'row' : 'column',
+                justifyContent: useHorizontalLayout ? 'flex-end' : 'space-between',
+                flexWrap: useHorizontalLayout ? 'wrap' : 'nowrap'
+            } },
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
                     React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,cAAc,EAAwD,MAAM,kBAAkB,CAAC;AAExG,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,qCAAqC,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EACL,iCAAiC,EACjC,+BAA+B,EAC/B,0BAA0B,EAC1B,6BAA6B,EAC9B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,0BAA0B,EAC1B,sBAAsB,EACvB,MAAM,4CAA4C,CAAC;AAyCpD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,eAAe,EACf,cAAc,EACd,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,gBAAgB;IAChB,mDAAmD;IACnD,yBAAyB;IACzB,mDAAmD;IACnD,cAAc,EACd,wBAAwB,EACxB,0BAA0B,GAAG,KAAK,EAClC,SAAS,EACT,QAAQ;IACR,gEAAgE;IAChE,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,2FAA2F;IAC3F,MAAM,CAAC,4BAA4B,EAAE,+BAA+B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IACjH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAE9F,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,OAAgB,EAAE,EAAE;QACnB,MAAM,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;QAC3E,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EACN,OAAO,IAAI,4BAA4B,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,0BAA0B,EAEzG,SAAS,EAAE,6BAA6B,CAAC,KAAK,EAAE,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,4BAA4B,CAAC,CAAC,GACvG,CACH,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,4BAA4B,EAAE,KAAK,CAAC,CAChD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,4BAA4B,KAAK,SAAS,EAAE,CAAC;YAC/C,6CAA6C;YAC7C,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACtC,CAAC;QACD,wEAAwE;QACxE,uDAAuD;IACzD,CAAC,EAAE,CAAC,4BAA4B,CAAC,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,+BAA+B;YAChE,oBAAC,KAAK,IAAC,UAAU;gBACf,oBAAC,cAAc,IACb,YAAY,EAAE,0BAA0B,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,MAAM,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;wBAC3E,+BAA+B,CAAC,CAAC,4BAA4B,CAAC,CAAC;wBAC/D,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,gFAAgF;oBACvG,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,cAAc,EAAE,OAAO,CAAC,2BAA2B,EACnD,SAAS,EAAE,0BAA0B,iBACxB,mCAAmC,EAChD,YAAY,EAAE,4BAA4B,GAC1C;gBACF,oBAAC,IAAI,IAAC,QAAQ,EAAC,qBAAqB,EAAC,SAAS,EAAE,iCAAiC,CAAC,KAAK,CAAC,GAAI;gBAC3F,gBAAgB,CACX,CACG,CACd,CAAC;IACJ,CAAC,EAAE;QACD,gBAAgB;QAChB,0BAA0B;QAC1B,4BAA4B;QAC5B,OAAO,CAAC,2BAA2B;QACnC,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,wBAAwB,CAAC,4BAA4B,KAAK,IAAI,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,wBAAwB,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAiB,EAAE,EAAE;QACpB,IAAI,qCAAqC,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,MAAM,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;QAC3E,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACjF,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,cAAc,EAAE,4BAA4B,EAAE,QAAQ,CAAC,CACzD,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;QAC3E,OAAO,CACL,CAAC,0BAA0B;YAC3B,CAAC,4BAA4B;YAC7B,mDAAmD,CAAC,CAAC,cAAc,CACpE,CAAC;IACJ,CAAC,EAAE;QACD,0BAA0B;QAC1B,4BAA4B;QAC5B,mDAAmD,CAAC,cAAc;KACnE,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,YAA8C,EAAE,EAAE;QAC1F,eAAe,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BACE,SAAS,EAAE,sBAAsB,CAAC;YAChC,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,CAAC,CAAC,QAAQ;SACrB,CAAC;QAGF,oBAAC,KAAK,IACJ,IAAI,QACJ,UAAU,EAAE,mBAAmB,EAC/B,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,EAC9D,SAAS,EAAE,yBAAyB,EACpC,IAAI,EAAE,mBAAmB;YAGzB,oBAAC,KAAK,IAAC,IAAI,QAAC,SAAS,EAAE,0BAA0B;gBAC/C,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,8BAA8B;oBACnD,oBAAC,cAAc,IACb,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,kBAAkB,EACvB,OAAO,EAAE,OAAO,EAChB,4BAA4B,EAAE,4BAA4B,KAAK,IAAI,EACnE,MAAM,EAAE,mBAAmB,EAC3B,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB;wBAC1C,gEAAgE;wBAChE,OAAO,EAAE,KAAK,CAAC,OAAO;wBACtB,gEAAgE;wBAChE,mBAAmB,EAAE,mBAAmB,GACxC,CACS,EACZ,mDAAmD;gBAAC,yBAAyB,IAAI,yBAAyB,EAAE,CACvG;YACP,aAAa,CACR,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n richTextActionButtonsDividerStyle,\n richTextActionButtonsStackStyle,\n richTextActionButtonsStyle,\n richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n inputBoxContentStackStyle,\n inputBoxRichTextStackItemStyle,\n inputBoxRichTextStackStyle,\n richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n // Partial needs to be removed when the rich text editor feature goes to GA\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments?: boolean;\n // props for min and max height for the rich text editor\n // otherwise the editor will grow to fit the content\n richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n isHorizontalLayoutDisabled?: boolean;\n autoFocus?: 'sendBoxTextField';\n onTyping?: () => Promise<void>;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads,\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false,\n autoFocus,\n onTyping,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage\n } = props;\n const theme = useTheme();\n // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean \| undefined>(undefined);\n const [contentModel, setContentModel] = useState<ContentModelDocument \| undefined>(undefined);\n\n const onRenderRichTextEditorIcon = useCallback(\n (isHover: boolean) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n <Icon\n iconName={\n isHover \|\| isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n }\n className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| isRichTextEditorToolbarShown))}\n />\n );\n },\n [disabled, showRichTextEditorFormatting, theme]\n );\n\n useEffect(() => {\n if (showRichTextEditorFormatting !== undefined) {\n // Focus the editor when toolbar shown/hidden\n editorComponentRef.current?.focus();\n }\n // we don't need execute this useEffect if editorComponentRef is changed\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showRichTextEditorFormatting]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n <Stack horizontal>\n <InputBoxButton\n onRenderIcon={onRenderRichTextEditorIcon}\n onClick={(e) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n ariaLabel={strings.richTextFormatButtonTooltip}\n tooltipContent={strings.richTextFormatButtonTooltip}\n className={richTextActionButtonsStyle}\n data-testId={'rich-text-input-box-format-button'}\n ariaExpanded={showRichTextEditorFormatting}\n />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>\n );\n }, [\n actionComponents,\n onRenderRichTextEditorIcon,\n showRichTextEditorFormatting,\n strings.richTextFormatButtonTooltip,\n theme\n ]);\n\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n } else {\n onTyping?.();\n }\n },\n [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n );\n\n const useHorizontalLayout = useMemo(() => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n !isHorizontalLayoutDisabled &&\n !isRichTextEditorToolbarShown &&\n / @conditional-compile-remove(file-sharing-acs) / !hasAttachments\n );\n }, [\n isHorizontalLayoutDisabled,\n showRichTextEditorFormatting,\n / @conditional-compile-remove(file-sharing-acs) / hasAttachments\n ]);\n\n const onContentModelUpdate = useCallback((contentModel: ContentModelDocument \| undefined) => {\n setContentModel(contentModel);\n }, []);\n\n return (\n <div\n className={richTextBorderBoxStyle({\n theme: theme,\n disabled: !!disabled\n })}\n >\n {/ This layout is used for the compact view when formatting options are not shown /}\n <Stack\n grow\n horizontal={useHorizontalLayout}\n horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n className={inputBoxContentStackStyle}\n wrap={useHorizontalLayout}\n >\n {/ Fixes the issue when flex box can grow to be bigger than parent /}\n <Stack grow className={inputBoxRichTextStackStyle}>\n <Stack.Item className={inputBoxRichTextStackItemStyle}>\n <RichTextEditor\n contentModel={contentModel}\n initialContent={initialContent}\n placeholderText={placeholderText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n ref={editorComponentRef}\n strings={strings}\n showRichTextEditorFormatting={showRichTextEditorFormatting === true}\n styles={richTextEditorStyle}\n autoFocus={autoFocus}\n onContentModelUpdate={onContentModelUpdate}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={onInsertInlineImage}\n />\n </Stack.Item>\n {/ @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}\n </Stack>\n {actionButtons}\n </Stack>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n richTextActionButtonsDividerStyle,\n richTextActionButtonsStackStyle,\n richTextActionButtonsStyle,\n richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n inputBoxContentStackStyle,\n inputBoxRichTextStackItemStyle,\n inputBoxRichTextStackStyle,\n richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n // Partial needs to be removed when the rich text editor feature goes to GA\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments?: boolean;\n // props for min and max height for the rich text editor\n // otherwise the editor will grow to fit the content\n richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n isHorizontalLayoutDisabled?: boolean;\n autoFocus?: 'sendBoxTextField';\n onTyping?: () => Promise<void>;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads,\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false,\n autoFocus,\n onTyping,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage\n } = props;\n const theme = useTheme();\n // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean \| undefined>(undefined);\n const [contentModel, setContentModel] = useState<ContentModelDocument \| undefined>(undefined);\n\n const onRenderRichTextEditorIcon = useCallback(\n (isHover: boolean) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n <Icon\n iconName={\n isHover \|\| isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n }\n className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| isRichTextEditorToolbarShown))}\n />\n );\n },\n [disabled, showRichTextEditorFormatting, theme]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n <Stack horizontal>\n <InputBoxButton\n onRenderIcon={onRenderRichTextEditorIcon}\n onClick={(e) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n ariaLabel={strings.richTextFormatButtonTooltip}\n tooltipContent={strings.richTextFormatButtonTooltip}\n className={richTextActionButtonsStyle}\n data-testId={'rich-text-input-box-format-button'}\n ariaExpanded={showRichTextEditorFormatting}\n />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>\n );\n }, [\n actionComponents,\n onRenderRichTextEditorIcon,\n showRichTextEditorFormatting,\n strings.richTextFormatButtonTooltip,\n theme\n ]);\n\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n } else {\n onTyping?.();\n }\n },\n [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n );\n\n const useHorizontalLayout = useMemo(() => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n !isHorizontalLayoutDisabled &&\n !isRichTextEditorToolbarShown &&\n / @conditional-compile-remove(file-sharing-acs) / !hasAttachments\n );\n }, [\n isHorizontalLayoutDisabled,\n showRichTextEditorFormatting,\n / @conditional-compile-remove(file-sharing-acs) / hasAttachments\n ]);\n\n const onContentModelUpdate = useCallback((contentModel: ContentModelDocument \| undefined) => {\n setContentModel(contentModel);\n }, []);\n\n return (\n <div\n className={richTextBorderBoxStyle({\n theme: theme,\n disabled: !!disabled\n })}\n >\n {/ This layout is used for the compact view when formatting options are not shown /}\n {/ We don't use a stack here as there is a bug in Fluent Stack that causes remount of children when using wrap /}\n <div\n className={inputBoxContentStackStyle}\n style={{\n display: 'flex',\n flexGrow: 1,\n flexDirection: useHorizontalLayout ? 'row' : 'column',\n justifyContent: useHorizontalLayout ? 'flex-end' : 'space-between',\n flexWrap: useHorizontalLayout ? 'wrap' : 'nowrap'\n }}\n >\n {/ Fixes the issue when flex box can grow to be bigger than parent /}\n <Stack grow className={inputBoxRichTextStackStyle}>\n <Stack.Item className={inputBoxRichTextStackItemStyle}>\n <RichTextEditor\n contentModel={contentModel}\n initialContent={initialContent}\n placeholderText={placeholderText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n ref={editorComponentRef}\n strings={strings}\n showRichTextEditorFormatting={showRichTextEditorFormatting === true}\n styles={richTextEditorStyle}\n autoFocus={autoFocus}\n onContentModelUpdate={onContentModelUpdate}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={onInsertInlineImage}\n />\n </Stack.Item>\n {/ @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}\n </Stack>\n {actionButtons}\n </div>\n </div>\n );\n};\n"]}

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

@@ -103,6 +103,10 @@ export interface RichTextStrings {
      * Text for the delete table menu.
      */
     richTextDeleteTableMenu: string;
+    /**
+     * Text for the rich text toolbar.
+     */
+    richTextToolbarAriaLabel: string;
     /**
      * Text for the rich text toolbar more button.
      */

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

	@@ -1 +1 @@
1	- {"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 {\n isMessageTooLong,\n isSendBoxButtonDisabled,\n sanitizeText,\n modifyInlineImagesInContentString\n} from '../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { hasInlineImageContent, getContentWithUpdatedInlineImagesInfo } 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(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarType } 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/\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n /\n Error message indicating image upload is not complete.\n /\n imageUploadsPendingError: 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 invoked after inline image is removed from the UI.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].\n * Note that if the src attribute is a local blob url, it has been revoked at this point.\n /\n onRemoveInlineImage?: (imageAttributes: Record<string, 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 handle an inline image that's inserted in the rich text editor.\n * When not provided, pasting images into rich text editor will be disabled.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']\n /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n /\n Optional Array of type {@link AttachmentMetadataInProgress}\n * to render the errorBar for inline images inserted in the RichTextSendBox when:\n * - there is an error provided in the inlineImagesWithProgress\n * - progress is less than 1 when the send button is clicked\n * - content html string is longer than the max allowed length.\n * (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html\n * when calculating the content length, only for the purpose of displaying the content length overflow error.)\n /\n inlineImagesWithProgress?: 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 onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage\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) / removedInlineImages?: Record<string, string>[]\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?.forEach(\n (removedInlineImage: Record<string, string>) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage)\n );\n setContent(newValue);\n },\n [setContent, / @conditional-compile-remove(rich-text-editor-image-upload) / onRemoveInlineImage]\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 const hasPlainText = sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const hasInlineImages = hasInlineImageContent(contentValue);\n return hasPlainText \|\| / @conditional-compile-remove(rich-text-editor-image-upload) / hasInlineImages;\n }, [contentValue]);\n\n const sendMessageOnClick = useCallback((): void => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n contentValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueOverflow state to display the error bar\n setContentValueOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to relay on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\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(rich-text-editor-image-upload) /\n const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);\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) / hasIncompleteImageUploads\n ) {\n / @conditional-compile-remove(file-sharing-acs) /\n let errorMessage = strings.attachmentUploadsPendingError;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (hasIncompleteImageUploads) {\n errorMessage = strings.imageUploadsPendingError \|\| '';\n }\n setAttachmentUploadsPendingError({\n message: errorMessage,\n timestamp: Date.now(),\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n errorBarType: SendBoxErrorBarType.info\n });\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 (hasContent \|\| / @conditional-compile-remove(file-sharing-acs) / isAttachmentUploadCompleted(attachments)) {\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 modifyInlineImagesInContentString(contentValue, [], (content: string) => {\n sendMessage(content);\n });\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 inlineImagesWithProgress,\n contentValue,\n hasContent,\n / @conditional-compile-remove(file-sharing-acs) /\n strings.attachmentUploadsPendingError,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\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 !!inlineImagesWithProgress?.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 inlineImagesWithProgress\n ]);\n\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\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 onRenderSendIcon = useCallback(\n (isHover: boolean) => {\n return (\n <Icon\n iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n defaultTextColor: theme.palette.neutralSecondary\n })}\n />\n );\n },\n [theme, isSendBoxButtonDisabledValue, hasContent]\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 = inlineImagesWithProgress?.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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n errorBarType: SendBoxErrorBarType.error\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 inlineImagesWithProgress,\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 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 disabled={isSendBoxButtonDisabledValue}\n />\n );\n }, [isSendBoxButtonDisabledValue, 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 onInsertInlineImage={onInsertInlineImage}\n />\n </Stack>\n );\n};\n"]}
1	+ {"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 {\n isMessageTooLong,\n isSendBoxButtonDisabled,\n sanitizeText,\n modifyInlineImagesInContentString\n} from '../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { hasInlineImageContent, getContentWithUpdatedInlineImagesInfo } 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(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarType } 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/\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.\n /\n richTextToolbarAriaLabel: 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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n /\n Error message indicating image upload is not complete.\n /\n imageUploadsPendingError: 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 invoked after inline image is removed from the UI.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].\n * Note that if the src attribute is a local blob url, it has been revoked at this point.\n /\n onRemoveInlineImage?: (imageAttributes: Record<string, 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 handle an inline image that's inserted in the rich text editor.\n * When not provided, pasting images into rich text editor will be disabled.\n * @param imageAttributes - attributes of the image such as id, src, style, etc.\n * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']\n /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n /\n Optional Array of type {@link AttachmentMetadataInProgress}\n * to render the errorBar for inline images inserted in the RichTextSendBox when:\n * - there is an error provided in the inlineImagesWithProgress\n * - progress is less than 1 when the send button is clicked\n * - content html string is longer than the max allowed length.\n * (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html\n * when calculating the content length, only for the purpose of displaying the content length overflow error.)\n /\n inlineImagesWithProgress?: 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 onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage\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) / removedInlineImages?: Record<string, string>[]\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?.forEach(\n (removedInlineImage: Record<string, string>) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage)\n );\n setContent(newValue);\n },\n [setContent, / @conditional-compile-remove(rich-text-editor-image-upload) / onRemoveInlineImage]\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 const hasPlainText = sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const hasInlineImages = hasInlineImageContent(contentValue);\n return hasPlainText \|\| / @conditional-compile-remove(rich-text-editor-image-upload) / hasInlineImages;\n }, [contentValue]);\n\n const sendMessageOnClick = useCallback((): void => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n contentValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueOverflow state to display the error bar\n setContentValueOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to relay on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\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(rich-text-editor-image-upload) /\n const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);\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) / hasIncompleteImageUploads\n ) {\n / @conditional-compile-remove(file-sharing-acs) /\n let errorMessage = strings.attachmentUploadsPendingError;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (hasIncompleteImageUploads) {\n errorMessage = strings.imageUploadsPendingError \|\| '';\n }\n setAttachmentUploadsPendingError({\n message: errorMessage,\n timestamp: Date.now(),\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n errorBarType: SendBoxErrorBarType.info\n });\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 (hasContent \|\| / @conditional-compile-remove(file-sharing-acs) / isAttachmentUploadCompleted(attachments)) {\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 modifyInlineImagesInContentString(contentValue, [], (content: string) => {\n sendMessage(content);\n });\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 inlineImagesWithProgress,\n contentValue,\n hasContent,\n / @conditional-compile-remove(file-sharing-acs) /\n strings.attachmentUploadsPendingError,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\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 !!inlineImagesWithProgress?.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 inlineImagesWithProgress\n ]);\n\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\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 onRenderSendIcon = useCallback(\n (isHover: boolean) => {\n return (\n <Icon\n iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n defaultTextColor: theme.palette.neutralSecondary\n })}\n />\n );\n },\n [theme, isSendBoxButtonDisabledValue, hasContent]\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 = inlineImagesWithProgress?.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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n errorBarType: SendBoxErrorBarType.error\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 inlineImagesWithProgress,\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 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 disabled={isSendBoxButtonDisabledValue}\n />\n );\n }, [isSendBoxButtonDisabledValue, 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 onInsertInlineImage={onInsertInlineImage}\n />\n </Stack>\n );\n};\n"]}

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

@@ -199,7 +199,7 @@ export const RichTextToolbar = (props) => {
             }
         };
     }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
-    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps }));
+    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, "aria-label": strings.richTextToolbarAriaLabel }));
 };
 const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
     return {

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

	@@ -1 +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 editor ready event may happen before onFormatChanged is set\n // call update format function to ensure the format state is set\n plugin.updateFormat();\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"]}
1	+ {"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE3E,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EACL,UAAU,EACV,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAE9F,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAc3B;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,0DAA0D;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsC,SAAS,CAAC,CAAC;IAErG,SAAS,CAAC,GAAG,EAAE;QACb,2CAA2C;QAC3C,MAAM,CAAC,eAAe,GAAG,cAAc,CAAC;QACxC,qEAAqE;QACrE,gEAAgE;QAChE,MAAM,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAyB,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,+BAA+B;YAC3C,GAAG,EAAE,2BAA2B;YAChC,IAAI,EAAE,wBAAwB;YAC9B,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,UAAU,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,mBAAmB;YACjC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI;YACjE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAyB,OAAO,CAAC,GAAG,EAAE;QACtD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,iCAAiC;YAC7C,GAAG,EAAE,6BAA6B;YAClC,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,YAAY,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,qBAAqB;YACnC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,IAAI;YACpE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAyB,OAAO,CAAC,GAAG,EAAE;QACzD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,oCAAoC;YAChD,GAAG,EAAE,gCAAgC;YACrC,IAAI,EAAE,6BAA6B;YACnC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,wBAAwB;YACtC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,MAAK,IAAI;YACvE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,sCAAsC;YAClD,GAAG,EAAE,iCAAiC;YACtC,IAAI,EAAE,8BAA8B;YACpC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,wEAAwE;oBACxE,MAAM,QAAQ,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC;oBACvC,YAAY,CAAC,MAAM,CAAC,CAAC;oBACrB,8BAA8B;oBAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,UAAU,CAAC,GAAG,EAAE;4BACd,2FAA2F;4BAC3F,MAAM,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,uCAAuC,EAAE,CAAC,CAAC;wBACrG,CAAC,EAAE,EAAE,CAAC,CAAC;oBACT,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,IAAI;YACpE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,yBAAyB,EAAE,OAAO,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,sCAAsC;YAClD,GAAG,EAAE,iCAAiC;YACtC,IAAI,EAAE,8BAA8B;YACpC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,wEAAwE;oBACxE,MAAM,WAAW,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC;oBAC7C,eAAe,CAAC,MAAM,CAAC,CAAC;oBACxB,8BAA8B;oBAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,2FAA2F;wBAC3F,UAAU,CAAC,GAAG,EAAE;4BACd,MAAM,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,uCAAuC,EAAE,CAAC,CAAC;wBACrG,CAAC,EAAE,EAAE,CAAC,CAAC;oBACT,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,MAAK,IAAI;YACvE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,yBAAyB,EAAE,OAAO,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC,CAAC;IAErH,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC9D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,0CAA0C;YACtD,GAAG,EAAE,qCAAqC;YAC1C,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,cAAc,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC9D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,0CAA0C;YACtD,GAAG,EAAE,qCAAqC;YAC1C,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;gBACnC,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,GAAW,EAAE,EAAE;QACd,OAAO,qBAAqB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC3C,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,WAAW,GAAyB,OAAO,CAAC,GAAG,EAAE;QACrD,OAAO,iCAAiC,CACtC,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,CAAC,MAAc,EAAE,GAAW,EAAE,EAAE;YAC9B,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;gBACrC,YAAY;gBACZ,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;gBACjC,iHAAiH;gBACjH,wCAAwC;gBACxC,UAAU,CAAC,GAAG,EAAE;oBACd,MAAM,CAAC,KAAK,EAAE,CAAC;gBACjB,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,MAAM,OAAO,GAA2B,OAAO,CAAC,GAAG,EAAE;QACnD,OAAO;YACL,UAAU;YACV,YAAY;YACZ,eAAe;YACf,OAAO,CAAC,iCAAiC,CAAC;YAC1C,gBAAgB;YAChB,gBAAgB;YAChB,oBAAoB;YACpB,oBAAoB;YACpB,OAAO,CAAC,4BAA4B,CAAC;YACrC,WAAW;SACZ,CAAC;IACJ,CAAC,EAAE;QACD,UAAU;QACV,YAAY;QACZ,eAAe;QACf,OAAO;QACP,gBAAgB;QAChB,gBAAgB;QAChB,oBAAoB;QACpB,oBAAoB;QACpB,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,SAAS,EAAE,OAAO,CAAC,kCAAkC;YACrD,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC;YACjC,SAAS,EAAE;gBACT,KAAK,EAAE,EAAE,EAAE,uDAAuD;gBAClE,aAAa,EAAE,KAAK;gBACpB,MAAM,EAAE,yBAAyB,CAAC,KAAK,CAAC;aACzC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,OAAO,iBACD,0BAA0B,EACvC,MAAM,EAAE,oBAAoB,EAC5B,mBAAmB,EAAE,mBAAmB,gBAC5B,OAAO,CAAC,wBAAwB,GAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,UAAU,EAWX,EAAwB,EAAE;IACzB,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;QAChD,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,iDAAiD;QACjG,aAAa,EAAE,UAAU;QACzB,GAAG,EAAE,GAAG;QACR,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC7B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,QAAQ;QAClB,YAAY,oBACP,kBAAkB,CAAC,KAAK,CAAC,CAC7B;QACD,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,GAAW,EAAwB,EAAE;IAChF,OAAO;QACL,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,IAAI;QACd,gDAAgD;QAChD,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,kFAAkF;QAClF,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,qBAAqB,EAAC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI;KAC9F,CAAC;AACJ,CAAC,CAAC","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 editor ready event may happen before onFormatChanged is set\n // call update format function to ensure the format state is set\n plugin.updateFormat();\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 aria-label={strings.richTextToolbarAriaLabel}\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"]}