fix: move monaco init into editorDidMount + fix resize

open-rpc · Dec 3, 2019 · e789b3f · e789b3f
1 parent 649f1a3
commit e789b3f
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@monaco-editor/react": "^2.3.0",
     "@open-rpc/client-js": "^1.2.1",
     "@open-rpc/meta-schema": "^1.5.3",
+    "@rehooks/window-size": "^1.0.2",
     "qs": "^6.8.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

diff --git a/src/containers/JSONRPCRequest.tsx b/src/containers/JSONRPCRequest.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import useDarkMode from "use-dark-mode";
 import { monaco, ControlledEditor, Monaco } from "@monaco-editor/react";
 import { MethodObject } from "@open-rpc/meta-schema";
+import useWindowSize from "@rehooks/window-size";
 
 interface IProps {
   onChange?: (newValue: any) => void;
@@ -11,71 +12,84 @@ interface IProps {
 
 const JSONRPCRequest: React.FC<IProps> = (props) => {
   const darkMode = useDarkMode();
-  monaco
-    .init()
-    .then((m: Monaco) => {
-      const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
-      let schema: any = {
-        type: "object",
-        properties: {
-          jsonrpc: {
-            type: "string",
-            enum: ["2.0"],
-          },
-          id: {
-            oneOf: [
-              {
-                type: "string",
-              },
-              {
-                type: "number",
-              },
-            ],
-          },
-          method: {
-            type: "string",
-          },
-          params: {
-            type: "array",
-          },
-        },
-      };
-      if (props.openrpcMethodObject) {
-        schema = {
-          ...schema,
-          additionalProperties: false,
+  const editorRef = useRef();
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    if (editorRef !== undefined && editorRef.current !== undefined) {
+      (editorRef.current as any).layout();
+    }
+  }, [windowSize]);
+
+  function handleEditorDidMount(_: any, editor: any) {
+    editorRef.current = editor;
+    // Now you can use the instance of monaco editor
+    // in this component whenever you want
+    monaco
+      .init()
+      .then((m: Monaco) => {
+        const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
+        let schema: any = {
+          type: "object",
           properties: {
-            ...schema.properties,
+            jsonrpc: {
+              type: "string",
+              enum: ["2.0"],
+            },
+            id: {
+              oneOf: [
+                {
+                  type: "string",
+                },
+                {
+                  type: "number",
+                },
+              ],
+            },
             method: {
               type: "string",
-              enum: [props.openrpcMethodObject.name],
             },
             params: {
-              ...schema.properties.params,
-              items: props.openrpcMethodObject.params.map((param: any) => {
-                return {
-                  ...param.schema,
-                  additionalProperties: false,
-                };
-              }),
+              type: "array",
             },
           },
         };
-      }
-      m.languages.json.jsonDefaults.setDiagnosticsOptions({
-        enableSchemaRequest: true,
-        schemas: [
-          {
-            fileMatch: ["*"],
-            schema,
-            uri: modelUri.toString(),
-          },
-        ],
-        validate: true,
-      });
-      window.addEventListener("resize", m.editor.layout());
-    })
-    .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
+        if (props.openrpcMethodObject) {
+          schema = {
+            ...schema,
+            additionalProperties: false,
+            properties: {
+              ...schema.properties,
+              method: {
+                type: "string",
+                enum: [props.openrpcMethodObject.name],
+              },
+              params: {
+                ...schema.properties.params,
+                items: props.openrpcMethodObject.params.map((param: any) => {
+                  return {
+                    ...param.schema,
+                    additionalProperties: false,
+                  };
+                }),
+              },
+            },
+          };
+        }
+        m.languages.json.jsonDefaults.setDiagnosticsOptions({
+          enableSchemaRequest: true,
+          schemas: [
+            {
+              fileMatch: ["*"],
+              schema,
+              uri: modelUri.toString(),
+            },
+          ],
+          validate: true,
+        });
+      })
+      .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
+  }
 
   const handleChange = (ev: any, value: any) => {
     if (props.onChange) {
@@ -88,6 +102,7 @@ const JSONRPCRequest: React.FC<IProps> = (props) => {
       <ControlledEditor
         theme={darkMode.value ? "dark" : "light"}
         value={props.value}
+        editorDidMount={handleEditorDidMount}
         language="json"
         onChange={handleChange}
       />