layout grid

TestMasterUI/src/components/shared/MonacoEditor.jsx

@@ -10,10 +10,10 @@ const MonacoEditor = memo(({
   onChange = () => {}
 }) => {
   const editorRef = useRef(null);
+  const modelRef = useRef(null);
   const containerRef = useRef(null);
   const subscriptionRef = useRef(null);
 
-  // Configure editor options based on language
   const getEditorOptions = (lang) => {
     const baseOptions = {
       automaticLayout: true,
@@ -31,7 +31,6 @@ const MonacoEditor = memo(({
       }
     };
 
-    // Language-specific options
     switch (lang) {
       case 'json':
         return {
@@ -55,97 +54,59 @@ const MonacoEditor = memo(({
     }
   };
 
-  // Initialize or update editor
-  const setupEditor = () => {
+  useEffect(() => {
     if (!containerRef.current) return;
 
-    // Dispose existing editor if it exists
-    if (editorRef.current) {
-      editorRef.current.dispose();
-    }
+    const modelUri = monaco.Uri.parse(`inmemory://model-${id}`);
+    modelRef.current = monaco.editor.createModel(value, language, modelUri);
 
-    // Create new editor with language-specific options
     const options = getEditorOptions(language);
     editorRef.current = monaco.editor.create(containerRef.current, {
-      value,
-      language,
-      ...options
+      ...options,
+      model: modelRef.current
     });
 
-    // Set up change event handler
-    if (subscriptionRef.current) {
-      subscriptionRef.current.dispose();
-    }
-
     subscriptionRef.current = editorRef.current.onDidChangeModelContent(() => {
-      const newValue = editorRef.current.getValue();
-      onChange(newValue);
+      onChange(editorRef.current.getValue());
     });
 
-    // Format document if it's JSON
     if (language === 'json' && value) {
       try {
-        const modelUri = monaco.Uri.parse(`inmemory://model-${id}.json`);
-        const model = monaco.editor.createModel(value, 'json', modelUri);
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          allowComments: false,
+          schemas: []
+        });
         setTimeout(() => {
-          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            allowComments: false,
-            schemas: []
-          });
-          editorRef.current.setModel(model);
+          const action = editorRef.current?.getAction('editor.action.formatDocument');
+          if (action) action.run();
         }, 100);
       } catch (e) {
         console.warn('Failed to format JSON:', e);
       }
     }
-  };
 
-  // Initial setup
-  useEffect(() => {
-    setupEditor();
-
-    // Set up resize observer
     const resizeObserver = new ResizeObserver(() => {
-      if (editorRef.current) {
-        editorRef.current.layout();
-      }
+      editorRef.current?.layout();
     });
 
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
+    resizeObserver.observe(containerRef.current);
 
-    // Cleanup
     return () => {
       resizeObserver.disconnect();
-      if (subscriptionRef.current) {
-        subscriptionRef.current.dispose();
-      }
-      if (editorRef.current) {
-        editorRef.current.dispose();
+      subscriptionRef.current?.dispose();
+      editorRef.current?.dispose();
+      if (modelRef.current && !modelRef.current.isDisposed()) {
+        modelRef.current.dispose();
       }
     };
-  }, [language]); // Reinitialize when language changes
+  }, [language]);
 
-  // Update value if it changes externally
   useEffect(() => {
-    if (editorRef.current && value !== editorRef.current.getValue()) {
-      editorRef.current.setValue(value);
-
-      // Add formatting for JSON
-      if (language === 'json' && value) {
-        try {
-          const action = editorRef.current.getAction('editor.action.formatDocument');
-          if (action) {
-            action.run();
-          }
-        } catch (e) {
-          console.warn('Failed to format JSON:', e);
-        }
-      }
+    if (modelRef.current && !modelRef.current.isDisposed()) {
+      modelRef.current.setValue(value);
     }
-  }, [value, language]);
+  }, [value]);
 
   return (
       <div