Merge pull request #32 from muerwre/develop

Develop

src/components/comment/CommentContent/index.tsx

@@ -49,6 +49,14 @@ const CommentContent: FC<IProps> = memo(
       [can_edit, comment, onEditClick, onLockClick]
     );
 
+    const blocks = useMemo(
+      () =>
+        !!comment.text.trim()
+          ? formatCommentText(path(['user', 'username'], comment), comment.text)
+          : [],
+      [comment.text]
+    );
+
     return (
       <div className={styles.wrap}>
         {comment.text && (
@@ -56,7 +64,7 @@ const CommentContent: FC<IProps> = memo(
             {menu}
 
             <Group className={styles.renderers}>
-              {formatCommentText(path(['user', 'username'], comment), comment.text).map(
+              {blocks.map(
                 (block, key) =>
                   COMMENT_BLOCK_RENDERERS[block.type] &&
                   createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })

src/components/comment/CommentTextBlock/index.tsx

@@ -1,15 +1,20 @@
-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';
+import markdown from '~/styles/common/markdown.module.scss';
+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={styles.text}
+      className={classNames(styles.text, markdown.wrapper)}
       dangerouslySetInnerHTML={{
-        __html: `<p>${block.content}</p>`,
+        __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';
@@ -118,6 +119,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 && (
@@ -149,7 +152,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>
               )}
 
@@ -157,7 +163,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 };