Update dependencies and refactor Editor component

- Added React 17.0.1 and ReactDOM 17.0.1 to importmap in `index.html`.
- Introduced `@monaco-editor/react` version 4.7.0 in `package.json` and updated `pnpm-lock.yaml`.
- Refactored `Editor.jsx` to use hooks and `@monaco-editor/react` instead of `react-monaco-editor`.
- Adjusted Vite config to enable sourcemaps.

Author: souravrax

index.html

@@ -13,6 +13,8 @@
   <script type="importmap">
     {
       "imports": {
+        "react": "https://esm.sh/[email protected]",
+        "react-dom": "https://esm.sh/[email protected]",
         "react-monaco-editor": "https://esm.sh/[email protected]",
         "react-resize-detector": "https://esm.sh/[email protected]"
       }

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.1",
   "private": true,
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^1.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

pnpm-lock.yaml

@@ -1,8 +1,5 @@
-import React, { Component } from "react";
-
-const MonacoEditor = React.lazy(() => import("react-monaco-editor"))
-
-import ReactResizeDetector from 'react-resize-detector'
+import React, { useState, useEffect, useRef, lazy, Suspense } from "react";
+import MonacoEditor from '@monaco-editor/react'
 
 import PropTypes from 'prop-types'
 
@@ -12,102 +9,106 @@ import { setCode } from '../app/master/master-actions'
 
 import languageToSyntax from '../assets/mapLanguageToSyntax.json';
 
-class Editor extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            height: 0,
-            width: 0,
-            isReady: false
-        };
-        this.editorContainerRef = React.createRef();
-    }
-
-
-    editorDidMount = (editor, monaco) => {
+const Editor = (props) => {
+    const {
+        language,
+        code,
+        setCode,
+        theme,
+        minimapStatus,
+        showUnused,
+        selectOnLineNumbers,
+        scrollbar,
+        quickSuggestion,
+        showFoldingControls,
+    } = props;
+
+
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const [isReady, setIsReady] = useState(false);
+    const editorContainerRef = useRef(null);
+    const resizeObserver = useRef(null);
+    const [editorOptions, setEditorOptions] = useState({});
+
+    const editorDidMount = (editor, monaco) => {
         editor.onKeyDown(event => {
             const { browserEvent, ctrlKey } = event;
             const { key } = browserEvent;
             if (key === 's' && ctrlKey) {
                 event.preventDefault();
-            } else if(key == 'Enter' && ctrlKey) {
+            } else if(key === 'Enter' && ctrlKey) {
                 event.preventDefault();
                 alert("Execute");
             }
         });
     };
 
-    componentDidMount() {
-        this.setState({
-            ...this.state,
-            isReady: true
-        })
-    }
-
-    handleResize = (width, height) => {
-        this.setState({
-            ...this.state,
-            height: height,
-            width: width
-        })
-    }
-
-    render() {
-        const { width, height, isReady } = this.state;
-        const {
-            language,
-            code,
-            setCode,
-            theme,
-            minimapStatus,
-            showUnused,
-            selectOnLineNumbers,
-            scrollbar,
-            quickSuggestion,
-            showFoldingControls,
-        } = this.props;
-
-        return (
-            <div style={{
-                height: "100%",
-                width: "100%"
-            }} ref={this.editorContainerRef}>
-                <ReactResizeDetector
-                    handleWidth
-                    handleHeight
-                    onResize={this.handleResize}
-                    refreshMode="debounce"
-                    refreshRate={50}
-                    targetRef={this.editorContainerRef} />
-                {
-                    isReady ? <MonacoEditor
-                        height={height}
-                        width={width}
-                        language={languageToSyntax[language]}
-                        theme={`vs-${theme}`}
-                        value={code}
-                        options={{
-                            minimap: {
-                                enabled: minimapStatus
-                            },
-                            showFoldingControls: showFoldingControls,
-                            selectOnLineNumbers: selectOnLineNumbers,
-                            scrollbar: scrollbar,
-                            quickSuggestions: quickSuggestion,
-                            showUnused: showUnused
-                        }}
-                        onChange={(newCode, event) => {
-                            setCode(newCode);
-                        }}
-                        editorDidMount={this.editorDidMount}
-                        editorWillMount={this.editorWillMount}
-                    /> : null
-                }
-            </div>
-        );
-    }
-}
+    useEffect(() => {
+        resizeObserver.current = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                const { width, height } = entry.contentRect;
+                handleResize(width, height);
+            }
+        });
+
+        if (editorContainerRef.current) {
+            resizeObserver.current.observe(editorContainerRef.current);
+        }
 
+        setIsReady(true);
+
+        return () => {
+            if (resizeObserver.current) {
+                resizeObserver.current.disconnect();
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        setEditorOptions({
+            minimap: {
+                enabled: minimapStatus
+            },
+            showFoldingControls: showFoldingControls,
+            selectOnLineNumbers: selectOnLineNumbers,
+            scrollbar: scrollbar,
+            quickSuggestions: quickSuggestion,
+            showUnused: showUnused
+        });
+    }, [minimapStatus, showFoldingControls, selectOnLineNumbers, scrollbar, quickSuggestion, showUnused]);
+
+    const handleResize = (newWidth, newHeight) => {
+        setWidth(newWidth);
+        setHeight(newHeight);
+    };
+
+    return (
+        <div style={{
+            height: "100%",
+            width: "100%"
+        }} ref={editorContainerRef}>
+            {
+                isReady ? (
+                    <Suspense fallback={<div>Loading Editor...</div>}>
+                        <MonacoEditor
+                            height={height}
+                            width={width}
+                            language={languageToSyntax[language]}
+                            theme={`vs-${theme}`}
+                            value={code}
+                            options={editorOptions}
+                            onChange={(newCode, event) => {
+                                setCode(newCode);
+                            }}
+                            editorDidMount={editorDidMount}
+                        />
+                    </Suspense>
+                ) : null
+            }
+        </div>
+    );
+}
 
 Editor.propTypes = {
     editorOptions: PropTypes.object,

src/components/Editor.jsx

@@ -18,8 +18,6 @@ import { PersistGate } from "redux-persist/integration/react";
 // Components/Containers Imports
 import App from "./App.jsx";
 
-console.log("Hello World");
-
 // ReactDOM Render
 ReactDOM.render(
   <Provider store={store}>

src/index.jsx

@@ -10,9 +10,6 @@ export default defineConfig({
     jsx: "preserve",
   },
   build: {
-    rollupOptions: {
-      external: ["react-monaco-editor", "react-resize-detector"],
-    },
-    minify: true,
+    sourcemap: true,
   },
 });