Merge pull request #32910 from rezkiy37/fix/32286-wrap-message

Wrap long emails of a Next Steps message

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -64,6 +64,7 @@ function BaseHTMLEngineProvider(props) {
                 tagName: 'next-steps',
                 mixedUAStyles: {...styles.textLabelSupporting},
             }),
+            'next-steps-email': defaultHTMLElementModels.span.extend({tagName: 'next-steps-email'}),
         }),
         [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );

src/components/HTMLEngineProvider/HTMLRenderers/NextStepsEmailRenderer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type NextStepsEmailRendererProps = {
+    tnode: {
+        data: string;
+    };
+};
+
+function NextStepsEmailRenderer({tnode}: NextStepsEmailRendererProps) {
+    const styles = useThemeStyles();
+
+    return <Text style={[styles.breakWord, styles.textLabelSupporting, styles.textStrong]}>{tnode.data}</Text>;
+}
+
+NextStepsEmailRenderer.displayName = 'NextStepsEmailRenderer';
+
+export default NextStepsEmailRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/index.js

@@ -4,6 +4,7 @@ import EditedRenderer from './EditedRenderer';
 import ImageRenderer from './ImageRenderer';
 import MentionHereRenderer from './MentionHereRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
+import NextStepsEmailRenderer from './NextStepsEmailRenderer';
 import PreRenderer from './PreRenderer';
 
 /**
@@ -20,4 +21,5 @@ export default {
     pre: PreRenderer,
     'mention-user': MentionUserRenderer,
     'mention-here': MentionHereRenderer,
+    'next-steps-email': NextStepsEmailRenderer,
 };

src/libs/NextStepUtils.ts

@@ -1,4 +1,5 @@
 import Str from 'expensify-common/lib/str';
+import EmailUtils from './EmailUtils';
 
 type Message = {
     text: string;
@@ -9,9 +10,17 @@ function parseMessage(messages: Message[] | undefined) {
     let nextStepHTML = '';
 
     messages?.forEach((part) => {
+        const isEmail = Str.isValidEmail(part.text);
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const tagType = part.type || 'span';
-        nextStepHTML += `<${tagType}>${Str.safeEscape(part.text)}</${tagType}>`;
+        let tagType = part.type ?? 'span';
+        let content = Str.safeEscape(part.text);
+
+        if (isEmail) {
+            tagType = 'next-steps-email';
+            content = EmailUtils.prefixMailSeparatorsWithBreakOpportunities(content);
+        }
+
+        nextStepHTML += `<${tagType}>${content}</${tagType}>`;
     });
 
     const formattedHtml = nextStepHTML