// @flow import * as React from 'react'; import remark from 'remark'; import remarkLBRY from 'util/remark-lbry'; import remarkStrip from 'strip-markdown'; import remarkEmoji from 'remark-emoji'; import reactRenderer from 'remark-react'; import ExternalLink from 'component/externalLink'; import defaultSchema from 'hast-util-sanitize/lib/github.json'; type SimpleTextProps = { children?: React.Node, }; type SimpleLinkProps = { href?: string, title?: string, children?: React.Node, }; type MarkdownProps = { strip?: boolean, content: ?string, promptLinks?: boolean, }; const SimpleText = (props: SimpleTextProps) => { return {props.children}; }; const SimpleLink = (props: SimpleLinkProps) => { const { href, title, children } = props; return ( {children} ); }; // Use github sanitation schema const schema = { ...defaultSchema }; // Extend sanitation schema to support lbry protocol schema.protocols.href.push('lbry'); schema.attributes.a.push('data-preview'); const MarkdownPreview = (props: MarkdownProps) => { const { content, strip, promptLinks } = props; const remarkOptions: Object = { sanitize: schema, fragment: React.Fragment, remarkReactComponents: { a: promptLinks ? ExternalLink : SimpleLink, // Workaraund of remarkOptions.Fragment div: React.Fragment, }, }; // Strip all content and just render text if (strip) { // Remove new lines and extra space remarkOptions.remarkReactComponents.p = SimpleText; return ( { remark() .use(remarkStrip) .use(reactRenderer, remarkOptions) .processSync(content).contents } ); } return (
{ remark() .use(remarkLBRY) .use(remarkEmoji) .use(reactRenderer, remarkOptions) .processSync(content).contents }
); }; export default MarkdownPreview;