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

added markdown to flow cells

Browse source
This commit is contained in:
Fedor Katurov 2021-02-24 16:49:54 +07:00
parent c98ac8b597
commit 52d5b57245
3 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/flow/Cell/index.tsx
View file

@ -4,6 +4,7 @@ import { formatCellText, getURL } from '~/utils/dom';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import markdown from '~/styles/common/markdown.module.scss';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { flowSetCellView } from '~/redux/flow/actions'; import { flowSetCellView } from '~/redux/flow/actions';
import { PRESETS } from '~/constants/urls'; import { PRESETS } from '~/constants/urls';
@ -119,6 +120,8 @@ const Cell: FC<IProps> = ({
} }
}, [title]); }, [title]);
const cellText = useMemo(() => formatCellText(text), [text]);
return ( return (
<div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}> <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
{is_visible && ( {is_visible && (
@ -150,7 +153,10 @@ const Cell: FC<IProps> = ({
<div className={styles.text}> <div className={styles.text}>
{title && <div className={styles.text_title}>{title}</div>} {title && <div className={styles.text_title}>{title}</div>}
<Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} /> <div
dangerouslySetInnerHTML={{ __html: cellText }}
className={markdown.wrapper}
/>
</div> </div>
)} )}
@ -158,7 +164,10 @@ const Cell: FC<IProps> = ({
<div className={styles.text_only}> <div className={styles.text_only}>
{title && <div className={styles.text_title}>{title}</div>} {title && <div className={styles.text_title}>{title}</div>}
<Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} /> <div
dangerouslySetInnerHTML={{ __html: cellText }}
className={markdown.wrapper}
/>
</div> </div>
)} )}
</div> </div>

1
src/components/flow/Cell/styles.module.scss
View file

@ -327,6 +327,7 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
font-size: 6px;
&::after { &::after {
content: ' '; content: ' ';

13
src/styles/common/markdown.module.scss
View file

@ -8,28 +8,29 @@
right: 4px solid $red; right: 4px solid $red;
} }
font-family: monospace; font-family: monospace;
font-size: 13px; font-size: 0.9em;
border-radius: $radius; border-radius: $radius;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
padding: $gap; padding: $gap;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 0.3em;
} }
img { img {
max-width: 100%; max-width: 100%;
margin-bottom: $gap; margin-bottom: 0.3em;
} }
p { p {
margin-bottom: $gap; margin-bottom: 0.3em;
} }
h5, h4, h3, h2, h1 { h5, h4, h3, h2, h1 {
color: white; color: white;
font-weight: 800; font-weight: 800;
line-height: 1.2em; line-height: 1.2em;
margin-bottom: $gap; margin-bottom: 0.3em;
} }
h1 { h1 {
@ -55,10 +56,10 @@
ul { ul {
list-style: disc; list-style: disc;
padding-left: 20px; padding-left: 20px;
margin-bottom: $gap; margin-bottom: 0.3em;
li { li {
margin: 5px 0; margin: 0.1em 0;
} }
} }