use codemirror editor in request and output nodes

Author: jsajal

src/components/atoms/Editor.css

@@ -0,0 +1,7 @@
+.cm-editor {
+  height: 380px;
+  width: 380px;
+}
+.cm-scroller {
+  overflow: auto;
+}

src/components/atoms/Editor.js

@@ -7,6 +7,7 @@ import { indentWithTab, history } from '@codemirror/commands';
 import { json } from '@codemirror/lang-json';
 import { defaultKeymap } from '@codemirror/commands';
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+import 'components/atoms/Editor.css';
 
 export const Editor = ({ ...props }) => {
   const editor = useRef();
@@ -39,5 +40,5 @@ export const Editor = ({ ...props }) => {
     };
   }, []);
 
-  return <div ref={editor} className='max-h-96 max-w-80'></div>;
+  return <div ref={editor} className='cm-editor cm-scroller'></div>;
 };

src/components/molecules/flow/nodes/OutputNode.js

@@ -12,7 +12,7 @@ const OutputNode = ({ id, data }) => {
       handleRight={true}
       handleRightData={{ type: 'source' }}
     >
-      <div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-h-96 min-w-80 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
+      <div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-h-96 min-w-96 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
         {data.output ? (
           <Editor name='output-text' value={JSON.stringify(data.output, null, 2)} readOnly={true} />
         ) : (

src/components/molecules/flow/nodes/RequestBody.js

@@ -130,7 +130,7 @@ const RequestBody = ({ nodeId, nodeData }) => {
         <>
           <NodeHorizontalDivider />
           <div className='p-4 bg-background'>
-            <div className='w-full nodrag nowheel min-w-72'>
+            <div className='w-full nodrag nowheel min-w-72 bg-gray-50'>
               <Editor name='request-body-json' onChange={(e) => handleRawJson(e)} value={nodeData.requestBody.body} />
               <Button
                 btnType={BUTTON_TYPES.secondary}