@azure/communication-react 1.19.0-alpha-202408010015 → 1.19.0-alpha-202408020014

package/dist/dist-cjs/communication-react/{index-YIP5Cyt3.js → index-D84PSTZV.js}

@@ -16,12 +16,12 @@ var textareaCaretTs = require('textarea-caret-ts');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var react$1 = require('@griffel/react');
+var uuid = require('uuid');
 var roosterjsContentModelCore = require('roosterjs-content-model-core');
 var roosterjsContentModelDom = require('roosterjs-content-model-dom');
 var roosterjsContentModelPlugins = require('roosterjs-content-model-plugins');
 var roosterjsContentModelApi = require('roosterjs-content-model-api');
 var reactChat = require('@fluentui-contrib/react-chat');
-var uuid = require('uuid');
 var parse = require('html-react-parser');
 var Linkify = require('react-linkify');
 var DOMPurify = require('dompurify');
@@ -189,7 +189,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.19.0-alpha-202408010015';
+var telemetryVersion = '1.19.0-alpha-202408020014';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -400,6 +400,19 @@ const removeImageTags = (event) => {
     });
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Default max listeners for use with {@link EventEmitter.setMaxListeners} function
+ * @internal
+ */
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * The key for the rich text editor inline image file name attribute
+ * @internal
+ */
+const _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY = 'data-image-file-name';
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -1817,7 +1830,12 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onDeleteImage: function (imageId) {
             return __awaiter$T(this, void 0, void 0, function* () {
-                yield chatThreadClient.deleteImage(imageId);
+                try {
+                    yield chatThreadClient.deleteImage(imageId);
+                }
+                catch (e) {
+                    console.log(`Error deleting image message: ${e}`);
+                }
                 return;
             });
         },
@@ -5634,33 +5652,41 @@ const isAttachmentUploadCompleted = (attachmentsWithProgress) => {
     return !!(attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.find((attachment) => !attachment.error));
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * Check if the content has inline image.
+ * @internal
+ */
+const hasInlineImageContent = (content) => {
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    return !!document.querySelector('img');
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @internal
+ *
+ * @param message - The message content to update.
+ * @param initialInlineImages - The initial inline images that comes with the message before editing.
+ *
+ * @returns The updated message content.
  */
-// Before sending the image, we need to add the image id we get back after uploading the images to the message content.
-const addUploadedImagesToMessage = (message, inlineImages) => __awaiter$Q(void 0, void 0, void 0, function* () {
+const updateStylesOfInlineImages = (message, initialInlineImages) => __awaiter$Q(void 0, void 0, void 0, function* () {
     if (message === '') {
         return message;
     }
+    const initialInlineImagesIds = initialInlineImages.map((initialInlineImage) => initialInlineImage.id);
     const document = new DOMParser().parseFromString(message !== null && message !== void 0 ? message : '', 'text/html');
     const imagesPromise = Array.from(document.querySelectorAll('img')).map((img) => {
         return new Promise((resolve, rejects) => {
-            const uploadInlineImage = inlineImages.find((inlineImage) => !inlineImage.error && (inlineImage.url === img.src || inlineImage.id === img.id));
-            // The message might content images that comes with the message before editing, those images are not in the uploadInlineImages array.
-            // This function should only modify the message content for images in the uploadInlineImages array.
-            if (!uploadInlineImage) {
+            // The message might content images that comes with the message before editing.
+            // This function should only modify the message content for images that are newly added.
+            if (initialInlineImagesIds.includes(img.id)) {
                 resolve();
                 return;
             }
             const imageElement = new Image();
             imageElement.src = img.src;
             imageElement.onload = () => {
-                var _a;
                 // imageElement is a copy of original img element, so changes need to be made to the original img element
-                img.id = (_a = uploadInlineImage === null || uploadInlineImage === void 0 ? void 0 : uploadInlineImage.id) !== null && _a !== void 0 ? _a : '';
-                if (uploadInlineImage === null || uploadInlineImage === void 0 ? void 0 : uploadInlineImage.url) {
-                    img.src = uploadInlineImage.url;
-                }
                 img.width = imageElement.width;
                 img.height = imageElement.height;
                 img.style.aspectRatio = `${imageElement.width} / ${imageElement.height}`;
@@ -5716,21 +5742,6 @@ hasCompletedAttachmentUploads, hasError, disabled }) => {
         hasError ||
         disabled);
 };
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
-/**
- * @internal
- */
-const cancelInlineImageUpload$1 = (props) => {
-    const { imageSrcArray, inlineImages, messageId, editBoxOnCancelInlineImageUpload, sendBoxOnCancelInlineImageUpload } = props;
-    if (imageSrcArray && inlineImages && (inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.length) > 0) {
-        inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.map((inlineImage) => {
-            if (inlineImage.url && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(inlineImage.url))) {
-                sendBoxOnCancelInlineImageUpload && sendBoxOnCancelInlineImageUpload(inlineImage.id);
-                editBoxOnCancelInlineImageUpload && editBoxOnCancelInlineImageUpload(inlineImage.id, messageId || '');
-            }
-        });
-    }
-};
 /* @conditional-compile-remove(file-sharing-acs) */
 /**
  * @internal
@@ -5748,15 +5759,13 @@ const toAttachmentMetadata = (attachmentsWithProgress) => {
         };
     });
 };
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @internal
  */
-const insertImagesToContentString = (content, inlineImages, onCompleted) => __awaiter$Q(void 0, void 0, void 0, function* () {
-    if (!inlineImages || inlineImages.length <= 0) {
-        onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(content);
-    }
-    const newContent = yield addUploadedImagesToMessage(content, inlineImages !== null && inlineImages !== void 0 ? inlineImages : []);
+const modifyInlineImagesInContentString = (content, initialInlineImages, onCompleted) => __awaiter$Q(void 0, void 0, void 0, function* () {
+    let newContent = content;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    newContent = yield updateStylesOfInlineImages(content, initialInlineImages);
     onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(newContent);
 });
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -5785,6 +5794,25 @@ const removeBrokenImageContentAndClearImageSizeStyles = (content) => {
     });
     return document.body.innerHTML;
 };
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+const getContentWithUpdatedInlineImagesInfo = (content, inlineImageWithProgress) => {
+    if (!inlineImageWithProgress || inlineImageWithProgress.length <= 0) {
+        return content;
+    }
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    document.querySelectorAll('img').forEach((img) => {
+        const imageId = img.id;
+        const inlineImage = inlineImageWithProgress.find((image) => !image.error && image.progress === 1 && image.id === imageId);
+        if (inlineImage) {
+            img.id = inlineImage.id;
+            img.src = inlineImage.url || img.src;
+        }
+    });
+    return document.body.innerHTML;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -6850,6 +6878,7 @@ var PluginEventType;
     PluginEventType["EditorReady"] = "editorReady";
     PluginEventType["BeforeDispose"] = "beforeDispose";
     PluginEventType["ContentChanged"] = "contentChanged";
+    PluginEventType["BeforeSetContent"] = "beforeSetContent";
     PluginEventType["Input"] = "input";
     PluginEventType["KeyDown"] = "keyDown";
     PluginEventType["BeforePaste"] = "beforePaste";
@@ -6890,7 +6919,128 @@ const dataSetApplier = (format, element, context) => {
         context.defaultFormatAppliers.dataset(format, element, context);
     }
 };
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+const getPreviousInlineImages = (content) => {
+    if (!content) {
+        return [];
+    }
+    const previousInlineImages = [];
+    const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
+    document.querySelectorAll('img').forEach((img) => {
+        const imageAttributes = getInlineImageAttributes(img);
+        previousInlineImages.push(imageAttributes);
+    });
+    return previousInlineImages;
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+const getRemovedInlineImages = (content, previousInlineImages) => {
+    const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
+    const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);
+    previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
+    const removedInlineImages = [...previousInlineImages];
+    return removedInlineImages;
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+const getInsertedInlineImages = (content, previousInlineImages) => {
+    const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
+    const currentContentInlineImages = Array.from(document.querySelectorAll('img'));
+    const previousContentIds = Array.from(previousInlineImages).map((img) => img.id);
+    // if check is updated, also update getRemovedInlineImages
+    const insertedInlineImages = currentContentInlineImages.filter((img) => !previousContentIds.includes(img.id));
+    return insertedInlineImages;
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+const getInlineImageAttributes = (image) => {
+    const imageAttributes = {};
+    image.getAttributeNames().forEach((attrName) => {
+        const attrValue = image.getAttribute(attrName);
+        if (attrValue) {
+            imageAttributes[attrName] = attrValue;
+        }
+    });
+    return imageAttributes;
+};
+/* @conditional-compile-remove(rich-text-editor) */
+/**
+ * @internal
+ */
+/**
+ * Update the scroll position of the editor to ensure the content is visible.
+ */
+const scrollToBottomRichTextEditor = () => {
+    // Get the current selection in the document
+    const selection = document.getSelection();
+    // Check if a selection exists and it has at least one range
+    if (!selection || selection.rangeCount <= 0) {
+        // If no selection or range, exit the function
+        return;
+    }
+    // Get the first range of the selection
+    // A user can normally only select one range at a time, so the rangeCount will usually be 1
+    const range = selection.getRangeAt(0);
+    // If the common ancestor container of the range is the document itself,
+    // it might mean that the editable element is getting removed from the DOM
+    // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error
+    if (range.commonAncestorContainer === document) {
+        return;
+    }
+    // Create a temporary span element to use as an anchor for scrolling
+    // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error
+    const tempElement = document.createElement('span');
+    // Collapse the range to its end point
+    // This means the start and end points of the range will be the same, and it will not contain any content
+    range.collapse(false);
+    // Insert the temporary element at the cursor's position at the end of the range
+    range.insertNode(tempElement);
+    // Scroll the temporary element into view
+    // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly
+    tempElement.scrollIntoView({
+        block: 'center'
+    });
+    tempElement.remove();
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap
+ * @internal
+ */
+const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
+    removedInlineImages.forEach((image) => {
+        removeSingleLocalBlob(currentLocalBlobMap, image.id);
+    });
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap
+ * @internal
+ */
+const cleanAllLocalBlobs = (currentLocalBlobMap) => {
+    Object.keys(currentLocalBlobMap).forEach((imageId) => {
+        removeSingleLocalBlob(currentLocalBlobMap, imageId);
+    });
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+const removeSingleLocalBlob = (currentLocalBlobMap, imageId) => {
+    const blobUrl = currentLocalBlobMap[imageId];
+    if (blobUrl) {
+        URL.revokeObjectURL(blobUrl);
+        delete currentLocalBlobMap[imageId];
+    }
+};
 
+/* @conditional-compile-remove(rich-text-editor) */
 /**
  * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
  */
@@ -6945,16 +7095,24 @@ const handleInlineImage = (event, onInsertInlineImage) => {
     if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && onInsertInlineImage) {
         event.fragment.querySelectorAll('img').forEach((image) => {
             const clipboardImage = event.clipboardData.image;
-            const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) || (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) || 'image.png';
+            const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) ||
+                (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) ||
+                image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||
+                '';
             // If the image src is an external url, call the onInsertInlineImage callback with the url.
             let imageUrl = image.src;
             if (image.src.startsWith('data:image/')) {
                 const blobImage = _base64ToBlob(image.src);
                 imageUrl = URL.createObjectURL(blobImage);
             }
-            onInsertInlineImage(imageUrl, fileName);
             image.src = imageUrl;
             image.alt = image.alt || 'image';
+            // Assign a unique id to the image element so Contosos can identify the image element.
+            // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images
+            image.id = uuid.v1();
+            image.dataset.imageFileName = fileName;
+            const imageAttributes = getInlineImageAttributes(image);
+            onInsertInlineImage(imageAttributes);
         });
     }
 };
@@ -6964,36 +7122,8 @@ const handleInlineImage = (event, onInsertInlineImage) => {
  */
 const scrollToBottomAfterContentPaste = (event) => {
     if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
-        // Get the current selection in the document
-        const selection = document.getSelection();
-        // Check if a selection exists and it has at least one range
-        if (!selection || selection.rangeCount <= 0) {
-            // If no selection or range, exit the function
-            return;
-        }
-        // Get the first range of the selection
-        // A user can normally only select one range at a time, so the rangeCount will usually be 1
-        const range = selection.getRangeAt(0);
-        // If the common ancestor container of the range is the document itself,
-        // it might mean that the editable element is getting removed from the DOM
-        // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error
-        if (range.commonAncestorContainer === document) {
-            return;
-        }
-        // Create a temporary span element to use as an anchor for scrolling
-        // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error
-        const tempElement = document.createElement('span');
-        // Collapse the range to its end point
-        // This means the start and end points of the range will be the same, and it will not contain any content
-        range.collapse(false);
-        // Insert the temporary element at the cursor's position at the end of the range
-        range.insertNode(tempElement);
-        // Scroll the temporary element into view
-        // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly
-        tempElement.scrollIntoView({
-            block: 'center'
-        });
-        tempElement.remove();
+        /* @conditional-compile-remove(rich-text-editor) */
+        scrollToBottomRichTextEditor();
     }
 };
 
@@ -7074,11 +7204,9 @@ class UpdateContentPlugin {
         }
     }
     onPluginEvent(event) {
-        var _a;
         if (this.onUpdate === null) {
             return;
         }
-        let imageSrcArray;
         switch (event.eventType) {
             case PluginEventType.EditorReady:
                 this.onUpdate(UpdateEvent.Init);
@@ -7087,21 +7215,16 @@ class UpdateContentPlugin {
                 this.onUpdate(UpdateEvent.Dispose);
                 break;
             case PluginEventType.ContentChanged:
-                if (event.source.toLowerCase() === 'cut' ||
-                    (event.source.toLowerCase() === 'keyboard' && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))) {
-                    imageSrcArray = [];
-                    (_a = event.contentModel) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
-                        if (block.blockType === 'Paragraph') {
-                            const segments = block.segments;
-                            segments.map((segment) => {
-                                if (segment.segmentType === 'Image') {
-                                    imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.push(segment.src);
-                                }
-                            });
-                        }
-                    });
+                if (event.source === roosterjsContentModelDom.ChangeSource.Cut ||
+                    // We need to add the paste source here for an edge case:
+                    // when user select an image that's already in the editor, then paste in an image to replace the selected one,
+                    // we will only get a paste event.
+                    // In this case, we need to update the removedInlineImage array to include the replaced image.
+                    event.source === roosterjsContentModelDom.ChangeSource.Paste ||
+                    (event.source === roosterjsContentModelDom.ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))) {
+                    this.onUpdate(UpdateEvent.ContentChanged, true);
                 }
-                this.onUpdate(UpdateEvent.ContentChanged, imageSrcArray);
+                this.onUpdate(UpdateEvent.ContentChanged);
                 break;
             case PluginEventType.Input:
                 this.onUpdate(UpdateEvent.UserInput);
@@ -7750,6 +7873,57 @@ class PlaceholderPlugin extends roosterjsContentModelPlugins.WatermarkPlugin {
     }
 }
 
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * UndoRedoPlugin is a plugin for additional handling undo and redo events in the editor.
+ */
+class UndoRedoPlugin {
+    constructor() {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        this.editor = null;
+        this.onUpdateContent = null;
+    }
+    getName() {
+        return 'CustomUndoRedoPlugin';
+    }
+    initialize(editor) {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        this.editor = editor;
+    }
+    dispose() { }
+    onPluginEvent(event) {
+        // handle when new images are added to the editor because of undo/redo
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.editor && event.eventType === PluginEventType.BeforeSetContent && this.onInsertInlineImage) {
+            handleBeforeSetEvent(event, this.editor, this.onInsertInlineImage);
+        }
+        // handle deleted images and updated content
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.onUpdateContent &&
+            event.eventType === PluginEventType.ContentChanged &&
+            event.source === roosterjsContentModelDom.ChangeSource.SetContent) {
+            this.onUpdateContent();
+        }
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.editor &&
+            !this.editor.isDisposed() &&
+            event.eventType === PluginEventType.ContentChanged &&
+            event.source === roosterjsContentModelDom.ChangeSource.SetContent) {
+            // scroll the editor to the correct position after undo/redo actions
+            scrollToBottomRichTextEditor();
+        }
+    }
+}
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+const handleBeforeSetEvent = (event, editor, onInsertInlineImage) => {
+    const currentImagesList = editor.getDocument().querySelectorAll('img');
+    const insertedImages = getInsertedInlineImages(event.newContent, currentImagesList);
+    insertedImages.forEach((image) => {
+        const imageAttributes = getInlineImageAttributes(image);
+        onInsertInlineImage(imageAttributes);
+    });
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -7768,6 +7942,20 @@ const RichTextEditor = React.forwardRef((props, ref) => {
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = React.useState(null);
     const previousThemeDirection = React.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 [previousInlineImages, setPreviousInlineImages] = React.useState([]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = React.useState({});
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    React.useEffect(() => {
+        return () => {
+            // Cleanup Local Blob URLs when the component is unmounted
+            cleanAllLocalBlobs(inlineImageLocalBlobs);
+        };
+        // This effect should only run once when the component is unmounted, so we don't need to add any dependencies
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -7776,6 +7964,10 @@ 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
                     // ContentChanged event will be sent by RoosterJS automatically
@@ -7799,7 +7991,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             }
         };
-    }, [onContentModelUpdate]);
+    }, [/* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs, onContentModelUpdate]);
     const toolbarPlugin = React.useMemo(() => {
         return new RichTextToolbarPlugin();
     }, []);
@@ -7826,9 +8018,27 @@ const RichTextEditor = React.forwardRef((props, ref) => {
     const copyPastePlugin = React.useMemo(() => {
         return new CopyPastePlugin();
     }, []);
+    const onChangeContent = React.useCallback((/* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldUpdateInlineImages) => {
+        if (editor.current === null) {
+            return;
+        }
+        const content = roosterjsContentModelCore.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) */
+        setPreviousInlineImages(getPreviousInlineImages(content));
+    }, [onChange, /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages]);
     React.useEffect(() => {
         // don't set callback in plugin constructor to update callback without plugin recreation
-        updatePlugin.onUpdate = (event, imageSrcArray) => {
+        updatePlugin.onUpdate = (event, 
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldRemoveInlineImages) => {
             if (editor.current === null) {
                 return;
             }
@@ -7836,14 +8046,46 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                 onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));
             }
             else {
-                onChange && onChange(roosterjsContentModelCore.exportContent(editor.current), imageSrcArray);
+                const content = roosterjsContentModelCore.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) */
+                setPreviousInlineImages(getPreviousInlineImages(content));
             }
         };
-    }, [onChange, onContentModelUpdate, updatePlugin]);
+    }, [
+        onChange,
+        onContentModelUpdate,
+        updatePlugin,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs
+    ]);
+    const undoRedoPlugin = React.useMemo(() => {
+        return new UndoRedoPlugin();
+    }, []);
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     React.useEffect(() => {
-        copyPastePlugin.onInsertInlineImage = onInsertInlineImage;
-    }, [copyPastePlugin, onInsertInlineImage]);
+        copyPastePlugin.onInsertInlineImage = (imageAttributes) => {
+            const { id, src } = imageAttributes;
+            setInlineImageLocalBlobs(Object.assign(Object.assign({}, inlineImageLocalBlobs), { [id]: src }));
+            onInsertInlineImage && onInsertInlineImage(imageAttributes);
+        };
+        undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;
+    }, [copyPastePlugin, inlineImageLocalBlobs, onInsertInlineImage, undoRedoPlugin]);
+    React.useEffect(() => {
+        undoRedoPlugin.onUpdateContent = () => {
+            onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
+        };
+    }, [onChangeContent, undoRedoPlugin]);
     const keyboardInputPlugin = React.useMemo(() => {
         return new KeyboardInputPlugin();
     }, []);
@@ -7895,7 +8137,8 @@ const RichTextEditor = React.forwardRef((props, ref) => {
             shortcutPlugin,
             // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
             contextMenuPlugin,
-            tableContextMenuPlugin
+            tableContextMenuPlugin,
+            undoRedoPlugin
         ];
     }, [
         onContextMenuRender,
@@ -7905,7 +8148,8 @@ const RichTextEditor = React.forwardRef((props, ref) => {
         updatePlugin,
         copyPastePlugin,
         toolbarPlugin,
-        tableContextMenuPlugin
+        tableContextMenuPlugin,
+        undoRedoPlugin
     ]);
     const announcerStringGetter = React.useCallback((key) => {
         var _a, _b;
@@ -7920,6 +8164,10 @@ const RichTextEditor = React.forwardRef((props, ref) => {
     }, [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]);
     React.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) {
             editor.current = new roosterjsContentModelCore.Editor(editorDiv.current, {
@@ -8228,9 +8476,9 @@ const RichTextSendBox = (props) => {
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     onInsertInlineImage, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    inlineImages, 
+    inlineImagesWithProgress, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onCancelInlineImageUpload } = props;
+    onRemoveInlineImage } = props;
     const theme = useTheme();
     const locale = useLocale$1();
     const localeStrings = React.useMemo(() => {
@@ -8256,29 +8504,34 @@ const RichTextSendBox = (props) => {
         setContentValue(newValue);
     }, []);
     const onChangeHandler = React.useCallback((newValue, 
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageSrcArray) => {
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        cancelInlineImageUpload$1({
-            imageSrcArray,
-            inlineImages,
-            messageId: undefined,
-            editBoxOnCancelInlineImageUpload: undefined,
-            sendBoxOnCancelInlineImageUpload: onCancelInlineImageUpload
-        });
+        removedInlineImages === null || removedInlineImages === void 0 ? void 0 : removedInlineImages.forEach((removedInlineImage) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage));
         setContent(newValue);
-    }, [
-        setContent,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ onCancelInlineImageUpload,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImages
-    ]);
+    }, [setContent, /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage]);
     const hasContent = React.useMemo(() => {
         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();
-        return sanitizeText(contentValue !== null && contentValue !== void 0 ? contentValue : '').length > 0 && sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length > 0;
+        const hasPlainText = sanitizeText(contentValue !== null && contentValue !== void 0 ? contentValue : '').length > 0 && sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length > 0;
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        const hasInlineImages = hasInlineImageContent(contentValue);
+        return hasPlainText || /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasInlineImages;
     }, [contentValue]);
     const sendMessageOnClick = React.useCallback(() => {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {
+            const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(contentValue, inlineImagesWithProgress);
+            const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);
+            // Set contentValueOverflow state to display the error bar
+            setContentValueOverflow(messageTooLong);
+            // The change from the setContentValueOverflow in the previous line will not kick in yet.
+            // We need to relay on the local value of messageTooLong to return early if the message is too long.
+            if (messageTooLong) {
+                return;
+            }
+        }
         if (disabled || contentValueOverflow) {
             return;
         }
@@ -8286,7 +8539,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(file-sharing-acs) */
         setAttachmentUploadsPendingError(undefined);
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImages);
+        const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);
         /* @conditional-compile-remove(file-sharing-acs) */
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (
@@ -8308,9 +8561,7 @@ const RichTextSendBox = (props) => {
         }
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (hasContent ||
-            /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments) ||
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */ isAttachmentUploadCompleted(inlineImages)) {
+        if (hasContent || /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {
             const sendMessage = (content) => {
                 var _a, _b;
                 onSendMessage(content, 
@@ -8325,14 +8576,9 @@ const RichTextSendBox = (props) => {
                 (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
                 (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             };
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            if (isAttachmentUploadCompleted(inlineImages)) {
-                insertImagesToContentString(contentValue, inlineImages, (content) => {
-                    sendMessage(content);
-                });
-                return;
-            }
-            sendMessage(contentValue);
+            modifyInlineImagesInContentString(contentValue, [], (content) => {
+                sendMessage(content);
+            });
         }
     }, [
         disabled,
@@ -8340,7 +8586,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(file-sharing-acs) */
         attachments,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImages,
+        inlineImagesWithProgress,
         contentValue,
         hasContent,
         /* @conditional-compile-remove(file-sharing-acs) */
@@ -8358,7 +8604,7 @@ const RichTextSendBox = (props) => {
             /* @conditional-compile-remove(file-sharing-acs) */
             !!((_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) ||
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            !!((_b = inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.filter((image) => image.error).pop()) === null || _b === void 0 ? void 0 : _b.error));
+            !!((_b = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _b === void 0 ? void 0 : _b.error));
     }, [
         /* @conditional-compile-remove(file-sharing-acs) */
         attachments,
@@ -8367,7 +8613,7 @@ const RichTextSendBox = (props) => {
         attachmentUploadsPendingError,
         systemMessage,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImages
+        inlineImagesWithProgress
     ]);
     const onRenderSendIcon = React.useCallback((isHover) => {
         return (React.createElement(react.Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
@@ -8385,7 +8631,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(file-sharing-acs) */
         const uploadErrorMessage = (_b = (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        const imageUploadErrorMessage = (_d = (_c = inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.filter((image) => image.error).pop()) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.message;
+        const imageUploadErrorMessage = (_d = (_c = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.message;
         /* @conditional-compile-remove(file-sharing-acs) */
         const errorMessage = uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;
         return {
@@ -8410,7 +8656,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(file-sharing-acs) */
         attachmentUploadsPendingError,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImages,
+        inlineImagesWithProgress,
         systemMessage
     ]);
     /* @conditional-compile-remove(file-sharing-acs) */
@@ -10473,7 +10719,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-B0zbyF6Z.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DM13Kp5W.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -10481,7 +10727,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-B0zbyF6Z.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DM13Kp5W.js'); });
 /**
  * @private
  */
@@ -10583,9 +10829,9 @@ const ChatMyMessageComponent = (props) => {
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             onInsertInlineImage: props.onInsertInlineImage, 
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            inlineImages: props.inlineImages, 
+            inlineImagesWithProgress: props.inlineImagesWithProgress, 
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            onCancelInlineImageUpload: props.onCancelInlineImageUpload }));
+            onRemoveInlineImage: props.onRemoveInlineImage }));
     }
     else {
         return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
@@ -10621,9 +10867,9 @@ const FluentChatMyMessageComponent = (props) => {
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     onPaste, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    inlineImages, 
+    inlineImagesWithProgress, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onCancelInlineImageUpload, 
+    onRemoveInlineImage, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     onInsertInlineImage } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
@@ -10655,11 +10901,11 @@ const FluentChatMyMessageComponent = (props) => {
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 onPaste: onPaste, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onCancelInlineImageUpload: onCancelInlineImageUpload, 
+                onRemoveInlineImage: onRemoveInlineImage, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 onInsertInlineImage: onInsertInlineImage, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                inlineImages: inlineImages })));
+                inlineImagesWithProgress: inlineImagesWithProgress })));
         }
         return React.createElement(React.Fragment, null);
     }, [
@@ -10685,11 +10931,11 @@ const FluentChatMyMessageComponent = (props) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onPaste,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onCancelInlineImageUpload,
+        onRemoveInlineImage,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onInsertInlineImage,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImages
+        inlineImagesWithProgress
     ]);
     const messageRenderer = React.useCallback((messageProps) => {
         return onRenderMessage === undefined
@@ -11515,10 +11761,10 @@ const MessageThreadWrapper = (props) => {
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
                             onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, 
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            inlineImages: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImages) &&
-                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImages[message.message.messageId]), 
+                            inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) &&
+                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), 
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            onCancelInlineImageUpload: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onCancelInlineImageUpload })));
+                            onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage })));
                     }))))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {
@@ -21223,6 +21469,12 @@ const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;
  * @private
  */
 const SEND_BOX_UPLOADS_KEY_VALUE = 'send-box';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * Default rich text editor inline image file name
+ * @internal
+ */
+const _DEFAULT_INLINE_IMAGE_FILE_NAME = 'image.png';
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -22722,7 +22974,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BVOysnsq.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-8FsFMpKF.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -22730,7 +22982,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BVOysnsq.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-8FsFMpKF.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -22738,7 +22990,7 @@ const SendBoxPicker = (props) => {
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const { richTextEditorOptions } = props;
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    const { onPaste, onInsertInlineImage, inlineImages, onCancelInlineImageUpload } = richTextEditorOptions || {};
+    const { onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = richTextEditorOptions || {};
     const sendBoxProps = usePropsFor$2(SendBox);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const isRichTextEditorEnabled = React.useMemo(() => {
@@ -22755,9 +23007,9 @@ const SendBoxPicker = (props) => {
                     /* @conditional-compile-remove(rich-text-editor-image-upload) */
                     onInsertInlineImage: onInsertInlineImage, 
                     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                    inlineImages: inlineImages, 
+                    inlineImagesWithProgress: inlineImagesWithProgress, 
                     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                    onCancelInlineImageUpload: onCancelInlineImageUpload })))));
+                    onRemoveInlineImage: onRemoveInlineImage })))));
     }
     return sendBox;
 };
@@ -22813,14 +23065,14 @@ const getEditBoxMessagesInlineImages = (editBoxInlineImageUploads) => {
         return;
     }
     const messageIds = Object.keys(editBoxInlineImageUploads || {});
-    const messagesInlineImages = {};
+    const messagesInlineImagesWithProgress = {};
     messageIds.map((messageId) => {
         const messageUploads = editBoxInlineImageUploads[messageId].map((upload) => {
             return upload.metadata;
         });
-        messagesInlineImages[messageId] = messageUploads;
+        messagesInlineImagesWithProgress[messageId] = messageUploads;
     });
-    return messagesInlineImages;
+    return messagesInlineImagesWithProgress;
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
@@ -22855,7 +23107,10 @@ const inlineImageUploadHandler = (uploadTasks, adapter, strings) => __awaiter$G(
         }
         try {
             const response = yield adapter.uploadImage(image, (_c = task.metadata) === null || _c === void 0 ? void 0 : _c.name);
-            uploadTask.notifyUploadCompleted(response.id, task.metadata.url || '');
+            // Use response id as the image src because we need to keep the original image id as a reference to find the image.
+            // Also the html content we send to ChatSDK does not need image src,
+            // it only need the response id to match the uploaded image, url is not needed.
+            uploadTask.notifyUploadCompleted(task.metadata.id, response.id);
         }
         catch (error) {
             console.error(error);
@@ -22864,8 +23119,8 @@ const inlineImageUploadHandler = (uploadTasks, adapter, strings) => __awaiter$G(
     }
 });
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-const generateUploadTask = (image, fileName, messageId, inlineImageUploadActionHandler) => __awaiter$G(void 0, void 0, void 0, function* () {
-    const imageData = yield getInlineImageData(image);
+const generateUploadTask = (imageAttributes, fileName, messageId, inlineImageUploadActionHandler) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const imageData = yield getInlineImageData(imageAttributes.src);
     if (!imageData) {
         return;
     }
@@ -22874,9 +23129,9 @@ const generateUploadTask = (image, fileName, messageId, inlineImageUploadActionH
         image: imageData,
         taskId,
         metadata: {
-            id: taskId,
+            id: imageAttributes.id,
             name: fileName,
-            url: image,
+            url: imageAttributes.src,
             progress: 0
         },
         notifyUploadProgressChanged: (value) => {
@@ -22911,8 +23166,8 @@ const generateUploadTask = (image, fileName, messageId, inlineImageUploadActionH
 /**
  * @internal
  */
-const onInsertInlineImageForEditBox = (image, fileName, messageId, adapter, handleEditBoxInlineImageUploadAction, chatCompositeStrings) => __awaiter$G(void 0, void 0, void 0, function* () {
-    const uploadTask = yield generateUploadTask(image, fileName, messageId, handleEditBoxInlineImageUploadAction);
+const onInsertInlineImageForEditBox = (imageAttributes, fileName, messageId, adapter, handleEditBoxInlineImageUploadAction, chatCompositeStrings) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const uploadTask = yield generateUploadTask(imageAttributes, fileName, messageId, handleEditBoxInlineImageUploadAction);
     if (!uploadTask) {
         return;
     }
@@ -22927,8 +23182,8 @@ const onInsertInlineImageForEditBox = (image, fileName, messageId, adapter, hand
 /**
  * @internal
  */
-const onInsertInlineImageForSendBox = (image, fileName, adapter, handleSendBoxInlineImageUploadAction, chatCompositeStrings) => __awaiter$G(void 0, void 0, void 0, function* () {
-    const uploadTask = yield generateUploadTask(image, fileName, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction);
+const onInsertInlineImageForSendBox = (imageAttributes, fileName, adapter, handleSendBoxInlineImageUploadAction, chatCompositeStrings) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const uploadTask = yield generateUploadTask(imageAttributes, fileName, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction);
     if (!uploadTask) {
         return;
     }
@@ -22943,8 +23198,14 @@ const onInsertInlineImageForSendBox = (image, fileName, adapter, handleSendBoxIn
 /**
  * @internal
  */
-const cancelInlineImageUpload = (imageId, imageUpload, messageId, inlineImageUploadActionHandler, adapter) => {
+const cancelInlineImageUpload = (imageAttributes, imageUploads, messageId, inlineImageUploadActionHandler, adapter) => {
+    if (!imageUploads || !imageUploads[messageId]) {
+        deleteExistingInlineImageForEditBox(imageAttributes.id, messageId, adapter);
+        return;
+    }
+    const imageUpload = imageUploads[messageId].find((upload) => upload.metadata.id === imageAttributes.id);
     if (!imageUpload || !(imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.metadata.id)) {
+        deleteExistingInlineImageForEditBox(imageAttributes.id, messageId, adapter);
         return;
     }
     inlineImageUploadActionHandler({
@@ -22952,37 +23213,56 @@ const cancelInlineImageUpload = (imageId, imageUpload, messageId, inlineImageUpl
         id: imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.metadata.id,
         messageId
     });
-    // TODO: remove local blob
     if ((imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.metadata.progress) === 1) {
-        try {
-            adapter.deleteImage(imageId);
-        }
-        catch (error) {
-            console.error(error);
-        }
+        deleteInlineImageFromServer(imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.metadata.id, adapter);
     }
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
+const deleteInlineImageFromServer = (imageId, adapter) => {
+    try {
+        adapter.deleteImage(imageId);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+// This function is used to delete the inline image that existed before editing starts
+const deleteExistingInlineImageForEditBox = (imageId, messageId, adapter) => {
+    messageId !== SEND_BOX_UPLOADS_KEY_VALUE && deleteInlineImageFromServer(imageId, adapter);
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @internal
  */
-const onCancelInlineImageUploadHandlerForEditBox = (imageId, messageId, editBoxInlineImageUploads, adapter, handleEditBoxInlineImageUploadAction) => {
-    if (!editBoxInlineImageUploads) {
-        return;
+const updateContentStringWithUploadedInlineImages = (content, imageUploads, messageId = SEND_BOX_UPLOADS_KEY_VALUE) => {
+    if (!imageUploads || !imageUploads[messageId]) {
+        return content;
     }
-    const imageUpload = editBoxInlineImageUploads[messageId].find((upload) => upload.metadata.id === imageId);
-    cancelInlineImageUpload(imageId, imageUpload, messageId, handleEditBoxInlineImageUploadAction, adapter);
+    const messageUploads = imageUploads[messageId];
+    const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
+    document.querySelectorAll('img').forEach((img) => {
+        var _a;
+        const uploadInlineImage = messageUploads.find((upload) => !upload.metadata.error && upload.metadata.progress === 1 && upload.metadata.id === img.id);
+        if (uploadInlineImage) {
+            // ChatSDK uses the respond id provided by the upload response. We store the response id in the image src attribute previously.
+            img.id = (_a = uploadInlineImage.metadata.url) !== null && _a !== void 0 ? _a : img.id;
+            img.src = '';
+        }
+    });
+    content = document.body.innerHTML;
+    return content;
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @internal
  */
-const onCancelInlineImageUploadHandlerForSendBox = (imageId, sendBoxInlineImageUploads, adapter, handleSendBoxInlineImageUploadAction) => {
-    if (!sendBoxInlineImageUploads) {
-        return;
+const getImageFileNameFromAttributes = (imageAttributes) => {
+    const fileName = imageAttributes[_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY];
+    if (!fileName || fileName === '' || fileName === 'undefined' || fileName === 'null') {
+        return _DEFAULT_INLINE_IMAGE_FILE_NAME;
     }
-    const imageUpload = sendBoxInlineImageUploads[SEND_BOX_UPLOADS_KEY_VALUE].find((upload) => upload.metadata.id === imageId);
-    cancelInlineImageUpload(imageId, imageUpload, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
+    return fileName;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -23327,6 +23607,8 @@ const ChatScreen = (props) => {
     /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
         return __awaiter$F(this, void 0, void 0, function* () {
             var _a;
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);
             /* @conditional-compile-remove(file-sharing-acs) */
             const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
             /* @conditional-compile-remove(file-sharing-acs) */
@@ -23345,10 +23627,16 @@ const ChatScreen = (props) => {
             /* @conditional-compile-remove(file-sharing-acs) */
             return;
         });
-    }, [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction]);
+    }, [
+        adapter,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads
+    ]);
     const onUpdateMessageHandler = React.useCallback(function (messageId, content, 
     /* @conditional-compile-remove(file-sharing-acs) */ options) {
         return __awaiter$F(this, void 0, void 0, function* () {
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
             yield messageThreadProps.onUpdateMessage(messageId, content, 
             /* @conditional-compile-remove(file-sharing-acs) */ options);
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -23356,6 +23644,7 @@ const ChatScreen = (props) => {
         });
     }, [
         /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
         messageThreadProps
     ]);
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -23389,14 +23678,14 @@ const ChatScreen = (props) => {
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? Object.assign(Object.assign({}, richTextEditorOptions), { 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageUrl, imageFileName, messageId) => {
-                    onInsertInlineImageForEditBox(imageUrl, imageFileName, messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
+                onInsertInlineImage: (imageAttributes, messageId) => {
+                    onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
                 }, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                messagesInlineImages: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
+                messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onCancelInlineImageUpload: (imageId, messageId) => {
-                    onCancelInlineImageUploadHandlerForEditBox(imageId, messageId, editBoxInlineImageUploads, adapter, handleEditBoxInlineImageUploadAction);
+                onRemoveInlineImage: (imageAttributes, messageId) => {
+                    cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
                 } }) : undefined;
     }, [
         options === null || options === void 0 ? void 0 : options.richTextEditor,
@@ -23410,14 +23699,14 @@ const ChatScreen = (props) => {
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? Object.assign(Object.assign({}, richTextEditorOptions), { 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageUrl, imageFileName) => {
-                    onInsertInlineImageForSendBox(imageUrl, imageFileName, adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
+                onInsertInlineImage: (imageAttributes) => {
+                    onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
                 }, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                inlineImages: getSendBoxInlineImages(sendBoxInlineImageUploads), 
+                inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onCancelInlineImageUpload: (imageId) => {
-                    onCancelInlineImageUploadHandlerForSendBox(imageId, sendBoxInlineImageUploads, adapter, handleSendBoxInlineImageUploadAction);
+                onRemoveInlineImage: (imageAttributes) => {
+                    cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
                 } }) : undefined;
     }, [
         options === null || options === void 0 ? void 0 : options.richTextEditor,
@@ -38367,12 +38656,7 @@ const capabilitiesChangedInfoAndRoleSelector = reselect__namespace.createSelecto
  */
 const useTrackedCapabilityChangedNotifications = (capabilitiesChangedAndRoleInfo) => {
     const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] = React.useState({});
-    // Initialize a share screen capability changed notification with 'RoleChanged' reason so that the initial
-    // share screen capability changed info from the Calling SDK when joining Teams interop will be ignored because
-    // being able to share screen is assumed by default. This is inline with what Teams is doing.
-    const activeNotifications = React.useRef({
-        shareScreen: { capabilityName: 'shareScreen', isPresent: true, changedReason: 'RoleChanged' }
-    });
+    const activeNotifications = React.useRef({});
     React.useEffect(() => {
         activeNotifications.current = updateLatestCapabilityChangedNotificationMap(capabilitiesChangedAndRoleInfo, activeNotifications.current);
         setTrackedCapabilityChangedNotifications((prev) => updateTrackedCapabilityChangedNotificationsWithActiveNotifications(prev, Object.values(activeNotifications.current)));
@@ -38446,6 +38730,24 @@ const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAnd
                 ((_b = activeNotifications[capabilityName]) === null || _b === void 0 ? void 0 : _b.changedReason)) {
             continue;
         }
+        // All initial values of capabilities are not present with reason 'FeatureNotSupported'. So we should not show a
+        // notification for them when they initially become present at the start of the call
+        const oldCapabilityValue = capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.oldValue[capabilityName];
+        if (newCapabilityValue.isPresent === true &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.isPresent) === false &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.reason) === 'FeatureNotSupported' &&
+            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'MeetingOptionOrOrganizerPolicyChanged') {
+            continue;
+        }
+        // Do not show the first time the screenshare capability is present when the user's role is resolved to mirror
+        // Teams behaviour
+        if (capabilityName === 'shareScreen' &&
+            activeNotifications['shareScreen'] === undefined &&
+            newCapabilityValue.isPresent === true &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.isPresent) === false &&
+            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'RoleChanged') {
+            continue;
+        }
         const newCapabilityChangeNotification = {
             capabilityName: capabilityName,
             isPresent: newCapabilityValue.isPresent,
@@ -43227,7 +43529,6 @@ exports._IdentifierProvider = _IdentifierProvider;
 exports._formatString = _formatString;
 exports.attachmentMetadataReducer = attachmentMetadataReducer;
 exports.attachmentUploadCardsStyles = attachmentUploadCardsStyles;
-exports.cancelInlineImageUpload = cancelInlineImageUpload$1;
 exports.createAzureCommunicationCallAdapter = createAzureCommunicationCallAdapter;
 exports.createAzureCommunicationCallAdapterFromClient = createAzureCommunicationCallAdapterFromClient;
 exports.createAzureCommunicationCallWithChatAdapter = createAzureCommunicationCallWithChatAdapter;
@@ -43247,19 +43548,21 @@ exports.doesMessageContainMultipleAttachments = doesMessageContainMultipleAttach
 exports.editBoxRichTextEditorStyle = editBoxRichTextEditorStyle;
 exports.editBoxWidthStyles = editBoxWidthStyles;
 exports.fromFlatCommunicationIdentifier = fromFlatCommunicationIdentifier;
+exports.getContentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo;
 exports.getMessageState = getMessageState;
 exports.getMessageWithAttachmentMetadata = getMessageWithAttachmentMetadata;
+exports.getPreviousInlineImages = getPreviousInlineImages;
 exports.getSelector = getSelector;
 exports.getSelector$1 = getSelector$1;
 exports.hasIncompleteAttachmentUploads = hasIncompleteAttachmentUploads;
 exports.imageOverlayTheme = imageOverlayTheme;
-exports.insertImagesToContentString = insertImagesToContentString;
-exports.isAttachmentUploadCompleted = isAttachmentUploadCompleted;
+exports.isMessageTooLong = isMessageTooLong;
 exports.lightTheme = lightTheme;
 exports.loadCallComposite = loadCallComposite;
 exports.loadCallWithChatComposite = loadCallWithChatComposite;
 exports.loadChatComposite = loadChatComposite;
 exports.loadOutboundCallComposite = loadOutboundCallComposite;
+exports.modifyInlineImagesInContentString = modifyInlineImagesInContentString;
 exports.onRenderCancelIcon = onRenderCancelIcon;
 exports.onRenderSubmitIcon = onRenderSubmitIcon;
 exports.onResolveVideoEffectDependency = onResolveVideoEffectDependency;
@@ -43287,4 +43590,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-YIP5Cyt3.js.map
+//# sourceMappingURL=index-D84PSTZV.js.map