diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx index 08e9c49a..87471fb3 100644 --- a/src/components/comment/CommentContent/index.tsx +++ b/src/components/comment/CommentContent/index.tsx @@ -49,6 +49,14 @@ const CommentContent: FC = memo( [can_edit, comment, onEditClick, onLockClick] ); + const blocks = useMemo( + () => + !!comment.text.trim() + ? formatCommentText(path(['user', 'username'], comment), comment.text) + : [], + [comment] + ); + return (
{comment.text && ( @@ -56,7 +64,7 @@ const CommentContent: FC = memo( {menu} - {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 }) diff --git a/src/utils/dom.ts b/src/utils/dom.ts index 43107208..bc276334 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -10,9 +10,9 @@ import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/c import format from 'date-fns/format'; import { pipe } from 'ramda'; import { - formatDash, + formatTextDash, formatExclamations, - formatMarkdown, + formatTextMarkdown, formatTextClickableUsernames, formatTextComments, formatTextSanitizeTags, @@ -101,8 +101,8 @@ export const formatText = pipe( formatTextComments, formatTextTodos, formatExclamations, - formatDash, - formatMarkdown + formatTextDash, + formatTextMarkdown ); export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || null; diff --git a/src/utils/formatText.ts b/src/utils/formatText.ts index d8f4752b..ff8e79d4 100644 --- a/src/utils/formatText.ts +++ b/src/utils/formatText.ts @@ -49,7 +49,7 @@ export const formatTextTodos = (text: string): string => * Formats !!exclamation messages with green color */ export const formatExclamations = (text: string): string => - text.replace(/(\!\![\s\S]*?(\!\!|\n|$))/gim, '$1'); + text.replace(/(\!\![\s\S]*?(\!\!|\n|$))/gim, '$1$2'); /** * Formats links @@ -63,9 +63,9 @@ export const formatLinks = (text: string): string => /** * Replaces -- with dash */ -export const formatDash = (text: string): string => text.replace(' -- ', ' — '); +export const formatTextDash = (text: string): string => text.replace(' -- ', ' — '); /** * Formats with markdown */ -export const formatMarkdown = (text: string): string => marked(text); +export const formatTextMarkdown = (text: string): string => marked(text);