feat(monaco): add monaco components

config/config.ts

@@ -6,6 +6,8 @@ import defaultSettings from './defaultSettings';
 import proxy from './proxy';
 import routes from './routes';
 
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
 const { REACT_APP_ENV } = process.env;
 
 export default defineConfig({
@@ -74,4 +76,11 @@ export default defineConfig({
   // mfsu: {},
   webpack5: {},
   // exportStatic: {},
+  chainWebpack(memo, { env, webpack, createCSSRule }) {
+    memo.plugin('monaco-editor').use(
+      new MonacoWebpackPlugin({
+        languages: ['json', 'javascript', 'typescript', 'sql'],
+      }),
+    );
+  },
 });

package.json

@@ -79,11 +79,14 @@
     "jetlinks-store": "^0.0.3",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",
+    "monaco-editor": "^0.30.0",
+    "monaco-editor-webpack-plugin": "^6.0.0",
     "omit.js": "^2.0.2",
     "react": "^17.0.0",
     "react-dev-inspector": "^1.1.1",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
+    "react-monaco-editor": "^0.46.0",
     "reconnecting-websocket": "^4.4.0",
     "rxjs": "^7.2.0",
     "rxjs-websockets": "8",

src/components/FMonacoEditor/index.tsx

@@ -0,0 +1,5 @@
+import MonacoEditor from 'react-monaco-editor';
+import { connect, mapProps } from '@formily/react';
+
+const FMonacoEditor = connect(MonacoEditor, mapProps());
+export default FMonacoEditor;