Merge pull request #4956 from bacteriostat/feature/single-line-editor-placeholder

feat: Add placeholder for SingleLineEditor

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

@@ -26,6 +26,11 @@ const StyledWrapper = styled.div`
 
     .CodeMirror-lines {
       padding: 0;
+
+      .CodeMirror-placeholder {
+        color: ${(props) => props.theme.codemirror.placeholder.color} !important;
+        opacity:  ${(props) => props.theme.codemirror.placeholder.opacity} !important
+      }
     }
 
     .CodeMirror-cursor {

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

@@ -46,6 +46,7 @@ class SingleLineEditor extends Component {
     const noopHandler = () => {};
 
     this.editor = CodeMirror(this.editorRef.current, {
+      placeholder: this.props.placeholder ?? '',
       lineWrapping: false,
       lineNumbers: false,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',

packages/bruno-app/src/themes/dark.js

@@ -248,6 +248,10 @@ const darkTheme = {
   codemirror: {
     bg: '#1e1e1e',
     border: '#373737',
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.50
+    },
     gutter: {
       bg: '#262626'
     },

packages/bruno-app/src/themes/light.js

@@ -249,6 +249,10 @@ const lightTheme = {
   codemirror: {
     bg: 'white',
     border: '#efefef',
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.75
+    },
     gutter: {
       bg: '#f3f3f3'
     },