Add a Markdown component and a SyntaxHighlighter

scm-ui-components/packages/ui-components/src/MarkdownView.js

@@ -0,0 +1,46 @@
+//@flow
+import React from "react";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import Markdown from "react-markdown/with-html";
+import {binder} from "@scm-manager/ui-extensions";
+
+type Props = {
+  content: string,
+  className : string,
+  renderContext? : Object,
+  renderers?: Object,
+};
+
+class MarkdownView extends React.Component<Props> {
+
+  render() {
+    const {content, className, renderers, renderContext} = this.props;
+
+    const rendererFactory = binder.getExtension("markdown-renderer-factory");
+    let rendererList = renderers;
+
+    if (rendererFactory){
+      rendererList = rendererFactory(renderContext);
+    }
+
+    if (!rendererList){
+      rendererList = {};
+    }
+
+    if (!rendererList.code){
+      rendererList.code = SyntaxHighlighter;
+    }
+
+    return (
+      <Markdown
+        className={className}
+        skipHtml={true}
+        escapeHtml={true}
+        source={content}
+        renderers={rendererList}
+      />
+    );
+  }
+}
+
+export default MarkdownView;

scm-ui-components/packages/ui-components/src/SyntaxHighlighter.js

@@ -0,0 +1,26 @@
+// @flow
+import React from "react";
+import ReactSyntaxHighlighter from "react-syntax-highlighter";
+import { arduinoLight } from "react-syntax-highlighter/dist/styles/hljs";
+
+type Props = {
+  language: string,
+  value: string
+};
+
+class SyntaxHighlighter extends React.Component<Props> {
+
+  render() {
+    return (
+      <ReactSyntaxHighlighter
+        showLineNumbers="false"
+        language={this.props.language}
+        style={arduinoLight}
+      >
+        {this.props.value}
+      </ReactSyntaxHighlighter>
+    );
+  }
+}
+
+export default SyntaxHighlighter;

scm-ui-components/packages/ui-components/src/forms/MarkdownView.js

@@ -1,20 +0,0 @@
-//@flow
-import React from "react";
-
-type Props = {
-  content: string
-};
-
-class MarkdownView extends React.Component<Props> {
-
-  render() {
-    const {content } = this.props;
-    return (
-      <div>
-        {content}
-      </div>
-    );
-  }
-}
-
-export default MarkdownView;

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -11,5 +11,4 @@ export { default as Textarea } from "./Textarea.js";
 export { default as PasswordConfirmation } from "./PasswordConfirmation.js";
 export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon.js";
 export { default as DropDown } from "./DropDown.js";
-export { default as MarkdownView } from "./MarkdownView.js";
 

scm-ui-components/packages/ui-components/src/index.js

@@ -25,6 +25,8 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
+export { default as MarkdownView } from "./MarkdownView";
+export { default as SyntaxHighlighter } from "./SyntaxHighlighter";
 
 export { apiClient } from "./apiclient.js";
 export * from "./errors";