migrate to monaco editor

src/components/control_panel.jsx

@@ -48,12 +48,11 @@ import {
 } from "../pages/editor";
 import { IconAddTable, IconAddArea, IconAddNote } from "./custom_icons";
 import { ObjectType, Action, Tab } from "../data/data";
-import CodeMirror from "@uiw/react-codemirror";
-import { json } from "@codemirror/lang-json";
 import jsPDF from "jspdf";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Validator } from "jsonschema";
 import { areaSchema, noteSchema, tableSchema } from "../schemas";
+import { Editor } from "@monaco-editor/react";
 
 export default function ControlPanel(props) {
   const MODAL = {
@@ -1079,7 +1078,7 @@ export default function ControlPanel(props) {
               !exportData.data),
         }}
         cancelText="Cancel"
-        width={520}
+        width={540}
       >
         {visible === MODAL.IMPORT ? (
           <div>
@@ -1191,16 +1190,12 @@ export default function ControlPanel(props) {
             {visible === MODAL.IMG ? (
               <Image src={exportData.data} alt="Diagram" height={220} />
             ) : (
-              <div className="max-h-[400px] overflow-auto border border-gray-200">
-                <CodeMirror
-                  value={exportData.data}
-                  extensions={[json()]}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                  }}
-                />
-              </div>
+              <Editor
+                height="360px"
+                value={exportData.data}
+                language="json"
+                options={{ readOnly: true }}
+              />
             )}
             <div className="text-sm font-semibold mt-2">Filename:</div>
             <Input

src/components/editor_panel.jsx

@@ -1,8 +1,4 @@
 import { React, useContext } from "react";
-import CodeMirror from "@uiw/react-codemirror";
-import { createTheme } from "@uiw/codemirror-themes";
-import { sql } from "@codemirror/lang-sql";
-import { tags as t } from "@lezer/highlight";
 import { Tabs } from "@douyinfe/semi-ui";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
@@ -12,20 +8,6 @@ import { LayoutContext, TabContext } from "../pages/editor";
 import NotesOverview from "./notes_overview";
 import Issues from "./issues";
 
-const myTheme = createTheme({
-  dark: "light",
-  settings: {},
-  styles: [
-    { tag: t.comment, color: "#8ab0ed" },
-    { tag: t.string, color: "#e68e29" },
-    { tag: t.number, color: "#e68e29" },
-    { tag: t.keyword, color: "#295be6" },
-    { tag: t.variableName, color: "#1a00db" },
-    { tag: t.typeName, color: "#295be6" },
-    { tag: t.tagName, color: "#008a02" },
-  ],
-});
-
 const EditorPanel = (props) => {
   const { tab, setTab } = useContext(TabContext);
   const { layout } = useContext(LayoutContext);
@@ -34,22 +16,12 @@ const EditorPanel = (props) => {
     { tab: "Tables", itemKey: Tab.tables },
     { tab: "Relationships", itemKey: Tab.relationships },
     { tab: "Subject Areas", itemKey: Tab.subject_areas },
-    { tab: "Editor", itemKey: Tab.editor },
     { tab: "Notes", itemKey: Tab.notes },
   ];
   const contentList = [
     <TableOverview />,
     <ReferenceOverview />,
     <AreaOverview />,
-    <CodeMirror
-      value={props.code}
-      height="100%"
-      theme={myTheme}
-      extensions={[sql()]}
-      onChange={(e) => {
-        props.setCode(e);
-      }}
-    />,
     <NotesOverview />,
   ];
 

src/data/data.js

@@ -64,8 +64,7 @@ const Tab = {
   tables: "1",
   relationships: "2",
   subject_areas: "3",
-  editor: "4",
-  notes: "5",
+  notes: "4",
 };
 
 const ObjectType = {

src/pages/editor.jsx

@@ -1,8 +1,6 @@
 import React, { useState, createContext, useEffect } from "react";
 import Sidebar from "../components/sidebar";
 import ControlPanel from "../components/control_panel";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
 import Canvas from "../components/canvas";
 import EditorPanel from "../components/editor_panel";
 import {
@@ -23,7 +21,6 @@ export const UndoRedoContext = createContext();
 export const SelectContext = createContext();
 
 export default function Editor(props) {
-  const [code, setCode] = useState("");
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
@@ -416,18 +413,14 @@ export default function Editor(props) {
                         onMouseUp={() => setResize(false)}
                         onMouseMove={dragHandler}
                       >
-                        <DndProvider backend={HTML5Backend}>
-                          {layout.sidebar && (
-                            <EditorPanel
-                              code={code}
-                              setCode={setCode}
-                              resize={resize}
-                              setResize={setResize}
-                              width={width}
-                            />
-                          )}
-                          <Canvas code={code} setCode={setCode} />
-                        </DndProvider>
+                        {layout.sidebar && (
+                          <EditorPanel
+                            resize={resize}
+                            setResize={setResize}
+                            width={width}
+                          />
+                        )}
+                        <Canvas />
                         {layout.services && <Sidebar />}
                       </div>
                     </div>