added placeholder support to MultiLineEditor component

packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js

@@ -13,6 +13,12 @@ const StyledWrapper = styled.div`
     line-height: 30px;
     overflow: hidden;
 
+    pre.CodeMirror-placeholder {
+      color: ${(props) => props.theme.text};
+      padding-left: 0;
+      opacity: 0.5;
+    }
+
     .CodeMirror-scroll {
       overflow: hidden !important;
       ${'' /* padding-bottom: 50px !important; */}

packages/bruno-app/src/components/MultiLineEditor/index.js

@@ -28,6 +28,7 @@ class MultiLineEditor extends Component {
       lineWrapping: false,
       lineNumbers: false,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
+      placeholder: this.props.placeholder,
       mode: 'brunovariables',
       brunoVarInfo: {
         variables: getAllVariables(this.props.collection)

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -24,6 +24,14 @@ const Wrapper = styled.div`
         width: 30%;
       }
 
+      &:nth-child(2) {
+        width: 45%;
+      }
+
+      &:nth-child(3) {
+        width: 25%;
+      }
+
       &:nth-child(4) {
         width: 70px;
       }

packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js

@@ -151,6 +151,7 @@ const MultipartFormParams = ({ item, collection }) => {
                       <MultiLineEditor
                         onSave={onSave}
                         theme={storedTheme}
+                        placeholder="Auto"
                         value={param.contentType}
                         onChange={(newValue) =>
                           handleParamChange(

packages/bruno-app/src/pages/Bruno/index.js

@@ -31,6 +31,7 @@ if (!SERVER_RENDERED) {
   require('codemirror/addon/search/jump-to-line');
   require('codemirror/addon/search/search');
   require('codemirror/addon/search/searchcursor');
+  require('codemirror/addon/display/placeholder');
   require('codemirror/keymap/sublime');
 
   require('codemirror-graphql/hint');