@azure/communication-react 1.16.0-beta.1 → 1.16.1

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

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

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

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

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

@@ -1,34 +0,0 @@
-import React, { ReactNode } from 'react';
-import { BaseCustomStyles } from '../../types';
-import { RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';
-import { RichTextSendBoxStrings } from './RichTextSendBox';
-/**
- * @private
- */
-export interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {
-}
-/**
- * @private
- */
-export interface RichTextInputBoxComponentProps {
-    placeholderText?: string;
-    initialContent?: string;
-    content?: string;
-    onChange: (newValue?: string) => void;
-    onEnterKeyDown?: () => void;
-    editorComponentRef: React.RefObject<RichTextEditorComponentRef>;
-    strings: Partial<RichTextSendBoxStrings>;
-    disabled: boolean;
-    actionComponents: ReactNode;
-    onRenderAttachmentUploads?: () => JSX.Element;
-    hasAttachments?: boolean;
-    richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
-    isHorizontalLayoutDisabled?: boolean;
-    autoFocus?: 'sendBoxTextField';
-    onTyping?: () => Promise<void>;
-}
-/**
- * @private
- */
-export declare const RichTextInputBoxComponent: (props: RichTextInputBoxComponentProps) => JSX.Element;
-//# sourceMappingURL=RichTextInputBoxComponent.d.ts.map

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

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

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

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

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

@@ -1,138 +0,0 @@
-/// <reference types="react" />
-import { SendBoxStrings } from '../SendBox';
-import { AttachmentMetadataWithProgress } from '../../types/Attachment';
-/**
- * Strings of {@link RichTextSendBox} that can be overridden.
- *
- * @beta
- */
-export interface RichTextSendBoxStrings extends SendBoxStrings {
-    /**
-     * Tooltip text for the bold button.
-     */
-    boldTooltip: string;
-    /**
-     * Tooltip text for the italic button.
-     */
-    italicTooltip: string;
-    /**
-     * Tooltip text for the underline button.
-     */
-    underlineTooltip: string;
-    /**
-     * Tooltip text for the bullet list button.
-     */
-    bulletListTooltip: string;
-    /**
-     * Tooltip text for the number list button.
-     */
-    numberListTooltip: string;
-    /**
-     * Tooltip text for the increase indent button.
-     */
-    increaseIndentTooltip: string;
-    /**
-     * Tooltip text for the decrease indent button.
-     */
-    decreaseIndentTooltip: string;
-    /**
-     * Tooltip text insert table button.
-     */
-    insertTableTooltip: string;
-    /**
-     * Tooltip text for the rich text format button button.
-     */
-    richTextFormatButtonTooltip: string;
-    /**
-     * Text for the insert menu item.
-     */
-    insertRowOrColumnMenu: string;
-    /**
-     * Title for the insert table menu.
-     */
-    insertTableMenuTitle: string;
-    /**
-     * Text for the insert menu item to insert row above the current selection.
-     */
-    insertRowAboveMenu: string;
-    /**
-     * Text for the insert menu item to insert row below the current selection.
-     */
-    insertRowBelowMenu: string;
-    /**
-     * Text for the insert menu item to insert column to the left from the current selection.
-     */
-    insertColumnLeftMenu: string;
-    /**
-     * Text for the insert menu item to insert column to the right from the current selection.
-     */
-    insertColumnRightMenu: string;
-    /**
-     * Text for the delete row or column menu.
-     */
-    deleteRowOrColumnMenu: string;
-    /**
-     * Text for the delete column menu.
-     */
-    deleteColumnMenu: string;
-    /**
-     * Text for the delete row menu.
-     */
-    deleteRowMenu: string;
-    /**
-     * Text for the delete table menu.
-     */
-    deleteTableMenu: string;
-}
-/**
- * Props for {@link RichTextSendBox}.
- *
- * @beta
- */
-export interface RichTextSendBoxProps {
-    /**
-     * Optional boolean to disable text box
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * Optional strings to override in component
-     */
-    strings?: Partial<RichTextSendBoxStrings>;
-    /**
-     * Optional text for system message above the text box
-     */
-    systemMessage?: string;
-    /**
-     * Optional array of type {@link AttachmentMetadataWithProgress}
-     * to render attachments being uploaded in the SendBox.
-     * @beta
-     */
-    attachmentsWithProgress?: AttachmentMetadataWithProgress[];
-    /**
-     * enumerable to determine if the input box has focus on render or not.
-     * When undefined nothing has focus on render
-     */
-    autoFocus?: 'sendBoxTextField';
-    /**
-     * Optional callback to remove the attachment upload before sending by clicking on
-     * cancel icon.
-     * @beta
-     */
-    onCancelAttachmentUpload?: (attachmentId: string) => void;
-    /**
-     * Callback function used when the send button is clicked.
-     */
-    onSendMessage: (content: string) => Promise<void>;
-    /**
-     * Optional callback called when user is typing
-     */
-    onTyping?: () => Promise<void>;
-}
-/**
- * A component to render SendBox with Rich Text Editor support.
- *
- * @beta
- */
-export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
-//# sourceMappingURL=RichTextSendBox.d.ts.map

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

@@ -1,186 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { RichTextInputBoxComponent } from './RichTextInputBoxComponent';
-import { Icon, Stack } from '@fluentui/react';
-import { useLocale } from '../../localization';
-import { sendIconStyle } from '../styles/SendBox.styles';
-import { InputBoxButton } from '../InputBoxButton';
-import { RichTextSendBoxErrors } from './RichTextSendBoxErrors';
-import { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';
-import { useTheme } from '../../theming';
-import { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';
-/* @conditional-compile-remove(attachment-upload) */
-import { _AttachmentUploadCards } from '../AttachmentUploadCards';
-/* @conditional-compile-remove(attachment-upload) */
-import { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';
-/* @conditional-compile-remove(attachment-upload) */
-import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
-/* @conditional-compile-remove(attachment-upload) */
-import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
-/**
- * A component to render SendBox with Rich Text Editor support.
- *
- * @beta
- */
-export const RichTextSendBox = (props) => {
-    const { disabled = false, systemMessage, autoFocus, onSendMessage, onTyping, 
-    /* @conditional-compile-remove(attachment-upload) */
-    attachmentsWithProgress, 
-    /* @conditional-compile-remove(attachment-upload) */
-    onCancelAttachmentUpload } = props;
-    const theme = useTheme();
-    const locale = useLocale();
-    const localeStrings = useMemo(() => {
-        /* @conditional-compile-remove(rich-text-editor) */
-        return locale.strings.richTextSendBox;
-        return locale.strings.sendBox;
-    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);
-    const strings = useMemo(() => {
-        return Object.assign(Object.assign({}, localeStrings), props.strings);
-    }, [localeStrings, props.strings]);
-    const [contentValue, setContentValue] = useState('');
-    const [contentValueOverflow, setContentValueOverflow] = useState(false);
-    /* @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 setContent = useCallback((newValue) => {
-        if (newValue === undefined) {
-            return;
-        }
-        setContentValueOverflow(isMessageTooLong(newValue.length));
-        setContentValue(newValue);
-    }, []);
-    const sendMessageOnClick = useCallback(() => {
-        var _a, _b, _c;
-        if (disabled || contentValueOverflow) {
-            return;
-        }
-        // Don't send message until all attachments have been uploaded successfully
-        /* @conditional-compile-remove(attachment-upload) */
-        setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(attachment-upload) */
-        if (hasIncompleteAttachmentUploads(attachmentsWithProgress)) {
-            setAttachmentUploadsPendingError({
-                message: strings.attachmentUploadsPendingError,
-                timestamp: Date.now()
-            });
-            return;
-        }
-        const message = contentValue;
-        // get plain text content from the editor to check if the message is empty
-        // as the content may contain tags even when the content is empty
-        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
-        const hasContent = !isContentEmpty({
-            plainTextContent,
-            content: message,
-            placeholder: strings.placeholderText
-        });
-        // 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) */ hasCompletedAttachmentUploads(attachmentsWithProgress)) {
-            onSendMessage(message);
-            setContentValue('');
-            (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.setEmptyContent();
-        }
-        (_c = editorComponentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-    }, [contentValue, contentValueOverflow, disabled, onSendMessage, strings.placeholderText, /* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress, /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError]);
-    const hasErrorMessage = useMemo(() => {
-        var _a;
-        return !!systemMessage || !!contentTooLongMessage || /* @conditional-compile-remove(attachment-upload) */
-            !!attachmentUploadsPendingError || /* @conditional-compile-remove(attachment-upload) */
-            !!((_a = attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error);
-    }, [
-        attachmentsWithProgress, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploadsPendingError, systemMessage
-    ]);
-    const onRenderSendIcon = useCallback((isHover) => {
-        var _a;
-        // get plain text content from the editor to check if the message is empty
-        // as the content may contain tags even when the content is empty
-        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
-        const hasContent = !isContentEmpty({
-            plainTextContent: plainTextContent,
-            content: contentValue,
-            placeholder: strings.placeholderText
-        });
-        return React.createElement(Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
-                theme,
-                hasText: hasContent,
-                /* @conditional-compile-remove(attachment-upload) */
-                hasAttachment: false,
-                hasErrorMessage: hasErrorMessage,
-                defaultTextColor: theme.palette.neutralSecondary,
-                disabled: disabled
-            }) });
-    }, [contentValue, disabled, hasErrorMessage, strings.placeholderText, theme]);
-    const sendBoxErrorsProps = useMemo(() => {
-        var _a, _b;
-        /* @conditional-compile-remove(attachment-upload) */
-        const uploadErrorMessage = (_b = (_a = attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.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,
-            systemMessage: systemMessage,
-            textTooLongMessage: contentTooLongMessage
-        };
-    }, [
-        attachmentsWithProgress, contentTooLongMessage, /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploadsPendingError, systemMessage
-    ]);
-    /* @conditional-compile-remove(attachment-upload) */
-    const onRenderAttachmentUploads = useCallback(() => {
-        return React.createElement(Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(_AttachmentUploadCards, { attachmentsWithProgress: attachmentsWithProgress, onCancelAttachmentUpload: onCancelAttachmentUpload, strings: {
-                        removeAttachment: strings.removeAttachment,
-                        uploading: strings.uploading,
-                        uploadCompleted: strings.uploadCompleted,
-                        attachmentMoreMenu: strings.attachmentMoreMenu
-                    } })));
-    }, [attachmentsWithProgress, onCancelAttachmentUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading, strings.attachmentMoreMenu, theme]);
-    const sendButton = useMemo(() => {
-        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 });
-    }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
-    /* @conditional-compile-remove(attachment-upload) */
-    const hasAttachmentUploads = useMemo(() => {
-        return hasCompletedAttachmentUploads(attachmentsWithProgress) || hasIncompleteAttachmentUploads(attachmentsWithProgress);
-    }, [attachmentsWithProgress]);
-    return React.createElement(Stack, null,
-        React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
-        React.createElement(RichTextInputBoxComponent
-        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
-        // setting the content will ensure that the latest content is used when editor is re-rendered
-        , { 
-            // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
-            // setting the content will ensure that the latest content is used when editor is re-rendered
-            content: contentValue, 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 }));
-};
-/**
- * Checks if the content of the rich text editor is empty.
- *
- * @param {Object} params - The parameters for the function.
- * @param {string | undefined} params.plainTextContent - The plain text content of the editor.
- * @param {string} params.content - The HTML content of the editor.
- * @param {string} params.placeholder - The placeholder text of the editor.
- * @returns {boolean} - True if the content is empty, false otherwise.
- */
-const isContentEmpty = ({ plainTextContent, content, placeholder }) => {
-    // RoosterJS returns placeholder text as plain text when the editor is empty and in this case,
-    // plainTextContent contains only placeholder text but content doesn't include the placeholder text
-    // this needs to be reviewed after migration to the content model packages.
-    const plainTextContainsPlaceholderOnly = plainTextContent === placeholder && !content.includes(placeholder);
-    return plainTextContainsPlaceholderOnly || sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length === 0;
-};
-//# sourceMappingURL=RichTextSendBox.js.map