implement monaco editor

package.json

@@ -40,20 +40,11 @@
     "@babel/runtime-corejs3": "7.20.13",
     "@back4app/back4app-settings": "1.6.5",
     "@back4app2/react-components": "1.0.0-beta.440.64",
-    "@codemirror/lang-css": "6.3.0",
-    "@codemirror/lang-html": "6.4.9",
-    "@codemirror/lang-javascript": "6.2.2",
-    "@codemirror/lang-json": "6.0.1",
-    "@codemirror/lang-xml": "6.1.0",
-    "@codemirror/language": "6.10.3",
-    "@codemirror/lint": "6.8.2",
-    "@lezer/highlight": "1.2.1",
+    "@monaco-editor/react": "4.7.0",
     "@paddle/paddle-js": "1.4.2",
     "@sentry/react": "8.52.0",
     "@stripe/react-stripe-js": "^3.9.0",
     "@stripe/stripe-js": "^7.8.0",
-    "@uiw/codemirror-themes": "4.23.6",
-    "@uiw/react-codemirror": "4.23.6",
     "axios": "1.5.1",
     "axios-rate-limit": "1.3.0",
     "bcryptjs": "2.3.0",
@@ -68,7 +59,6 @@
     "csvtojson": "2.0.10",
     "express": "4.19.2",
     "file-loader": "6.2.0",
-    "globals": "15.12.0",
     "graphiql": "2.0.8",
     "graphql": "16.8.1",
     "html-webpack-externals-plugin": "3.8.0",
@@ -83,6 +73,7 @@
     "js-cookie": "3.0.5",
     "jstree": "3.3.16",
     "lottie-react": "2.4.0",
+    "monaco-editor": "0.55.1",
     "otpauth": "8.0.3",
     "package-json": "7.0.0",
     "papaparse": "5.5.2",

src/components/B4ACloudCodeView/B4ACloudCodeView.react.js

@@ -1,85 +1,24 @@
 import React from 'react';
-// import SyntaxHighlighter from 'react-syntax-highlighter';
-// import style from 'react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night-eighties';
-// import CodeEditor from '../CodeEditor/CodeEditor.react';
-// import * as modelist from 'ace-builds/src-noconflict/ext-modelist.js';
-// import 'ace-builds/src-noconflict/mode-graphqlschema';
 import B4aCodeEditor from '../CodeEditor/B4aCodeEditor.react';
 import { getExtension } from '../B4ACodeTree/B4ATreeActions';
 
-// const pageSize = 4000;
 export default class B4ACloudCodeView extends React.Component {
-  constructor(props){
-    super(props);
-    const codePenConfig = {
-      title: 'Back4AppCloudCodePen',
-    }
-
-    if (this.props.extension) {
-      switch(this.props.extension) {
-        case 'js':
-          codePenConfig['js'] = this.props.source;
-          break;
-        case 'ejs':
-          codePenConfig['html'] = this.props.source;
-          break;
-      }
-    } else {
-      codePenConfig['js'] = this.props.source;
-    }
-
-    this.state = {
-      codePenConfig,
-    };
-  }
-
-  componentWillReceiveProps(props) {
-    this.editor.value = props.source;
-  }
-
-  componentDidUpdate() {
-    let key = 'js';
-
-    switch (this.props.extension) {
-      case 'js':
-        key = 'js';
-        break;
-      case 'ejs':
-        key = 'html';
-        break;
-    }
-
-    if (this.props.source !== this.state.codePenConfig[key]) {
-      const newState = this.state.codePenConfig;
-      newState[key] = this.props.source;
-      this.setState(newState);
-    }
-  }
-
   extensionDecoder() {
     if (this.props.fileName && typeof this.props.fileName === 'string') {
       return getExtension(this.props.fileName);
     }
-    return 'javascript'
+    return 'javascript';
   }
 
   render() {
-    // if (style.hljs) {
-    //   style.hljs.background = 'rgb(255 255 255)';
-    //   style.hljs.color = 'rgb(0 0 0)';
-    //   style.hljs.height = '100%';
-    //   style.hljs.padding = '1em 0.5em';
-    // }
     return (
-      <div style={{ height: 'calc(100% - 40px)'}} >
+      <div style={{ height: 'calc(100% - 40px)' }}>
         <B4aCodeEditor
-          style={{ zIndex: 4 }}
           fontSize={13}
           fileName={this.props.fileName}
           code={this.props.source}
-          onCodeChange={(value) => this.props.onCodeChange(value)}
+          onCodeChange={value => this.props.onCodeChange(value)}
           mode={this.extensionDecoder()}
-          ref={editor => (this.editor = editor)}
           readOnly={this.props.readOnly || false}
         />
       </div>