Merge remote-tracking branch 'origin/feature/annotate_prismjs' into feature/syntax-highlighting

# Conflicts:
#	package.json
#	scm-ui/eslint-config/package.json
#	scm-ui/ui-components/src/SyntaxHighlighter.tsx
#	scm-ui/ui-components/src/repos/annotate/Annotate.tsx
#	scm-ui/ui-plugins/package.json
#	yarn.lock

package.json

@@ -25,7 +25,8 @@
   "resolutions": {
     "babel-core": "7.0.0-bridge.0",
     "gitdiff-parser": "https://github.com/scm-manager/gitdiff-parser#420d6cfa17a6a8f9bf1a517a2c629dcb332dbe13",
-    "lowlight": "1.13.1"
+    "refractor": "3.0.0",
+    "prismjs": "1.20.0"
   },
   "babel": {
     "presets": [

scm-ui/ui-components/package.json

@@ -33,6 +33,7 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/react-select": "^2.0.19",
     "@types/react-syntax-highlighter": "^11.0.1",
+    "@types/refractor": "^2.8.0",
     "@types/storybook__addon-storyshots": "^5.1.1",
     "@types/styled-components": "^5.1.0",
     "enzyme-context": "^1.1.2",
@@ -52,6 +53,7 @@
     "date-fns": "^2.4.1",
     "gitdiff-parser": "^0.1.2",
     "lowlight": "^1.13.0",
+    "prism-themes": "^1.4.0",
     "query-string": "5",
     "react": "^16.8.6",
     "react-diff-view": "^2.4.1",
@@ -60,7 +62,8 @@
     "react-markdown": "^4.0.6",
     "react-router-dom": "^5.1.2",
     "react-select": "^2.1.2",
-    "react-syntax-highlighter": "https://github.com/conorhastings/react-syntax-highlighter#08bcf49b1aa7877ce94f7208e73dfa6bef8b26e7"
+    "react-syntax-highlighter": "https://github.com/conorhastings/react-syntax-highlighter#08bcf49b1aa7877ce94f7208e73dfa6bef8b26e7",
+    "refractor": "^3.0.0"
   },
   "babel": {
     "presets": [

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -23,9 +23,8 @@
  */
 import React from "react";
 
-import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
-// @ts-ignore
-import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { PrismAsyncLight as ReactSyntaxHighlighter } from "react-syntax-highlighter";
+import { ghcolors } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 type Props = {
   language?: string;
@@ -53,7 +52,7 @@ class SyntaxHighlighter extends React.Component<Props> {
     const { showLineNumbers } = this.props;
     const language = this.getLanguage();
     return (
-      <ReactSyntaxHighlighter showLineNumbers={showLineNumbers} language={language} style={arduinoLight}>
+      <ReactSyntaxHighlighter showLineNumbers={showLineNumbers} language={language} style={ghcolors}>
         {this.props.value}
       </ReactSyntaxHighlighter>
     );

scm-ui/ui-components/src/repos/TokenizedDiffView.tsx

@@ -29,7 +29,7 @@ import { File } from "./DiffTypes";
 
 // styling for the diff tokens
 // this must be aligned with th style, which is used in the SyntaxHighlighter component
-import "highlight.js/styles/arduino-light.css";
+import "prism-themes/themes/prism-ghcolors.css";
 
 const DiffView = styled(Diff)`
   /* align line numbers */
@@ -58,6 +58,22 @@ const DiffView = styled(Diff)`
   &.unified .diff-widget-content .is-indented-line {
     padding-left: 6.5rem;
   }
+  
+  /* conflict between prism and bulma number class */
+  .number {
+    align-items: inherit;
+    background-color: inherit;
+    border-radius: inherit;
+    display: initial;
+    font-size: inherit;
+    height: inherit;
+    justify-content: inherit;
+    margin-right: inherit;
+    margin-left: 0;
+    min-width: inherit;
+    padding: 0;
+    text-align: inherit;
+  }
 `;
 
 // WebWorker which creates tokens for syntax highlighting

scm-ui/ui-components/src/repos/annotate/Annotate.tsx

@@ -24,10 +24,9 @@
 
 import React, { FC, useReducer } from "react";
 import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-types";
-
 // @ts-ignore
-import { LightAsync as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
-import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { PrismAsyncLight as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
+import { ghcolors } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { DateInput } from "../../useDateFormatter";
 import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
@@ -145,7 +144,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
       <ReactSyntaxHighlighter
         showLineNumbers={false}
         language={source.language ? source.language : "text"}
-        style={arduinoLight}
+        style={ghcolors}
         renderer={defaultRenderer}
       >
         {code}

scm-ui/ui-components/src/repos/refractorAdapter.ts

@@ -22,16 +22,11 @@
  * SOFTWARE.
  */
 
-import lowlight from "lowlight/lib/core";
-
-// adapter to let lowlight look like refractor
-// this is required because react-diff-view does only support refractor,
-// but we want same highlighting as in the source code browser.
+import refractor from "refractor/core";
 
 const isLanguageRegistered = (lang: string) => {
-  // @ts-ignore listLanguages seems unknown to type
-  const registeredLanguages = lowlight.listLanguages();
-  return !!registeredLanguages[lang];
+  const registeredLanguages = refractor.listLanguages();
+  return registeredLanguages.includes(lang);
 };
 
 const loadLanguage = (lang: string, callback: () => void) => {
@@ -39,22 +34,19 @@ const loadLanguage = (lang: string, callback: () => void) => {
     callback();
   } else {
     import(
-      /* webpackChunkName: "tokenizer-lowlight-[request]" */
-      `highlight.js/lib/languages/${lang}`
+      /* webpackChunkName: "tokenizer-refractor-[request]" */
+      `refractor/lang/${lang}`
     ).then(loadedLanguage => {
-      lowlight.registerLanguage(lang, loadedLanguage.default);
+      refractor.register(loadedLanguage.default);
       callback();
     });
   }
 };
 
 const refractorAdapter = {
-  ...lowlight,
   isLanguageRegistered,
   loadLanguage,
-  highlight: (value: string, language: string) => {
-    return lowlight.highlight(language, value).value;
-  }
+  ...refractor
 };
 
 export default refractorAdapter;