From 031461f9985b17c1de76578f55302c76fd9daf2b Mon Sep 17 00:00:00 2001 From: Jannis Mattheis Date: Sun, 3 Aug 2025 22:22:49 +0200 Subject: [PATCH] fix: upgrade codemirror Co-authored-by: Matthias Fechner --- ui/package.json | 6 +- ui/src/plugin/PluginDetailView.tsx | 32 +- ui/src/tests/plugin.test.ts | 15 +- ui/yarn.lock | 680 +++++++++++++++++++++++++++-- 4 files changed, 677 insertions(+), 56 deletions(-) diff --git a/ui/package.json b/ui/package.json index 1cd7ebe..be080e9 100644 --- a/ui/package.json +++ b/ui/package.json @@ -9,9 +9,11 @@ "@emotion/styled": "^11.14.1", "@mui/icons-material": "^7.2.0", "@mui/material": "^7.2.0", + "@uiw/codemirror-extensions-langs": "^4.24.2", + "@uiw/codemirror-theme-material": "^4.24.2", + "@uiw/react-codemirror": "^4.24.2", "@vitejs/plugin-react": "^4.7.0", "axios": "^0.21.1", - "codemirror": "^5.61.1", "detect-browser": "^5.2.0", "mobx": "^5.15.6", "mobx-react": "^6.3.0", @@ -19,7 +21,6 @@ "notifyjs": "^3.0.0", "notistack": "^3.0.2", "react": "^17.0.0", - "react-codemirror2": "^7.2.1", "react-dom": "^16.4.2", "react-markdown": "^6.0.2", "react-router": "^5.2.0", @@ -43,7 +44,6 @@ }, "devDependencies": { "@eslint/js": "^9.32.0", - "@types/codemirror": "5.60.0", "@types/detect-browser": "^4.0.0", "@types/get-port": "^4.0.0", "@types/node": "^15.12.2", diff --git a/ui/src/plugin/PluginDetailView.tsx b/ui/src/plugin/PluginDetailView.tsx index 2bbb770..4c75008 100644 --- a/ui/src/plugin/PluginDetailView.tsx +++ b/ui/src/plugin/PluginDetailView.tsx @@ -1,10 +1,9 @@ import React from 'react'; import {useParams} from 'react-router'; import {Markdown} from '../common/Markdown'; -import {UnControlled as CodeMirror} from 'react-codemirror2'; -import 'codemirror/lib/codemirror.css'; -import 'codemirror/theme/material.css'; -import 'codemirror/mode/yaml/yaml'; +import {langs} from '@uiw/codemirror-extensions-langs'; +import {material} from '@uiw/codemirror-theme-material'; +import CodeMirror from '@uiw/react-codemirror'; import Info from '@mui/icons-material/Info'; import Build from '@mui/icons-material/Build'; import Subject from '@mui/icons-material/Subject'; @@ -150,22 +149,23 @@ interface IConfigurerPanelProps { } const ConfigurerPanel = ({initialConfig, save}: IConfigurerPanelProps) => { const [unsavedChanges, setUnsavedChanges] = React.useState(null); + const onChange = React.useCallback( + (value: string | null) => { + let newConf: string | null = value; + if (value === initialConfig) { + newConf = null; + } + setUnsavedChanges(newConf); + }, + [initialConfig] + ); return (
{ - let newConf: string | null = value; - if (value === initialConfig) { - newConf = null; - } - setUnsavedChanges(newConf); - }} + theme={material} + extensions={[langs.yaml()]} + onChange={onChange} />