fix: markdown descriptions + add vim mode + add text to show ctrl+space help

fixes #120

Author: shanejonas

package-lock.json

@@ -58,6 +58,7 @@
     "@rehooks/window-size": "^1.0.2",
     "acorn-dynamic-import": "^4.0.0",
     "monaco-editor": "^0.18.1",
+    "monaco-vim": "0.0.14",
     "qs": "^6.8.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

package.json

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ChangeEvent, Dispatch, useRef } from "react";
+import React, { useState, useEffect, ChangeEvent, Dispatch } from "react";
 import SplitPane from "react-split-pane";
 import JSONRPCRequestEditor from "./JSONRPCRequestEditor";
 import PlayCircle from "@material-ui/icons/PlayCircleFilled";
@@ -33,6 +33,7 @@ import useTabs from "../hooks/useTabs";
 import { useDebounce } from "use-debounce";
 import { green } from "@material-ui/core/colors";
 import { parseOpenRPCDocument } from "@open-rpc/schema-utils-js";
+import useMonacoVimMode from "../hooks/useMonacoVimMode";
 
 const errorToJSON = (error: JSONRPCError | undefined): any => {
   if (!error) {
@@ -120,14 +121,15 @@ const Inspector: React.FC<IProps> = (props) => {
     ],
   );
   const [id, incrementId] = useCounter(0);
+  const [responseEditor, setResponseEditor] = useState();
+  useMonacoVimMode(responseEditor);
   const [openrpcDocument, setOpenRpcDocument] = useState();
   const [json, setJson] = useState(props.request || {
     jsonrpc: "2.0",
     method: "",
     params: [],
     id,
   });
-  const editorRef = useRef();
   const [results, setResults] = useState();
   const [url, setUrl] = useState(props.url || "");
   const [debouncedUrl] = useDebounce(url, 1000);
@@ -193,7 +195,7 @@ const Inspector: React.FC<IProps> = (props) => {
     }
   };
   function handleResponseEditorDidMount(__: any, editor: any) {
-    editorRef.current = editor;
+    setResponseEditor(editor);
   }
 
   const clear = () => {
@@ -363,7 +365,7 @@ const Inspector: React.FC<IProps> = (props) => {
           </Tab>
         </Tabs>
       </div>
-      <AppBar elevation={0} position="static">
+      <AppBar elevation={0} position="static" style={{ zIndex: 1 }}>
         <Toolbar>
           <img
             height="30"
@@ -428,8 +430,8 @@ const Inspector: React.FC<IProps> = (props) => {
         defaultSize={"50%"}
         style={{ flexGrow: 1 }}
         onChange={() => {
-          if (editorRef && editorRef.current) {
-            (editorRef.current as any).layout();
+          if (responseEditor) {
+            responseEditor.layout();
           }
         }}>
         <JSONRPCRequestEditor
@@ -476,7 +478,11 @@ const Inspector: React.FC<IProps> = (props) => {
               value={JSON.stringify(errorToJSON(error) || results, null, 4) || ""}
             />
             : <Grid container justify="center" style={{ paddingTop: "20px" }}>
-              <Typography variant="caption">Press the Play button to see the results here.</Typography>
+              <Typography variant="caption" gutterBottom>Press the Play button to see the results here.</Typography>
+              <Typography variant="caption">
+                Use <Button variant="contained" disabled size="small" style={{marginRight: "3px"}}>CTRL + SPACE</Button>
+                 to auto-complete in the editor.
+              </Typography>
             </Grid>
           }
         </>

src/containers/Inspector.tsx

@@ -1,10 +1,11 @@
-import React, { useRef, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import MonacoEditor from "@etclabscore/react-monaco-editor";
 import * as monaco from "monaco-editor";
 import { MethodObject, ContentDescriptorObject, OpenrpcDocument } from "@open-rpc/meta-schema";
 import useWindowSize from "@rehooks/window-size";
 import { addDiagnostics } from "@etclabscore/monaco-add-json-schema-diagnostics";
 import openrpcDocumentToJSONRPCSchema from "../helpers/openrpcDocumentToJSONRPCSchema";
+import useMonacoVimMode from "../hooks/useMonacoVimMode";
 
 interface IProps {
   onChange?: (newValue: any) => void;
@@ -14,23 +15,24 @@ interface IProps {
 }
 
 const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
-  const editorRef = useRef<any>();
+  const [editor, setEditor] = useState();
+  useMonacoVimMode(editor);
   const windowSize = useWindowSize();
   useEffect(() => {
-    if (editorRef !== undefined && editorRef.current !== undefined) {
-      (editorRef.current as any).layout();
+    if (editor) {
+      editor.layout();
     }
-  }, [windowSize]);
+  }, [windowSize, editor]);
 
   useEffect(() => {
-    if (!editorRef.current) {
+    if (!editor) {
       return;
     }
     const modelName = props.openrpcMethodObject ? props.openrpcMethodObject.name : "inspector";
     const modelUriString = `inmemory://${modelName}-${Math.random()}.json`;
     const modelUri = monaco.Uri.parse(modelUriString);
     const model = monaco.editor.createModel(props.value || "", "json", modelUri);
-    editorRef.current.setModel(model);
+    editor.setModel(model);
     let schema: any = {
       type: "object",
       properties: {
@@ -108,11 +110,11 @@ const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
     }
     addDiagnostics(modelUri.toString(), schema, monaco);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.openrpcDocument, props.openrpcMethodObject]);
 
-  function handleEditorDidMount(_: any, editor: any) {
-    editorRef.current = editor;
+  function handleEditorDidMount(_: any, ed: any) {
+    setEditor(ed);
   }
 
   const handleChange = (ev: any, value: any) => {

src/containers/JSONRPCRequestEditor.tsx

@@ -38,7 +38,8 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
         oneOf: openrpcDocument.methods.map((method) => {
           return {
             const: method.name,
-            description: method.description || method.summary,
+            markdownDescription: method.description || method.summary,
+            description: method.summary,
           };
         }),
       },
@@ -54,9 +55,6 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
         },
         then: {
           properties: {
-            method: {
-              description: method.description || method.summary,
-            },
             params: {
               oneOf: [
                 {
@@ -66,13 +64,15 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
                   defaultSnippets: method.examples ? method.examples.map((example: any) => {
                     return {
                       label: example.name,
-                      description: example.description,
+                      description: example.description || example.summary,
                       body: example.params.map((ex: ExampleObject) => ex.value),
                     };
                   }) : [],
                   items: method.params.map((param: any) => {
                     return {
                       ...param.schema,
+                      markdownDescription: param.description || param.summary,
+                      description: param.summary,
                       additionalProperties: false,
                     };
                   }),
@@ -83,6 +83,8 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
                     .reduce((memo: any, param: ContentDescriptorObject) => {
                       memo[param.name] = {
                         ...param.schema,
+                        markdownDescription: param.description || param.summary,
+                        description: param.summary,
                         additionalProperties: false,
                       };
                       return memo;

src/helpers/openrpcDocumentToJSONRPCSchema.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+import * as monaco from "monaco-editor";
+const { initVimMode } = require("monaco-vim"); //tslint:disable-line
+
+// Vim Mode:
+// Press Chord Ctrl-K, Ctrl-V => the action will run if it is enabled
+const useMonacoVimMode = (editor: monaco.editor.IStandaloneCodeEditor) => {
+  const [vimMode, setVimMode] = useState();
+
+  useEffect(() => {
+    if (!editor) { return; }
+
+    editor.addAction({
+      id: "vim-mode",
+      label: "Vim Mode",
+      keybindings: [
+        monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V), //tslint:disable-line
+      ],
+      contextMenuGroupId: "navigation",
+      contextMenuOrder: 1.5,
+      run: () => {
+        if (vimMode) {
+          vimMode.dispose();
+        }
+        setVimMode(initVimMode(editor));
+      },
+    });
+
+    return () => {
+      if (vimMode) {
+        vimMode.dispose();
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+
+  return [editor, vimMode];
+};
+
+export default useMonacoVimMode;