feat: monaco editor is updated (#851)

frontend/package.json

@@ -22,6 +22,7 @@
 	"license": "ISC",
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
+		"@monaco-editor/react": "^4.3.1",
 		"@grafana/data": "^8.4.3",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
@@ -52,7 +53,6 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"mini-css-extract-plugin": "2.4.5",
-		"monaco-editor": "^0.30.0",
 		"react": "17.0.0",
 		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",

frontend/src/components/Editor/index.tsx

-import * as monaco from 'monaco-editor';
-import React, { useEffect, useRef } from 'react';
-
-import { Container } from './styles';
+import MEditor from '@monaco-editor/react';
+import React from 'react';
 
 const Editor = ({ value }: EditorProps): JSX.Element => {
-	const divEl = useRef<HTMLDivElement>(null);
-	const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
-
-	useEffect(() => {
-		let editor = editorRef.current;
-
-		if (divEl.current) {
-			editor = monaco.editor.create(divEl.current, {
-				value: value.current || '',
-				useShadowDOM: true,
-				theme: 'vs-dark',
-				automaticLayout: true,
-				fontSize: 16,
-				minimap: {
-					enabled: false,
-				},
-				language: 'yaml',
-			});
-		}
-
-		editor?.getModel()?.onDidChangeContent(() => {
-			value.current = editor?.getValue() || '';
-		});
-
-		return (): void => {
-			if (editor) {
-				editor.dispose();
-			}
-		};
-	}, [value]);
-
-	return <Container ref={divEl} />;
+	return (
+		<MEditor
+			theme="vs-dark"
+			defaultLanguage="yaml"
+			value={value.current}
+			options={{ fontSize: 16, automaticLayout: true }}
+			height={'40vh'}
+		/>
+	);
 };
 
 interface EditorProps {

frontend/src/components/Editor/styles.ts

-import styled from 'styled-components';
-
-export const Container = styled.div`
-	&&& {
-		min-height: 40vh;
-		width: 100%;
-	}
-`;