From a4e6e4186ae010af16098d9a1931b7d4d132fd61 Mon Sep 17 00:00:00 2001 From: Sebastian Sdorra Date: Tue, 16 Jun 2020 21:04:07 +0200 Subject: [PATCH] replace highlightjs with prismjs --- package.json | 3 +- scm-ui/eslint-config/package.json | 2 +- scm-ui/ui-components/package.json | 5 +- .../ui-components/src/SyntaxHighlighter.tsx | 7 +- .../src/repos/TokenizedDiffView.tsx | 18 +++++- .../src/repos/annotate/Annotate.tsx | 7 +- .../src/repos/refractorAdapter.ts | 22 ++----- scm-ui/ui-plugins/package.json | 2 +- yarn.lock | 64 ++++++++++++++----- 9 files changed, 85 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 35682ca3de..907484ede3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "resolutions": { "babel-core": "7.0.0-bridge.0", "gitdiff-parser": "https://github.com/scm-manager/gitdiff-parser#617747460280bf4522bb84d217a9064ac8eb6d3d", - "lowlight": "1.13.1" + "refractor": "3.0.0", + "prismjs": "1.20.0" }, "babel": { "presets": [ diff --git a/scm-ui/eslint-config/package.json b/scm-ui/eslint-config/package.json index b4823af85e..eecd993c1e 100644 --- a/scm-ui/eslint-config/package.json +++ b/scm-ui/eslint-config/package.json @@ -1,6 +1,6 @@ { "name": "@scm-manager/eslint-config", - "version": "2.0.0", + "version": "2.1.0-SNAPSHOT", "description": "ESLint configuration for scm-manager and its plugins", "main": "src/index.js", "author": "Sebastian Sdorra ", diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json index e5d82f9617..68d2de41a6 100644 --- a/scm-ui/ui-components/package.json +++ b/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": [ diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx index bcbf05d53d..84f1458db5 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx +++ b/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; @@ -50,7 +49,7 @@ class SyntaxHighlighter extends React.Component { render() { const language = this.getLanguage(); return ( - + {this.props.value} ); diff --git a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx index c012742dbd..3f004272f8 100644 --- a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx +++ b/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 diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx index b7a67a6d8d..0a0a871891 100644 --- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx +++ b/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 "../../dates"; import Popover from "./Popover"; import AnnotateLine from "./AnnotateLine"; @@ -145,7 +144,7 @@ const Annotate: FC = ({ source, repository, baseDate }) => { {code} diff --git a/scm-ui/ui-components/src/repos/refractorAdapter.ts b/scm-ui/ui-components/src/repos/refractorAdapter.ts index acb56fa396..0bac53e4d2 100644 --- a/scm-ui/ui-components/src/repos/refractorAdapter.ts +++ b/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; diff --git a/scm-ui/ui-plugins/package.json b/scm-ui/ui-plugins/package.json index 3b49f342f7..14e3dffdad 100644 --- a/scm-ui/ui-plugins/package.json +++ b/scm-ui/ui-plugins/package.json @@ -19,7 +19,7 @@ }, "devDependencies": { "@scm-manager/babel-preset": "^2.0.0", - "@scm-manager/eslint-config": "^2.0.0", + "@scm-manager/eslint-config": "^2.1.0-SNAPSHOT", "@scm-manager/jest-preset": "^2.0.0", "@scm-manager/prettier-config": "^2.0.0", "@scm-manager/tsconfig": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 2b7e82ef4d..e9c1859ab6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3191,6 +3191,11 @@ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.1.tgz#b6e98083f13faa1e5231bfa3bdb1b0feff536b6d" integrity sha512-boy4xPNEtiw6N3abRhBi/e7hNvy3Tt8E9ZRAQrwAGzoCGZS/1wjo9KY7JHhnfnEsG5wSjDbymCozUM9a3ea7OQ== +"@types/prismjs@*": + version "1.16.1" + resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.1.tgz#50b82947207847db6abcbcd14caa89e3b897c259" + integrity sha512-RNgcK3FEc1GpeOkamGDq42EYkb6yZW5OWQwTS56NJIB8WL0QGISQglA7En7NUx9RGP8AC52DOe+squqbAckXlA== + "@types/prop-types@*": version "15.7.3" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" @@ -3291,6 +3296,13 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/refractor@^2.8.0": + version "2.8.0" + resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-2.8.0.tgz#2e17b69f27e89c1ea076f49b599abe3567c54e01" + integrity sha512-l3wSB96RFZnvB8bnbF8UmYsDD1MQl+u7jtYq+DgI/vo3RD5pdbK3OitGEvMO3DNJhTYmCEhXLVWyyWTddzwNzQ== + dependencies: + "@types/prismjs" "*" + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" @@ -7488,7 +7500,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= -fault@^1.0.0: +fault@^1.0.0, fault@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13" integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA== @@ -10823,7 +10835,7 @@ lower-case@^2.0.1: dependencies: tslib "^1.10.0" -lowlight@1.13.1, lowlight@^1.13.0, lowlight@~1.11.0: +lowlight@^1.13.0: version "1.13.1" resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb" integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ== @@ -10831,6 +10843,14 @@ lowlight@1.13.1, lowlight@^1.13.0, lowlight@~1.11.0: fault "^1.0.0" highlight.js "~9.16.0" +lowlight@~1.11.0: + version "1.11.0" + resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc" + integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A== + dependencies: + fault "^1.0.2" + highlight.js "~9.13.0" + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -12175,7 +12195,7 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5: pbkdf2 "^3.0.3" safe-buffer "^5.1.1" -parse-entities@^1.1.0, parse-entities@^1.1.2: +parse-entities@^1.1.0: version "1.2.2" resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50" integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg== @@ -12187,6 +12207,18 @@ parse-entities@^1.1.0, parse-entities@^1.1.2: is-decimal "^1.0.0" is-hexadecimal "^1.0.0" +parse-entities@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8" + integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ== + dependencies: + character-entities "^1.0.0" + character-entities-legacy "^1.0.0" + character-reference-invalid "^1.0.0" + is-alphanumerical "^1.0.0" + is-decimal "^1.0.0" + is-hexadecimal "^1.0.0" + parse-github-repo-url@^1.3.0: version "1.4.1" resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50" @@ -12910,20 +12942,18 @@ pretty-hrtime@^1.0.3: resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= -prismjs@^1.16.0, prismjs@^1.8.4: +prism-themes@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.4.0.tgz#2f93a33450532577c7962928655d7b4305fa843d" + integrity sha512-VTy6t69sS1FavspBsodoF/x/eduPydUXyZH+++Jkun0VQ4X7lCZVvsfGsYKzkUan2PJNcV2mA4lAFcr7KKXD1g== + +prismjs@1.20.0, prismjs@^1.16.0, prismjs@^1.8.4, prismjs@~1.20.0: version "1.20.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03" integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ== optionalDependencies: clipboard "^2.0.0" -prismjs@~1.17.0: - version "1.17.1" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be" - integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q== - optionalDependencies: - clipboard "^2.0.0" - private@^0.1.8, private@~0.1.5: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -13847,14 +13877,14 @@ reflect.ownkeys@^0.2.0: resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA= -refractor@^2.10.1, refractor@^2.4.1: - version "2.10.1" - resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e" - integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw== +refractor@3.0.0, refractor@^2.10.1, refractor@^2.4.1, refractor@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.0.0.tgz#7c8072eaf49dbc1b333e7acc64fb52a1c9b17c75" + integrity sha512-eCGK/oP4VuyW/ERqjMZRZHxl2QsztbkedkYy/SxqE/+Gh1gLaAF17tWIOcVJDiyGhar1NZy/0B9dFef7J0+FDw== dependencies: hastscript "^5.0.0" - parse-entities "^1.1.2" - prismjs "~1.17.0" + parse-entities "^2.0.0" + prismjs "~1.20.0" regenerate-unicode-properties@^8.2.0: version "8.2.0"