From e10511c110b9997dfa56f09fc17bcd83141198a7 Mon Sep 17 00:00:00 2001 From: Muthurajan Sivasubramanian <93245779+msivasubramaniaan@users.noreply.github.com> Date: Wed, 4 Sep 2024 23:33:18 +0530 Subject: [PATCH] removed syntax high light and added code mirror for showing YAML (#4428) * removed syntax high light and added code mirror for showing YAML Signed-off-by: msivasubramaniaan * removed commented lines Signed-off-by: msivasubramaniaan --------- Signed-off-by: msivasubramaniaan --- package-lock.json | 293 ++------------------------- package.json | 3 +- src/webview/common/devfileSearch.tsx | 76 ++++--- 3 files changed, 62 insertions(+), 310 deletions(-) diff --git a/package-lock.json b/package-lock.json index 18cdc4327..2cc01abcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,7 +65,6 @@ "@types/react": "^17.0.80", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^17.0.25", - "@types/react-syntax-highlighter": "^15.5.13", "@types/semver": "^7.5.8", "@types/shelljs": "^0.8.15", "@types/sinon": "^17.0.3", @@ -77,6 +76,7 @@ "@types/vscode": "1.82.0", "@typescript-eslint/eslint-plugin": "^8.4.0", "@typescript-eslint/parser": "^8.4.0", + "@uiw/codemirror-theme-vscode": "^4.23.0", "@vscode/test-electron": "^2.4.1", "bootstrap": "^5.3.3", "chai": "^4.5.0", @@ -112,7 +112,6 @@ "react-error-boundary": "^4.0.13", "react-phone-input-2": "^2.14.0", "react-scroll-to-top": "^3.0.0", - "react-syntax-highlighter": "^15.5.0", "remap-istanbul": "^0.13.0", "showdown": "^2.1.0", "shx": "^0.3.3", @@ -3301,14 +3300,6 @@ "@types/node": "*" } }, - "node_modules/@types/hast": { - "version": "2.3.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, "node_modules/@types/http-cache-semantics": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz", @@ -3458,15 +3449,6 @@ "@types/react": "^17" } }, - "node_modules/@types/react-syntax-highlighter": { - "version": "15.5.13", - "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz", - "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -3620,11 +3602,6 @@ "version": "4.0.2", "license": "MIT" }, - "node_modules/@types/unist": { - "version": "2.0.6", - "dev": true, - "license": "MIT" - }, "node_modules/@types/unzip-stream": { "version": "0.3.4", "resolved": "https://registry.npmjs.org/@types/unzip-stream/-/unzip-stream-0.3.4.tgz", @@ -3897,6 +3874,18 @@ "url": "https://jaywcjlove.github.io/#/sponsor" } }, + "node_modules/@uiw/codemirror-theme-vscode": { + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.23.0.tgz", + "integrity": "sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==", + "dev": true, + "dependencies": { + "@uiw/codemirror-themes": "4.23.0" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + } + }, "node_modules/@uiw/codemirror-themes": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.0.tgz", @@ -5545,39 +5534,6 @@ "node": ">=0.8.0" } }, - "node_modules/character-entities": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", - "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/character-entities-legacy": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", - "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/character-reference-invalid": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", - "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/check-error": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", @@ -5957,17 +5913,6 @@ "node": ">= 0.8" } }, - "node_modules/comma-separated-tokens": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", - "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/commander": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", @@ -8255,20 +8200,6 @@ "reusify": "^1.0.4" } }, - "node_modules/fault": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", - "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", - "dev": true, - "license": "MIT", - "dependencies": { - "format": "^0.2.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/fd-slicer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", @@ -8511,15 +8442,6 @@ "node": ">= 14.17" } }, - "node_modules/format": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", - "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==", - "dev": true, - "engines": { - "node": ">=0.4.x" - } - }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -9086,35 +9008,6 @@ "node": ">= 0.4" } }, - "node_modules/hast-util-parse-selector": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", - "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", - "dev": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/hastscript": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", - "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^2.0.0", - "comma-separated-tokens": "^1.0.0", - "hast-util-parse-selector": "^2.0.0", - "property-information": "^5.0.0", - "space-separated-tokens": "^1.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -9125,16 +9018,6 @@ "he": "bin/he" } }, - "node_modules/highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": "*" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -9473,32 +9356,6 @@ "node": ">= 0.10" } }, - "node_modules/is-alphabetical": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", - "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/is-alphanumerical": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", - "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", - "dev": true, - "license": "MIT", - "dependencies": { - "is-alphabetical": "^1.0.0", - "is-decimal": "^1.0.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -9632,17 +9489,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-decimal": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", - "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", @@ -9703,17 +9549,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-hexadecimal": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", - "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/is-in-browser": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", @@ -11171,21 +11006,6 @@ "node": ">=8" } }, - "node_modules/lowlight": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", - "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", - "dev": true, - "license": "MIT", - "dependencies": { - "fault": "^1.0.0", - "highlight.js": "~10.7.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -12441,25 +12261,6 @@ "node": ">=6" } }, - "node_modules/parse-entities": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", - "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", - "dev": true, - "license": "MIT", - "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" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/parse-imports": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/parse-imports/-/parse-imports-2.1.1.tgz", @@ -12947,16 +12748,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -12982,20 +12773,6 @@ "dev": true, "license": "MIT" }, - "node_modules/property-information": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz", - "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==", - "dev": true, - "license": "MIT", - "dependencies": { - "xtend": "^4.0.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/protocols": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz", @@ -13263,23 +13040,6 @@ "react": "^16.8.0 || 17.x || ^18" } }, - "node_modules/react-syntax-highlighter": { - "version": "15.5.0", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", - "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "highlight.js": "^10.4.1", - "lowlight": "^1.17.0", - "prismjs": "^1.27.0", - "refractor": "^3.6.0" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -13412,22 +13172,6 @@ "node": ">= 0.10" } }, - "node_modules/refractor": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", - "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "dev": true, - "license": "MIT", - "dependencies": { - "hastscript": "^6.0.0", - "parse-entities": "^2.0.0", - "prismjs": "~1.27.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/regenerator-runtime": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", @@ -14286,17 +14030,6 @@ "node": ">=0.10.0" } }, - "node_modules/space-separated-tokens": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", - "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/spdx-correct": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", diff --git a/package.json b/package.json index 944f3c89a..943cc6b9e 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,6 @@ "@types/react": "^17.0.80", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^17.0.25", - "@types/react-syntax-highlighter": "^15.5.13", "@types/semver": "^7.5.8", "@types/shelljs": "^0.8.15", "@types/sinon": "^17.0.3", @@ -139,6 +138,7 @@ "@types/vscode": "1.82.0", "@typescript-eslint/eslint-plugin": "^8.4.0", "@typescript-eslint/parser": "^8.4.0", + "@uiw/codemirror-theme-vscode": "^4.23.0", "@vscode/test-electron": "^2.4.1", "bootstrap": "^5.3.3", "chai": "^4.5.0", @@ -174,7 +174,6 @@ "react-error-boundary": "^4.0.13", "react-phone-input-2": "^2.14.0", "react-scroll-to-top": "^3.0.0", - "react-syntax-highlighter": "^15.5.0", "remap-istanbul": "^0.13.0", "showdown": "^2.1.0", "shx": "^0.3.3", diff --git a/src/webview/common/devfileSearch.tsx b/src/webview/common/devfileSearch.tsx index ee60b5f87..ca786d6b9 100644 --- a/src/webview/common/devfileSearch.tsx +++ b/src/webview/common/devfileSearch.tsx @@ -31,12 +31,13 @@ import { import { every } from 'lodash'; import * as React from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { monokai, qtcreatorLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import { Devfile, DevfileRegistry, TemplateProjectIdentifier } from '../common/devfile'; import { DevfileExplanation } from './devfileExplanation'; import { DevfileListItem } from './devfileListItem'; import { LoadScreen } from './loading'; +import CodeMirror from '@uiw/react-codemirror'; +import { yaml } from '@codemirror/lang-yaml'; +import { vscodeDarkInit, vscodeLightInit } from '@uiw/codemirror-theme-vscode'; // in order to add custom named colours for use in Material UI's `color` prop, // you need to use module augmentation. @@ -74,6 +75,36 @@ function LinkButton(props: { href: string; disabled: boolean; onClick: () => voi ); } +const vsDark = vscodeDarkInit({ + settings: { + background: 'var(--vscode-editor-background)', + foreground: 'var(--vscode-editor-foreground)', + caret: 'var(--vscode-editorCursor-foreground)', + selection: 'var(--vscode-editor-selectionBackground)', + selectionMatch: 'var(--vscode-editor-findMatchBackground)', + lineHighlight: 'var(--vscode-editor-lineHighlightBackground)', + gutterBackground: 'var(--vscode-editorGutter-background)', + gutterForeground: 'var(--vscode-editorHint-foreground)', + fontFamily: 'var(--vscode-editor-font-family)', + fontSize: 'var(--vscode-editor-font-size)' + } +}); + +const vsLight = vscodeLightInit({ + settings: { + background: 'var(--vscode-editor-background)', + foreground: 'var(--vscode-editor-foreground)', + caret: 'var(--vscode-editorCursor-foreground)', + selection: 'var(--vscode-editor-selectionBackground)', + selectionMatch: 'var(--vscode-editor-findMatchBackground)', + lineHighlight: 'var(--vscode-editor-lineHighlightBackground)', + gutterBackground: 'var(--vscode-editorGutter-background)', + gutterForeground: 'var(--vscode-editorHint-foreground)', + fontFamily: 'var(--vscode-editor-font-family)', + fontSize: 'var(--vscode-editor-font-size)' + } +}); + function SearchBar(props: { searchText: string; setSearchText: React.Dispatch>; @@ -394,14 +425,8 @@ const SelectTemplateProject = React.forwardRef( - - {/* paddingRight is x4 to account for the padding on the parent absolutely positioned paper and the width of the scroll bar */} - + + { @@ -421,7 +446,7 @@ const SelectTemplateProject = React.forwardRef( }} > { setTimeout(() => setYamlCopied((_) => false), 200); }} @@ -433,23 +458,18 @@ const SelectTemplateProject = React.forwardRef( - - {props.devfile.yaml} - +