refactor(editor-monaco): enhance Monaco Editor integration with React (#4978)

Author: char0n

src/plugins/editor-monaco/components/MonacoEditor/MonacoEditor.jsx

@@ -74,17 +74,17 @@ const MonacoEditor = ({
   }, [value, language, theme, isReadOnly]);
 
   const disposeEditor = useCallback(() => {
-    onWillUnmount(editorRef.current);
+    onWillUnmount(editorRef.current, monaco);
     subscriptionRef.current?.dispose();
     editorRef.current.getModel()?.dispose();
     editorRef.current.dispose();
   }, [onWillUnmount]);
 
   // disposing of Monaco Editor
-  useMount(() => () => {
-    if (editorRef.current) {
-      disposeEditor();
-    }
+  useMount(() => {
+    return () => {
+      if (editorRef.current) disposeEditor();
+    };
   });
 
   // defining the custom themes and setting the active one
@@ -134,9 +134,13 @@ const MonacoEditor = ({
   );
 
   // settings the theme if changed
-  useEffect(() => {
-    monaco.editor.setTheme(theme);
-  }, [theme]);
+  useUpdate(
+    () => {
+      monaco.editor.setTheme(theme);
+    },
+    [theme],
+    isEditorReady
+  );
 
   // register listener for validation markers
   useEffect(() => {
@@ -188,7 +192,7 @@ const MonacoEditor = ({
 
   // creating Editor instance as last effect
   useEffect(() => {
-    if (!isEditorReady && containerRef.current) {
+    if (!isEditorReady) {
       createEditor();
     }
   }, [isEditorReady, createEditor]);