diff --git a/src/components/comment/CommentTextBlock/index.tsx b/src/components/comment/CommentTextBlock/index.tsx index 4e8bacc5..09a7e286 100644 --- a/src/components/comment/CommentTextBlock/index.tsx +++ b/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 = ({ block }) => {
); diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index 4ef7b010..e11ba114 100644 --- a/src/styles/common/markdown.module.scss +++ b/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 { diff --git a/src/utils/dom.ts b/src/utils/dom.ts index bc276334..ccbffb75 100644 --- a/src/utils/dom.ts +++ b/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); diff --git a/src/utils/splitText.ts b/src/utils/splitText.ts index 5cd7ac8a..32366574 100644 --- a/src/utils/splitText.ts +++ b/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));