@azure/communication-react 1.11.1-alpha-202401100012 → 1.11.1-alpha-202401110013

package/dist/dist-cjs/communication-react/index.js

@@ -17,7 +17,7 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
-var htmlToReact = require('html-to-react');
+var parse = require('html-react-parser');
 var Linkify = require('react-linkify');
 var DOMPurify = require('dompurify');
 var reactHooks = require('@fluentui/react-hooks');
@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401100012';
+var telemetryVersion = '1.11.1-alpha-202401110013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -10413,76 +10413,54 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
-const processNodeDefinitions = htmlToReact.ProcessNodeDefinitions();
-const htmlToReactParser = htmlToReact.Parser();
-const processInlineImage = (props) => ({
-    // Custom <img> processing
-    shouldProcessNode: (node) => {
-        var _a;
-        function matchingImageNode(imageMetadata) {
-            return imageMetadata.id === node.attribs.id;
-        }
-        // Process img node with id in attachments list
-        return (node.name &&
-            node.name === 'img' &&
-            node.attribs &&
-            node.attribs.id &&
-            ((_a = props.message.inlineImages) === null || _a === void 0 ? void 0 : _a.find(matchingImageNode)));
-    },
-    processNode: (node, children, index) => {
-        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
-        // logic to check id in map/list
-        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
-            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-        }
-        const handleOnClick = () => {
-            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
-        };
-        return (React.createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                cursor: 'pointer'
-            }, onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    handleOnClick();
-                }
-            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
-    }
-});
-/* @conditional-compile-remove(mention) */
-const processMention = (props) => ({
-    shouldProcessNode: (node) => {
-        var _a;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
-            return node.name === 'msft-mention';
-        }
-        return false;
-    },
-    processNode: (node) => {
-        var _a, _b, _c;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            const { id } = node.attribs;
-            const mention = {
-                id: id,
-                displayText: (_c = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : ''
-            };
-            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-        }
-        return processNodeDefinitions.processDefaultNode;
-    }
-});
 const processHtmlToReact = (props) => {
     var _a;
-    const steps = [
-        processInlineImage(props),
-        /* @conditional-compile-remove(mention) */
-        processMention(props),
-        {
-            // Process everything else in the default way
-            shouldProcessNode: htmlToReact.IsValidNodeDefinitions.alwaysValid,
-            processNode: processNodeDefinitions.processDefaultNode
+    const options = {
+        transform(reactNode, domNode) {
+            var _a, _b, _c;
+            if (domNode instanceof parse.Element && domNode.attribs) {
+                // Transform custom rendering of mentions
+                /* @conditional-compile-remove(mention) */
+                if (((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) && domNode.name === 'msft-mention') {
+                    const { id } = domNode.attribs;
+                    const mention = {
+                        id: id,
+                        displayText: (_b = domNode.children[0].nodeValue) !== null && _b !== void 0 ? _b : ''
+                    };
+                    return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+                }
+                // Transform inline images
+                if (domNode.name &&
+                    domNode.name === 'img' &&
+                    domNode.attribs &&
+                    domNode.attribs.id &&
+                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
+                        return metadata.id === domNode.attribs.id;
+                    }))) {
+                    domNode.attribs['aria-label'] = domNode.attribs.name;
+                    // logic to check id in map/list
+                    if (props.attachmentsMap && domNode.attribs.id in props.attachmentsMap) {
+                        domNode.attribs.src = props.attachmentsMap[domNode.attribs.id];
+                    }
+                    const handleOnClick = () => {
+                        props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
+                    };
+                    const imgProps = parse.attributesToProps(domNode.attribs);
+                    return (React.createElement("span", { "data-ui-id": domNode.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                            cursor: 'pointer'
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                handleOnClick();
+                            }
+                        } },
+                        React.createElement("img", Object.assign({}, imgProps))));
+                }
+            }
+            // Pass through the original node
+            return reactNode;
         }
-    ];
-    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', htmlToReact.IsValidNodeDefinitions.alwaysValid, steps);
+    };
+    return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -21007,12 +20985,12 @@ const accessErrorTargets = [
 ];
 const latestUnableToReachChatServiceError = (latestErrors) => {
     return latestActiveErrorSatisfying(latestErrors, 'unableToReachChatService', (error) => {
-        return !!error && !!error.innerError && error.innerError['code'] === 'REQUEST_SEND_ERROR';
+        return (!!error && !!error.innerError && 'code' in error.innerError && error.innerError.code === 'REQUEST_SEND_ERROR');
     });
 };
 const latestAccessDeniedError = (latestErrors) => {
     return latestActiveErrorSatisfying(latestErrors, 'accessDenied', (error) => {
-        return !!error && !!error.innerError && error.innerError['statusCode'] === 401;
+        return !!error && !!error.innerError && 'statusCode' in error.innerError && error.innerError.statusCode === 401;
     });
 };
 const latestNotInThisThreadError = (latestErrors) => {
@@ -21029,11 +21007,12 @@ const latestNotInThisThreadError = (latestErrors) => {
         }
         // Chat service returns 403 if a user has been removed from a thread.
         // Chat service returns either 400 or 404 if the thread ID is malformed, depending on how the thread ID is malformed.
-        return [400, 403, 404].some((statusCode) => error.innerError['statusCode'] === statusCode);
+        return [400, 403, 404].some((statusCode) => 'statusCode' in error.innerError && error.innerError.statusCode === statusCode);
     });
 };
 const botContactMRIPrefix = '28:';
-const isErrorDueToBotContact = (error) => error.innerError['statusCode'] === 400 &&
+const isErrorDueToBotContact = (error) => 'statusCode' in error.innerError &&
+    error.innerError.statusCode === 400 &&
     error.innerError.message.includes(`Identifier format is not supported (${botContactMRIPrefix}`);
 const latestActiveErrorSatisfying = (errors, activeErrorType, predicate) => {
     const activeErrorMessages = [];