formatting comment text

src/components/node/Comment/index.tsx

@@ -2,6 +2,8 @@ import React, { FC, HTMLAttributes } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { IComment } from '~/redux/types';
 import * as styles from './styles.scss';
+import { formatCommentText } from '~/utils/dom';
+import { Group } from '~/components/containers/Group';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -12,7 +14,14 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
 
 const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
   <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
-    {comment.text && <div className={styles.text}>{comment.text}</div>}
+    {comment.text && (
+      <Group
+        className={styles.text}
+        dangerouslySetInnerHTML={{
+          __html: formatCommentText(comment.user && comment.user.username, comment.text),
+        }}
+      />
+    )}
   </CommentWrapper>
 );
 

src/components/node/Comment/styles.scss

@@ -1,3 +1,8 @@
 .text {
   padding: $gap / 2;
+  font-weight: 300;
+
+  b {
+    font-weight: 600;
+  }
 }

src/redux/node/constants.ts

@@ -63,5 +63,5 @@ export const EMPTY_COMMENT: IComment = {
   text: '',
   files: [],
   is_private: false,
-  owner: null,
+  user: null,
 };

src/redux/types.ts

@@ -118,7 +118,7 @@ export interface IComment {
   text: string;
   files: IFile[];
   is_private: boolean;
-  owner: IUser;
+  user: IUser;
 
   created_at?: string;
   update_at?: string;

src/utils/dom.ts

@@ -55,4 +55,13 @@ export const describeArc = (
 export const getURL = url => `${process.env.API_HOST}${url}`;
 
 export const getImageSize = (image: string, size?: string): string =>
-  `${process.env.API_HOST}${image}`;
+  `${process.env.API_HOST}${image}`.replace('{size}', size);
+
+export const formatCommentText = (author, text: string) =>
+  text
+    .replace(/(\n{2,})/gi, '\n')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .split('\n')
+    .map((el, index) => (index === 0 ? `<p><b>${author}</b>: ${el}</p>` : `<p>${el}</p>`))
+    .join('');