From 7f7221ee9a3d668de3058e3f5542ac10d4ba48a5 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Thu, 31 Oct 2019 10:00:47 +0000
Subject: [PATCH] Passing height and language as props to CodeEditor

---
 .../src/components/editor/ApiResponseView.tsx  |  2 ++
 .../src/components/editor/CodeEditor.tsx       | 18 +++++++-----------
 .../src/components/fields/JSONEditorField.tsx  |  2 ++
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/editor/ApiResponseView.tsx b/app/client/src/components/editor/ApiResponseView.tsx
index 16dab691d8..fe96f93d3b 100644
--- a/app/client/src/components/editor/ApiResponseView.tsx
+++ b/app/client/src/components/editor/ApiResponseView.tsx
@@ -141,6 +141,8 @@ const ApiResponseView = (props: Props) => {
               <ResponseBodyWrapper>
                 {response.body && (
                   <CodeEditor
+                    height={500}
+                    language={"json"}
                     input={{
                       value: JSON.stringify(response.body, null, 2),
                     }}
diff --git a/app/client/src/components/editor/CodeEditor.tsx b/app/client/src/components/editor/CodeEditor.tsx
index 4bad33f026..8e83dcd5a9 100644
--- a/app/client/src/components/editor/CodeEditor.tsx
+++ b/app/client/src/components/editor/CodeEditor.tsx
@@ -1,17 +1,10 @@
 import React from "react";
-// import Editor from "react-simple-code-editor";
-// import { highlight, languages } from "prismjs/components/prism-core";
-// import "prismjs/components/prism-clike";
-// import "prismjs/components/prism-json";
-// import "prismjs/components/prism-markup";
-// import "prismjs/themes/prism.css";
-// import { theme } from "../../constants/DefaultTheme";
 import MonacoEditor from "react-monaco-editor";
 
 import styled from "styled-components";
 
-const Wrapper = styled.div`
-  height: 500px;
+const Wrapper = styled.div<{ height: number }>`
+  height: ${props => props.height}px;
   overflow: auto;
 `;
 
@@ -20,6 +13,8 @@ interface Props {
     value: string;
     onChange?: (value: string) => void;
   };
+  language: string;
+  height: number;
   placeholder?: string;
 }
 
@@ -29,10 +24,11 @@ const CodeEditor = (props: Props) => {
     minimap: { enabled: false },
     readOnly: !props.input.onChange,
   };
+  debugger;
   return (
-    <Wrapper>
+    <Wrapper height={props.height}>
       <MonacoEditor
-        language="json"
+        language={props.language}
         theme="vs-light"
         value={props.input.value}
         options={options}
diff --git a/app/client/src/components/fields/JSONEditorField.tsx b/app/client/src/components/fields/JSONEditorField.tsx
index 31f7fa9e8d..feb5dcab5d 100644
--- a/app/client/src/components/fields/JSONEditorField.tsx
+++ b/app/client/src/components/fields/JSONEditorField.tsx
@@ -7,6 +7,8 @@ const JSONEditorField = (props: { name: string }) => {
     <Field
       name={props.name}
       component={CodeEditor}
+      height={500}
+      language={"json"}
       format={(value: string | object) =>
         typeof value === "string" ? value : JSON.stringify(value, null, 2)
       }