Merge pull request #2079 from wuxiaojun514/2078

fixed #2078 to show multiline comment properly in ListItemComments control

Author: joaojmendes

src/controls/listItemComments/components/Comments/CommentText.tsx

@@ -22,31 +22,6 @@ export const CommentText: React.FunctionComponent<ICommentTextProps> = (
   const { text, mentions } = props;
   const mentionsResults: Mention[] = mentions;
 
-  useEffect(() => {
-    const hasMentions = mentions?.length ? true : false;
-    let result: string | JSX.Element[] = text;
-    if (hasMentions) {
-      result = regexifyString({
-        pattern: /@mention&#123;\d+&#125;/g,
-        decorator: (match, index) => {
-          const mention = mentionsResults[index];
-          const _name = `@${mention.name}`;
-          return (
-            <>
-              <LivePersona
-                serviceScope={serviceScope}
-                upn={mention.email}
-                template={<span style={{ color: theme.themePrimary, whiteSpace: "nowrap" }}>{_name}</span>}
-              />
-            </>
-          );
-        },
-        input: text,
-      }) as JSX.Element[];
-    }
-    setCommentText(result);
-  }, []);
-
   const convertTextToLinksAndText = (
     text: string
   ): (string | JSX.Element)[] => {
@@ -69,34 +44,80 @@ export const CommentText: React.FunctionComponent<ICommentTextProps> = (
     });
   };
 
-  return (
-    <>
-      <Stack wrap horizontal horizontalAlign="start" verticalAlign="center">
-        {isArray(commentText) ? (
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (commentText as any[]).map((el, i) => {
-            if (isObject(el)) {
-              return (
-                <span key={i} style={{ paddingRight: 5 }}>
-                  {el}
-                </span>
-              );
-            } else {
-              const _el: string = el.trim();
-              if (_el.length) {
+  useEffect(() => {
+    const hasMentions = mentions?.length ? true : false;
+    const lines = text.split(/\r?\n/);
+    const result: JSX.Element[] = [];
+    lines.forEach((line, idx) => {
+      let lineContent: string | JSX.Element[] = line;
+      if (hasMentions) {
+        lineContent = regexifyString({
+          pattern: /@mention&#123;\d+&#125;/g,
+          decorator: (match, index) => {
+            const mention = mentionsResults[index];
+            const _name = `@${mention.name}`;
+            return (
+              <LivePersona
+                serviceScope={serviceScope}
+                upn={mention.email}
+                template={
+                  <span
+                    style={{ color: theme.themePrimary, whiteSpace: 'nowrap' }}
+                  >
+                    {_name}
+                  </span>
+                }
+              />
+            );
+          },
+          input: line,
+        }) as JSX.Element[];
+      }
+      result.push(
+        <Stack
+          horizontal
+          key={`stack-${idx}`}
+          horizontalAlign="start"
+          verticalAlign="center"
+        >
+          {isArray(lineContent) ? (
+             lineContent.length > 0 ?
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (lineContent as any[]).map((el, i) => {
+              if (isObject(el)) {
                 return (
-                  <Text style={{ paddingRight: 5 }} variant="small" key={i}>
-                    {convertTextToLinksAndText(he.decode(_el))}
-                  </Text>
+                  <span key={i} style={{ paddingRight: 5 }}>
+                    {el}
+                  </span>
                 );
+              } else {
+                const _el: string = el.trim();
+                if (_el.length) {
+                  return (
+                    <Text style={{ paddingRight: 5 }} variant="small" key={i}>
+                      {convertTextToLinksAndText(he.decode(_el))}
+                    </Text>
+                  );
+                }
               }
-            }
-          })
-        ) : (
-          <Text variant="small">
-            {convertTextToLinksAndText(he.decode(commentText))}
-          </Text>
-        )}
+            }): <br/>
+          ) :  lineContent.trim().length > 0 ? (
+            <Text variant="small">
+              {convertTextToLinksAndText(he.decode(lineContent))}
+            </Text>
+          ) : (
+            <br/>
+          )}
+        </Stack>
+      );
+    });
+    setCommentText(result);
+  }, []);
+
+  return (
+    <>
+      <Stack wrap verticalAlign="center">
+        {commentText}
       </Stack>
     </>
   );