diff --git a/src/components/comment/CommentTextBlock/index.tsx b/src/components/comment/CommentTextBlock/index.tsx index 09a7e286..674c7269 100644 --- a/src/components/comment/CommentTextBlock/index.tsx +++ b/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 = ({ block }) => { + const content = useMemo(() => formatText(block.content), [block.content]); + return (
); diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index 75523ffa..688d5249 100644 --- a/src/components/flow/Cell/index.tsx +++ b/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 = ({ } }, [title]); + const cellText = useMemo(() => formatCellText(text), [text]); + return (
{is_visible && ( @@ -150,7 +153,10 @@ const Cell: FC = ({
{title &&
{title}
} - +
)} @@ -158,7 +164,10 @@ const Cell: FC = ({
{title &&
{title}
} - +
)}
diff --git a/src/components/flow/Cell/styles.module.scss b/src/components/flow/Cell/styles.module.scss index ed6d791b..8a628cc8 100644 --- a/src/components/flow/Cell/styles.module.scss +++ b/src/components/flow/Cell/styles.module.scss @@ -327,6 +327,7 @@ overflow: hidden; box-sizing: border-box; position: relative; + font-size: 6px; &::after { content: ' '; diff --git a/src/components/node/NodeTextBlock/index.tsx b/src/components/node/NodeTextBlock/index.tsx index 25f1c2b2..042b1bd7 100644 --- a/src/components/node/NodeTextBlock/index.tsx +++ b/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 = ({ node }) => ( -
-); +const NodeTextBlock: FC = ({ node }) => { + const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node)), [ + node.blocks, + ]); + + return ( +
+ ); +}; export { NodeTextBlock }; diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index 024ab1e4..a4d1cca2 100644 --- a/src/styles/common/markdown.module.scss +++ b/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; } }