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

better text formatting

Browse source
This commit is contained in:
Fedor Katurov 2019-10-17 16:34:41 +07:00
parent de8e5b2d9e
commit 6d0a22707c
3 changed files with 19 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/node/NodeTextBlock/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { INode } from '~/redux/types'; import { INode } from '~/redux/types';
import path from 'ramda/es/path'; import path from 'ramda/es/path';
import { formatCommentText } from '~/utils/dom'; import { formatText } from '~/utils/dom';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
interface IProps { interface IProps {
@ -12,7 +12,7 @@ const NodeTextBlock: FC<IProps> = ({ node }) => (
<div <div
className={styles.text} className={styles.text}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: formatCommentText(null, path(['blocks', 0, 'text'], node)), __html: formatText(path(['blocks', 0, 'text'], node)),
}} }}
/> />
); );

2
src/components/node/NodeTextBlock/styles.scss
View file

@ -7,5 +7,7 @@
p { p {
margin: $gap 0; margin: $gap 0;
font-size: 18px;
line-height: 24px;
} }
} }

26
src/utils/dom.ts
View file

@ -67,10 +67,8 @@ export const getURL = (file: Partial<IFile>) => {
export const getImageSize = (file: IFile, size?: string): string => getURL(file); export const getImageSize = (file: IFile, size?: string): string => getURL(file);
// `${process.env.API_HOST}${image}`.replace('{size}', size); // `${process.env.API_HOST}${image}`.replace('{size}', size);
export const formatCommentText = (author, text: string) => { export const formatText = (text: string): string =>
if (!text) return ''; text
return text
.replace(/(\n{2,})/gi, '\n') .replace(/(\n{2,})/gi, '\n')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;')
@ -78,15 +76,21 @@ export const formatCommentText = (author, text: string) => {
.replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>') .replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>')
.replace(/:\|--\|/gim, '://') .replace(/:\|--\|/gim, '://')
.split('\n') .split('\n')
.map((el, index) => .map(el => `<p>${el}</p>`)
index === 0 // .map((el, index) =>
? `${author ? `<p><b class="comment-author">${author}: </b>` : ''}${el}</p>` // index === 0
: `<p>${el}</p>` // ? `${author ? `<p><b class="comment-author">${author}: </b>` : ''}${el}</p>`
) // : `<p>${el}</p>`
// )
.join(''); .join('');
};
// .replace(/\/\*(\*(?!\/)|[^*])*\*\//igm, ''); export const formatCommentText = (author: string, text: string): string =>
text
? formatText(text).replace(
/^<p>/,
author ? `<p><b class="comment-author">${author}: </b></p>` : '<p>'
)
: '';
export const getPrettyDate = (date: string): string => export const getPrettyDate = (date: string): string =>
formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true }); formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });