npm - @azure/communication-react - Versions diffs - 1.25.0-alpha-202502280017 → 1.25.0-beta.1 - Mend

@azure/communication-react 1.25.0-alpha-202502280017 → 1.25.0-beta.1

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

Files changed (1120) hide show

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

@@ -15,7 +15,6 @@ import { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';
 import { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';
 import { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';
 import { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getPreviousInlineImages, getRemovedInlineImages, removeLocalBlobs, cleanAllLocalBlobs } from '../utils/RichTextEditorUtils';
 import { ContextualMenu } from '@fluentui/react';
 import { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';
@@ -27,22 +26,14 @@ import UndoRedoPlugin from './Plugins/UndoRedoPlugin';
  * @beta
  */
 export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onCompositionUpdate, onContentModelUpdate, contentModel,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onPaste,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onInsertInlineImage } = props;
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onCompositionUpdate, onContentModelUpdate, contentModel, onPaste, onInsertInlineImage } = props;
     const editor = useRef(null);
     const editorDiv = useRef(null);
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = useState(null);
-    const previousThemeDirection = useRef(themeDirection(theme));
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    // This will be set when the editor is initialized and when the content is updated.
+    const previousThemeDirection = useRef(themeDirection(theme)); // This will be set when the editor is initialized and when the content is updated.
     const [previousInlineImages, setPreviousInlineImages] = useState([]);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState({});
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         return () => {
             // Cleanup Local Blob URLs when the component is unmounted
@@ -67,9 +58,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             },
             setEmptyContent() {
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 setPreviousInlineImages([]);
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 cleanAllLocalBlobs(inlineImageLocalBlobs);
                 if (editor.current) {
                     // remove all content from the editor and update the model
@@ -94,18 +83,16 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             }
         };
-    }, [/* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs, onContentModelUpdate]);
+    }, [inlineImageLocalBlobs, onContentModelUpdate]);
     const toolbarPlugin = React.useMemo(() => {
         return new RichTextToolbarPlugin();
     }, []);
     const placeholderPlugin = useMemo(() => {
         var _a;
         const textColor = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralSecondary;
-        return new PlaceholderPlugin('', textColor
-            ? {
-                textColor: textColor
-            }
-            : undefined);
+        return new PlaceholderPlugin('', textColor ? {
+            textColor: textColor
+        } : undefined);
     }, [theme]);
     useEffect(() => {
         if (placeholderText !== undefined) {
@@ -121,27 +108,21 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     const copyPastePlugin = useMemo(() => {
         return new CopyPastePlugin();
     }, []);
-    const onChangeContent = useCallback((/* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldUpdateInlineImages) => {
+    const onChangeContent = useCallback((shouldUpdateInlineImages) => {
         if (editor.current === null) {
             return;
         }
         const content = exportContent(editor.current);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         let removedInlineImages = [];
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (shouldUpdateInlineImages) {
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
             removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
         }
-        onChange &&
-            onChange(content, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onChange && onChange(content, removedInlineImages);
         setPreviousInlineImages(getPreviousInlineImages(content));
-    }, [onChange, /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages]);
+    }, [onChange, previousInlineImages]);
     useEffect(() => {
         // don't set callback in plugin constructor to update callback without plugin recreation
-        updatePlugin.onUpdate = (event,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldRemoveInlineImages) => {
+        updatePlugin.onUpdate = (event, shouldRemoveInlineImages) => {
             if (editor.current === null) {
                 return;
             }
@@ -150,37 +131,26 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             }
             else {
                 const content = exportContent(editor.current);
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 let removedInlineImages = [];
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 if (shouldRemoveInlineImages) {
                     removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
                     if (removedInlineImages.length > 0) {
                         removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);
                     }
                 }
-                onChange &&
-                    onChange(content, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onChange && onChange(content, removedInlineImages);
                 setPreviousInlineImages(getPreviousInlineImages(content));
             }
         };
-    }, [
-        onChange,
-        onContentModelUpdate,
-        updatePlugin,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs
-    ]);
+    }, [onChange, onContentModelUpdate, updatePlugin, previousInlineImages, inlineImageLocalBlobs]);
     const undoRedoPlugin = useMemo(() => {
         return new UndoRedoPlugin();
     }, []);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         if (onInsertInlineImage) {
             copyPastePlugin.onInsertInlineImage = (imageAttributes) => {
                 const { id, src } = imageAttributes;
-                setInlineImageLocalBlobs((prev) => {
+                setInlineImageLocalBlobs(prev => {
                     if (!id || !src) {
                         return prev;
                     }
@@ -196,7 +166,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);
     useEffect(() => {
         undoRedoPlugin.onUpdateContent = () => {
-            onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
+            onChangeContent(true);
         };
     }, [onChangeContent, undoRedoPlugin]);
     const keyboardInputPlugin = useMemo(() => {
@@ -226,14 +196,19 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     const onContextMenuDismiss = useCallback(() => {
         setContextMenuProps(null);
     }, []);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         copyPastePlugin.onPaste = onPaste;
     }, [copyPastePlugin, onPaste]);
     const plugins = useMemo(() => {
-        const contentEdit = new EditPlugin({ handleTabKey: false });
+        const contentEdit = new EditPlugin({
+            handleTabKey: false
+        });
         // AutoFormatPlugin previously was a part of the edit plugin
-        const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });
+        const autoFormatPlugin = new AutoFormatPlugin({
+            autoBullet: true,
+            autoNumbering: true,
+            autoLink: true
+        });
         const roosterPastePlugin = new PastePlugin(false, {
             additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],
             additionalAllowedTags: [],
@@ -242,32 +217,10 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         });
         const shortcutPlugin = new ShortcutPlugin();
         const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);
-        return [
-            placeholderPlugin,
-            keyboardInputPlugin,
-            contentEdit,
-            autoFormatPlugin,
-            updatePlugin,
-            copyPastePlugin,
-            roosterPastePlugin,
-            toolbarPlugin,
-            shortcutPlugin,
+        return [placeholderPlugin, keyboardInputPlugin, contentEdit, autoFormatPlugin, updatePlugin, copyPastePlugin, roosterPastePlugin, toolbarPlugin, shortcutPlugin,
             // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
-            contextMenuPlugin,
-            tableContextMenuPlugin,
-            undoRedoPlugin
-        ];
-    }, [
-        onContextMenuRender,
-        onContextMenuDismiss,
-        placeholderPlugin,
-        keyboardInputPlugin,
-        updatePlugin,
-        copyPastePlugin,
-        toolbarPlugin,
-        tableContextMenuPlugin,
-        undoRedoPlugin
-    ]);
+            contextMenuPlugin, tableContextMenuPlugin, undoRedoPlugin];
+    }, [onContextMenuRender, onContextMenuDismiss, placeholderPlugin, keyboardInputPlugin, updatePlugin, copyPastePlugin, toolbarPlugin, tableContextMenuPlugin, undoRedoPlugin]);
     const announcerStringGetter = useCallback((key) => {
         var _a, _b;
         switch (key) {
@@ -281,9 +234,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     }, [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]);
     useEffect(() => {
         var _a;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         const prevInlineImage = getPreviousInlineImages(initialContent);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         setPreviousInlineImages(prevInlineImage);
         const initialModel = createEditorInitialModel(initialContent, contentModel);
         if (editorDiv.current) {
@@ -332,11 +283,13 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             previousThemeDirection.current = themeDirectionValue;
         }
     }, [theme]);
-    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+    return React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && toolbar,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme) },
             React.createElement("div", { id: "richTextSendBox", ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles), "aria-label": placeholderText })),
-        contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: { isBeakVisible: false } }))));
+        contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: {
+                isBeakVisible: false
+            } })));
 });
 const createEditorInitialModel = (initialContent, contentModel) => {
     if (contentModel) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n ContentModelDocument,\n ContentModelParagraph,\n EditorPlugin,\n IEditor,\n ReadonlyContentModelBlockGroup,\n ShallowMutableContentModelDocument,\n KnownAnnounceStrings\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport {\n createBr,\n createEmptyModel,\n createParagraph,\n createSelectionMarker,\n setSelection\n} from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport {\n AutoFormatPlugin,\n EditPlugin,\n PastePlugin,\n ShortcutPlugin,\n DefaultSanitizers\n} from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n getPreviousInlineImages,\n getRemovedInlineImages,\n removeLocalBlobs,\n cleanAllLocalBlobs\n} from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\nimport UndoRedoPlugin from './Plugins/UndoRedoPlugin';\n\n/\n Style props for {@link RichTextEditor}.\n \n @private\n /\nexport interface RichTextEditorStyleProps {\n minHeight: string;\n maxHeight: string;\n}\n\n/\n Props for {@link RichTextEditor}.\n \n @private\n /\nexport interface RichTextEditorProps {\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => void;\n onKeyDown?: (ev: KeyboardEvent) => void;\n // OnKeyDown aren't called for composition events, so we need to handle them separately\n onCompositionUpdate?: () => void;\n // update the current content of the rich text editor\n onContentModelUpdate?: (contentModel: ContentModelDocument \| undefined) => void;\n contentModel?: ContentModelDocument \| undefined;\n placeholderText?: string;\n strings: Partial<RichTextStrings>;\n showRichTextEditorFormatting: boolean;\n styles: RichTextEditorStyleProps;\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n Represents a reference to the RichTextEditor component.\n /\nexport interface RichTextEditorComponentRef {\n /\n Sets focus on the RichTextEditor component.\n /\n focus: () => void;\n\n /\n Sets the content of the RichTextEditor component to an empty string.\n /\n setEmptyContent: () => void;\n\n /\n Retrieves the plain text content of the RichTextEditor component.\n * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n /\n getPlainContent: () => string \| undefined;\n}\n\n/\n A component to wrap RoosterJS Rich Text Editor.\n \n @beta\n /\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n const {\n initialContent,\n onChange,\n placeholderText,\n strings,\n showRichTextEditorFormatting,\n autoFocus,\n onKeyDown,\n onCompositionUpdate,\n onContentModelUpdate,\n contentModel,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage\n } = props;\n const editor = useRef<IEditor \| null>(null);\n const editorDiv = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps \| null>(null);\n const previousThemeDirection = useRef(themeDirection(theme));\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n // This will be set when the editor is initialized and when the content is updated.\n const [previousInlineImages, setPreviousInlineImages] = useState<Record<string, string>[]>([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState<Record<string, string>>({});\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n return () => {\n // Cleanup Local Blob URLs when the component is unmounted\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n };\n // This effect should only run once when the component is unmounted, so we don't need to add any dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (editor.current) {\n if (!showRichTextEditorFormatting) {\n editor.current?.focus();\n }\n }\n }, [showRichTextEditorFormatting]);\n\n useImperativeHandle(ref, () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n },\n setEmptyContent() {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages([]);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n\n if (editor.current) {\n // remove all content from the editor and update the model\n // ContentChanged event will be sent by RoosterJS automatically\n editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n // Create a new empty paragraph with selection marker\n // this is needed for correct processing of images after the content is deleted\n const newModel = createEmptyModel();\n model.blocks = newModel.blocks;\n return true;\n });\n //reset content model\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n }\n },\n getPlainContent() {\n if (editor.current) {\n return exportContent(editor.current, 'PlainTextFast');\n } else {\n return undefined;\n }\n }\n };\n }, [/ @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs, onContentModelUpdate]);\n\n const toolbarPlugin = React.useMemo(() => {\n return new RichTextToolbarPlugin();\n }, []);\n\n const placeholderPlugin = useMemo(() => {\n const textColor = theme.palette?.neutralSecondary;\n return new PlaceholderPlugin(\n '',\n textColor\n ? {\n textColor: textColor\n }\n : undefined\n );\n }, [theme]);\n\n useEffect(() => {\n if (placeholderText !== undefined) {\n placeholderPlugin.updatePlaceholder(placeholderText);\n }\n }, [placeholderPlugin, placeholderText]);\n\n const toolbar = useMemo(() => {\n return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n }, [strings, toolbarPlugin]);\n\n const updatePlugin = useMemo(() => {\n return new UpdateContentPlugin();\n }, []);\n\n const copyPastePlugin = useMemo(() => {\n return new CopyPastePlugin();\n }, []);\n\n const onChangeContent = useCallback(\n (/ @conditional-compile-remove(rich-text-editor-image-upload) / shouldUpdateInlineImages?: boolean) => {\n if (editor.current === null) {\n return;\n }\n const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldUpdateInlineImages) {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n },\n [onChange, / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages]\n );\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (\n event: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / shouldRemoveInlineImages?: boolean\n ) => {\n if (editor.current === null) {\n return;\n }\n if (event === UpdateEvent.Blur \|\| event === UpdateEvent.Dispose) {\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n } else {\n const content = exportContent(editor.current);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n let removedInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (shouldRemoveInlineImages) {\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n if (removedInlineImages.length > 0) {\n removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);\n }\n }\n\n onChange &&\n onChange(content, / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(getPreviousInlineImages(content));\n }\n };\n }, [\n onChange,\n onContentModelUpdate,\n updatePlugin,\n / @conditional-compile-remove(rich-text-editor-image-upload) / previousInlineImages,\n / @conditional-compile-remove(rich-text-editor-image-upload) / inlineImageLocalBlobs\n ]);\n\n const undoRedoPlugin = useMemo(() => {\n return new UndoRedoPlugin();\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n if (onInsertInlineImage) {\n copyPastePlugin.onInsertInlineImage = (imageAttributes: Record<string, string>) => {\n const { id, src } = imageAttributes;\n setInlineImageLocalBlobs((prev) => {\n if (!id \|\| !src) {\n return prev;\n }\n return { ...prev, [id]: src };\n });\n onInsertInlineImage(imageAttributes);\n };\n } else {\n copyPastePlugin.onInsertInlineImage = undefined;\n }\n undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;\n }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);\n\n useEffect(() => {\n undoRedoPlugin.onUpdateContent = () => {\n onChangeContent(/ @conditional-compile-remove(rich-text-editor-image-upload) / true);\n };\n }, [onChangeContent, undoRedoPlugin]);\n\n const keyboardInputPlugin = useMemo(() => {\n return new KeyboardInputPlugin();\n }, []);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onKeyDown = onKeyDown;\n }, [keyboardInputPlugin, onKeyDown]);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onCompositionUpdate = onCompositionUpdate;\n }, [keyboardInputPlugin, onCompositionUpdate]);\n\n const tableContextMenuPlugin = useMemo(() => {\n return new TableEditContextMenuProvider();\n }, []);\n\n useEffect(() => {\n tableContextMenuPlugin.updateStrings(strings);\n }, [tableContextMenuPlugin, strings]);\n\n const onContextMenuRender = useCallback(\n (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n setContextMenuProps({\n items: items,\n target: container,\n onDismiss: onDismiss\n });\n },\n []\n );\n\n const onContextMenuDismiss = useCallback((): void => {\n setContextMenuProps(null);\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n copyPastePlugin.onPaste = onPaste;\n }, [copyPastePlugin, onPaste]);\n\n const plugins: EditorPlugin[] = useMemo(() => {\n const contentEdit = new EditPlugin({ handleTabKey: false });\n // AutoFormatPlugin previously was a part of the edit plugin\n const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n const roosterPastePlugin = new PastePlugin(false, {\n additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n additionalAllowedTags: [],\n styleSanitizers: DefaultSanitizers,\n attributeSanitizers: {}\n });\n\n const shortcutPlugin = new ShortcutPlugin();\n const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n return [\n placeholderPlugin,\n keyboardInputPlugin,\n contentEdit,\n autoFormatPlugin,\n updatePlugin,\n copyPastePlugin,\n roosterPastePlugin,\n toolbarPlugin,\n shortcutPlugin,\n // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n contextMenuPlugin,\n tableContextMenuPlugin,\n undoRedoPlugin\n ];\n }, [\n onContextMenuRender,\n onContextMenuDismiss,\n placeholderPlugin,\n keyboardInputPlugin,\n updatePlugin,\n copyPastePlugin,\n toolbarPlugin,\n tableContextMenuPlugin,\n undoRedoPlugin\n ]);\n\n const announcerStringGetter = useCallback(\n (key: KnownAnnounceStrings): string => {\n switch (key) {\n case 'announceListItemBullet':\n return strings.richTextNewBulletedListItemAnnouncement ?? '';\n case 'announceListItemNumbering':\n return strings.richTextNewNumberedListItemAnnouncement ?? '';\n case 'announceOnFocusLastCell':\n return '';\n }\n },\n [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]\n );\n\n useEffect(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const prevInlineImage = getPreviousInlineImages(initialContent);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setPreviousInlineImages(prevInlineImage);\n\n const initialModel = createEditorInitialModel(initialContent, contentModel);\n if (editorDiv.current) {\n editor.current = new Editor(editorDiv.current, {\n inDarkMode: isDarkThemed(theme),\n // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n doNotAdjustEditorColor: true,\n imageSelectionBorderColor: theme.palette.themePrimary,\n tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n plugins: plugins,\n initialModel: initialModel,\n defaultModelToDomOptions: {\n formatApplierOverride: {\n // apply border and dataset formats for table\n border: borderApplier,\n dataset: dataSetApplier\n }\n },\n announcerStringGetter: announcerStringGetter\n });\n }\n\n if (autoFocus === 'sendBoxTextField') {\n editor.current?.focus();\n }\n\n return () => {\n if (editor.current) {\n editor.current.dispose();\n editor.current = null;\n }\n };\n // don't update the editor on deps update as everything is handled in separate hooks or plugins\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme, plugins, announcerStringGetter]);\n\n useEffect(() => {\n const themeDirectionValue = themeDirection(theme);\n // check that editor exists and theme was actually changed\n // as format.direction will be undefined if setDirection is not called\n if (editor.current && previousThemeDirection.current !== themeDirectionValue) {\n const format = getFormatState(editor.current);\n if (format.direction !== themeDirectionValue) {\n // should be set after the hook where editor is created as the editor might be null\n // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)\n // that's why it's not part of the create editor hook\n setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');\n }\n previousThemeDirection.current = themeDirectionValue;\n }\n }, [theme]);\n\n return (\n <div data-testid={'rich-text-editor-wrapper'}>\n {showRichTextEditorFormatting && toolbar}\n <div className={richTextEditorWrapperStyle(theme)}>\n {/ div that is used by Rooster JS as a parent of the editor */}\n <div\n id=\"richTextSendBox\"\n ref={editorDiv}\n tabIndex={0}\n role=\"textbox\"\n aria-multiline=\"true\"\n data-testid={'rooster-rich-text-editor'}\n className={richTextEditorStyle(props.styles)}\n aria-label={placeholderText}\n />\n </div>\n {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n </div>\n );\n});\n\nconst createEditorInitialModel = (\n initialContent?: string,\n contentModel?: ContentModelDocument\n): ContentModelDocument \| undefined => {\n if (contentModel) {\n // contentModel is the current content of the editor\n return contentModel;\n } else {\n const initialContentValue = initialContent;\n const initialModel =\n initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n if (initialModel && initialModel.blocks.length > 0) {\n // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n // to set focus to the end of the content\n const lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n if (lastBlock?.blockType === 'Paragraph') {\n // now lastBlock is paragraph\n setSelectionAfterLastSegment(initialModel, lastBlock);\n } else {\n const block = createParagraph(false);\n initialModel.blocks.push(block);\n setSelectionAfterLastSegment(initialModel, block);\n // add content to the paragraph, otherwise height might be calculated incorrectly\n block.segments.push(createBr());\n }\n }\n return initialModel;\n }\n};\n\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n //selection marker should have the same format as the last segment if any\n const format = block.segments.length > 0 ? block.segments[block.segments.length - 1]?.format : undefined;\n const marker = createSelectionMarker(format);\n block.segments.push(marker);\n setSelection(model, marker);\n};\n\nconst themeDirection = (theme: Theme): 'rtl' \| 'ltr' => {\n return theme.rtl ? 'rtl' : 'ltr';\n};\n"]}
1	+ {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../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, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type { ContentModelDocument, ContentModelParagraph, EditorPlugin, IEditor, ReadonlyContentModelBlockGroup, ShallowMutableContentModelDocument, KnownAnnounceStrings } from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createBr, createEmptyModel, createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin, DefaultSanitizers } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\nimport { getPreviousInlineImages, getRemovedInlineImages, removeLocalBlobs, cleanAllLocalBlobs } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\nimport UndoRedoPlugin from './Plugins/UndoRedoPlugin';\n\n/*\n Style props for {@link RichTextEditor}.\n \n @private\n /\nexport interface RichTextEditorStyleProps {\n minHeight: string;\n maxHeight: string;\n}\n\n/\n Props for {@link RichTextEditor}.\n \n @private\n /\nexport interface RichTextEditorProps {\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (newValue?: string, removedInlineImages?: Record<string, string>[]) => void;\n onKeyDown?: (ev: KeyboardEvent) => void;\n // OnKeyDown aren't called for composition events, so we need to handle them separately\n onCompositionUpdate?: () => void;\n // update the current content of the rich text editor\n onContentModelUpdate?: (contentModel: ContentModelDocument \| undefined) => void;\n contentModel?: ContentModelDocument \| undefined;\n placeholderText?: string;\n strings: Partial<RichTextStrings>;\n showRichTextEditorFormatting: boolean;\n styles: RichTextEditorStyleProps;\n autoFocus?: 'sendBoxTextField';\n onPaste?: (event: {\n content: DocumentFragment;\n }) => void;\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n Represents a reference to the RichTextEditor component.\n /\nexport interface RichTextEditorComponentRef {\n /\n Sets focus on the RichTextEditor component.\n /\n focus: () => void;\n\n /\n Sets the content of the RichTextEditor component to an empty string.\n /\n setEmptyContent: () => void;\n\n /\n Retrieves the plain text content of the RichTextEditor component.\n * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n /\n getPlainContent: () => string \| undefined;\n}\n\n/\n A component to wrap RoosterJS Rich Text Editor.\n \n @beta\n /\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n const {\n initialContent,\n onChange,\n placeholderText,\n strings,\n showRichTextEditorFormatting,\n autoFocus,\n onKeyDown,\n onCompositionUpdate,\n onContentModelUpdate,\n contentModel,\n onPaste,\n onInsertInlineImage\n } = props;\n const editor = useRef<IEditor \| null>(null);\n const editorDiv = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps \| null>(null);\n const previousThemeDirection = useRef(themeDirection(theme)); // This will be set when the editor is initialized and when the content is updated.\n const [previousInlineImages, setPreviousInlineImages] = useState<Record<string, string>[]>([]);\n const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState<Record<string, string>>({});\n useEffect(() => {\n return () => {\n // Cleanup Local Blob URLs when the component is unmounted\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n };\n // This effect should only run once when the component is unmounted, so we don't need to add any dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n useEffect(() => {\n if (editor.current) {\n if (!showRichTextEditorFormatting) {\n editor.current?.focus();\n }\n }\n }, [showRichTextEditorFormatting]);\n useImperativeHandle(ref, () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n },\n setEmptyContent() {\n setPreviousInlineImages([]);\n cleanAllLocalBlobs(inlineImageLocalBlobs);\n if (editor.current) {\n // remove all content from the editor and update the model\n // ContentChanged event will be sent by RoosterJS automatically\n editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n // Create a new empty paragraph with selection marker\n // this is needed for correct processing of images after the content is deleted\n const newModel = createEmptyModel();\n model.blocks = newModel.blocks;\n return true;\n });\n //reset content model\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n }\n },\n getPlainContent() {\n if (editor.current) {\n return exportContent(editor.current, 'PlainTextFast');\n } else {\n return undefined;\n }\n }\n };\n }, [inlineImageLocalBlobs, onContentModelUpdate]);\n const toolbarPlugin = React.useMemo(() => {\n return new RichTextToolbarPlugin();\n }, []);\n const placeholderPlugin = useMemo(() => {\n const textColor = theme.palette?.neutralSecondary;\n return new PlaceholderPlugin('', textColor ? {\n textColor: textColor\n } : undefined);\n }, [theme]);\n useEffect(() => {\n if (placeholderText !== undefined) {\n placeholderPlugin.updatePlaceholder(placeholderText);\n }\n }, [placeholderPlugin, placeholderText]);\n const toolbar = useMemo(() => {\n return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n }, [strings, toolbarPlugin]);\n const updatePlugin = useMemo(() => {\n return new UpdateContentPlugin();\n }, []);\n const copyPastePlugin = useMemo(() => {\n return new CopyPastePlugin();\n }, []);\n const onChangeContent = useCallback((shouldUpdateInlineImages?: boolean) => {\n if (editor.current === null) {\n return;\n }\n const content = exportContent(editor.current);\n let removedInlineImages: Record<string, string>[] = [];\n if (shouldUpdateInlineImages) {\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n }\n onChange && onChange(content, removedInlineImages);\n setPreviousInlineImages(getPreviousInlineImages(content));\n }, [onChange, previousInlineImages]);\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (event: string, shouldRemoveInlineImages?: boolean) => {\n if (editor.current === null) {\n return;\n }\n if (event === UpdateEvent.Blur \|\| event === UpdateEvent.Dispose) {\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n } else {\n const content = exportContent(editor.current);\n let removedInlineImages: Record<string, string>[] = [];\n if (shouldRemoveInlineImages) {\n removedInlineImages = getRemovedInlineImages(content, previousInlineImages);\n if (removedInlineImages.length > 0) {\n removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);\n }\n }\n onChange && onChange(content, removedInlineImages);\n setPreviousInlineImages(getPreviousInlineImages(content));\n }\n };\n }, [onChange, onContentModelUpdate, updatePlugin, previousInlineImages, inlineImageLocalBlobs]);\n const undoRedoPlugin = useMemo(() => {\n return new UndoRedoPlugin();\n }, []);\n useEffect(() => {\n if (onInsertInlineImage) {\n copyPastePlugin.onInsertInlineImage = (imageAttributes: Record<string, string>) => {\n const {\n id,\n src\n } = imageAttributes;\n setInlineImageLocalBlobs(prev => {\n if (!id \|\| !src) {\n return prev;\n }\n return {\n ...prev,\n [id]: src\n };\n });\n onInsertInlineImage(imageAttributes);\n };\n } else {\n copyPastePlugin.onInsertInlineImage = undefined;\n }\n undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;\n }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);\n useEffect(() => {\n undoRedoPlugin.onUpdateContent = () => {\n onChangeContent(true);\n };\n }, [onChangeContent, undoRedoPlugin]);\n const keyboardInputPlugin = useMemo(() => {\n return new KeyboardInputPlugin();\n }, []);\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onKeyDown = onKeyDown;\n }, [keyboardInputPlugin, onKeyDown]);\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onCompositionUpdate = onCompositionUpdate;\n }, [keyboardInputPlugin, onCompositionUpdate]);\n const tableContextMenuPlugin = useMemo(() => {\n return new TableEditContextMenuProvider();\n }, []);\n useEffect(() => {\n tableContextMenuPlugin.updateStrings(strings);\n }, [tableContextMenuPlugin, strings]);\n const onContextMenuRender = useCallback((container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n setContextMenuProps({\n items: items,\n target: container,\n onDismiss: onDismiss\n });\n }, []);\n const onContextMenuDismiss = useCallback((): void => {\n setContextMenuProps(null);\n }, []);\n useEffect(() => {\n copyPastePlugin.onPaste = onPaste;\n }, [copyPastePlugin, onPaste]);\n const plugins: EditorPlugin[] = useMemo(() => {\n const contentEdit = new EditPlugin({\n handleTabKey: false\n });\n // AutoFormatPlugin previously was a part of the edit plugin\n const autoFormatPlugin = new AutoFormatPlugin({\n autoBullet: true,\n autoNumbering: true,\n autoLink: true\n });\n const roosterPastePlugin = new PastePlugin(false, {\n additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n additionalAllowedTags: [],\n styleSanitizers: DefaultSanitizers,\n attributeSanitizers: {}\n });\n const shortcutPlugin = new ShortcutPlugin();\n const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n return [placeholderPlugin, keyboardInputPlugin, contentEdit, autoFormatPlugin, updatePlugin, copyPastePlugin, roosterPastePlugin, toolbarPlugin, shortcutPlugin,\n // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n contextMenuPlugin, tableContextMenuPlugin, undoRedoPlugin];\n }, [onContextMenuRender, onContextMenuDismiss, placeholderPlugin, keyboardInputPlugin, updatePlugin, copyPastePlugin, toolbarPlugin, tableContextMenuPlugin, undoRedoPlugin]);\n const announcerStringGetter = useCallback((key: KnownAnnounceStrings): string => {\n switch (key) {\n case 'announceListItemBullet':\n return strings.richTextNewBulletedListItemAnnouncement ?? '';\n case 'announceListItemNumbering':\n return strings.richTextNewNumberedListItemAnnouncement ?? '';\n case 'announceOnFocusLastCell':\n return '';\n }\n }, [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]);\n useEffect(() => {\n const prevInlineImage = getPreviousInlineImages(initialContent);\n setPreviousInlineImages(prevInlineImage);\n const initialModel = createEditorInitialModel(initialContent, contentModel);\n if (editorDiv.current) {\n editor.current = new Editor(editorDiv.current, {\n inDarkMode: isDarkThemed(theme),\n // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n doNotAdjustEditorColor: true,\n imageSelectionBorderColor: theme.palette.themePrimary,\n tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n plugins: plugins,\n initialModel: initialModel,\n defaultModelToDomOptions: {\n formatApplierOverride: {\n // apply border and dataset formats for table\n border: borderApplier,\n dataset: dataSetApplier\n }\n },\n announcerStringGetter: announcerStringGetter\n });\n }\n if (autoFocus === 'sendBoxTextField') {\n editor.current?.focus();\n }\n return () => {\n if (editor.current) {\n editor.current.dispose();\n editor.current = null;\n }\n };\n // don't update the editor on deps update as everything is handled in separate hooks or plugins\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme, plugins, announcerStringGetter]);\n useEffect(() => {\n const themeDirectionValue = themeDirection(theme);\n // check that editor exists and theme was actually changed\n // as format.direction will be undefined if setDirection is not called\n if (editor.current && previousThemeDirection.current !== themeDirectionValue) {\n const format = getFormatState(editor.current);\n if (format.direction !== themeDirectionValue) {\n // should be set after the hook where editor is created as the editor might be null\n // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)\n // that's why it's not part of the create editor hook\n setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');\n }\n previousThemeDirection.current = themeDirectionValue;\n }\n }, [theme]);\n return <div data-testid={'rich-text-editor-wrapper'}>\n {showRichTextEditorFormatting && toolbar}\n <div className={richTextEditorWrapperStyle(theme)}>\n {/ div that is used by Rooster JS as a parent of the editor */}\n <div id=\"richTextSendBox\" ref={editorDiv} tabIndex={0} role=\"textbox\" aria-multiline=\"true\" data-testid={'rooster-rich-text-editor'} className={richTextEditorStyle(props.styles)} aria-label={placeholderText} />\n </div>\n {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{\n isBeakVisible: false\n }} />}\n </div>;\n});\nconst createEditorInitialModel = (initialContent?: string, contentModel?: ContentModelDocument): ContentModelDocument \| undefined => {\n if (contentModel) {\n // contentModel is the current content of the editor\n return contentModel;\n } else {\n const initialContentValue = initialContent;\n const initialModel = initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n if (initialModel && initialModel.blocks.length > 0) {\n // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n // to set focus to the end of the content\n const lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n if (lastBlock?.blockType === 'Paragraph') {\n // now lastBlock is paragraph\n setSelectionAfterLastSegment(initialModel, lastBlock);\n } else {\n const block = createParagraph(false);\n initialModel.blocks.push(block);\n setSelectionAfterLastSegment(initialModel, block);\n // add content to the paragraph, otherwise height might be calculated incorrectly\n block.segments.push(createBr());\n }\n }\n return initialModel;\n }\n};\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n //selection marker should have the same format as the last segment if any\n const format = block.segments.length > 0 ? block.segments[block.segments.length - 1]?.format : undefined;\n const marker = createSelectionMarker(format);\n block.segments.push(marker);\n setSelection(model, marker);\n};\nconst themeDirection = (theme: Theme): 'rtl' \| 'ltr' => {\n return theme.rtl ? 'rtl' : 'ltr';\n};"]}

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

@@ -12,38 +12,26 @@ import { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRich
  * @private
  */
 export const RichTextInputBoxComponent = (props) => {
-    const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents,
-    /* @conditional-compile-remove(file-sharing-acs) */
-    onRenderAttachmentUploads,
-    /* @conditional-compile-remove(file-sharing-acs) */
-    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, autoFocus, onTyping,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onInsertInlineImage } = props;
+    const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents, onRenderAttachmentUploads, hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, autoFocus, onTyping, onInsertInlineImage } = props;
     const theme = useTheme();
     // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(undefined);
     const [contentModel, setContentModel] = useState(undefined);
     const onRenderRichTextEditorIcon = useCallback((isHover) => {
         const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
-        return (React.createElement(Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) }));
+        return React.createElement(Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) });
     }, [disabled, showRichTextEditorFormatting, theme]);
     const actionButtons = useMemo(() => {
-        return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
+        return React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
             React.createElement(Stack, { horizontal: true },
-                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: e => {
                         const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
                         setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);
                         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', ariaExpanded: showRichTextEditorFormatting }),
                 React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
-                actionComponents)));
-    }, [
-        actionComponents,
-        onRenderRichTextEditorIcon,
-        showRichTextEditorFormatting,
-        strings.richTextFormatButtonTooltip,
-        theme
-    ]);
+                actionComponents));
+    }, [actionComponents, onRenderRichTextEditorIcon, showRichTextEditorFormatting, strings.richTextFormatButtonTooltip, theme]);
     const richTextEditorStyle = useMemo(() => {
         return richTextEditorStyleProps(showRichTextEditorFormatting === true);
     }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
@@ -65,18 +53,12 @@ export const RichTextInputBoxComponent = (props) => {
     }, [onTyping]);
     const useHorizontalLayout = useMemo(() => {
         const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
-        return (!isHorizontalLayoutDisabled &&
-            !isRichTextEditorToolbarShown &&
-            /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachments);
-    }, [
-        isHorizontalLayoutDisabled,
-        showRichTextEditorFormatting,
-        /* @conditional-compile-remove(file-sharing-acs) */ hasAttachments
-    ]);
+        return !isHorizontalLayoutDisabled && !isRichTextEditorToolbarShown && !hasAttachments;
+    }, [isHorizontalLayoutDisabled, showRichTextEditorFormatting, hasAttachments]);
     const onContentModelUpdate = useCallback((contentModel) => {
         setContentModel(contentModel);
     }, []);
-    return (React.createElement("div", { className: richTextBorderBoxStyle({
+    return React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
             disabled: !!disabled
         }) },
@@ -89,12 +71,8 @@ export const RichTextInputBoxComponent = (props) => {
             } },
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
-                    React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, onCompositionUpdate: onCompositionUpdate, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate,
-                        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                        onPaste: props.onPaste,
-                        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                        onInsertInlineImage: onInsertInlineImage })), /* @conditional-compile-remove(file-sharing-acs) */
+                    React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, onCompositionUpdate: onCompositionUpdate, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate, onPaste: props.onPaste, onInsertInlineImage: onInsertInlineImage })),
                 onRenderAttachmentUploads && onRenderAttachmentUploads()),
-            actionButtons)));
+            actionButtons));
 };
 //# sourceMappingURL=RichTextInputBoxComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n richTextActionButtonsDividerStyle,\n richTextActionButtonsStackStyle,\n richTextActionButtonsStyle,\n richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n inputBoxContentStackStyle,\n inputBoxRichTextStackItemStyle,\n inputBoxRichTextStackStyle,\n richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (\n newValue?: string,\n / @conditional-compile-remove(rich-text-editor-image-upload) / removedInlineImages?: Record<string, string>[]\n ) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n // Partial needs to be removed when the rich text editor feature goes to GA\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments?: boolean;\n // props for min and max height for the rich text editor\n // otherwise the editor will grow to fit the content\n richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n isHorizontalLayoutDisabled?: boolean;\n autoFocus?: 'sendBoxTextField';\n onTyping?: () => Promise<void>;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads,\n / @conditional-compile-remove(file-sharing-acs) /\n hasAttachments,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false,\n autoFocus,\n onTyping,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage\n } = props;\n const theme = useTheme();\n // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean \| undefined>(undefined);\n const [contentModel, setContentModel] = useState<ContentModelDocument \| undefined>(undefined);\n\n const onRenderRichTextEditorIcon = useCallback(\n (isHover: boolean) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n <Icon\n iconName={\n isHover \|\| isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n }\n className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| isRichTextEditorToolbarShown))}\n />\n );\n },\n [disabled, showRichTextEditorFormatting, theme]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n <Stack horizontal>\n <InputBoxButton\n onRenderIcon={onRenderRichTextEditorIcon}\n onClick={(e) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n ariaLabel={strings.richTextFormatButtonTooltip}\n tooltipContent={strings.richTextFormatButtonTooltip}\n className={richTextActionButtonsStyle}\n data-testId={'rich-text-input-box-format-button'}\n ariaExpanded={showRichTextEditorFormatting}\n />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>\n );\n }, [\n actionComponents,\n onRenderRichTextEditorIcon,\n showRichTextEditorFormatting,\n strings.richTextFormatButtonTooltip,\n theme\n ]);\n\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n } else {\n onTyping?.();\n }\n },\n [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n );\n\n const onCompositionUpdate = useCallback(() => {\n onTyping?.();\n }, [onTyping]);\n\n const useHorizontalLayout = useMemo(() => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return (\n !isHorizontalLayoutDisabled &&\n !isRichTextEditorToolbarShown &&\n / @conditional-compile-remove(file-sharing-acs) / !hasAttachments\n );\n }, [\n isHorizontalLayoutDisabled,\n showRichTextEditorFormatting,\n / @conditional-compile-remove(file-sharing-acs) / hasAttachments\n ]);\n\n const onContentModelUpdate = useCallback((contentModel: ContentModelDocument \| undefined) => {\n setContentModel(contentModel);\n }, []);\n\n return (\n <div\n className={richTextBorderBoxStyle({\n theme: theme,\n disabled: !!disabled\n })}\n >\n {/ This layout is used for the compact view when formatting options are not shown /}\n {/ We don't use a stack here as there is a bug in Fluent Stack that causes remount of children when using wrap /}\n <div\n className={inputBoxContentStackStyle}\n style={{\n display: 'flex',\n flexGrow: 1,\n flexDirection: useHorizontalLayout ? 'row' : 'column',\n justifyContent: useHorizontalLayout ? 'flex-end' : 'space-between',\n flexWrap: useHorizontalLayout ? 'wrap' : 'nowrap'\n }}\n >\n {/ Fixes the issue when flex box can grow to be bigger than parent /}\n <Stack grow className={inputBoxRichTextStackStyle}>\n <Stack.Item className={inputBoxRichTextStackItemStyle}>\n <RichTextEditor\n contentModel={contentModel}\n initialContent={initialContent}\n placeholderText={placeholderText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onCompositionUpdate={onCompositionUpdate}\n ref={editorComponentRef}\n strings={strings}\n showRichTextEditorFormatting={showRichTextEditorFormatting === true}\n styles={richTextEditorStyle}\n autoFocus={autoFocus}\n onContentModelUpdate={onContentModelUpdate}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={onInsertInlineImage}\n />\n </Stack.Item>\n {/ @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}\n </Stack>\n {actionButtons}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport { richTextActionButtonsDividerStyle, richTextActionButtonsStackStyle, richTextActionButtonsStyle, richTextFormatButtonIconStyle } from '../styles/RichTextEditor.styles';\nimport { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRichTextStackStyle, richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (newValue?: string, removedInlineImages?: Record<string, string>[]) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n // Partial needs to be removed when the rich text editor feature goes to GA\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n onRenderAttachmentUploads?: () => JSX.Element;\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 onPaste?: (event: {\n content: DocumentFragment;\n }) => void;\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n onRenderAttachmentUploads,\n hasAttachments,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false,\n autoFocus,\n onTyping,\n onInsertInlineImage\n } = props;\n const theme = useTheme();\n // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean \| undefined>(undefined);\n const [contentModel, setContentModel] = useState<ContentModelDocument \| undefined>(undefined);\n const onRenderRichTextEditorIcon = useCallback((isHover: boolean) => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return <Icon iconName={isHover \|\| isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'} className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| isRichTextEditorToolbarShown))} />;\n }, [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 const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }} ariaLabel={strings.richTextFormatButtonTooltip} tooltipContent={strings.richTextFormatButtonTooltip} className={richTextActionButtonsStyle} data-testId={'rich-text-input-box-format-button'} ariaExpanded={showRichTextEditorFormatting} />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>;\n }, [actionComponents, onRenderRichTextEditorIcon, showRichTextEditorFormatting, strings.richTextFormatButtonTooltip, theme]);\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n const onKeyDown = useCallback((ev: KeyboardEvent) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n } else {\n onTyping?.();\n }\n }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);\n const onCompositionUpdate = useCallback(() => {\n onTyping?.();\n }, [onTyping]);\n const useHorizontalLayout = useMemo(() => {\n const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n return !isHorizontalLayoutDisabled && !isRichTextEditorToolbarShown && !hasAttachments;\n }, [isHorizontalLayoutDisabled, showRichTextEditorFormatting, hasAttachments]);\n const onContentModelUpdate = useCallback((contentModel: ContentModelDocument \| undefined) => {\n setContentModel(contentModel);\n }, []);\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 {/ We don't use a stack here as there is a bug in Fluent Stack that causes remount of children when using wrap /}\n <div className={inputBoxContentStackStyle} style={{\n display: 'flex',\n flexGrow: 1,\n flexDirection: useHorizontalLayout ? 'row' : 'column',\n justifyContent: useHorizontalLayout ? 'flex-end' : 'space-between',\n flexWrap: useHorizontalLayout ? 'wrap' : 'nowrap'\n }}>\n {/ 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 contentModel={contentModel} initialContent={initialContent} placeholderText={placeholderText} onChange={onChange} onKeyDown={onKeyDown} onCompositionUpdate={onCompositionUpdate} ref={editorComponentRef} strings={strings} showRichTextEditorFormatting={showRichTextEditorFormatting === true} styles={richTextEditorStyle} autoFocus={autoFocus} onContentModelUpdate={onContentModelUpdate} onPaste={props.onPaste} onInsertInlineImage={onInsertInlineImage} />\n </Stack.Item>\n {onRenderAttachmentUploads && onRenderAttachmentUploads()}\n </Stack>\n {actionButtons}\n </div>\n </div>;\n};"]}