From 81b336b37a9fbb59e30003133c93a811db2d515d Mon Sep 17 00:00:00 2001 From: WindSpiritSR Date: Fri, 14 Feb 2025 00:10:33 +0800 Subject: [PATCH] feat: replace react-codemirror2 with @uiw/react-codemirror (#3577) Signed-off-by: WindSpiritSR --- web/package.json | 6 +- web/src/ApplicationEditPage.js | 77 ++-- web/src/CasbinEditor.js | 11 +- web/src/ModelListPage.js | 9 +- web/src/ProviderEditPage.js | 17 +- web/src/SyncerEditPage.js | 14 +- web/src/WebhookEditPage.js | 11 +- web/src/common/Editor.js | 55 +++ web/src/table/SigninTable.js | 25 +- web/src/table/SignupTable.js | 25 +- web/yarn.lock | 743 ++++++++++++++++++++++++++++++++- 11 files changed, 871 insertions(+), 122 deletions(-) create mode 100644 web/src/common/Editor.js diff --git a/web/package.json b/web/package.json index 2fc14f42..54cfed16 100644 --- a/web/package.json +++ b/web/package.json @@ -10,6 +10,9 @@ "@ctrl/tinycolor": "^3.5.0", "@emotion/react": "^11.10.5", "@metamask/eth-sig-util": "^6.0.0", + "@uiw/codemirror-extensions-langs": "^4.23.8", + "@uiw/codemirror-theme-material": "^4.23.8", + "@uiw/react-codemirror": "^4.23.8", "@web3-onboard/coinbase": "^2.2.5", "@web3-onboard/core": "^2.20.5", "@web3-onboard/frontier": "^2.0.4", @@ -23,7 +26,7 @@ "antd": "5.2.3", "antd-token-previewer": "^1.1.0-22", "buffer": "^6.0.3", - "codemirror": "^5.61.1", + "codemirror": "^6.0.1", "copy-to-clipboard": "^3.3.1", "core-js": "^3.25.0", "craco-less": "^2.0.0", @@ -40,7 +43,6 @@ "qrcode.react": "^3.1.0", "react": "^18.2.0", "react-app-polyfill": "^3.0.0", - "react-codemirror2": "^7.2.1", "react-cropper": "^2.1.7", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js index a100fe10..a1bf1e9b 100644 --- a/web/src/ApplicationEditPage.js +++ b/web/src/ApplicationEditPage.js @@ -34,14 +34,8 @@ import PromptPage from "./auth/PromptPage"; import copy from "copy-to-clipboard"; import ThemeEditor from "./common/theme/ThemeEditor"; -import {Controlled as CodeMirror} from "react-codemirror2"; -import "codemirror/lib/codemirror.css"; import SigninTable from "./table/SigninTable"; - -require("codemirror/theme/material-darker.css"); -require("codemirror/mode/htmlmixed/htmlmixed"); -require("codemirror/mode/xml/xml"); -require("codemirror/mode/css/css"); +import Editor from "./common/Editor"; const {Option} = Select; @@ -629,13 +623,9 @@ class ApplicationEditPage extends React.Component { - { - this.updateApplicationField("signupHtml", value); - }} - /> + { + this.updateApplicationField("signupHtml", value); + }} /> } title={i18next.t("provider:Signup HTML - Edit")} trigger="click"> { @@ -651,13 +641,9 @@ class ApplicationEditPage extends React.Component { - { - this.updateApplicationField("signinHtml", value); - }} - /> + { + this.updateApplicationField("signinHtml", value); + }} /> } title={i18next.t("provider:Signin HTML - Edit")} trigger="click"> { @@ -758,11 +744,7 @@ class ApplicationEditPage extends React.Component { {Setting.getLabel(i18next.t("application:SAML metadata"), i18next.t("application:SAML metadata - Tooltip"))} : - {}} - /> +