feat: replace react-codemirror2 with @uiw/react-codemirror (#3577)

Signed-off-by: WindSpiritSR <simon343riley@gmail.com>
This commit is contained in:
WindSpiritSR
2025-02-14 00:10:33 +08:00
committed by GitHub
parent 9c39179849
commit 81b336b37a
11 changed files with 871 additions and 122 deletions

View File

@ -17,12 +17,7 @@ import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
import {Button, Col, Input, Popover, Row, Select, Space, Switch, Table, Tooltip} from "antd";
import * as Setting from "../Setting";
import i18next from "i18next";
import {Controlled as CodeMirror} from "react-codemirror2";
import "codemirror/lib/codemirror.css";
require("codemirror/theme/material-darker.css");
require("codemirror/mode/htmlmixed/htmlmixed");
import Editor from "../common/Editor";
const {Option} = Select;
@ -175,12 +170,9 @@ class SigninTable extends React.Component {
return (
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror value={text}
options={{mode: "htmlmixed", theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
this.updateField(table, index, "label", value);
}}
/>
<Editor value={text} lang="html" fillHeight dark onChange={value => {
this.updateField(table, index, "label", value);
}} />
</div>
} title={i18next.t("signup:Label HTML")} trigger="click">
<Input value={text} style={{marginBottom: "10px"}} onChange={e => {
@ -206,9 +198,12 @@ class SigninTable extends React.Component {
return (
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror value={text?.replaceAll("<style>", "").replaceAll("</style>", "")}
options={{mode: "css", theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
<Editor
value={text?.replaceAll("<style>", "").replaceAll("</style>", "")}
lang="css"
fillHeight
dark
onChange={value => {
this.updateField(table, index, "customCss", value);
}}
/>

View File

@ -17,12 +17,7 @@ import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
import {Button, Col, Input, Popover, Row, Select, Switch, Table, Tooltip} from "antd";
import * as Setting from "../Setting";
import i18next from "i18next";
import {Controlled as CodeMirror} from "react-codemirror2";
import "codemirror/lib/codemirror.css";
require("codemirror/theme/material-darker.css");
require("codemirror/mode/htmlmixed/htmlmixed");
import Editor from "../common/Editor";
const EmailCss = ".signup-email{}\n.signup-email-input{}\n.signup-email-code{}\n.signup-email-code-input{}\n";
const PhoneCss = ".signup-phone{}\n.signup-phone-input{}\n.phone-code{}\n.signup-phone-code-input{}";
@ -234,12 +229,9 @@ class SignupTable extends React.Component {
return (
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror value={text}
options={{mode: "htmlmixed", theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
this.updateField(table, index, "label", value);
}}
/>
<Editor value={text} lang="html" fillHeight dark onChange={value => {
this.updateField(table, index, "label", value);
}} />
</div>
} title={i18next.t("signup:Label HTML")} trigger="click">
<Input value={text} style={{marginBottom: "10px"}} onChange={e => {
@ -265,9 +257,12 @@ class SignupTable extends React.Component {
return (
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}}>
<CodeMirror value={text ? text : SignupTableDefaultCssMap[record.name]}
options={{mode: "css", theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
<Editor
value={text ? text : SignupTableDefaultCssMap[record.name]}
lang="css"
fillHeight
dark
onChange={value => {
this.updateField(table, index, "customCss", value ? value : SignupTableDefaultCssMap[record.name]);
}}
/>