From 5dbf4245bf2ca87c59da5865e68c78f592334e4e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 24 Feb 2021 15:16:24 +0700
Subject: [PATCH] added some markdown stylings

---
 .../comment/CommentTextBlock/index.tsx        |  4 +-
 src/styles/common/markdown.module.scss        | 60 +++++++++++++++++++
 src/utils/dom.ts                              | 14 +++--
 src/utils/splitText.ts                        | 11 ++++
 4 files changed, 82 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/common/markdown.module.scss
 create mode 100644 src/utils/splitText.ts

diff --git a/src/components/comment/CommentTextBlock/index.tsx b/src/components/comment/CommentTextBlock/index.tsx
index 2dc3f0fd..4e8bacc5 100644
--- a/src/components/comment/CommentTextBlock/index.tsx
+++ b/src/components/comment/CommentTextBlock/index.tsx
@@ -1,13 +1,15 @@
 import React, { FC } from 'react';
 import { ICommentBlockProps } from '~/constants/comment';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
+import markdown from '~/styles/common/markdown.module.scss';
 
 interface IProps extends ICommentBlockProps {}
 
 const CommentTextBlock: FC<IProps> = ({ block }) => {
   return (
     <div
-      className={styles.text}
+      className={classNames(styles.text, markdown.wrapper)}
       dangerouslySetInnerHTML={{
         __html: block.content,
       }}
diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss
new file mode 100644
index 00000000..4ef7b010
--- /dev/null
+++ b/src/styles/common/markdown.module.scss
@@ -0,0 +1,60 @@
+@import "../variables";
+
+.wrapper {
+  pre {
+    background-color: darken($comment_bg, 2%);
+    border: {
+      left: 4px solid $red;
+     right: 4px solid $red;
+    }
+    font-family: monospace;
+    font-size: 13px;
+    padding: $gap;
+    border-radius: $radius;
+  }
+
+  p {
+    margin-bottom: $gap;
+  }
+
+  h5, h4, h3, h2, h1 {
+    color: white;
+    font-weight: 800;
+    line-height: 1.2em;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  h3 {
+    font-size: 1.6em;
+  }
+
+  h4 {
+    font-size: 1.4em;
+  }
+
+  h5 {
+    font-size: 1.2em;
+  }
+
+  ul {
+    list-style: disc;
+    padding-left: 20px;
+    margin-bottom: $gap;
+
+    li {
+      margin: 5px 0;
+    }
+  }
+
+  :global(.grey) {
+    color: #555555;
+    white-space: pre-line;
+  }
+}
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 700015c3..43107208 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -19,6 +19,7 @@ import {
   formatTextSanitizeYoutube,
   formatTextTodos,
 } from '~/utils/formatText';
+import { splitTextByYoutube, splitTextOmitEmpty } from '~/utils/splitText';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
@@ -112,12 +113,13 @@ export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES>
 };
 
 export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
-  text
-    .split(/(https?:\/\/(?:www\.)(?:youtube\.com|youtu\.be)\/(?:watch)(?:\?v=)[\w\-\&\=]+)/)
-    .map(line => ({
-      type: findBlockType(line),
-      content: line,
-    }));
+  pipe(
+    splitTextByYoutube,
+    splitTextOmitEmpty
+  )([text]).map(line => ({
+    type: findBlockType(line),
+    content: line,
+  }));
 
 export const formatCommentText = (author: string, text: string): ICommentBlock[] =>
   text ? splitCommentByBlocks(formatText(text)) : null;
diff --git a/src/utils/splitText.ts b/src/utils/splitText.ts
new file mode 100644
index 00000000..5cd7ac8a
--- /dev/null
+++ b/src/utils/splitText.ts
@@ -0,0 +1,11 @@
+import { flatten } from 'ramda';
+
+export const splitTextByYoutube = (strings: string[]): string[] =>
+  flatten(
+    strings.map(str =>
+      str.split(/(https?:\/\/(?:www\.)(?:youtube\.com|youtu\.be)\/(?:watch)(?:\?v=)[\w\-\&\=]+)/)
+    )
+  );
+
+export const splitTextOmitEmpty = (strings: string[]): string[] =>
+  strings.filter(el => !!el.trim());