@azure/communication-react 1.30.0 → 1.31.0-beta.1

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js

@@ -0,0 +1,178 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Plugin event type for RoosterJS plugins
+ * @private
+ */
+export var PluginEventType;
+(function (PluginEventType) {
+    PluginEventType["EditorReady"] = "editorReady";
+    PluginEventType["BeforeDispose"] = "beforeDispose";
+    PluginEventType["ContentChanged"] = "contentChanged";
+    PluginEventType["BeforeSetContent"] = "beforeSetContent";
+    PluginEventType["Input"] = "input";
+    PluginEventType["KeyDown"] = "keyDown";
+    PluginEventType["BeforeCutCopy"] = "beforeCutCopy";
+    PluginEventType["BeforePaste"] = "beforePaste";
+    PluginEventType["ZoomChanged"] = "zoomChanged";
+    PluginEventType["MouseUp"] = "mouseUp";
+    PluginEventType["CompositionEnd"] = "compositionEnd";
+})(PluginEventType || (PluginEventType = {}));
+/**
+ * ContentChanged event source for RoosterJS
+ * @private
+ */
+export var ContentChangedEventSource;
+(function (ContentChangedEventSource) {
+    ContentChangedEventSource["Paste"] = "Paste";
+})(ContentChangedEventSource || (ContentChangedEventSource = {}));
+/**
+ * Applies the border format to the specified element.
+ * If the element is an HTMLTableCellElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, the default format applier is used.
+ */
+export const borderApplier = (format, element, context) => {
+    if (element instanceof HTMLTableCellElement) {
+        // don't set format for table cell
+        // as it will set inline styles for them
+        // we want to use classes instead
+    }
+    else if (context.defaultFormatAppliers.border) {
+        // apply default formats for all other cases
+        context.defaultFormatAppliers.border(format, element, context);
+    }
+};
+/**
+ * Applies the dataset format to the given HTML element.
+ * If the element is an HTMLTableElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, it applies the default formats.
+ */
+export const dataSetApplier = (format, element, context) => {
+    if (element instanceof HTMLTableElement) {
+        // don't set editing info for tables
+        // as it will set inline styles for them
+        // we want to use classes instead
+    }
+    else if (context.defaultFormatAppliers.dataset) {
+        // apply default formats for all other cases
+        context.defaultFormatAppliers.dataset(format, element, context);
+    }
+};
+/**
+ * @internal
+ */
+export 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;
+};
+/**
+ * @internal
+ */
+export 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 => !!img.id && !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
+    const removedInlineImages = [...previousInlineImages];
+    return removedInlineImages;
+};
+/**
+ * @internal
+ */
+export 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;
+};
+/**
+ * @internal
+ */
+export const getInlineImageAttributes = (image) => {
+    const imageAttributes = {};
+    image.getAttributeNames().forEach(attrName => {
+        const attrValue = image.getAttribute(attrName);
+        if (attrValue) {
+            imageAttributes[attrName] = attrValue;
+        }
+    });
+    return imageAttributes;
+};
+/**
+ * @internal
+ */
+/**
+ * Update the scroll position of the editor to ensure the content is visible.
+ */
+export 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();
+};
+/**
+ * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap
+ * @internal
+ */
+export const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
+    removedInlineImages.forEach(image => {
+        if (!image.id) {
+            return;
+        }
+        removeSingleLocalBlob(currentLocalBlobMap, image.id);
+    });
+};
+/**
+ * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap
+ * @internal
+ */
+export const cleanAllLocalBlobs = (currentLocalBlobMap) => {
+    Object.keys(currentLocalBlobMap).forEach(imageId => {
+        removeSingleLocalBlob(currentLocalBlobMap, imageId);
+    });
+};
+const removeSingleLocalBlob = (currentLocalBlobMap, imageId) => {
+    const blobUrl = currentLocalBlobMap[imageId];
+    if (blobUrl) {
+        URL.revokeObjectURL(blobUrl);
+        delete currentLocalBlobMap[imageId];
+    }
+};
+//# sourceMappingURL=RichTextEditorUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/RichTextEditorUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';\n\n/**\n * Plugin event type for RoosterJS plugins\n * @private\n */\nexport enum PluginEventType {\n  EditorReady = 'editorReady',\n  BeforeDispose = 'beforeDispose',\n  ContentChanged = 'contentChanged',\n  BeforeSetContent = 'beforeSetContent',\n  Input = 'input',\n  KeyDown = 'keyDown',\n  BeforeCutCopy = 'beforeCutCopy',\n  BeforePaste = 'beforePaste',\n  ZoomChanged = 'zoomChanged',\n  MouseUp = 'mouseUp',\n  CompositionEnd = 'compositionEnd',\n}\n\n/**\n * ContentChanged event source for RoosterJS\n * @private\n */\nexport enum ContentChangedEventSource {\n  Paste = 'Paste',\n}\n\n/**\n * Applies the border format to the specified element.\n * If the element is an HTMLTableCellElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, the default format applier is used.\n */\nexport const borderApplier = (format: BorderFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableCellElement) {\n    // don't set format for table cell\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.border) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.border(format, element, context);\n  }\n};\n\n/**\n * Applies the dataset format to the given HTML element.\n * If the element is an HTMLTableElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, it applies the default formats.\n */\nexport const dataSetApplier = (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableElement) {\n    // don't set editing info for tables\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.dataset) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.dataset(format, element, context);\n  }\n};\n/**\n * @internal\n */\nexport const getPreviousInlineImages = (content?: string): Record<string, string>[] => {\n  if (!content) {\n    return [];\n  }\n  const previousInlineImages: Record<string, string>[] = [];\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  document.querySelectorAll('img').forEach(img => {\n    const imageAttributes = getInlineImageAttributes(img);\n    previousInlineImages.push(imageAttributes);\n  });\n  return previousInlineImages;\n};\n/**\n * @internal\n */\nexport const getRemovedInlineImages = (content: string, previousInlineImages: Record<string, string>[]): Record<string, string>[] => {\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  const currentContentIds = Array.from(document.querySelectorAll('img')).map(img => img.id);\n  previousInlineImages = previousInlineImages?.filter(img => !!img.id && !currentContentIds?.includes(img.id));\n  const removedInlineImages = [...previousInlineImages];\n  return removedInlineImages;\n};\n/**\n * @internal\n */\nexport const getInsertedInlineImages = (content: string, previousInlineImages: NodeListOf<HTMLImageElement>): HTMLImageElement[] => {\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  const currentContentInlineImages = Array.from(document.querySelectorAll('img'));\n  const previousContentIds = Array.from(previousInlineImages).map(img => img.id);\n  // if check is updated, also update getRemovedInlineImages\n  const insertedInlineImages = currentContentInlineImages.filter(img => !previousContentIds.includes(img.id));\n  return insertedInlineImages;\n};\n/**\n * @internal\n */\nexport const getInlineImageAttributes = (image: HTMLImageElement): Record<string, string> => {\n  const imageAttributes: Record<string, string> = {};\n  image.getAttributeNames().forEach(attrName => {\n    const attrValue = image.getAttribute(attrName);\n    if (attrValue) {\n      imageAttributes[attrName] = attrValue;\n    }\n  });\n  return imageAttributes;\n};\n/**\n * @internal\n */\n/**\n * Update the scroll position of the editor to ensure the content is visible.\n */\nexport const scrollToBottomRichTextEditor = (): void => {\n  // Get the current selection in the document\n  const selection = document.getSelection();\n\n  // Check if a selection exists and it has at least one range\n  if (!selection || selection.rangeCount <= 0) {\n    // If no selection or range, exit the function\n    return;\n  }\n\n  // Get the first range of the selection\n  // A user can normally only select one range at a time, so the rangeCount will usually be 1\n  const range = selection.getRangeAt(0);\n\n  // If the common ancestor container of the range is the document itself,\n  // it might mean that the editable element is getting removed from the DOM\n  // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error\n  if (range.commonAncestorContainer === document) {\n    return;\n  }\n\n  // Create a temporary span element to use as an anchor for scrolling\n  // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error\n  const tempElement = document.createElement('span');\n  // Collapse the range to its end point\n  // This means the start and end points of the range will be the same, and it will not contain any content\n  range.collapse(false);\n  // Insert the temporary element at the cursor's position at the end of the range\n  range.insertNode(tempElement);\n  // Scroll the temporary element into view\n  // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly\n  tempElement.scrollIntoView({\n    block: 'center'\n  });\n  tempElement.remove();\n};\n/**\n * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap\n * @internal\n */\nexport const removeLocalBlobs = (currentLocalBlobMap: Record<string, string>, removedInlineImages: Record<string, string>[]): void => {\n  removedInlineImages.forEach(image => {\n    if (!image.id) {\n      return;\n    }\n    removeSingleLocalBlob(currentLocalBlobMap, image.id);\n  });\n};\n/**\n * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap\n * @internal\n */\nexport const cleanAllLocalBlobs = (currentLocalBlobMap: Record<string, string>): void => {\n  Object.keys(currentLocalBlobMap).forEach(imageId => {\n    removeSingleLocalBlob(currentLocalBlobMap, imageId);\n  });\n};\nconst removeSingleLocalBlob = (currentLocalBlobMap: Record<string, string>, imageId: string): void => {\n  const blobUrl = currentLocalBlobMap[imageId];\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    delete currentLocalBlobMap[imageId];\n  }\n};"]}

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.d.ts

@@ -0,0 +1,33 @@
+import { RichTextStrings } from '../RichTextEditor/RichTextSendBox';
+import { IEditor } from 'roosterjs-content-model-types';
+import { IContextualMenuItem } from '@fluentui/react';
+/**
+ * @private
+ *
+ * String to be replaces by actual values of row and column.
+ */
+export declare const ColumnRowReplaceString = "{column} x {row}";
+/**
+ * @private
+ *
+ * Function to create key pair for the selected table size.
+ */
+export declare function createKey(row: number, column: number): string;
+/**
+ * @private
+ *
+ * Function to parse key to the selected table size valules.
+ */
+export declare function parseKey(key: string): {
+    row: number;
+    column: number;
+};
+/**
+ * Returns an array of context menu items for editing a rich text table.
+ *
+ * @param editor - The editor instance.
+ * @param strings - An object containing localized strings for the context menu items.
+ * @returns An array of context menu items.
+ */
+export declare const getTableEditContextMenuItems: (editor: IEditor, strings: Partial<RichTextStrings>) => IContextualMenuItem[];
+//# sourceMappingURL=RichTextTableUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js

@@ -0,0 +1,119 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { editTable } from 'roosterjs-content-model-api';
+import { tableContextMenuIconStyles } from '../styles/RichTextEditor.styles';
+/**
+ * @private
+ *
+ * String to be replaces by actual values of row and column.
+ */
+export const ColumnRowReplaceString = '{column} x {row}';
+/**
+ * @private
+ *
+ * Function to create key pair for the selected table size.
+ */
+export function createKey(row, column) {
+    return `${row},${column}`;
+}
+/**
+ * @private
+ *
+ * Function to parse key to the selected table size valules.
+ */
+export function parseKey(key) {
+    const [row, column] = key.split(',');
+    if (row === undefined || column === undefined) {
+        throw new Error('Invalid key format');
+    }
+    return {
+        row: parseInt(row),
+        column: parseInt(column)
+    };
+}
+/**
+ * Returns an array of context menu items for editing a rich text table.
+ *
+ * @param editor - The editor instance.
+ * @param strings - An object containing localized strings for the context menu items.
+ * @returns An array of context menu items.
+ */
+export const getTableEditContextMenuItems = (editor, strings) => {
+    return [{
+            key: 'RichTextTableEditMenuTableInsert',
+            text: strings.richTextInsertRowOrColumnMenu,
+            ariaLabel: strings.richTextInsertRowOrColumnMenu,
+            iconProps: {
+                iconName: 'RichTextTableInsertMenuIcon',
+                styles: {
+                    root: tableContextMenuIconStyles
+                }
+            },
+            subMenuProps: {
+                items: [{
+                        key: 'RichTextTableEditMenuTableInsertRowAbove',
+                        text: strings.richTextInsertRowAboveMenu,
+                        ariaLabel: strings.richTextInsertRowAboveMenu,
+                        onClick: () => {
+                            editTable(editor, 'insertAbove');
+                        }
+                    }, {
+                        key: 'RichTextTableEditMenuTableInsertRowBelow',
+                        text: strings.richTextInsertRowBelowMenu,
+                        ariaLabel: strings.richTextInsertRowBelowMenu,
+                        onClick: () => {
+                            editTable(editor, 'insertBelow');
+                        }
+                    }, {
+                        key: 'RichTextTableEditMenuTableInsertColumnLeft',
+                        text: strings.richTextInsertColumnLeftMenu,
+                        ariaLabel: strings.richTextInsertColumnLeftMenu,
+                        onClick: () => {
+                            editTable(editor, 'insertLeft');
+                        }
+                    }, {
+                        key: 'RichTextTableEditMenuTableInsertColumnRight',
+                        text: strings.richTextInsertColumnRightMenu,
+                        ariaLabel: strings.richTextInsertColumnRightMenu,
+                        onClick: () => {
+                            editTable(editor, 'insertRight');
+                        }
+                    }]
+            }
+        }, {
+            key: 'RichTextTableEditMenuTableDelete',
+            text: strings.richTextDeleteRowOrColumnMenu,
+            ariaLabel: strings.richTextDeleteRowOrColumnMenu,
+            iconProps: {
+                iconName: 'RichTextTableDeleteMenuIcon',
+                styles: {
+                    root: tableContextMenuIconStyles
+                }
+            },
+            subMenuProps: {
+                items: [{
+                        key: 'RichTextTableEditMenuTableDeleteRow',
+                        text: strings.richTextDeleteRowMenu,
+                        ariaLabel: strings.richTextDeleteRowMenu,
+                        onClick: () => {
+                            editTable(editor, 'deleteRow');
+                        }
+                    }, {
+                        key: 'RichTextTableEditMenuTableDeleteColumn',
+                        text: strings.richTextDeleteColumnMenu,
+                        ariaLabel: strings.richTextDeleteColumnMenu,
+                        onClick: () => {
+                            editTable(editor, 'deleteColumn');
+                        }
+                    }, {
+                        key: 'RichTextTableEditMenuTableDeleteTable',
+                        text: strings.richTextDeleteTableMenu,
+                        ariaLabel: strings.richTextDeleteTableMenu,
+                        onClick: () => {
+                            editTable(editor, 'deleteTable');
+                        }
+                    }]
+            }
+        }];
+};
+//# sourceMappingURL=RichTextTableUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextTableUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/RichTextTableUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { editTable } from 'roosterjs-content-model-api';\nimport { tableContextMenuIconStyles } from '../styles/RichTextEditor.styles';\nimport { RichTextStrings } from '../RichTextEditor/RichTextSendBox';\nimport { IEditor } from 'roosterjs-content-model-types';\nimport { IContextualMenuItem } from '@fluentui/react';\n\n/**\n * @private\n *\n * String to be replaces by actual values of row and column.\n */\nexport const ColumnRowReplaceString = '{column} x {row}';\n\n/**\n * @private\n *\n * Function to create key pair for the selected table size.\n */\nexport function createKey(row: number, column: number): string {\n  return `${row},${column}`;\n}\n\n/**\n * @private\n *\n * Function to parse key to the selected table size valules.\n */\nexport function parseKey(key: string): {\n  row: number;\n  column: number;\n} {\n  const [row, column] = key.split(',');\n  if (row === undefined || column === undefined) {\n    throw new Error('Invalid key format');\n  }\n  return {\n    row: parseInt(row),\n    column: parseInt(column)\n  };\n}\n\n/**\n * Returns an array of context menu items for editing a rich text table.\n *\n * @param editor - The editor instance.\n * @param strings - An object containing localized strings for the context menu items.\n * @returns An array of context menu items.\n */\nexport const getTableEditContextMenuItems = (editor: IEditor, strings: Partial<RichTextStrings>): IContextualMenuItem[] => {\n  return [{\n    key: 'RichTextTableEditMenuTableInsert',\n    text: strings.richTextInsertRowOrColumnMenu,\n    ariaLabel: strings.richTextInsertRowOrColumnMenu,\n    iconProps: {\n      iconName: 'RichTextTableInsertMenuIcon',\n      styles: {\n        root: tableContextMenuIconStyles\n      }\n    },\n    subMenuProps: {\n      items: [{\n        key: 'RichTextTableEditMenuTableInsertRowAbove',\n        text: strings.richTextInsertRowAboveMenu,\n        ariaLabel: strings.richTextInsertRowAboveMenu,\n        onClick: () => {\n          editTable(editor, 'insertAbove');\n        }\n      }, {\n        key: 'RichTextTableEditMenuTableInsertRowBelow',\n        text: strings.richTextInsertRowBelowMenu,\n        ariaLabel: strings.richTextInsertRowBelowMenu,\n        onClick: () => {\n          editTable(editor, 'insertBelow');\n        }\n      }, {\n        key: 'RichTextTableEditMenuTableInsertColumnLeft',\n        text: strings.richTextInsertColumnLeftMenu,\n        ariaLabel: strings.richTextInsertColumnLeftMenu,\n        onClick: () => {\n          editTable(editor, 'insertLeft');\n        }\n      }, {\n        key: 'RichTextTableEditMenuTableInsertColumnRight',\n        text: strings.richTextInsertColumnRightMenu,\n        ariaLabel: strings.richTextInsertColumnRightMenu,\n        onClick: () => {\n          editTable(editor, 'insertRight');\n        }\n      }]\n    }\n  }, {\n    key: 'RichTextTableEditMenuTableDelete',\n    text: strings.richTextDeleteRowOrColumnMenu,\n    ariaLabel: strings.richTextDeleteRowOrColumnMenu,\n    iconProps: {\n      iconName: 'RichTextTableDeleteMenuIcon',\n      styles: {\n        root: tableContextMenuIconStyles\n      }\n    },\n    subMenuProps: {\n      items: [{\n        key: 'RichTextTableEditMenuTableDeleteRow',\n        text: strings.richTextDeleteRowMenu,\n        ariaLabel: strings.richTextDeleteRowMenu,\n        onClick: () => {\n          editTable(editor, 'deleteRow');\n        }\n      }, {\n        key: 'RichTextTableEditMenuTableDeleteColumn',\n        text: strings.richTextDeleteColumnMenu,\n        ariaLabel: strings.richTextDeleteColumnMenu,\n        onClick: () => {\n          editTable(editor, 'deleteColumn');\n        }\n      }, {\n        key: 'RichTextTableEditMenuTableDeleteTable',\n        text: strings.richTextDeleteTableMenu,\n        ariaLabel: strings.richTextDeleteTableMenu,\n        onClick: () => {\n          editTable(editor, 'deleteTable');\n        }\n      }]\n    }\n  }];\n};"]}

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.d.ts

@@ -1,7 +1,40 @@
+import { AttachmentMetadataInProgress } from "../../../../acs-ui-common/src";
+import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 /**
  * @private
  */
 export declare const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
+/**
+ * @private
+ */
+export declare const hasIncompleteAttachmentUploads: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
+/**
+ * @private
+ */
+export declare const isAttachmentUploadCompleted: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
+/**
+ * Obtain any image nodes from the content DOM passed in
+ * returns a list of image IDs
+ * @internal
+ */
+export declare const inlineImageIds: (content?: string) => {
+    id: string;
+    url?: string;
+}[];
+/**
+ * Check if the content has inline image.
+ * @internal
+ */
+export declare const hasInlineImageContent: (content: string) => boolean;
+/**
+ * @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.
+ */
+export declare const updateStylesOfInlineImages: (message: string, initialInlineImages: Record<string, string>[]) => Promise<string>;
 /**
  * @private
  */
@@ -19,13 +52,26 @@ export declare const sanitizeText: (message: string) => string;
  * @param disabled - Indicates whether the send box is disabled.
  * @returns A boolean value indicating whether the send box should be disabled.
  */
-export declare const isSendBoxButtonDisabled: ({ hasContent, hasError, disabled }: {
+export declare const isSendBoxButtonDisabled: ({ hasContent, hasCompletedAttachmentUploads, hasError, disabled }: {
     hasContent: boolean;
+    hasCompletedAttachmentUploads: boolean;
     hasError: boolean;
     disabled: boolean;
 }) => boolean;
+/**
+ * @internal
+ */
+export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => AttachmentMetadata[] | undefined;
 /**
  * @internal
  */
 export declare const modifyInlineImagesInContentString: (content: string, initialInlineImages: Record<string, string>[], onCompleted?: (content: string) => void) => Promise<void>;
+/**
+ * @internal
+ */
+export declare const removeBrokenImageContentAndClearImageSizeStyles: (content: string) => string;
+/**
+ * @internal
+ */
+export declare const getContentWithUpdatedInlineImagesInfo: (content: string, inlineImageWithProgress: AttachmentMetadataInProgress[]) => string;
 //# sourceMappingURL=SendBoxUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js

@@ -7,13 +7,98 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
 /**
  * @private
  */
 export const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const EMPTY_MESSAGE_REGEX = /^\s*$/;
+/**
+ * @private
+ */
+export const hasIncompleteAttachmentUploads = (attachmentsWithProgress) => {
+    return !!((attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.length) && !attachmentsWithProgress.filter(attachmentUpload => !attachmentUpload.error).every(attachmentUpload => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined));
+};
+/**
+ * @private
+ */
+export const isAttachmentUploadCompleted = (attachmentsWithProgress) => {
+    return !!(attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.find(attachment => !attachment.error));
+};
+/**
+ * Obtain any image nodes from the content DOM passed in
+ * returns a list of image IDs
+ * @internal
+ */
+export const inlineImageIds = (content) => {
+    if (!content) {
+        return [];
+    }
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    const imageTags = document.querySelectorAll('img');
+    const ids = [];
+    imageTags.forEach(node => {
+        const id = node.id;
+        const url = node.src;
+        if (id) {
+            ids.push({
+                id,
+                url
+            });
+        }
+    });
+    return ids;
+};
+/**
+ * Check if the content has inline image.
+ * @internal
+ */
+export const hasInlineImageContent = (content) => {
+    return inlineImageIds(content).length > 0;
+};
+/**
+ * @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.
+ */
+export const updateStylesOfInlineImages = (message, initialInlineImages) => __awaiter(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) => {
+            // 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 = () => {
+                // imageElement is a copy of original img element, so changes need to be made to the original img element
+                img.width = imageElement.width;
+                img.height = imageElement.height;
+                img.style.aspectRatio = `${imageElement.width} / ${imageElement.height}`;
+                // Clear maxWidth and maxHeight styles that are set by roosterJS.
+                // This is so that they can be set in messageThread styles without using the important flag.
+                img.style.maxWidth = '';
+                img.style.maxHeight = '';
+                resolve();
+            };
+            imageElement.onerror = () => {
+                rejects(`Error loading image ${img.id}`);
+            };
+        });
+    });
+    yield Promise.all(imagesPromise);
+    const newMessage = document.body.innerHTML;
+    return newMessage;
+});
 /**
  * @private
  */
@@ -40,18 +125,83 @@ export const sanitizeText = (message) => {
  * @param disabled - Indicates whether the send box is disabled.
  * @returns A boolean value indicating whether the send box should be disabled.
  */
-export const isSendBoxButtonDisabled = ({ hasContent, hasError, disabled }) => {
+export const isSendBoxButtonDisabled = ({ hasContent, hasCompletedAttachmentUploads, hasError, disabled }) => {
     return (
     // no content
-    !hasContent ||
+    !(hasContent || hasCompletedAttachmentUploads) ||
         //error message exists
         hasError || disabled);
 };
+/**
+ * @internal
+ */
+export const toAttachmentMetadata = (attachmentsWithProgress) => {
+    return attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter(attachment => {
+        var _a;
+        return !('error' in attachment) && !((_a = attachment.error) === null || _a === void 0 ? void 0 : _a.message);
+    }).map(attachment => {
+        var _a;
+        return {
+            id: attachment.id,
+            name: attachment.name,
+            url: (_a = attachment.url) !== null && _a !== void 0 ? _a : ''
+        };
+    });
+};
 /**
  * @internal
  */
 export const modifyInlineImagesInContentString = (content, initialInlineImages, onCompleted) => __awaiter(void 0, void 0, void 0, function* () {
     let newContent = content;
+    try {
+        newContent = yield updateStylesOfInlineImages(content, initialInlineImages);
+    }
+    catch (error) {
+        console.error('Error updating inline images: ', error);
+    }
     onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(newContent);
 });
+/**
+ * @internal
+ */
+export const removeBrokenImageContentAndClearImageSizeStyles = (content) => {
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    document.querySelectorAll('img').forEach(img => {
+        // Before submitting/resend the message, we need to trim the unnecessary attributes such as src,
+        // which is set to a local svg of a broken image icon at this point.
+        // Once message is submitted/resent, it will be fetched again and might not be a broken image anymore,
+        // That's why we need to remove the class and data-ui-id attribute of 'broken-image-wrapper'
+        if (img.className === 'broken-image-wrapper') {
+            img.removeAttribute('class');
+            img.removeAttribute('src');
+            img.removeAttribute('data-ui-id');
+        }
+        // Clear maxWidth and maxHeight styles that are set by roosterJS.
+        // Clear width and height styles as the width and height is set in attributes
+        // This is so that they can be set in messageThread styles without using the important flag.
+        img.style.width = '';
+        img.style.height = '';
+        img.style.maxWidth = '';
+        img.style.maxHeight = '';
+    });
+    return document.body.innerHTML;
+};
+/**
+ * @internal
+ */
+export 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;
+};
 //# sourceMappingURL=SendBoxUtils.js.map