index.tsx 1.34 KB
Newer Older
1
import * as React from 'react';
2
import * as MarkdownComponent from 'react-markdown';
Maxym Borodenko's avatar
Maxym Borodenko committed
3
import MarkdownField from './MarkdownField';
4

5
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
6
7
8
		source: string;
		basic?: boolean;
		rows?: number;
9
10
}

11
function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
12

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
	if (source) {
		const mdStyle: string = rows ? { maxHeight: `${rows + 1.5}rem`, overflow: 'hidden', marginBottom: '.5rem' } : {};

		if (basic) {
			// the 'markdown-basic' className is used to render the div as inline-block
			return (
				<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
					<MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
						className="markdown-basic" source={ source } />
				</div>
			);

		} else {
			if (style) {
				return (
					<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
						<MarkdownComponent skipHtml className="markdown" source={ source } />
					</div>
				);
			} else {
				return (
					<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
						<MarkdownComponent skipHtml style={ mdStyle } className="markdown" source={ source } />
					</div>
				);
			}
		}

	} else {
		return null;
	}
44
}
45

Maxym Borodenko's avatar
Maxym Borodenko committed
46
export { Markdown as default, MarkdownField };