diff --git a/package-lock.json b/package-lock.json
index a587bcd..1817f0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,24 +8,17 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-sql": "^6.5.0",
         "@douyinfe/semi-ui": "^2.36.0",
-        "@lezer/highlight": "^1.1.5",
+        "@monaco-editor/react": "^4.5.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "@uiw/codemirror-themes": "^4.20.2",
-        "@uiw/react-codemirror": "^4.20.2",
-        "codemirror": "^5.65.13",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
         "jsonschema": "^1.4.1",
         "jspdf": "^2.5.1",
         "node-sql-parser": "^4.7.0",
         "react": "^18.2.0",
-        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "^4.4.1",
         "react-router-dom": "^6.11.2",
@@ -2129,114 +2122,6 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
-    "node_modules/@codemirror/autocomplete": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz",
-      "integrity": "sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.6.0",
-        "@lezer/common": "^1.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/commands": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
-      "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/lang-json": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
-      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@lezer/json": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/lang-sql": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.5.2.tgz",
-      "integrity": "sha512-VYiCbApDDRUVx3k0jtZ+b5h2hMkMKZpPR9tx+VgVA3Euuf2MVjVsjx/S2+4AlJjKjS5J6z9+4bEvtponK96e4A==",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/language": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.8.0.tgz",
-      "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
-    "node_modules/@codemirror/lint": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.3.0.tgz",
-      "integrity": "sha512-tzxOVQNoDhhwFNfcTO2IB74wQoWarARcH6gv3YufPpiJ9yhcb7zD6JCkO5+FWARskqRFc8GFa6E+wUyOvADl5A==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/search": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.0.tgz",
-      "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/state": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
-      "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
-    },
-    "node_modules/@codemirror/theme-one-dark": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
-      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/view": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.14.0.tgz",
-      "integrity": "sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg==",
-      "dependencies": {
-        "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.0.0",
-        "w3c-keyname": "^2.2.4"
-      }
-    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -3722,34 +3607,28 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@lezer/common": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.3.tgz",
-      "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
-    },
-    "node_modules/@lezer/highlight": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
-      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
+      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
       "dependencies": {
-        "@lezer/common": "^1.0.0"
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
       }
     },
-    "node_modules/@lezer/json": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.1.tgz",
-      "integrity": "sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==",
+    "node_modules/@monaco-editor/react": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz",
+      "integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==",
       "dependencies": {
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/lr": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.7.tgz",
-      "integrity": "sha512-ssHKb3p0MxhJXT2i7UBmgAY1BIM3Uq/D772Qutu3EVmxWIyNMU12nQ0rL3Fhu+MiFtiTzyTmd3xGwEf3ON5PSA==",
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
+        "@monaco-editor/loader": "^1.3.3"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
@@ -3861,21 +3740,6 @@
         }
       }
     },
-    "node_modules/@react-dnd/asap": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
-      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
-    },
-    "node_modules/@react-dnd/invariant": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
-      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
-    },
-    "node_modules/@react-dnd/shallowequal": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
-      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
-    },
     "node_modules/@remix-run/router": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz",
@@ -4907,80 +4771,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@uiw/codemirror-extensions-basic-setup": {
-      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.4.tgz",
-      "integrity": "sha512-2W7jZlkY5DZJ31sWGyFHEtm96EHSql41iT1Ao7Kxai17vGGjzz9UgsE9BX+3k251ArDeF8R3lvGrzMA/SXl8kg==",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/autocomplete": ">=6.0.0",
-        "@codemirror/commands": ">=6.0.0",
-        "@codemirror/language": ">=6.0.0",
-        "@codemirror/lint": ">=6.0.0",
-        "@codemirror/search": ">=6.0.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0"
-      }
-    },
-    "node_modules/@uiw/codemirror-themes": {
-      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.4.tgz",
-      "integrity": "sha512-Zp0rPMji9MzV4cTwUHP/CP8JpAQ80cTNaXeVef7kyRZv6TznIjV3VrevXox5C2CoaJc/dygXc2K/JFl9CdrLpQ==",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/language": ">=6.0.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0"
-      }
-    },
-    "node_modules/@uiw/react-codemirror": {
-      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.4.tgz",
-      "integrity": "sha512-N9N6bX5cUj/FmNepV6d8HE+oH7DA2GlyqNZb8gss7l77dvpme1saphjoOLg1gRmOi2MlQydNsz5PundoN9VBtQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.6",
-        "@codemirror/commands": "^6.1.0",
-        "@codemirror/state": "^6.1.1",
-        "@codemirror/theme-one-dark": "^6.0.0",
-        "@uiw/codemirror-extensions-basic-setup": "4.21.4",
-        "codemirror": "^6.0.0"
-      },
-      "peerDependencies": {
-        "@babel/runtime": ">=7.11.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/theme-one-dark": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0",
-        "codemirror": ">=6.0.0",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@uiw/react-codemirror/node_modules/codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -6392,11 +6182,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/codemirror": {
-      "version": "5.65.13",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.13.tgz",
-      "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -6634,11 +6419,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/crelt": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
-      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7310,16 +7090,6 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
-    "node_modules/dnd-core": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
-      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
-      "dependencies": {
-        "@react-dnd/asap": "^5.0.1",
-        "@react-dnd/invariant": "^4.0.1",
-        "redux": "^4.2.0"
-      }
-    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -9276,19 +9046,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -15159,43 +14916,6 @@
         "node": ">= 12.13.0"
       }
     },
-    "node_modules/react-dnd": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
-      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "dependencies": {
-        "@react-dnd/invariant": "^4.0.1",
-        "@react-dnd/shallowequal": "^4.0.1",
-        "dnd-core": "^16.0.1",
-        "fast-deep-equal": "^3.1.3",
-        "hoist-non-react-statics": "^3.3.2"
-      },
-      "peerDependencies": {
-        "@types/hoist-non-react-statics": ">= 3.3.1",
-        "@types/node": ">= 12",
-        "@types/react": ">= 16",
-        "react": ">= 16.14"
-      },
-      "peerDependenciesMeta": {
-        "@types/hoist-non-react-statics": {
-          "optional": true
-        },
-        "@types/node": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-dnd-html5-backend": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
-      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "dependencies": {
-        "dnd-core": "^16.0.1"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -15436,14 +15156,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/redux": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16311,6 +16023,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -16518,11 +16235,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/style-mod": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
-      "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
-    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -17420,11 +17132,6 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
-    "node_modules/w3c-keyname": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
-      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
diff --git a/package.json b/package.json
index 9dc159d..f169771 100644
--- a/package.json
+++ b/package.json
@@ -3,24 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-sql": "^6.5.0",
     "@douyinfe/semi-ui": "^2.36.0",
-    "@lezer/highlight": "^1.1.5",
+    "@monaco-editor/react": "^4.5.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@uiw/codemirror-themes": "^4.20.2",
-    "@uiw/react-codemirror": "^4.20.2",
-    "codemirror": "^5.65.13",
     "file-saver": "^2.0.5",
     "html-to-image": "^1.11.11",
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
     "node-sql-parser": "^4.7.0",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.1",
     "react-router-dom": "^6.11.2",
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 09933f4..b79d93f 100644
--- a/src/components/control_panel.jsx
+++ b/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
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 15955ee..3342a55 100644
--- a/src/components/editor_panel.jsx
+++ b/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 />,
   ];
 
diff --git a/src/data/data.js b/src/data/data.js
index 5fe2674..5ecf245 100644
--- a/src/data/data.js
+++ b/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 = {
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 51ba978..5c48c9d 100644
--- a/src/pages/editor.jsx
+++ b/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>