From 91c3abae37b24d1ce837e9baf5e05c8628fc4afd Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Fri, 17 Mar 2023 15:12:31 +0530
Subject: [PATCH] feat: editor is updated (#2464)

---
 frontend/src/components/Editor/index.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Editor/index.tsx b/frontend/src/components/Editor/index.tsx
index a58df3778e..e24fab3c80 100644
--- a/frontend/src/components/Editor/index.tsx
+++ b/frontend/src/components/Editor/index.tsx
@@ -1,6 +1,6 @@
 import MEditor, { EditorProps } from '@monaco-editor/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 function Editor({
 	value,
@@ -11,16 +11,24 @@ function Editor({
 	options,
 }: MEditorProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
+
+	const onChangeHandler = (newValue?: string): void => {
+		if (typeof newValue === 'string' && onChange) onChange(newValue);
+	};
+
+	const editorOptions = useMemo(
+		() => ({ fontSize: 16, automaticLayout: true, readOnly, ...options }),
+		[options, readOnly],
+	);
+
 	return (
 		<MEditor
 			theme={isDarkMode ? 'vs-dark' : 'vs-light'}
 			language={language}
 			value={value}
-			options={{ fontSize: 16, automaticLayout: true, readOnly, ...options }}
+			options={editorOptions}
 			height={height}
-			onChange={(newValue): void => {
-				if (typeof newValue === 'string') onChange(newValue);
-			}}
+			onChange={onChangeHandler}
 		/>
 	);
 }
@@ -28,7 +36,7 @@ function Editor({
 interface MEditorProps {
 	value: string;
 	language?: string;
-	onChange: (value: string) => void;
+	onChange?: (value: string) => void;
 	readOnly?: boolean;
 	height?: string;
 	options?: EditorProps['options'];
@@ -39,6 +47,7 @@ Editor.defaultProps = {
 	readOnly: false,
 	height: '40vh',
 	options: {},
+	onChange: (): void => {},
 };
 
 export default Editor;