[incubator-paimon-webui] branch main updated: [Optimize][Web]change MonacoEditor version (#6)

[lzljs3620320]

This is an automated email from the ASF dual-hosted git repository.

lzljs3620320 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git


The following commit(s) were added to refs/heads/main by this push:
     new 207ee9a  [Optimize][Web]change MonacoEditor version (#6)
207ee9a is described below

commit 207ee9a0c8af8c80f348229768e33ca3be9a70e8
Author: ZackYoung <1052455...@qq.com>
AuthorDate: Mon Jul 24 13:56:31 2023 +0800

    [Optimize][Web]change MonacoEditor version (#6)
---
 paimon-web-ui/package.json                             |  2 +-
 paimon-web-ui/src/components/Editor/index.tsx          | 18 ++++++++++++------
 .../Playground/RightContent/TopPanel/Tab/index.tsx     | 13 ++++++++-----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/paimon-web-ui/package.json b/paimon-web-ui/package.json
index 40ae5f0..ef665fa 100644
--- a/paimon-web-ui/package.json
+++ b/paimon-web-ui/package.json
@@ -18,7 +18,7 @@
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
-    "react-monaco-editor": "^0.53.0"
+    "@monaco-editor/react": "^4.5.1"
   },
   "devDependencies": {
     "@types/node": "^20.3.2",
diff --git a/paimon-web-ui/src/components/Editor/index.tsx 
b/paimon-web-ui/src/components/Editor/index.tsx
index ddadd59..9fcf1c5 100644
--- a/paimon-web-ui/src/components/Editor/index.tsx
+++ b/paimon-web-ui/src/components/Editor/index.tsx
@@ -15,13 +15,18 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
-import MonacoEditor from 'react-monaco-editor'
+import {Editor as MonacoEditor} from "@monaco-editor/react";
+
+import React from "react";
 import useThemeSwitcher from "@utils/mode.ts";
 
-const Editor  = () => {
-    const { dark } = useThemeSwitcher();
+export type EditorProps = {
+    value?: string;
+    theme?: string;
+}
+const Editor:React.FC<EditorProps> = (props) => {
+    const {dark} = useThemeSwitcher();
 
-    console.log(dark)
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const handleEditorChange = (value, event) => {
@@ -35,10 +40,11 @@ const Editor  = () => {
     return (
         <div>
             <MonacoEditor
+                value={props.value}
                 width="auto"
                 height="500px"
                 language="java"
-                theme={dark ? 'hc-black' : 'hc-light'}
+                theme={dark ? 'vs-dark' : 'light'}
                 options={editorOptions}
                 onChange={handleEditorChange}
             />
@@ -46,5 +52,5 @@ const Editor  = () => {
     );
 };
 
-export default Editor ;
+export default Editor;
 
diff --git 
a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx 
b/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx
index 5222318..0eb8710 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx
+++ b/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx
@@ -15,20 +15,23 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
-import { useState } from 'react';
+import {useState} from 'react';
 import {TabPane, Tabs} from '@douyinfe/semi-ui';
 import {IconCode} from "@douyinfe/semi-icons";
 import Editor from "@components/Editor";
 
 const Index = () => {
+    const genContent = (value:string) => {
+      return <Editor value={value}/>
+    }
     const [tabList, setTabList] = useState([
-        { tab: 'user', itemKey: '1', content: <Editor/>, closable: true },
-        { tab: 'student', itemKey: '2', content: <Editor/>, closable: true }
+        { tab: 'user', itemKey: '1', content: genContent(""), closable: true },
+        { tab: 'student', itemKey: '2', content: genContent("12"), closable: 
true }
     ]);
 
+
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const close = (key) => {
+    const close = (key:string) => {
         const newTabList = tabList.filter((t) => t.itemKey !== key);
         setTabList(newTabList);
     };