Add a Markdown component and a SyntaxHighlighter

scm-ui-components/package.json

@@ -12,5 +12,9 @@
   "devDependencies": {
     "lerna": "^3.4.3",
     "xml2js": "^0.4.19"
+  },
+  "dependencies": {
+    "react-markdown": "^4.0.6",
+    "react-syntax-highlighter": "^10.2.0"
   }
 }

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";

scm-ui/src/repos/sources/components/content/SourcecodeViewer.js

@@ -1,11 +1,9 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { apiClient } from "@scm-manager/ui-components";
+import { apiClient, SyntaxHighlighter } from "@scm-manager/ui-components";
 import type { File } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { arduinoLight } from "react-syntax-highlighter/styles/hljs";
 
 type Props = {
   t: string => string,
@@ -68,12 +66,9 @@ class SourcecodeViewer extends React.Component<Props, State> {
 
     return (
       <SyntaxHighlighter
-        showLineNumbers="true"
         language={getLanguage(language)}
-        style={arduinoLight}
+        value= {content}
-      >
+      />
-        {content}
-      </SyntaxHighlighter>
     );
   }
 }