2f3b9e1be9
Summary: Lines were a bit squashed together. Taken the value from workplace, as that's the style we've been copying so far. Reviewed By: priteshrnandgaonkar Differential Revision: D19430279 fbshipit-source-id: 52cc8167d6acaa6af42caaa67a693b5fda492701
100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React, {PureComponent} from 'react';
|
|
import styled from '@emotion/styled';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import {colors} from './colors';
|
|
import {shell} from 'electron';
|
|
|
|
const Container = styled.div({
|
|
padding: 10,
|
|
});
|
|
const Row = styled.div({
|
|
marginTop: 5,
|
|
marginBottom: 5,
|
|
lineHeight: 1.34,
|
|
});
|
|
const Heading = styled.div<{level: number}>(props => ({
|
|
fontSize: props.level === 1 ? 18 : 12,
|
|
textTransform: props.level > 1 ? 'uppercase' : undefined,
|
|
color: props.level > 1 ? '#90949c' : undefined,
|
|
marginTop: 10,
|
|
marginBottom: 10,
|
|
fontWeight: props.level > 1 ? 'bold' : 'normal',
|
|
}));
|
|
const ListItem = styled.li({
|
|
'list-style-type': 'circle',
|
|
'list-style-position': 'inside',
|
|
marginLeft: 10,
|
|
});
|
|
const Strong = styled.span({
|
|
fontWeight: 'bold',
|
|
color: '#1d2129',
|
|
});
|
|
const Emphasis = styled.span({
|
|
fontStyle: 'italic',
|
|
});
|
|
const Quote = styled(Row)({
|
|
padding: 10,
|
|
backgroundColor: '#f1f2f3',
|
|
fontSize: 13,
|
|
});
|
|
const Code = styled.span({
|
|
fontFamily: '"Courier New", Courier, monospace',
|
|
backgroundColor: '#f1f2f3',
|
|
});
|
|
const Pre = styled(Row)({
|
|
padding: 10,
|
|
backgroundColor: '#f1f2f3',
|
|
});
|
|
class CodeBlock extends PureComponent<{value: string; language: string}> {
|
|
render() {
|
|
return (
|
|
<Pre>
|
|
<Code>{this.props.value}</Code>
|
|
</Pre>
|
|
);
|
|
}
|
|
}
|
|
const Link = styled.span({
|
|
color: colors.blue,
|
|
});
|
|
class LinkReference extends PureComponent<{href: string}> {
|
|
render() {
|
|
return (
|
|
<Link onClick={() => shell.openExternal(this.props.href)}>
|
|
{this.props.children}
|
|
</Link>
|
|
);
|
|
}
|
|
}
|
|
|
|
export function Markdown(props: {source: string}) {
|
|
return (
|
|
<Container>
|
|
<ReactMarkdown
|
|
source={props.source}
|
|
renderers={{
|
|
heading: Heading,
|
|
listItem: ListItem,
|
|
paragraph: Row,
|
|
strong: Strong,
|
|
emphasis: Emphasis,
|
|
inlineCode: Code,
|
|
code: CodeBlock,
|
|
blockquote: Quote,
|
|
link: LinkReference,
|
|
linkReference: LinkReference,
|
|
}}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|