Merge pull request #31 from muerwre/task/29-markdown

Task/29 markdown

src/components/comment/CommentTextBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { ICommentBlockProps } from '~/constants/comment';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
@@ -8,11 +8,13 @@ import { formatText } from '~/utils/dom';
 interface IProps extends ICommentBlockProps {}
 
 const CommentTextBlock: FC<IProps> = ({ block }) => {
+  const content = useMemo(() => formatText(block.content), [block.content]);
+
   return (
     <div
       className={classNames(styles.text, markdown.wrapper)}
       dangerouslySetInnerHTML={{
-        __html: formatText(block.content),
+        __html: content,
       }}
     />
   );

src/components/flow/Cell/index.tsx

@@ -4,6 +4,7 @@ import { formatCellText, getURL } from '~/utils/dom';
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
+import markdown from '~/styles/common/markdown.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { flowSetCellView } from '~/redux/flow/actions';
 import { PRESETS } from '~/constants/urls';
@@ -119,6 +120,8 @@ const Cell: FC<IProps> = ({
     }
   }, [title]);
 
+  const cellText = useMemo(() => formatCellText(text), [text]);
+
   return (
     <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
       {is_visible && (
@@ -150,7 +153,10 @@ const Cell: FC<IProps> = ({
                 <div className={styles.text}>
                   {title && <div className={styles.text_title}>{title}</div>}
 
-                  <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: cellText }}
+                    className={markdown.wrapper}
+                  />
                 </div>
               )}
 
@@ -158,7 +164,10 @@ const Cell: FC<IProps> = ({
                 <div className={styles.text_only}>
                   {title && <div className={styles.text_title}>{title}</div>}
 
-                  <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: cellText }}
+                    className={markdown.wrapper}
+                  />
                 </div>
               )}
             </div>

src/components/flow/Cell/styles.module.scss

@@ -327,6 +327,7 @@
   overflow: hidden;
   box-sizing: border-box;
   position: relative;
+  font-size: 6px;
 
   &::after {
     content: ' ';

src/components/node/NodeTextBlock/index.tsx

@@ -1,19 +1,26 @@
-import React, { FC } from 'react';
-import { INode } from '~/redux/types';
+import React, { FC, useMemo } from 'react';
 import { path } from 'ramda';
 import { formatTextParagraphs } from '~/utils/dom';
-import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import markdown from '~/styles/common/markdown.module.scss';
 
 interface IProps extends INodeComponentProps {}
 
-const NodeTextBlock: FC<IProps> = ({ node }) => (
-  <div
-    className={styles.text}
-    dangerouslySetInnerHTML={{
-      __html: formatTextParagraphs(path(['blocks', 0, 'text'], node)),
-    }}
-  />
-);
+const NodeTextBlock: FC<IProps> = ({ node }) => {
+  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node)), [
+    node.blocks,
+  ]);
+
+  return (
+    <div
+      className={classNames(styles.text, markdown.wrapper)}
+      dangerouslySetInnerHTML={{
+        __html: content,
+      }}
+    />
+  );
+};
 
 export { NodeTextBlock };

src/styles/common/markdown.module.scss

@@ -8,27 +8,29 @@
       right: 4px solid $red;
     }
     font-family: monospace;
-    font-size: 13px;
+    font-size: 0.9em;
     border-radius: $radius;
     width: 100%;
     overflow: auto;
     padding: $gap;
     box-sizing: border-box;
+    margin-bottom: 0.3em;
   }
 
   img {
     max-width: 100%;
-    margin-bottom: $gap;
+    margin-bottom: 0.3em;
   }
 
   p {
-    margin-bottom: $gap;
+    margin-bottom: 0.3em;
   }
 
   h5, h4, h3, h2, h1 {
     color: white;
     font-weight: 800;
     line-height: 1.2em;
+    margin-bottom: 0.3em;
   }
 
   h1 {
@@ -54,10 +56,10 @@
   ul {
     list-style: disc;
     padding-left: 20px;
-    margin-bottom: $gap;
+    margin-bottom: 0.3em;
 
     li {
-      margin: 5px 0;
+      margin: 0.1em 0;
     }
   }