Adding format to admin comment - CommentFormatter

client/coral-admin/src/components/CommentFormatter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { matchLinks } from '../utils';
 import memoize from 'lodash/memoize';
 
@@ -62,16 +63,43 @@ function markLinks(body) {
   return content;
 }
 
-export default ({ suspectWords, bannedWords, body, ...rest }) => {
-  // First highlight links.
-  const content = markLinks(body).map((element, index) => {
-    // Keep highlighted links.
-    if (typeof element !== 'string') {
-      return element;
-    }
+function format(body, { suspectWords, bannedWords, className = 'comment' }) {
+  // Breaking the body by line break
+  const textbreaks = body.split('\n');
 
-    // Highlight suspect and banned phrase inside this part of text.
-    return markPhrases(element, suspectWords, bannedWords, index);
-  });
-  return <div {...rest}>{content}</div>;
+  return (
+    <span className={`${className}-text`}>
+      {textbreaks.map((line, i) => {
+        const content = markLinks(line).map((element, index) => {
+          // Keep highlighted links.
+          if (typeof element !== 'string') {
+            return element;
+          }
+
+          // Highlight suspect and banned phrase inside this part of text.
+          return markPhrases(element, suspectWords, bannedWords, index);
+        });
+
+        return (
+          <span key={i} className={`${className}-line`}>
+            {content}
+            {i !== textbreaks.length - 1 && (
+              <br className={`${className}-linebreak`} />
+            )}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+const CommentFormatter = ({ body, settings, ...rest }) => {
+  return <div {...rest}>{format(body, settings)}</div>;
 };
+
+CommentFormatter.propTypes = {
+  settings: PropTypes.object,
+  body: PropTypes.string,
+};
+
+export default CommentFormatter;

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -8,7 +8,7 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
+import CommentFormatter from 'coral-admin/src/components/CommentFormatter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
@@ -126,11 +126,14 @@ class Comment extends React.Component {
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
               <div className={styles.body}>
-                <CommentBodyHighlighter
-                  suspectWords={settings.wordlist.suspect}
-                  bannedWords={settings.wordlist.banned}
+                <CommentFormatter
+                  settings={{
+                    suspectWords: settings.wordlist.suspect,
+                    bannedWords: settings.wordlist.banned,
+                    className: 'talk-admin-comment',
+                  }}
                   body={comment.body}
-                />{' '}
+                />
                 <a
                   className={styles.external}
                   href={`${comment.asset.url}?commentId=${comment.id}`}