muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed comment block separation

Browse source
This commit is contained in:
Fedor Katurov 2021-02-24 15:28:11 +07:00
parent 5dbf4245bf
commit 1fc04e62a6
3 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/comment/CommentContent/index.tsx
View file

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

8
src/utils/dom.ts
View file

@ -10,9 +10,9 @@ import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/c
import format from 'date-fns/format'; import format from 'date-fns/format';
import { pipe } from 'ramda'; import { pipe } from 'ramda';
import { import {
formatDash, formatTextDash,
formatExclamations, formatExclamations,
formatMarkdown, formatTextMarkdown,
formatTextClickableUsernames, formatTextClickableUsernames,
formatTextComments, formatTextComments,
formatTextSanitizeTags, formatTextSanitizeTags,
@ -101,8 +101,8 @@ export const formatText = pipe(
formatTextComments, formatTextComments,
formatTextTodos, formatTextTodos,
formatExclamations, formatExclamations,
formatDash, formatTextDash,
formatMarkdown formatTextMarkdown
); );
export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || null; export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || null;

6
src/utils/formatText.ts
View file

@ -49,7 +49,7 @@ export const formatTextTodos = (text: string): string =>
* Formats !!exclamation messages with green color * Formats !!exclamation messages with green color
*/ */
export const formatExclamations = (text: string): string => export const formatExclamations = (text: string): string =>
text.replace(/(\!\![\s\S]*?(\!\!|\n|$))/gim, '<span class="green">$1</span>'); text.replace(/(\!\![\s\S]*?(\!\!|\n|$))/gim, '<span class="green">$1$2</span>');
/** /**
* Formats links * Formats links
@ -63,9 +63,9 @@ export const formatLinks = (text: string): string =>
/** /**
* Replaces -- with dash * Replaces -- with dash
*/ */
export const formatDash = (text: string): string => text.replace(' -- ', ' — '); export const formatTextDash = (text: string): string => text.replace(' -- ', ' — ');
/** /**
* Formats with markdown * Formats with markdown
*/ */
export const formatMarkdown = (text: string): string => marked(text); export const formatTextMarkdown = (text: string): string => marked(text);