add ads to editor

src/components/CarbonAds/index.tsx

@@ -2,14 +2,24 @@ import React from "react";
 import styled from "styled-components";
 
 const StyledWrapper = styled.div`
-  width: 100%;
-  height: 100%;
+  height: 100px;
+
+  #carbonads {
+    width: 100%;
+    display: flex;
+  }
+
+  #carbonads > span {
+    max-width: 100%;
+    width: 100%;
+  }
 `;
 
 export const CarbonAds = () => {
   return (
     <StyledWrapper>
       <script
+        defer
         type="text/javascript"
         src="//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsonvisiocom"
         id="_carbonads_js"

src/containers/Editor/index.tsx

@@ -1,12 +1,16 @@
 import React from "react";
+import dynamic from "next/dynamic";
 import { Sidebar } from "src/components/Sidebar";
-import { LiveEditor } from "src/containers/LiveEditor";
 import { JsonEditor } from "src/containers/JsonEditor";
 import { Incompatible } from "src/containers/Incompatible";
 import * as Styles from "src/containers/Editor/styles";
 import { useConfig } from "src/hocs/config";
 import { Allotment } from "allotment";
 
+const LiveEditor = dynamic(() => import("src/containers/LiveEditor"), {
+  ssr: false,
+});
+
 const Editor: React.FC = () => {
   const { settings } = useConfig();
 

src/containers/JsonEditor/index.tsx

@@ -7,6 +7,7 @@ import { ConfigActionType } from "src/reducer/reducer";
 import { useConfig } from "src/hocs/config";
 import { Loading } from "src/components/Loading";
 import { loader } from "@monaco-editor/react";
+import { CarbonAds } from "src/components/CarbonAds";
 
 loader.config({ paths: { vs: "/monaco-editor/min/vs" } });
 
@@ -25,6 +26,13 @@ const editorOptions = {
   },
 };
 
+const StyledWrapper = styled.div`
+  display: grid;
+  height: calc(100vh - 36px);
+  grid-template-columns: 1fr;
+  grid-auto-rows: 1fr 100px;
+`;
+
 export const JsonEditor: React.FC = () => {
   const { json, settings, dispatch } = useConfig();
   const [value, setValue] = React.useState("");
@@ -64,15 +72,18 @@ export const JsonEditor: React.FC = () => {
   return (
     <StyledEditorWrapper>
       <ErrorContainer error={error} setError={setError} />
-      <Editor
-        height="100%"
-        defaultLanguage="json"
-        value={value}
-        theme={editorTheme}
-        options={editorOptions}
-        loading={<Loading message="Loading Editor..." />}
-        onChange={(value) => setValue(value as string)}
-      />
+      <StyledWrapper>
+        <Editor
+          height="auto"
+          defaultLanguage="json"
+          value={value}
+          theme={editorTheme}
+          options={editorOptions}
+          loading={<Loading message="Loading Editor..." />}
+          onChange={(value) => setValue(value as string)}
+        />
+        <CarbonAds />
+      </StyledWrapper>
     </StyledEditorWrapper>
   );
 };

src/containers/LiveEditor/index.tsx

@@ -33,7 +33,7 @@ const wheelOptions = {
   step: 0.05,
 };
 
-export const LiveEditor: React.FC = React.memo(function LiveEditor() {
+const LiveEditor: React.FC = () => {
   const { dispatch } = useConfig();
 
   const onInit = (ref: ReactZoomPanPinchRef) => {
@@ -67,4 +67,6 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
       </StyledEditorWrapper>
     </StyledLiveEditor>
   );
-});
+};
+
+export default LiveEditor;

src/pages/editor.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 import Head from "next/head";
+import Editor from "src/containers/Editor";
 import styled from "styled-components";
-import dynamic from "next/dynamic";
-
-const Editor = dynamic(() => import("src/containers/Editor"), { ssr: false });
 
 const StyledEditorWrapper = styled.div``;