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

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

@@ -44,7 +44,7 @@ export const RichTextSendBox = (props) => {
     /* @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const editorComponentRef = useRef(null);
-    const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
+    const contentTooLongMessage = useMemo(() => contentValueOverflow ? strings.textTooLong : undefined, [contentValueOverflow, strings.textTooLong]);
     const setContent = useCallback((newValue) => {
         if (newValue === undefined) {
             return;
@@ -61,10 +61,10 @@ export const RichTextSendBox = (props) => {
     }, [contentValue]);
     /* @conditional-compile-remove(attachment-upload) */
     const toAttachmentMetadata = useCallback((attachmentsWithProgress) => {
-        return attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachment) => {
+        return attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter(attachment => {
             var _a;
             return !('error' in attachment) && !((_a = attachment.error) === null || _a === void 0 ? void 0 : _a.message);
-        }).map((attachment) => {
+        }).map(attachment => {
             var _a;
             return {
                 id: attachment.id,
@@ -83,56 +83,39 @@ export const RichTextSendBox = (props) => {
         setAttachmentUploadsPendingError(undefined);
         /* @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteAttachmentUploads(attachments)) {
-            setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
+            setAttachmentUploadsPendingError({
+                message: strings.attachmentUploadsPendingError,
+                timestamp: Date.now()
+            });
             return;
         }
         const message = contentValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (hasContent || /* @conditional-compile-remove(attachment-upload) */ isAttachmentUploadCompleted(attachments)) {
-            onSendMessage(message, 
-            /* @conditional-compile-remove(attachment-upload) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
-            {
+            onSendMessage(message, /* @conditional-compile-remove(attachment-upload) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ {
                 /* @conditional-compile-remove(attachment-upload) */
-                attachments: toAttachmentMetadata(attachments),
-                /* @conditional-compile-remove(rich-text-editor-composite-support) */
-                type: 'html'
+                attachments: toAttachmentMetadata(attachments)
             });
             setContentValue('');
             (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
             (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
-    }, [
-        disabled,
-        contentValueOverflow,
-        /* @conditional-compile-remove(attachment-upload) */
-        attachments,
-        contentValue,
-        hasContent,
-        /* @conditional-compile-remove(attachment-upload) */
-        strings.attachmentUploadsPendingError,
-        onSendMessage,
-        /* @conditional-compile-remove(attachment-upload) */
-        toAttachmentMetadata
-    ]);
+    }, [disabled, contentValueOverflow, /* @conditional-compile-remove(attachment-upload) */
+        attachments, contentValue, hasContent, /* @conditional-compile-remove(attachment-upload) */
+        strings.attachmentUploadsPendingError, onSendMessage, /* @conditional-compile-remove(attachment-upload) */
+        toAttachmentMetadata]);
     const hasErrorMessage = useMemo(() => {
         var _a;
-        return (!!systemMessage ||
-            !!contentTooLongMessage ||
-            /* @conditional-compile-remove(attachment-upload) */
-            !!attachmentUploadsPendingError ||
-            /* @conditional-compile-remove(attachment-upload) */
-            !!((_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
+        return !!systemMessage || !!contentTooLongMessage || /* @conditional-compile-remove(attachment-upload) */
+            !!attachmentUploadsPendingError || /* @conditional-compile-remove(attachment-upload) */
+            !!((_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error);
     }, [
-        /* @conditional-compile-remove(attachment-upload) */
-        attachments,
-        contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploadsPendingError,
-        systemMessage
+        attachments, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */
+        attachmentUploadsPendingError, systemMessage
     ]);
     const onRenderSendIcon = useCallback((isHover) => {
-        return (React.createElement(Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
+        return React.createElement(Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
                 theme,
                 hasText: hasContent,
                 /* @conditional-compile-remove(attachment-upload) */
@@ -140,52 +123,38 @@ export const RichTextSendBox = (props) => {
                 hasErrorMessage: hasErrorMessage,
                 defaultTextColor: theme.palette.neutralSecondary,
                 disabled: disabled
-            }) }));
+            }) });
     }, [disabled, hasContent, hasErrorMessage, theme]);
     const sendBoxErrorsProps = useMemo(() => {
         var _a, _b;
         /* @conditional-compile-remove(attachment-upload) */
-        const uploadErrorMessage = (_b = (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
+        const uploadErrorMessage = (_b = (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
         return {
             /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
             /* @conditional-compile-remove(attachment-upload) */
-            attachmentProgressError: uploadErrorMessage
-                ? {
-                    message: uploadErrorMessage,
-                    timestamp: Date.now()
-                }
-                : undefined,
+            attachmentProgressError: uploadErrorMessage ? {
+                message: uploadErrorMessage,
+                timestamp: Date.now()
+            } : undefined,
             systemMessage: systemMessage,
             textTooLongMessage: contentTooLongMessage
         };
     }, [
-        /* @conditional-compile-remove(attachment-upload) */
-        attachments,
-        contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploadsPendingError,
-        systemMessage
+        attachments, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */
+        attachmentUploadsPendingError, systemMessage
     ]);
     /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = useCallback(() => {
-        return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+        return React.createElement(Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: onCancelAttachmentUpload, strings: {
                         removeAttachment: strings.removeAttachment,
                         uploading: strings.uploading,
                         uploadCompleted: strings.uploadCompleted,
                         attachmentMoreMenu: strings.attachmentMoreMenu
-                    } }))));
-    }, [
-        attachments,
-        onCancelAttachmentUpload,
-        strings.removeAttachment,
-        strings.uploadCompleted,
-        strings.uploading,
-        strings.attachmentMoreMenu,
-        theme
-    ]);
+                    } })));
+    }, [attachments, onCancelAttachmentUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading, strings.attachmentMoreMenu, theme]);
     const isSendBoxButtonAriaDisabledValue = useMemo(() => {
         return isSendBoxButtonAriaDisabled({
             hasContent,
@@ -195,21 +164,19 @@ export const RichTextSendBox = (props) => {
         });
     }, [/* @conditional-compile-remove(attachment-upload) */ attachments, disabled, hasContent, hasErrorMessage]);
     const sendButton = useMemo(() => {
-        return (React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
+        return React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
                 sendMessageOnClick();
                 e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
-            }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, ariaDisabled: isSendBoxButtonAriaDisabledValue }));
+            }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, ariaDisabled: isSendBoxButtonAriaDisabledValue });
     }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
     /* @conditional-compile-remove(attachment-upload) */
     const hasAttachmentUploads = useMemo(() => {
         return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);
     }, [attachments]);
-    return (React.createElement(Stack, null,
+    return React.createElement(Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, onTyping: onTyping, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
-            /* @conditional-compile-remove(attachment-upload) */
-            onRenderAttachmentUploads: onRenderAttachmentUploads, 
-            /* @conditional-compile-remove(attachment-upload) */
-            hasAttachments: hasAttachmentUploads })));
+            /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads: onRenderAttachmentUploads, 
+            /* @conditional-compile-remove(attachment-upload) */ hasAttachments: hasAttachmentUploads }));
 };
 //# sourceMappingURL=RichTextSendBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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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';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, isSendBoxButtonAriaDisabled, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(attachment-upload) */\nimport { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  richTextBoldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  richTextItalicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  richTextUnderlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  richTextBulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  richTextNumberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  richTextIncreaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  richTextDecreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  richTextInsertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  richTextInsertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  richTextInsertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  richTextInsertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  richTextInsertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  richTextInsertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  richTextInsertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  richTextDeleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  richTextDeleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  richTextDeleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  richTextDeleteTableMenu: string;\n  /**\n   * Text for the rich text toolbar more button.\n   */\n  richTextToolbarMoreButtonAriaLabel: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\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(attachment-upload) */\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(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (\n    content: string,\n    /* @conditional-compile-remove(attachment-upload) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\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(attachment-upload) */\n    attachments,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\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(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\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 hasContent = useMemo(() => {\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editorComponentRef.current?.getPlainContent();\n    return sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n  }, [contentValue]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const toAttachmentMetadata = useCallback((attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => {\n    return attachmentsWithProgress\n      ?.filter((attachment) => {\n        return !('error' in attachment) && !attachment.error?.message;\n      })\n      .map((attachment) => {\n        return {\n          id: attachment.id,\n          name: attachment.name,\n          url: attachment.url ?? ''\n        };\n      });\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(attachments)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\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(attachment-upload) */ isAttachmentUploadCompleted(attachments)) {\n      onSendMessage(\n        message,\n        /* @conditional-compile-remove(attachment-upload) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        {\n          /* @conditional-compile-remove(attachment-upload) */\n          attachments: toAttachmentMetadata(attachments),\n          /* @conditional-compile-remove(rich-text-editor-composite-support) */\n          type: 'html'\n        }\n      );\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n      editorComponentRef.current?.focus();\n    }\n  }, [\n    disabled,\n    contentValueOverflow,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachments,\n    contentValue,\n    hasContent,\n    /* @conditional-compile-remove(attachment-upload) */\n    strings.attachmentUploadsPendingError,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    toAttachmentMetadata\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => {\n      return (\n        <Icon\n          iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n          className={sendIconStyle({\n            theme,\n            hasText: hasContent,\n            /* @conditional-compile-remove(attachment-upload) */\n            hasAttachment: false,\n            hasErrorMessage: hasErrorMessage,\n            defaultTextColor: theme.palette.neutralSecondary,\n            disabled: disabled\n          })}\n        />\n      );\n    },\n    [disabled, hasContent, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    /* @conditional-compile-remove(attachment-upload) */\n    const uploadErrorMessage = attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error?.message;\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentProgressError: uploadErrorMessage\n        ? {\n            message: uploadErrorMessage,\n            timestamp: Date.now()\n          }\n        : undefined,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    attachments,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\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          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    attachments,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    strings.attachmentMoreMenu,\n    theme\n  ]);\n\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent,\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads:\n        isAttachmentUploadCompleted(attachments),\n      hasError: hasErrorMessage,\n      disabled\n    });\n  }, [/* @conditional-compile-remove(attachment-upload) */ attachments, disabled, hasContent, hasErrorMessage]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n        ariaDisabled={isSendBoxButtonAriaDisabledValue}\n      />\n    );\n  }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\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={setContent}\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(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, isSendBoxButtonAriaDisabled, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(attachment-upload) */\nimport { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}\n\n/**\n * Strings of RichText that can be overridden.\n *\n * @beta\n */\nexport interface RichTextStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  richTextBoldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  richTextItalicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  richTextUnderlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  richTextBulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  richTextNumberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  richTextIncreaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  richTextDecreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  richTextInsertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  richTextInsertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  richTextInsertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  richTextInsertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  richTextInsertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  richTextInsertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  richTextInsertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  richTextDeleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  richTextDeleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  richTextDeleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  richTextDeleteTableMenu: string;\n  /**\n   * Text for the rich text toolbar more button.\n   */\n  richTextToolbarMoreButtonAriaLabel: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\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(attachment-upload) */\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(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string, /* @conditional-compile-remove(attachment-upload) */\n  options?: MessageOptions) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\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(attachment-upload) */\n    attachments,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n  const theme = useTheme();\n  const locale = useLocale();\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  const strings = useMemo(() => {\n    return {\n      ...localeStrings,\n      ...props.strings\n    };\n  }, [localeStrings, props.strings]);\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n  const contentTooLongMessage = useMemo(() => contentValueOverflow ? strings.textTooLong : undefined, [contentValueOverflow, strings.textTooLong]);\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n  const hasContent = useMemo(() => {\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editorComponentRef.current?.getPlainContent();\n    return sanitizeText(contentValue ?? '').length > 0 && sanitizeText(plainTextContent ?? '').length > 0;\n  }, [contentValue]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const toAttachmentMetadata = useCallback((attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => {\n    return attachmentsWithProgress?.filter(attachment => {\n      return !('error' in attachment) && !attachment.error?.message;\n    }).map(attachment => {\n      return {\n        id: attachment.id,\n        name: attachment.name,\n        url: attachment.url ?? ''\n      };\n    });\n  }, []);\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(attachments)) {\n      setAttachmentUploadsPendingError({\n        message: strings.attachmentUploadsPendingError,\n        timestamp: Date.now()\n      });\n      return;\n    }\n    const message = contentValue;\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(attachment-upload) */isAttachmentUploadCompleted(attachments)) {\n      onSendMessage(message, /* @conditional-compile-remove(attachment-upload) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      {\n        /* @conditional-compile-remove(attachment-upload) */\n        attachments: toAttachmentMetadata(attachments)\n      });\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n      editorComponentRef.current?.focus();\n    }\n  }, [disabled, contentValueOverflow, /* @conditional-compile-remove(attachment-upload) */\n  attachments, contentValue, hasContent, /* @conditional-compile-remove(attachment-upload) */\n  strings.attachmentUploadsPendingError, onSendMessage, /* @conditional-compile-remove(attachment-upload) */\n  toAttachmentMetadata]);\n  const hasErrorMessage = useMemo(() => {\n    return !!systemMessage || !!contentTooLongMessage || /* @conditional-compile-remove(attachment-upload) */\n    !!attachmentUploadsPendingError || /* @conditional-compile-remove(attachment-upload) */\n    !!attachments?.filter(attachmentUpload => attachmentUpload.error).pop()?.error;\n  }, [/* @conditional-compile-remove(attachment-upload) */\n  attachments, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError, systemMessage]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => {\n    return <Icon iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'} className={sendIconStyle({\n      theme,\n      hasText: hasContent,\n      /* @conditional-compile-remove(attachment-upload) */\n      hasAttachment: false,\n      hasErrorMessage: hasErrorMessage,\n      defaultTextColor: theme.palette.neutralSecondary,\n      disabled: disabled\n    })} />;\n  }, [disabled, hasContent, hasErrorMessage, theme]);\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    /* @conditional-compile-remove(attachment-upload) */\n    const uploadErrorMessage = attachments?.filter(attachmentUpload => attachmentUpload.error).pop()?.error?.message;\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentProgressError: uploadErrorMessage ? {\n        message: uploadErrorMessage,\n        timestamp: Date.now()\n      } : undefined,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [/* @conditional-compile-remove(attachment-upload) */\n  attachments, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError, systemMessage]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards attachments={attachments} onCancelAttachmentUpload={onCancelAttachmentUpload} strings={{\n          removeAttachment: strings.removeAttachment,\n          uploading: strings.uploading,\n          uploadCompleted: strings.uploadCompleted,\n          attachmentMoreMenu: strings.attachmentMoreMenu\n        }} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachments, onCancelAttachmentUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading, strings.attachmentMoreMenu, theme]);\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent,\n      /* @conditional-compile-remove(attachment-upload) */hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),\n      hasError: hasErrorMessage,\n      disabled\n    });\n  }, [/* @conditional-compile-remove(attachment-upload) */attachments, disabled, hasContent, hasErrorMessage]);\n  const sendButton = useMemo(() => {\n    return <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n      sendMessageOnClick();\n      e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n    }} className={richTextActionButtonsStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} ariaDisabled={isSendBoxButtonAriaDisabledValue} />;\n  }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);\n  }, [attachments]);\n  return <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent placeholderText={strings.placeholderText} autoFocus={autoFocus} onChange={setContent} onEnterKeyDown={sendMessageOnClick} onTyping={onTyping} editorComponentRef={editorComponentRef} strings={strings} disabled={disabled} actionComponents={sendButton} richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n    /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads={onRenderAttachmentUploads}\n    /* @conditional-compile-remove(attachment-upload) */ hasAttachments={hasAttachmentUploads} />\n    </Stack>;\n};"]}

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

@@ -14,22 +14,27 @@ export const RichTextSendBoxErrors = (props) => {
     const [sendBoxError, setSendBoxError] = useState(undefined);
     useEffect(() => {
         if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
+            setSendBoxError({
+                message: systemMessage,
+                timestamp: Date.now()
+            });
         }
     }, [systemMessage]);
     useEffect(() => {
         if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {
-            setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });
+            setSendBoxError({
+                message: textTooLongMessage,
+                timestamp: Date.now()
+            });
         }
     }, [textTooLongMessage]);
     useEffect(() => {
-        if ((textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&
-            (systemMessage === undefined || isMessageEmpty(systemMessage))) {
+        if ((textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) && (systemMessage === undefined || isMessageEmpty(systemMessage))) {
             setSendBoxError(undefined);
         }
     }, [systemMessage, textTooLongMessage]);
     useEffect(() => {
-        setSendBoxError((prev) => {
+        setSendBoxError(prev => {
             const errors = [];
             if (prev) {
                 errors.push(prev);
@@ -49,18 +54,18 @@ export const RichTextSendBoxErrors = (props) => {
             const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);
             return sortedErrors[0];
         });
-    }, [
-        /* @conditional-compile-remove(attachment-upload) */ attachmentProgressError,
-        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
-    ]);
+    }, [/* @conditional-compile-remove(attachment-upload) */ attachmentProgressError, /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError]);
     const onDismiss = useCallback(() => {
         if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
+            setSendBoxError({
+                message: systemMessage,
+                timestamp: Date.now()
+            });
         }
     }, [systemMessage]);
-    return (React.createElement(SendBoxErrorBar, { error: sendBoxError, dismissAfterMs: 
+    return React.createElement(SendBoxErrorBar, { error: sendBoxError, dismissAfterMs: 
         // don't dismiss the system message
-        systemMessage !== undefined && (sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message) !== systemMessage ? 10 * 1000 : undefined, onDismiss: onDismiss }));
+        systemMessage !== undefined && (sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message) !== systemMessage ? 10 * 1000 : undefined, onDismiss: onDismiss });
 };
 const isMessageEmpty = (message) => {
     return message.trim().length === 0;

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentProgressError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentProgressError,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentProgressError) {\n        errors.push(attachmentProgressError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */ attachmentProgressError,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}
+{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAc3E;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAe,EAAE;IACtF,MAAM;IACJ,oDAAoD;IACpD,uBAAuB;IACvB,oDAAoD;IACpD,6BAA6B,EAC7B,aAAa,EACb,kBAAkB,EACnB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAC9F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,eAAe,CAAC;gBACd,OAAO,EAAE,aAAa;gBACtB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9D,eAAe,CAAC;gBACd,OAAO,EAAE,kBAAkB;gBAC3B,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,kBAAkB,KAAK,SAAS,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,cAAc,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;YAC/I,eAAe,CAAC,SAAS,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,IAAI,CAAC,EAAE;YACrB,MAAM,MAAM,GAA2B,EAAE,CAAC;YAC1C,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;YACD,oDAAoD;YACpD,IAAI,6BAA6B,EAAE,CAAC;gBAClC,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC7C,CAAC;YACD,oDAAoD;YACpD,IAAI,uBAAuB,EAAE,CAAC;gBAC5B,MAAM,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YACvC,CAAC;YACD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACxB,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,+BAA+B;YAC/B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACtE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,oDAAoD,CAAA,uBAAuB,EAAE,oDAAoD,CAAA,6BAA6B,CAAC,CAAC,CAAC;IACrK,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,IAAI,aAAa,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,eAAe,CAAC;gBACd,OAAO,EAAE,aAAa;gBACtB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,YAAY,EAAE,cAAc;QAC3D,mCAAmC;QACnC,aAAa,KAAK,SAAS,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,MAAK,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AAC3H,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,CAAC,OAAe,EAAW,EAAE;IAClD,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentProgressError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentProgressError,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({\n        message: systemMessage,\n        timestamp: Date.now()\n      });\n    }\n  }, [systemMessage]);\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({\n        message: textTooLongMessage,\n        timestamp: Date.now()\n      });\n    }\n  }, [textTooLongMessage]);\n  useEffect(() => {\n    if ((textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) && (systemMessage === undefined || isMessageEmpty(systemMessage))) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n  useEffect(() => {\n    setSendBoxError(prev => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentProgressError) {\n        errors.push(attachmentProgressError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [/* @conditional-compile-remove(attachment-upload) */attachmentProgressError, /* @conditional-compile-remove(attachment-upload) */attachmentUploadsPendingError]);\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({\n        message: systemMessage,\n        timestamp: Date.now()\n      });\n    }\n  }, [systemMessage]);\n  return <SendBoxErrorBar error={sendBoxError} dismissAfterMs={\n  // don't dismiss the system message\n  systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined} onDismiss={onDismiss} />;\n};\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};"]}

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

@@ -28,7 +28,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarBoldButton',
             icon: 'RichTextBoldButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleBold(editor);
                 });
             },
@@ -43,7 +43,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarItalicButton',
             icon: 'RichTextItalicButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleItalic(editor);
                 });
             },
@@ -58,7 +58,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarUnderlineButton',
             icon: 'RichTextUnderlineButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleUnderline(editor);
                 });
             },
@@ -73,7 +73,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarBulletListButton',
             icon: 'RichTextBulletListButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleBullet(editor);
                 });
             },
@@ -88,7 +88,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarNumberListButton',
             icon: 'RichTextNumberListButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleNumbering(editor);
                 });
             },
@@ -103,7 +103,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentDecreaseButton',
             icon: 'RichTextIndentDecreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'outdent');
                 });
             },
@@ -118,7 +118,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentIncreaseButton',
             icon: 'RichTextIndentIncreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'indent');
                 });
             },
@@ -132,7 +132,7 @@ export const RichTextToolbar = (props) => {
     }, [theme]);
     const tableButton = useMemo(() => {
         return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column, row) => {
-            plugin.onToolbarButtonClick((editor) => {
+            plugin.onToolbarButtonClick(editor => {
                 //add format
                 insertTable(editor, column, row);
                 // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu
@@ -144,47 +144,29 @@ export const RichTextToolbar = (props) => {
         });
     }, [plugin, strings, theme]);
     const buttons = useMemo(() => {
-        return [
-            boldButton,
-            italicButton,
-            underlineButton,
-            divider('RichTextRibbonTextFormatDivider'),
-            bulletListButton,
-            numberListButton,
-            indentDecreaseButton,
-            indentIncreaseButton,
-            divider('RichTextRibbonTableDivider'),
-            tableButton
-        ];
-    }, [
-        boldButton,
-        italicButton,
-        underlineButton,
-        divider,
-        bulletListButton,
-        numberListButton,
-        indentDecreaseButton,
-        indentIncreaseButton,
-        tableButton
-    ]);
+        return [boldButton, italicButton, underlineButton, divider('RichTextRibbonTextFormatDivider'), bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, divider('RichTextRibbonTableDivider'), tableButton];
+    }, [boldButton, italicButton, underlineButton, divider, bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, tableButton]);
     const overflowButtonProps = useMemo(() => {
         return {
             ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,
             styles: toolbarButtonStyle(theme),
             menuProps: {
-                items: [], // CommandBar will determine items rendered in overflow
+                items: [],
+                // CommandBar will determine items rendered in overflow
                 isBeakVisible: false,
                 styles: ribbonOverflowButtonStyle(theme)
             }
         };
     }, [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 });
 };
 const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
     return {
         'data-testid': dataTestId,
         key: key,
-        iconProps: { iconName: icon },
+        iconProps: {
+            iconName: icon
+        },
         onClick: onClick,
         text: text,
         ariaLabel: text,

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

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