final

heysujal · Apr 6, 2022 · 5cdd1c9 · 5cdd1c9
1 parent cb87631
commit 5cdd1c9
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 107 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,10 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "codemirror": "^5.65.2",
     "react": "^18.0.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,49 @@
+ import { useState,useEffect} from "react";
+import Editor from "./Editor";
+
+function App() {
+  const [html, setHtml] = useState("");
+  const [css, setCss] = useState("");
+  const [js, setJs] = useState("");
+  const [srcDoc,setSrcDoc] = useState("");
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setSrcDoc(`<html>
+      <body>
+      ${html}
+      </body>
+      <style>${css}</style>
+      <script>${js}</script>
+      </html>`)
+    }, 250);
+
+    return () => clearTimeout(timeout);
+  }, [html, css, js])
+
+
+  return (
+    <div className="App">
+   <div className="pane top-pane">
+
+    <Editor language="xml" displayName="HTML" value={html} onChange={setHtml}/>
+    <Editor language="css" displayName="CSS" value={css} onChange={setCss}/>
+    <Editor language="javascript" displayName="JS" value={js} onChange={setJs} />
+
+
+   </div>
+   <div className="pane">
+     <iframe 
+
+       title="output"
+       sandbox="allow-scripts"
+       frameBorder="0"
+       width="100%"
+        srcDoc={srcDoc}
+
+       height="100%"/> 
+   </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -0,0 +1,39 @@
+import React, {useState} from 'react'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/material.css'
+import 'codemirror/mode/xml/xml'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/css/css'
+import { Controlled as ControlledEditor } from 'react-codemirror2'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCompressAlt,faExpandAlt } from '@fortawesome/free-solid-svg-icons'
+const Editor = (props) => {
+
+
+  const {language, displayName,value, onChange } = props
+  const [open, setOpen] = useState(true)
+  function handleChange(editor, data, value){
+   onChange(value)
+  }
+  return (
+    <div className= {`editor-container ${open ? '' : 'collapsed'}`}>
+
+<div className='editor-title'>
+
+{displayName}
+<button type='button' className='expand-collapse-btn' onClick={()=>setOpen(prevOpen => !prevOpen)}><FontAwesomeIcon icon={open?faCompressAlt:faExpandAlt}/></button>
+
+</div>
+<ControlledEditor onBeforeChange={handleChange} value={value}
+className="code-mirror-wrapper" 
+options={{lineWrapping:true,
+lint:true,
+mode:language,
+lineNumbers:true,
+theme:'material' }}/>
+
+    </div>
+  )
+}
+
+export default Editor