From 162dbc421fb9dadbde2a6fb3d77ae4b5ddff8ed2 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Fri, 25 Oct 2019 15:06:34 +0200
Subject: [PATCH] fix markdown code block without language attribute

---
 .../src/MarkdownView.stories.tsx              |  6 ++++
 .../ui-components/src/SyntaxHighlighter.tsx   | 19 +++++++++--
 .../__resources__/markdown-without-lang.md.ts |  7 ++++
 .../src/__snapshots__/storyshots.test.ts.snap | 33 +++++++++++++++++++
 yarn.lock                                     |  7 +++-
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 scm-ui/ui-components/src/__resources__/markdown-without-lang.md.ts

diff --git a/scm-ui/ui-components/src/MarkdownView.stories.tsx b/scm-ui/ui-components/src/MarkdownView.stories.tsx
index c8704c155d..a7e71aac2b 100644
--- a/scm-ui/ui-components/src/MarkdownView.stories.tsx
+++ b/scm-ui/ui-components/src/MarkdownView.stories.tsx
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { MemoryRouter } from "react-router-dom";
 
 import TestPage from "./__resources__/test-page.md";
+import MarkdownWithoutLang from "./__resources__/markdown-without-lang.md";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -16,4 +17,9 @@ storiesOf("MarkdownView", module)
     <Spacing>
       <MarkdownView content={TestPage} skipHtml={false} />
     </Spacing>
+  ))
+  .add("Code without Lang", () => (
+    <Spacing>
+      <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />
+    </Spacing>
   ));
diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
index c50ee3f559..8544f3db01 100644
--- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx
+++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
@@ -5,14 +5,29 @@ import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
 import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 type Props = {
-  language: string;
+  language?: string;
   value: string;
 };
 
+const defaultLanguage = "text";
+
 class SyntaxHighlighter extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    language: defaultLanguage
+  };
+
+  getLanguage = () => {
+    const { language } = this.props;
+    if (language) {
+      return language;
+    }
+    return defaultLanguage;
+  };
+
   render() {
+    const language = this.getLanguage();
     return (
-      <ReactSyntaxHighlighter showLineNumbers={false} language={this.props.language} style={arduinoLight}>
+      <ReactSyntaxHighlighter showLineNumbers={false} language={language} style={arduinoLight}>
         {this.props.value}
       </ReactSyntaxHighlighter>
     );
diff --git a/scm-ui/ui-components/src/__resources__/markdown-without-lang.md.ts b/scm-ui/ui-components/src/__resources__/markdown-without-lang.md.ts
new file mode 100644
index 0000000000..684db74c66
--- /dev/null
+++ b/scm-ui/ui-components/src/__resources__/markdown-without-lang.md.ts
@@ -0,0 +1,7 @@
+export default `
+Here is markdown with code, but without Language.
+
+\`\`\`
+Code without Language!
+\`\`\`
+`;
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index ad62118912..05823fa7bb 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -484,6 +484,39 @@ exports[`Storyshots Logo Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots MarkdownView Code without Lang 1`] = `
+<div
+  className="sc-EHOje lbpDzp"
+>
+  <div
+    className="sc-ifAKCX frmxmY"
+  >
+    <div
+      className="content"
+    >
+      <p>
+        Here is markdown with code, but without Language.
+      </p>
+      <pre
+        style={
+          Object {
+            "background": "#FFFFFF",
+            "color": "#434f54",
+            "display": "block",
+            "overflowX": "auto",
+            "padding": "0.5em",
+          }
+        }
+      >
+        <code>
+          Code without Language!
+        </code>
+      </pre>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots MarkdownView Default 1`] = `
 <div
   className="sc-EHOje lbpDzp"
diff --git a/yarn.lock b/yarn.lock
index 761ad121f3..cca4e09c7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3595,6 +3595,11 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
+babel-core@7.0.0-bridge.0:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
 babel-eslint@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
@@ -7235,7 +7240,7 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-gitdiff-parser@^0.1.2:
+gitdiff-parser@^0.1.2, "gitdiff-parser@https://github.com/scm-manager/gitdiff-parser#6baa7278824ecd17a199d842ca720d0453f68982":
   version "0.1.2"
   resolved "https://github.com/scm-manager/gitdiff-parser#6baa7278824ecd17a199d842ca720d0453f68982"