Merge pull request #2002 from Sandeep-FED/dev-feat-listitemcomments

feat[ListItemComments]: make links present in comments clickable

Author: AJIXuMuK

src/controls/listItemComments/common/constants.ts

@@ -1,2 +1,3 @@
 export const PHOTO_URL = "/_layouts/15/userphoto.aspx?size=M&accountname=";
 export const TILE_HEIGHT: number = 70;
+export const URL_REGEX = /(https?:\/\/[^\s]+)/g;

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

@@ -3,11 +3,12 @@ import { useContext, useEffect, useState } from "react";
 import { Mention } from "./IComment";
 import { Text } from "@fluentui/react/lib/Text";
 import { LivePersona } from "../../../LivePersona";
-import { AppContext } from "../../common";
-import regexifyString from "regexify-string";
-import { Stack } from "@fluentui/react/lib/Stack";
-import { isArray, isObject } from "lodash";
+import { AppContext, URL_REGEX } from '../../common';
+import regexifyString from 'regexify-string';
+import { Stack } from '@fluentui/react/lib/Stack';
+import { isArray, isObject } from 'lodash';
 import he from 'he';
+import { Link } from '@fluentui/react';
 export interface ICommentTextProps {
   text: string;
   mentions: Mention[];
@@ -46,26 +47,55 @@ export const CommentText: React.FunctionComponent<ICommentTextProps> = (
     setCommentText(result);
   }, []);
 
+  const convertTextToLinksAndText = (
+    text: string
+  ): (string | JSX.Element)[] => {
+    const parts = text.split(URL_REGEX);
+    return parts.map((part, index) => {
+      if (part.match(URL_REGEX)) {
+        return (
+          <Link
+            key={index}
+            href={part}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: theme.link }}
+          >
+            {part}
+          </Link>
+        );
+      }
+      return part;
+    });
+  };
+
   return (
     <>
       <Stack wrap horizontal horizontalAlign="start" verticalAlign="center">
         {isArray(commentText) ? (
-          (commentText as any[]).map((el, i) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+          (commentText as any[]).map((el, i) => {
+            // eslint-disable-line @typescript-eslint/no-explicit-any
             if (isObject(el)) {
-              return <span key={i} style={{ paddingRight: 5 }}>{el}</span>;
+              return (
+                <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}>
-                    {he.decode(_el)}
+                    {convertTextToLinksAndText(he.decode(_el))}
                   </Text>
                 );
               }
             }
           })
         ) : (
-          <Text variant="small">{he.decode(commentText)}</Text>
+          <Text variant="small">
+            {convertTextToLinksAndText(he.decode(commentText))}
+          </Text>
         )}
       </Stack>
     </>