diff --git a/package.json b/package.json index 8f4cb86a2153e..8b1efe588b2aa 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,8 @@ "**/minimist": "^1.2.5", "**/node-jose/node-forge": "^0.10.0", "**/prismjs": "1.22.0", + "**/react-syntax-highlighter": "^15.3.1", + "**/react-syntax-highlighter/**/highlight.js": "^10.4.1", "**/request": "^2.88.2", "**/trim": "0.0.3", "**/typescript": "4.1.2" @@ -678,7 +680,7 @@ "has-ansi": "^3.0.0", "hdr-histogram-js": "^1.2.0", "he": "^1.2.0", - "highlight.js": "9.15.10", + "highlight.js": "^9.18.5", "history-extra": "^5.0.1", "hoist-non-react-statics": "^3.3.2", "html": "1.0.0", @@ -782,7 +784,7 @@ "react-router-redux": "^4.0.8", "react-shortcuts": "^2.0.0", "react-sizeme": "^2.3.6", - "react-syntax-highlighter": "^5.7.0", + "react-syntax-highlighter": "^15.3.1", "react-test-renderer": "^16.12.0", "react-tiny-virtual-list": "^2.2.0", "react-virtualized": "^9.21.2", diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx index b1228646595f3..8e08aba4234f4 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx @@ -8,14 +8,9 @@ import { EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { tint } from 'polished'; import React, { Fragment } from 'react'; -// @ts-expect-error -import sql from 'react-syntax-highlighter/dist/languages/sql'; -import SyntaxHighlighter, { - registerLanguage, - // @ts-expect-error -} from 'react-syntax-highlighter/dist/light'; -// @ts-expect-error -import { xcode } from 'react-syntax-highlighter/dist/styles'; +import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; +import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import styled from 'styled-components'; import { Span } from '../../../../../../../../typings/es_schemas/ui/span'; import { @@ -28,7 +23,7 @@ import { } from '../../../../../../../style/variables'; import { TruncateHeightSection } from './TruncateHeightSection'; -registerLanguage('sql', sql); +SyntaxHighlighter.registerLanguage('sql', sql); const DatabaseStatement = styled.div` padding: ${px(units.half)} ${px(unit)}; diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx index 020137fc31672..2098ed94bef0e 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx @@ -7,26 +7,18 @@ import { size } from 'lodash'; import { tint } from 'polished'; import React from 'react'; -// TODO add dependency for @types/react-syntax-highlighter -// @ts-expect-error -import javascript from 'react-syntax-highlighter/dist/languages/javascript'; -// @ts-expect-error -import python from 'react-syntax-highlighter/dist/languages/python'; -// @ts-expect-error -import ruby from 'react-syntax-highlighter/dist/languages/ruby'; -// @ts-expect-error -import SyntaxHighlighter from 'react-syntax-highlighter/dist/light'; -// @ts-expect-error -import { registerLanguage } from 'react-syntax-highlighter/dist/light'; -// @ts-expect-error -import { xcode } from 'react-syntax-highlighter/dist/styles'; +import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'; +import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'; +import ruby from 'react-syntax-highlighter/dist/cjs/languages/hljs/ruby'; +import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import styled from 'styled-components'; import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { borderRadius, px, unit, units } from '../../../style/variables'; -registerLanguage('javascript', javascript); -registerLanguage('python', python); -registerLanguage('ruby', ruby); +SyntaxHighlighter.registerLanguage('javascript', javascript); +SyntaxHighlighter.registerLanguage('python', python); +SyntaxHighlighter.registerLanguage('ruby', ruby); const ContextContainer = styled.div` position: relative; @@ -106,7 +98,9 @@ function getStackframeLines(stackframe: StackframeWithLineContext) { const line = stackframe.line.context; const preLines = stackframe.context?.pre || []; const postLines = stackframe.context?.post || []; - return [...preLines, line, ...postLines]; + return [...preLines, line, ...postLines].map( + (x) => (x.endsWith('\n') ? x.slice(0, -1) : x) || ' ' + ); } function getStartLineNumber(stackframe: StackframeWithLineContext) { @@ -146,7 +140,7 @@ export function Context({ stackframe, codeLanguage, isLibraryFrame }: Props) { CodeTag={Code} customStyle={{ padding: null, overflowX: null }} > - {line || '\n'} + {line} ))} diff --git a/yarn.lock b/yarn.lock index 24ad66ffc3e2b..af24e6e1f1c8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8045,7 +8045,7 @@ babel-preset-jest@^26.6.2: babel-plugin-transform-undefined-to-void "^6.9.4" lodash.isplainobject "^4.0.6" -babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: +babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.22.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= @@ -13468,7 +13468,7 @@ fastq@^1.6.0: dependencies: reusify "^1.0.0" -fault@^1.0.2: +fault@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13" integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA== @@ -15520,6 +15520,11 @@ hast-util-is-element@^1.0.0: resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.4.tgz#059090a05cc02e275df1ad02caf8cb422fcd2e02" integrity sha512-NFR6ljJRvDcyPP5SbV7MyPBgF47X3BsskLnmw1U34yL+X6YC0MoBx9EyMg8Jtx4FzGH95jw8+c1VPLHaRA0wDQ== +hast-util-parse-selector@^2.0.0: + version "2.2.3" + resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.3.tgz#57edd449103900c7f63fd9e6f694ffd7e4634719" + integrity sha512-nxbeqjQNxsvo/uYYAw9kij6td05YVUlf1qti09rVfbWSLT5H6wo3c+USIwX6nzXWk5kFZzXnEqO82856r0aM2Q== + hast-util-parse-selector@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz#4ddbae1ae12c124e3eb91b581d2556441766f0ab" @@ -15599,6 +15604,17 @@ hastscript@^5.0.0: property-information "^5.0.1" space-separated-tokens "^1.0.0" +hastscript@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640" + integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w== + 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" + hat@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/hat/-/hat-0.0.3.tgz#bb014a9e64b3788aed8005917413d4ff3d502d8a" @@ -15630,21 +15646,16 @@ heap@^0.2.6: resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac" integrity sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw= -highlight.js@9.15.10, highlight.js@~9.15.0, highlight.js@~9.15.1: - version "9.15.10" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" - integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw== +highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.4.0: + version "10.4.1" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.4.1.tgz#d48fbcf4a9971c4361b3f95f302747afe19dbad0" + integrity sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg== highlight.js@^9.18.5: version "9.18.5" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825" integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA== -highlight.js@~9.12.0: - version "9.12.0" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" - integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4= - history-extra@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/history-extra/-/history-extra-5.0.1.tgz#95a2e59dda526c4241d0ae1b124a77a5e4675ce8" @@ -19315,20 +19326,13 @@ lowercase-keys@^2.0.0: resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479" integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA== -lowlight@1.12.1, lowlight@^1.2.0: - version "1.12.1" - resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.12.1.tgz#014acf8dd73a370e02ff1cc61debcde3bb1681eb" - integrity sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w== +lowlight@^1.14.0, lowlight@^1.2.0: + version "1.17.0" + resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.17.0.tgz#a1143b2fba8239df8cd5893f9fe97aaf8465af4a" + integrity sha512-vmtBgYKD+QVNy7tIa7ulz5d//Il9R4MooOVh4nkOf9R9Cb/Dk5TXMSTieg/vDulkBkIWj59/BIlyFQxT9X1oAQ== dependencies: - fault "^1.0.2" - highlight.js "~9.15.0" - -lowlight@~1.9.1: - version "1.9.1" - resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.1.tgz#ed7c3dffc36f8c1f263735c0fe0c907847c11250" - integrity sha512-CpDhyVhI+xHjruiGvH2F/Fr5q5aTn5A6Oyh7MI+4oI8G0A1E7p9a3Zqv9Hzx9WByK8gAiNifEueAXz+cA2xdEA== - dependencies: - highlight.js "~9.12.0" + fault "^1.0.0" + highlight.js "~10.4.0" lru-cache@4.1.x, lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.5: version "4.1.5" @@ -21635,7 +21639,7 @@ parse-color@^1.0.0: dependencies: color-convert "~0.5.0" -parse-entities@^1.1.0, parse-entities@^1.1.2: +parse-entities@^1.1.0: version "1.2.1" resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.1.tgz#2c761ced065ba7dc68148580b5a225e4918cdd69" integrity sha512-NBWYLQm1KSoDKk7GAHyioLTvCZ5QjdH/ASBBQTD3iLiAWJXS5bg1jEWI8nIJ+vgVvsceBVBcDGRWSo0KVQBvvg== @@ -22372,7 +22376,7 @@ pretty-ms@5.0.0: dependencies: parse-ms "^2.1.0" -prismjs@1.22.0, prismjs@^1.8.4, prismjs@~1.16.0: +prismjs@1.22.0, prismjs@^1.22.0, prismjs@~1.22.0: version "1.22.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa" integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w== @@ -23452,25 +23456,16 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" -react-syntax-highlighter@^12.2.1: - version "12.2.1" - resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e" - integrity sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA== +react-syntax-highlighter@^12.2.1, react-syntax-highlighter@^15.3.1: + version "15.3.1" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.3.1.tgz#ba16ae8705f191956b73d0e11ae938fd255f2579" + integrity sha512-XVQuug7kQ4/cWxiYE0XfGXvbDqLLqRsMK/GpmD3v1WOLzb6REcgkL59cJo0m3Y2LB0eoRCNhV62jqQe9/Z0p9w== dependencies: "@babel/runtime" "^7.3.1" - highlight.js "~9.15.1" - lowlight "1.12.1" - prismjs "^1.8.4" - refractor "^2.4.1" - -react-syntax-highlighter@^5.7.0: - version "5.8.0" - resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-5.8.0.tgz#a220c010fd0641751d93532509ba7159cc3a4383" - integrity sha512-+FolT9NhFBqE4SsZDelSzsYJJS/JCnQqo4+GxLrFPoML548uvr8f4Eh5nnd5o6ERKFW7ryiygOX9SPnxdnlpkg== - dependencies: - babel-runtime "^6.18.0" - highlight.js "~9.12.0" - lowlight "~1.9.1" + highlight.js "^10.1.1" + lowlight "^1.14.0" + prismjs "^1.22.0" + refractor "^3.2.0" react-test-renderer@^16.0.0-0, react-test-renderer@^16.12.0: version "16.12.0" @@ -23946,14 +23941,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.4.1: - version "2.8.0" - resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.8.0.tgz#29d7b2254e823edd2e3e476af286af1c11472bfa" - integrity sha512-w+jG49/1MX60GeE9u8lyx1KYMBRdAHjOIfgcDJ0wq2ogOnEmab0MgIj+AtPq6kelw0mr1l9U0i2rFvLlOCkxiw== +refractor@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.2.0.tgz#bc46f7cfbb6adbf45cd304e8e299b7fa854804e0" + integrity sha512-hSo+EyMIZTLBvNNgIU5lW4yjCzNYMZ4dcEhBq/3nReGfqzd2JfVhdlPDfU9rEsgcAyWx+OimIIUoL4ZU7NtYHQ== dependencies: - hastscript "^5.0.0" - parse-entities "^1.1.2" - prismjs "~1.16.0" + hastscript "^6.0.0" + parse-entities "^2.0.0" + prismjs "~1.22.0" regedit@^3.0.3: version "3.0.3"