fix: UI issues with code editor

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -89,9 +89,6 @@ const ResponseContainer = styled.div`
   .react-tabs__tab-panel {
     overflow: hidden;
   }
-  .CodeMirror-code {
-    font-size: 12px;
-  }
 `;
 const ResponseMetaInfo = styled.div`
   display: flex;
@@ -332,7 +329,6 @@ export const responseTabComponent = (
         input={{
           value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
-        isReadOnly
       />
     ),
     [API_RESPONSE_TYPE_OPTIONS.TABLE]: (
@@ -347,7 +343,6 @@ export const responseTabComponent = (
           value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
         isRawView
-        isReadOnly
       />
     ),
   }[responseType];
@@ -562,7 +557,6 @@ function ApiResponseView(props: Props) {
                       input={{
                         value: response?.body,
                       }}
-                      isReadOnly
                     />
                   ) : responseTabs &&
                     responseTabs.length > 0 &&
@@ -627,7 +621,6 @@ function ApiResponseView(props: Props) {
                     ? JSON.stringify(responseHeaders, null, 2)
                     : "",
                 }}
-                isReadOnly
               />
             )}
           </ResponseDataContainer>

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -278,8 +278,8 @@ class CodeEditor extends Component<Props, State> {
   annotations: Annotation[] = [];
   updateLintingCallback: UpdateLintingCallback | undefined;
   private editorWrapperRef = React.createRef<HTMLDivElement>();
+  currentLineNumber: number | null = null;
   AIEnabled = false;
-  lineRef: React.MutableRefObject<number | null> = React.createRef();
 
   constructor(props: Props) {
     super(props);
@@ -902,15 +902,15 @@ class CodeEditor extends Component<Props, State> {
       cm.setOption("matchBrackets", false);
     }
     if (!this.props.borderLess) return;
-    if (this.lineRef.current !== null) {
+    if (this.currentLineNumber !== null) {
       cm.removeLineClass(
-        this.lineRef.current,
+        this.currentLineNumber,
         "background",
         "CodeMirror-activeline-background",
       );
     }
     cm.addLineClass(line, "background", "CodeMirror-activeline-background");
-    this.lineRef.current = line;
+    this.currentLineNumber = line;
   };
 
   handleEditorFocus = (cm: CodeMirror.Editor) => {
@@ -981,13 +981,13 @@ class CodeEditor extends Component<Props, State> {
         line: cursor.line,
       },
     });
-    if (this.lineRef.current !== null) {
+    if (this.currentLineNumber !== null) {
       cm.removeLineClass(
-        this.lineRef.current,
+        this.currentLineNumber,
         "background",
         "CodeMirror-activeline-background",
       );
-      this.lineRef.current = null;
+      this.currentLineNumber = null;
     }
     if (this.props.onEditorBlur) {
       this.props.onEditorBlur();

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

@@ -43,7 +43,7 @@ const editorBackground = (theme?: EditorTheme) => {
   return bg;
 };
 
-const codeMirrorColors = {
+export const CodeEditorColors = {
   KEYWORD: "#304eaa",
   FOLD_MARKER: "#442334",
   STRING: "#1659df",
@@ -128,7 +128,7 @@ export const EditorWrapper = styled.div<{
     .cm-s-duotone-light.CodeMirror {
       border-radius: 0px;
       font-family: ${(props) => props.theme.fonts.code};
-      font-size: 13px;
+      font-size: ${(props) => (props.isReadOnly ? "12px" : "13px")};
       border: 1px solid
         ${(props) => {
           switch (true) {
@@ -149,14 +149,14 @@ export const EditorWrapper = styled.div<{
       color: ${Colors.CHARCOAL};
       & {
         span.cm-operator {
-          color: ${codeMirrorColors.OPERATOR};
+          color: ${CodeEditorColors.OPERATOR};
         }
       }
       .cm-property {
         color: hsl(21, 70%, 53%);
       }
       .cm-keyword {
-        color: #304eaa;
+        color: ${CodeEditorColors.KEYWORD};
       }
 
       .CodeMirror-foldgutter {
@@ -179,7 +179,7 @@ export const EditorWrapper = styled.div<{
       }
       .cm-string,
       .token.string {
-        color: ${codeMirrorColors.STRING};
+        color: ${CodeEditorColors.STRING};
       }
 
       /* json response in the debugger */
@@ -206,7 +206,7 @@ export const EditorWrapper = styled.div<{
       .cm-def,
       .cm-property + span + .cm-def,
       .cm-def + span + .cm-def {
-        color: ${codeMirrorColors.FUNCTION_ARGS};
+        color: ${CodeEditorColors.FUNCTION_ARGS};
       }
 
       .cm-atom + span + .cm-property,
@@ -225,7 +225,7 @@ export const EditorWrapper = styled.div<{
       }
 
       span.cm-number {
-        color: ${codeMirrorColors.NUMBER};
+        color: ${CodeEditorColors.NUMBER};
       }
 
       .cm-s-duotone-light span.cm-variable-2,
@@ -368,8 +368,18 @@ export const EditorWrapper = styled.div<{
       padding: ${(props) => props.theme.spaces[2]}px 0px;
       background-color: ${(props) => props.disabled && "#eef2f5"};
       cursor: ${(props) => (props.disabled ? "not-allowed" : "text")};
+      pre.CodeMirror-line,
+      pre.CodeMirror-line-like {
+        padding: 0 ${(props) => props.theme.spaces[2]}px;
+      }
     }
   }
+
+  pre.CodeMirror-line,
+  pre.CodeMirror-line-like {
+    padding: 0 ${(props) => props.theme.spaces[3]}px;
+  }
+
   ${(props) =>
     props.className === "js-editor" &&
     `

app/client/src/components/editorComponents/LazyCodeEditor/CodeEditorFallback.tsx

@@ -9,13 +9,19 @@ import {
 } from "./styles";
 import { ContentKind } from "./types";
 import type { EditorProps } from "components/editorComponents/CodeEditor";
+import { JS_OBJECT_START_STATEMENT } from "workers/Linting/constants";
 
 export default function CodeEditorFallback({
   input,
+  isReadOnly,
   onInteracted,
   placeholder,
+  showLineNumbers,
   showLoadingProgress,
-}: Pick<EditorProps, "input" | "placeholder"> & {
+}: Pick<
+  EditorProps,
+  "input" | "placeholder" | "showLineNumbers" | "isReadOnly"
+> & {
   onInteracted: () => void;
   showLoadingProgress: boolean;
 }) {
@@ -26,7 +32,11 @@ export default function CodeEditorFallback({
   if (!parsedValue) {
     contentKind = ContentKind.PLACEHOLDER;
     fallbackToRender = placeholder || "";
-  } else if (typeof parsedValue === "string" && parsedValue.includes("{{")) {
+  } else if (
+    typeof parsedValue === "string" &&
+    (parsedValue.includes("{{") ||
+      parsedValue.startsWith(JS_OBJECT_START_STATEMENT))
+  ) {
     contentKind = ContentKind.CODE;
     fallbackToRender = parsedValue;
   } else if (Array.isArray(parsedValue) || typeof parsedValue === "object") {
@@ -48,7 +58,7 @@ export default function CodeEditorFallback({
   }
 
   return (
-    <ContentWrapper contentKind={contentKind}>
+    <ContentWrapper contentKind={contentKind} showLineNumbers={showLineNumbers}>
       {showLoadingProgress && (
         <ProgressContainer>
           <SpinnerContainer>
@@ -60,8 +70,10 @@ export default function CodeEditorFallback({
       <HighlighedCodeContainer
         className="LazyCodeEditor"
         contentKind={contentKind}
+        isReadOnly={isReadOnly}
         onFocus={onInteracted}
         onMouseEnter={onInteracted}
+        showLineNumbers={showLineNumbers}
         tabIndex={0}
       >
         <pre>{fallbackToRender}</pre>

app/client/src/components/editorComponents/LazyCodeEditor/index.tsx

@@ -227,10 +227,12 @@ function LazyCodeEditor({ input, placeholder, ...otherProps }: EditorProps) {
       <LazyEditorWrapper className="t--lazyCodeEditor-fallback">
         <CodeEditorFallback
           input={input}
+          isReadOnly={otherProps.isReadOnly}
           onInteracted={() => {
             stateMachine.current.transition("PLACEHOLDER_INTERACTED");
           }}
           placeholder={placeholder}
+          showLineNumbers={otherProps.showLineNumbers}
           showLoadingProgress={showLoadingProgress}
         />
       </LazyEditorWrapper>

app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx

@@ -1,36 +1,44 @@
 import styled, { keyframes } from "styled-components";
 import { ContentKind } from "./types";
+import { CodeEditorColors } from "../CodeEditor/styledComponents";
 
 export const HighlighedCodeContainer = styled("div")<{
   contentKind: ContentKind;
+  showLineNumbers?: boolean;
+  isReadOnly?: boolean;
 }>`
   width: 100%;
   background-color: #fff !important;
-  font-family: monospace !important;
   font-weight: 400 !important;
   line-height: 21px !important;
 
   min-height: inherit;
-  padding-top: 6px !important;
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-  padding-bottom: 6px !important;
+  padding: 6px;
 
   pre {
+    font-family: ${(props) => props.theme.fonts.code};
     margin: 0 !important;
     overflow: hidden !important;
-    font-size: 14px !important;
-    font-family: monospace !important;
+    font-size: ${(props) => (props.isReadOnly ? "12px" : "13px")} !important;
     padding: 0 !important;
+    tab-size: 2 !important;
     background: white !important;
+    ${(props) => {
+      if (props.isReadOnly) {
+        return "padding-left: 35px !important";
+      }
+      if (props.showLineNumbers) {
+        return "padding-left: 47px !important";
+      }
+    }};
 
     word-wrap: break-word !important;
     white-space: pre-wrap !important;
     word-break: normal !important;
 
     color: ${({ contentKind }) =>
       contentKind === ContentKind.CODE
-        ? "#063289"
+        ? CodeEditorColors.KEYWORD
         : contentKind === ContentKind.PLACEHOLDER
         ? "#858282"
         : "inherit"} !important;
@@ -43,6 +51,8 @@ export const LazyEditorWrapper = styled("div")`
 
 export const ContentWrapper = styled("div")<{
   contentKind: ContentKind;
+  showLineNumbers?: boolean;
+  folding?: boolean;
 }>`
   overflow: hidden;
   width: 100%;
@@ -51,6 +61,7 @@ export const ContentWrapper = styled("div")<{
   min-height: 34px;
   border: 1px solid;
   border-color: inherit;
+  ${(props) => props.showLineNumbers && "border: none"}
 `;
 
 const opacityAnimation = keyframes`

app/client/src/components/editorComponents/ReadOnlyEditor.tsx

@@ -18,7 +18,6 @@ interface Props {
   height: string;
   folding: boolean;
   showLineNumbers?: boolean;
-  isReadOnly?: boolean;
   isRawView?: boolean;
   containerHeight?: number;
 }
@@ -39,7 +38,7 @@ function ReadOnlyEditor(props: Props) {
       : true,
     borderLess: true,
     folding: props.folding,
-    isReadOnly: props.isReadOnly,
+    isReadOnly: true,
     isRawView: props.isRawView,
     containerHeight: props.containerHeight,
     border: CodeEditorBorder.NONE,