transform()

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;
    }