From 37bca5a319bb57dd50a4f6b811729faf03c42ea5 Mon Sep 17 00:00:00 2001 From: FenjuFu <92919259+FenjuFu@users.noreply.github.com> Date: Wed, 14 Oct 2026 22:50:38 +0800 Subject: [PATCH] chore(web): upgrade mermaid to 12 Mermaid 12 depends on katex ^0.18, so the katex override added for Dependabot alert 84 is no longer needed and is removed. Mermaid 12 changes the defaults to the ELK layout and the neo look with the redux-color theme. Pin layout, theme and look to their v11 values so existing skill documents render as before. This also keeps the lazy 1.4 MB ELK chunk from loading. Signed-off-by: FenjuFu <92919259+FenjuFu@users.noreply.github.com> --- web/package.json | 3 +- web/pnpm-lock.yaml | 87 +++++++++++++------ .../features/skill/markdown-renderer.test.tsx | 3 + web/src/features/skill/markdown-renderer.tsx | 5 ++ 4 files changed, 69 insertions(+), 29 deletions(-) diff --git a/web/package.json b/web/package.json index 5ba6ab99..b2b5ea34 100644 --- a/web/package.json +++ b/web/package.json @@ -25,7 +25,6 @@ "brace-expansion@<1.1.21": "^1.1.21", "brace-expansion@>=2.0.0 <2.1.7": "^2.1.7", "dompurify@<3.4.16": "^3.4.16", - "katex@<0.18.2": "^0.18.2", "source-map-js@<1.2.2": "^1.2.2" } }, @@ -54,7 +53,7 @@ "i18next-browser-languagedetector": "^8.2.1", "lowlight": "^3.3.0", "lucide-react": "^0.344.0", - "mermaid": "^11.17.2", + "mermaid": "^12.2.0", "openapi-fetch": "^0.13.8", "react": "^19.0.0", "react-diff-viewer-continued": "^4.2.0", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 7c89b164..fb0b43ec 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -21,7 +21,6 @@ overrides: brace-expansion@<1.1.21: ^1.1.21 brace-expansion@>=2.0.0 <2.1.7: ^2.1.7 dompurify@<3.4.16: ^3.4.16 - katex@<0.18.2: ^0.18.2 source-map-js@<1.2.2: ^1.2.2 importers: @@ -62,8 +61,8 @@ importers: specifier: ^0.344.0 version: 0.344.0(react@19.2.4) mermaid: - specifier: ^11.17.2 - version: 11.17.2 + specifier: ^12.2.0 + version: 12.2.0 openapi-fetch: specifier: ^0.13.8 version: 0.13.8 @@ -327,8 +326,20 @@ packages: resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==} hasBin: true - '@chevrotain/types@11.1.2': - resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==} + '@chevrotain/cst-dts-gen@13.2.0': + resolution: {integrity: sha512-bA9dvWlhAUcHkNwU+8w9yiUxJPlj/Lm3VqS7MD+NbIR/7LmpNLuK/AWNFdCo/T3SK5ND0/UHf3IJvl/Jn/i6yg==} + + '@chevrotain/gast@13.2.0': + resolution: {integrity: sha512-bCARdAsG+eEbOveSXcOAC7pVxA04I1ionzeMOwIYf5NX7SaS7zgn4Dgug2BSqoL+iyKeMNSorQjsFSHJHsCNwg==} + + '@chevrotain/regexp-to-ast@13.2.0': + resolution: {integrity: sha512-kxpUkLtiaK09ph+dib+Yvm+3sWSnuwlo25gqfKRgTPNmF6H7uW4gVkMjaRdtnN783S9sM6vUNWh9CsxYX4QwKw==} + + '@chevrotain/types@13.2.0': + resolution: {integrity: sha512-7qrYHRlKfWf2AvBfJi5eVOrKAkbxvMFsy/iIHTGIiApNcEecCaVIdR+mIQhyCBsTDJxBz4JWXHMo6krbhR9hVg==} + + '@chevrotain/utils@13.2.0': + resolution: {integrity: sha512-SzKYY68rseOrb9KILVzPsl6SjkQtdWw01SRGB5aCVI5kFcHltQsOYV3JB0Ffst72DgkvHCyDQ0NLwxtmCCf97Q==} '@csstools/color-helpers@6.0.2': resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==} @@ -643,8 +654,9 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} - '@mermaid-js/parser@1.2.1': - resolution: {integrity: sha512-n12NohV3mrUyUL2o93IgG/ifeW9FTyeJn3zDxkhwa8MJ9Fxg3HQMlA3RiGmD/3UnJvheztkjjQAjA2T4LmUcpw==} + '@mermaid-js/parser@2.0.1': + resolution: {integrity: sha512-j37dj/h6p6pots1L7pLPPNuABEEu9WP4OYg9pW1g+nYG331j0+3canE9OagtYdytYvdSAMG+2fKU5cxep6LgjA==} + engines: {node: '>=22.12.0'} '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -1737,6 +1749,10 @@ packages: character-reference-invalid@2.0.1: resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} + chevrotain@13.2.0: + resolution: {integrity: sha512-GTouk5YzgBxlTPCaDn5q0q2EJKkrYmnPF+HmF8v0Qo4r3iyPG7HJivkN1wthCXZcm3sIcZFpGTRovLPNdJNRCA==} + engines: {node: '>=22.0.0'} + chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -2035,6 +2051,9 @@ packages: electron-to-chromium@1.5.422: resolution: {integrity: sha512-UvA/32XqrLDdZSn7Jllo1AYNcWji/G0d5M0GTViE7KoGBiMunw3a34Sb2KO4ZZyrSEhqsxFoVhWWJshdyfKqJA==} + elkjs@0.9.3: + resolution: {integrity: sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==} + entities@8.0.0: resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==} engines: {node: '>=20.19.0'} @@ -2136,9 +2155,6 @@ packages: fast-levenshtein@2.0.6: resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} - fastdom@1.0.12: - resolution: {integrity: sha512-LB+xjSTEbjHE1cWsxu+tN2Xqr1kpi+V9aADI7sVM5ZMaXyYGPHULQMzpJMYqOTULK/73pUkWVzzObFRBkPr+hg==} - fastq@1.20.1: resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==} @@ -2436,6 +2452,7 @@ packages: katex@0.18.11: resolution: {integrity: sha512-yvyz/2VMKqoho/35Hat5w37wIEdWJ5ElVMidTAlWrxr5uW4aBGsEpveTmKh18/zw08v/7lGswCPon4OhqmqrTA==} + deprecated: Accidentally published with breaking changes. Use 0.19.0 instead. hasBin: true keyv@4.5.4: @@ -2566,8 +2583,9 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - mermaid@11.17.2: - resolution: {integrity: sha512-V6K3C8EBdEsPFZXSKMJe6ppQOENxuHARr9GvHX4hh47lAbhMRD9qf4oEK7LoaRQxULMa80/qt5gHO73aCleBBg==} + mermaid@12.2.0: + resolution: {integrity: sha512-w7nr/SFrLO7BaVTs3dQTvYSV6nYSBj0Yy9DjBhsIJtAcHqRzXSq4Pg32ujHZ/AdWsAMNEvvhbm5dt9E2tOiHzw==} + engines: {node: '>=22.12.0'} micromark-core-commonmark@2.0.3: resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} @@ -3102,9 +3120,6 @@ packages: std-env@4.1.0: resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==} - strictdom@1.0.1: - resolution: {integrity: sha512-cEmp9QeXXRmjj/rVp9oyiqcvyocWab/HaoN4+bwFeZ7QzykJD6L3yD4v12K1x0tHpqRqVpJevN3gW7kyM39Bqg==} - stringify-entities@4.0.4: resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} @@ -3691,7 +3706,20 @@ snapshots: dependencies: css-tree: 3.2.1 - '@chevrotain/types@11.1.2': {} + '@chevrotain/cst-dts-gen@13.2.0': + dependencies: + '@chevrotain/gast': 13.2.0 + '@chevrotain/types': 13.2.0 + + '@chevrotain/gast@13.2.0': + dependencies: + '@chevrotain/types': 13.2.0 + + '@chevrotain/regexp-to-ast@13.2.0': {} + + '@chevrotain/types@13.2.0': {} + + '@chevrotain/utils@13.2.0': {} '@csstools/color-helpers@6.0.2': {} @@ -3950,9 +3978,9 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 - '@mermaid-js/parser@1.2.1': + '@mermaid-js/parser@2.0.1': dependencies: - '@chevrotain/types': 11.1.2 + '@chevrotain/types': 13.2.0 '@nodelib/fs.scandir@2.1.5': dependencies: @@ -5007,6 +5035,14 @@ snapshots: character-reference-invalid@2.0.1: {} + chevrotain@13.2.0: + dependencies: + '@chevrotain/cst-dts-gen': 13.2.0 + '@chevrotain/gast': 13.2.0 + '@chevrotain/regexp-to-ast': 13.2.0 + '@chevrotain/types': 13.2.0 + '@chevrotain/utils': 13.2.0 + chokidar@3.6.0: dependencies: anymatch: 3.1.3 @@ -5323,6 +5359,8 @@ snapshots: electron-to-chromium@1.5.422: {} + elkjs@0.9.3: {} + entities@8.0.0: {} error-ex@1.3.4: @@ -5468,10 +5506,6 @@ snapshots: fast-levenshtein@2.0.6: {} - fastdom@1.0.12: - dependencies: - strictdom: 1.0.1 - fastq@1.20.1: dependencies: reusify: 1.1.0 @@ -5997,13 +6031,14 @@ snapshots: merge2@1.4.1: {} - mermaid@11.17.2: + mermaid@12.2.0: dependencies: '@braintree/sanitize-url': 7.1.2 '@iconify/utils': 3.1.7 - '@mermaid-js/parser': 1.2.1 + '@mermaid-js/parser': 2.0.1 '@types/d3': 7.4.3 '@upsetjs/venn.js': 2.0.0 + chevrotain: 13.2.0 cytoscape: 3.34.3 cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.3) cytoscape-fcose: 2.2.0(cytoscape@3.34.3) @@ -6012,8 +6047,8 @@ snapshots: dagre-d3-es: 7.0.14 dayjs: 1.11.23 dompurify: 3.4.17 + elkjs: 0.9.3 es-toolkit: 1.52.0 - fastdom: 1.0.12 katex: 0.18.11 khroma: 2.1.0 marked: 16.4.2 @@ -6686,8 +6721,6 @@ snapshots: std-env@4.1.0: {} - strictdom@1.0.1: {} - stringify-entities@4.0.4: dependencies: character-entities-html4: 2.1.0 diff --git a/web/src/features/skill/markdown-renderer.test.tsx b/web/src/features/skill/markdown-renderer.test.tsx index 9f596f5d..627e975e 100644 --- a/web/src/features/skill/markdown-renderer.test.tsx +++ b/web/src/features/skill/markdown-renderer.test.tsx @@ -96,6 +96,9 @@ describe('MarkdownRenderer Mermaid blocks', () => { startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true, + layout: 'dagre', + theme: 'default', + look: 'classic', }) expect(container.querySelector('[data-testid="mermaid-svg"]')?.closest('pre')).toBeNull() }) diff --git a/web/src/features/skill/markdown-renderer.tsx b/web/src/features/skill/markdown-renderer.tsx index cab7a561..8bd2cd04 100644 --- a/web/src/features/skill/markdown-renderer.tsx +++ b/web/src/features/skill/markdown-renderer.tsx @@ -32,6 +32,11 @@ function loadMermaid(): Promise { startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true, + // Mermaid 12 defaults to the ELK layout and the neo/redux-color look; + // keep the classic rendering that existing skill documents were written for. + layout: 'dagre', + theme: 'default', + look: 'classic', }) return mermaid })