in packages/react-components/src/components/ChatMessage/ChatMessageContent.tsx [270:309]
transform(reactNode, domNode) {
if (domNode instanceof DOMElement && domNode.attribs) {
// Transform custom rendering of mentions
/* @conditional-compile-remove(mention) */
if (domNode.name === 'msft-mention' && domNode.attribs.id) {
const { id } = domNode.attribs;
const mention: Mention = {
id: id,
displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''
};
if (props.mentionDisplayOptions?.onRenderMention) {
return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
}
return defaultOnMentionRender(mention);
}
// Transform inline images
if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
if (domNode.attribs.name) {
domNode.attribs['aria-label'] = domNode.attribs.name;
}
const imgProps = attributesToProps(domNode.attribs);
const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };
return props.inlineImageOptions?.onRenderInlineImage
? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
: defaultOnRenderInlineImage(inlineImageProps);
}
// Transform links to open in new tab
if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {
return React.cloneElement(reactNode, {
target: '_blank',
rel: 'noreferrer noopener'
});
}
}
// Pass through the original node
return reactNode as unknown as JSX.Element;
}