use monaco editor for http request body field

Composer/packages/client/config/webpack.config.js

@@ -413,7 +413,7 @@ module.exports = function(webpackEnv) {
     plugins: [
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-        languages: ['markdown', 'botbuilderlg'],
+        languages: ['markdown', 'botbuilderlg', 'json'],
       }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(

Composer/packages/extensions/obiformeditor/src/Form/fields/JsonField.tsx

@@ -1,53 +1,46 @@
 import React, { useState } from 'react';
-import { UnControlled as CodeMirror } from 'react-codemirror2';
 import { FieldProps } from '@bfcomposer/react-jsonschema-form';
+import { RichEditor } from 'code-editor';
+import { EditorWillMount } from '@bfcomposer/react-monaco-editor';
 
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/lib/codemirror.css';
-
-import './codemirror-fabric.css';
 import './styles.css';
-import { BaseField } from './BaseField';
 
-const cmOptions = {
-  theme: 'fabric',
-  viewportMargin: Infinity,
-  mode: {
-    name: 'javascript',
-    json: true,
-  },
-  lineNumbers: true,
-  lineWrapping: true,
-  indentWithTabs: false,
-  tabSize: 2,
-  smartIndent: true,
-  height: 'auto',
-};
+import { BaseField } from './BaseField';
 
 export const JsonField: React.FC<FieldProps> = props => {
-  const [parseError, setParseError] = useState(false);
+  const [value, setValue] = useState<string>(JSON.stringify(props.formData, null, 2));
+  const [parseError, setParseError] = useState<string>('');
 
-  const saveValue = value => {
+  const handleChange = value => {
+    setValue(value);
     try {
       const data = JSON.parse(value);
       props.onChange(data);
-      setParseError(false);
+      setParseError('');
     } catch (err) {
-      setParseError(true);
+      setParseError('invalid json');
     }
   };
 
+  const handleMount: EditorWillMount = monaco => {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+    });
+  };
+
   return (
     <BaseField {...props} className="JsonField">
-      <CodeMirror
-        value={JSON.stringify(props.formData, null, 2)}
-        options={cmOptions}
-        className={parseError ? 'CodeMirror--error' : ''}
-        onChange={(editor, data, value) => {
-          saveValue(value);
-        }}
-        autoCursor={false}
-      />
+      <div style={{ height: '315px' }}>
+        <RichEditor
+          language="json"
+          onChange={handleChange}
+          errorMsg={parseError}
+          editorWillMount={handleMount}
+          options={{ folding: false }}
+          value={value}
+          helpURL="https://www.json.org"
+        />
+      </div>
     </BaseField>
   );
 };

Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css

@@ -45,23 +45,6 @@
   margin-top: 30px;
   padding-top: 4px;
 }
-.JsonField .react-codemirror2, .CodeField .react-codemirror2 {
-  margin-top: 0;
-  border: 1px solid #a19f9d;
-  border-radius: 2px;
-  max-height: 600px;
-  overflow: scroll;
-}
-.JsonField .CodeMirror, .CodeField .CodeMirror {
-  height: auto;
-}
-.JsonField .CodeMirror--error, .CodeField .CodeMirror--error {
-  border: 2px solid #e81123;
-}
-.CodeFieldModeSelector {
-  margin-bottom: 20px;
-  max-width: 300px;
-}
 a {
   color: black;
 }

Composer/packages/lib/code-editor/demo/webpack.config.demo.js

@@ -113,7 +113,7 @@ module.exports = {
     }),
     new MonacoWebpackPlugin({
       // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-      languages: ['markdown', 'botbuilderlg'],
+      languages: ['markdown', 'botbuilderlg', 'json'],
     }),
   ],
 };