fix: clean up editors

Author: shanejonas

src/containers/ControlledMonacoEditor.tsx

@@ -77,7 +77,7 @@ const Inspector: React.FC<IProps> = (props) => {
         id: id.toString(),
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     if (json) {
@@ -87,7 +87,7 @@ const Inspector: React.FC<IProps> = (props) => {
         id: id.toString(),
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
   useEffect(() => {
@@ -171,7 +171,9 @@ const Inspector: React.FC<IProps> = (props) => {
           }
         }}>
         <JSONRPCRequest
-          onChange={(val) => setJson(JSON.parse(val))}
+          onChange={(val) => {
+            setJson(JSON.parse(val));
+          }}
           openrpcMethodObject={props.openrpcMethodObject}
           value={JSON.stringify(json, null, 4)}
         />

src/containers/Inspector.tsx

@@ -27,7 +27,6 @@ const MonacoContainer: React.FC<IProps> = ({ width, height, isEditorReady, loadi
   const classes = useStyles({});
   return (
     <section className={classes.wrapper} style={{ width, height }}>
-      {/* {!isEditorReady && <Loading content={loading} />} */}
       <div
         ref={reference}
         className={classes.fullWidth}

src/containers/MonacoContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, RefObject } from "react";
 import MonacoContainer from "./MonacoContainer";
 import * as monaco from "monaco-editor";
 
@@ -35,34 +35,31 @@ const MonacoEditor: React.FC<IProps> =
       editorDidMount(editorRef.current.getValue.bind(editorRef.current), editorRef.current);
 
       setIsEditorReady(true);
-      if (controlled) {
-        editorRef.current.onDidChangeModelContent((ev: any) => {
-          const currentValue = editorRef.current.getValue();
-          if ((currentValue !== previousValue.current) && !(ev.isUndoing || ev.isRedoing)) {
-            previousValue.current = currentValue;
-            if (onChange) {
-              const v = onChange(ev, currentValue);
-
-              if (typeof v === "string") {
-                if (currentValue !== v) {
-                  editorRef.current.setValue(v);
-                }
-              }
-            }
+      editorRef.current.onDidChangeModelContent((ev: any) => {
+        const currentValue = editorRef.current!.getValue();
+        if ((currentValue !== previousValue.current) && !(ev.isUndoing || ev.isRedoing)) {
+          previousValue.current = currentValue;
+          if (onChange) {
+            onChange(ev, currentValue);
           }
-        });
-      }
+        }
+      });
     };
 
     useEffect(() => {
-      if (editorRef.current) {
+      if (options && options.readOnly && editorRef.current) {
         editorRef.current.setValue(value);
+      } else if (editorRef.current && editorRef.current.getValue() !== value) {
+        editorRef.current.executeEdits("", [{
+          range: editorRef.current.getModel().getFullModelRange(),
+          text: value,
+        }]);
       }
-    }, [value, editorRef]);
+    }, [value]);
 
     useEffect(() => {
       createEditor();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return <MonacoContainer