fixed image and code appearance

src/components/comment/CommentTextBlock/index.tsx

@@ -3,6 +3,7 @@ import { ICommentBlockProps } from '~/constants/comment';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import markdown from '~/styles/common/markdown.module.scss';
+import { formatText } from '~/utils/dom';
 
 interface IProps extends ICommentBlockProps {}
 
@@ -11,7 +12,7 @@ const CommentTextBlock: FC<IProps> = ({ block }) => {
     <div
       className={classNames(styles.text, markdown.wrapper)}
       dangerouslySetInnerHTML={{
-        __html: block.content,
+        __html: formatText(block.content),
       }}
     />
   );

src/styles/common/markdown.module.scss

@@ -9,8 +9,16 @@
     }
     font-family: monospace;
     font-size: 13px;
-    padding: $gap;
     border-radius: $radius;
+    width: 100%;
+    overflow: auto;
+    padding: $gap;
+    box-sizing: border-box;
+  }
+
+  img {
+    max-width: 100%;
+    margin-bottom: $gap;
   }
 
   p {

src/utils/dom.ts

@@ -122,7 +122,7 @@ export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
   }));
 
 export const formatCommentText = (author: string, text: string): ICommentBlock[] =>
-  text ? splitCommentByBlocks(formatText(text)) : null;
+  text ? splitCommentByBlocks(text) : null;
 
 export const formatCellText = (text: string): string => formatTextParagraphs(text);
 

src/utils/splitText.ts

@@ -1,4 +1,4 @@
-import { flatten } from 'ramda';
+import { flatten, isEmpty } from 'ramda';
 
 export const splitTextByYoutube = (strings: string[]): string[] =>
   flatten(
@@ -8,4 +8,4 @@ export const splitTextByYoutube = (strings: string[]): string[] =>
   );
 
 export const splitTextOmitEmpty = (strings: string[]): string[] =>
-  strings.filter(el => !!el.trim());
+  strings.map(el => el.trim()).filter(el => !isEmpty(el));