diff --git a/scm-ui-components/packages/ui-components/src/MarkdownView.js b/scm-ui-components/packages/ui-components/src/MarkdownView.js index 4620004f59..6176601d68 100644 --- a/scm-ui-components/packages/ui-components/src/MarkdownView.js +++ b/scm-ui-components/packages/ui-components/src/MarkdownView.js @@ -1,11 +1,11 @@ //@flow import React from "react"; -import SyntaxHighlighter from "./SyntaxHighlighter"; -import Markdown from "react-markdown/with-html"; -import {binder} from "@scm-manager/ui-extensions"; -import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer"; import { withRouter } from "react-router-dom"; - +import injectSheet from "react-jss"; +import Markdown from "react-markdown/with-html"; +import { binder } from "@scm-manager/ui-extensions"; +import SyntaxHighlighter from "./SyntaxHighlighter"; +import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer"; type Props = { content: string, @@ -14,11 +14,34 @@ type Props = { enableAnchorHeadings: boolean, // context props + classes: any, location: any }; -class MarkdownView extends React.Component { +const styles = { + markdown: { + "& > .content": { + "& > h1, h2, h3, h4, h5, h6": { + margin: "0.5rem 0", + fontSize: "0.9rem" + }, + "& > h1": { + fontWeight: "700" + }, + "& > h2": { + fontWeight: "600" + }, + "& > h3, h4, h5, h6": { + fontWeight: "500" + }, + "& strong": { + fontWeight: "500" + } + } + } +}; +class MarkdownView extends React.Component { static defaultProps = { enableAnchorHeadings: false }; @@ -45,16 +68,22 @@ class MarkdownView extends React.Component { } render() { - const {content, renderers, renderContext, enableAnchorHeadings} = this.props; + const { + content, + renderers, + renderContext, + enableAnchorHeadings, + classes + } = this.props; const rendererFactory = binder.getExtension("markdown-renderer-factory"); let rendererList = renderers; - if (rendererFactory){ + if (rendererFactory) { rendererList = rendererFactory(renderContext); } - if (!rendererList){ + if (!rendererList) { rendererList = {}; } @@ -62,12 +91,12 @@ class MarkdownView extends React.Component { rendererList.heading = MarkdownHeadingRenderer; } - if (!rendererList.code){ + if (!rendererList.code) { rendererList.code = SyntaxHighlighter; } return ( -
(this.contentRef = el)}> +
(this.contentRef = el)}> { } } -export default withRouter(MarkdownView); +export default injectSheet(styles)(withRouter(MarkdownView));