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

formatting comment text

Browse source
This commit is contained in:
muerwre 2019-08-27 21:49:20 +07:00
parent 1990783fa3
commit 59993f5beb
5 changed files with 27 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/node/Comment/index.tsx
View file

@ -2,6 +2,8 @@ import React, { FC, HTMLAttributes } from 'react';
import { CommentWrapper } from '~/components/containers/CommentWrapper'; import { CommentWrapper } from '~/components/containers/CommentWrapper';
import { IComment } from '~/redux/types'; import { IComment } from '~/redux/types';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
import { formatCommentText } from '~/utils/dom';
import { Group } from '~/components/containers/Group';
type IProps = HTMLAttributes<HTMLDivElement> & { type IProps = HTMLAttributes<HTMLDivElement> & {
is_empty?: boolean; is_empty?: boolean;
@ -12,7 +14,14 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => ( const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
<CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}> <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
{comment.text && <div className={styles.text}>{comment.text}</div>} {comment.text && (
<Group
className={styles.text}
dangerouslySetInnerHTML={{
__html: formatCommentText(comment.user && comment.user.username, comment.text),
}}
/>
)}
</CommentWrapper> </CommentWrapper>
); );

5
src/components/node/Comment/styles.scss
View file

@ -1,3 +1,8 @@
.text { .text {
padding: $gap / 2; padding: $gap / 2;
font-weight: 300;
b {
font-weight: 600;
}
} }

2
src/redux/node/constants.ts
View file

@ -63,5 +63,5 @@ export const EMPTY_COMMENT: IComment = {
text: '', text: '',
files: [], files: [],
is_private: false, is_private: false,
owner: null, user: null,
}; };

2
src/redux/types.ts
View file

@ -118,7 +118,7 @@ export interface IComment {
text: string; text: string;
files: IFile[]; files: IFile[];
is_private: boolean; is_private: boolean;
owner: IUser; user: IUser;
created_at?: string; created_at?: string;
update_at?: string; update_at?: string;

11
src/utils/dom.ts
View file

@ -55,4 +55,13 @@ export const describeArc = (
export const getURL = url => `${process.env.API_HOST}${url}`; export const getURL = url => `${process.env.API_HOST}${url}`;
export const getImageSize = (image: string, size?: string): string => export const getImageSize = (image: string, size?: string): string =>
`${process.env.API_HOST}${image}`; `${process.env.API_HOST}${image}`.replace('{size}', size);
export const formatCommentText = (author, text: string) =>
text
.replace(/(\n{2,})/gi, '\n')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.split('\n')
.map((el, index) => (index === 0 ? `<p><b>${author}</b>: ${el}</p>` : `<p>${el}</p>`))
.join('');