Merge pull request reactplay#482 from yung-coder/main

Code Editor
rh-abir · Aug 19, 2022 · f8f1e3e · f8f1e3e
2 parents 3efb9bc + 99d8f53
commit f8f1e3e
Show file tree

Hide file tree

Showing 10 changed files with 580 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
  "@types/react-dom": "^18.0.2",
  "add": "^2.0.6",
  "axios": "^0.27.2",
+ "codemirror": "^5.65.7",
  "date-fns": "^2.28.0",
  "downloadjs": "^1.4.7",
  "firebase": "^9.8.2",
@@ -26,6 +27,7 @@
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
+ "react-codemirror2": "^7.2.1",
  "react-dom": "^18.0.0",
  "react-helmet": "^6.1.0",
  "react-hot-toast": "^2.3.0",

diff --git a/src/plays/code-editor/Button.jsx b/src/plays/code-editor/Button.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const Button = ({ title, backgroundColor, border, onClick }) => {
+ return (
+ <div>
+ <button
+ className="code-editor-btn"
+ style={{
+ backgroundColor: backgroundColor,
+ border: border
+ }}
+ onClick={onClick}
+ >
+ {title}
+ </button>
+ </div>
+ );
+};
+
+export default Button;
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
@@ -0,0 +1,123 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import "./styles.css";
+import React, { useState, useEffect } from "react";
+import Editor from "./Editor";
+import Button from './Button'
+import Modal from './Modal';
+// WARNING: Do not change the entry componenet name
+function CodeEditor(props) {
+ // Your Code Start below.
+ const [openedEditor, setOpenedEditor] = useState("html");
+ const [activeButton, setActiveButton] = useState("html");
+
+ const [html, setHtml] = useState("");
+ const [css, setCss] = useState("");
+ const [js, setJs] = useState("");
+ const [srcDoc, setSrcDoc] = useState(``);
+
+ const onTabClick = (editorName) => {
+ setOpenedEditor(editorName);
+ setActiveButton(editorName);
+ };
+
+ useEffect(() => {
+ const timeOut = setTimeout(() => {
+ setSrcDoc(
+ `
+ <html>
+ <body>${html}</body>
+ <style>${css}</style>
+ <script>${js}</script>
+ </html>
+ `
+ );
+ }, 250);
+
+ return () => clearTimeout(timeOut);
+ }, [html, css, js]);
+
+ const [showModal, setShowModal] = useState(false);
+
+ const toggle = (e) => {
+
+ setShowModal(!showModal);
+ };
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body ">
+ {/* Your Code Starts Here */}
+ <div className="code-editor-modal-toogle">
+ <button onClick={toggle}>How to Use ?</button>
+ </div>
+ <div className="code-editor-tab-button-container">
+ <Button
+ backgroundColor={activeButton === "html" ? "#98AFC7" : ""}
+ title="HTML"
+ onClick={() => {
+ onTabClick("html");
+ }}
+ />
+ <Button
+ backgroundColor={activeButton === "css" ? "#98AFC7" : ""}
+ title="CSS"
+ onClick={() => {
+ onTabClick("css");
+ }}
+ />
+ <Button
+ backgroundColor={activeButton === "js" ? "#98AFC7" : ""}
+ title="JavaScript"
+ onClick={() => {
+ onTabClick("js");
+ }}
+ />
+ </div>
+ <div className="code-editor-container">
+ {openedEditor === "html" ? (
+ <Editor
+ language="xml"
+ displayName="HTML"
+ value={html}
+ setEditorState={setHtml}
+ />
+ ) : openedEditor === "css" ? (
+ <Editor
+ language="css"
+ displayName="CSS"
+ value={css}
+ setEditorState={setCss}
+ />
+ ) : (
+ <Editor
+ language="javascript"
+ displayName="JS"
+ value={js}
+ setEditorState={setJs}
+ />
+ )}
+ </div> 
+ <div className="code-editor-heading-output">
+ <h1>Output</h1>
+ </div>
+ <div className="code-editor-bottom-pane">
+ <iframe
+ id="my_iframe"
+ srcDoc={srcDoc}
+ title="output"
+ sandbox="allow-scripts"
+ frameBorder="1"
+ width="100%"
+ height="100%"
+ />
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ <Modal showModal={showModal} toggle={toggle}/>
+ </>
+ );
+}
+
+export default CodeEditor;
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
@@ -0,0 +1,60 @@
+import React, { useState} from 'react';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/dracula.css';
+import 'codemirror/theme/material.css';
+
+import 'codemirror/theme/mdn-like.css';
+import 'codemirror/theme/the-matrix.css';
+import 'codemirror/theme/night.css';
+
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/closetag';
+
+import { Controlled as ControlledEditorComponent } from 'react-codemirror2';
+
+const Editor = ({ language, value, setEditorState }) => {
+
+ const [theme, setTheme] = useState("dracula")
+ const handleChange = (editor, data, value) => {
+ setEditorState(value);
+ }
+
+ const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
+
+ return (
+ <div className="code-editor-container">
+ <div className='code-editor-dropdown'>
+ <label for="cars">Choose a theme: </label>
+ <select name="theme" onChange={(el) => {
+ setTheme(el.target.value)
+ }}>
+ {
+ themeArray.map( theme => (
+ <option value={theme}>{theme}</option>
+ ))
+ }
+ </select>
+ </div>
+ <div className='code-editor-cont'>
+ <ControlledEditorComponent
+ onBeforeChange={handleChange}
+ value= {value}
+ className="Codemirror-wrapper"
+ options={{
+ lineWrapping: true,
+ lint: true,
+ mode: language,
+ lineNumbers: true,
+ theme: theme,
+ }}
+ />
+ </div>
+ </div>
+ )
+}
+
+export default Editor
diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
@@ -0,0 +1,58 @@
+import { Fragment, useState, useEffect } from "react";
+
+import "./modal.css";
+
+import close from './close.png'
+
+const Modal = ({ showModal, toggle }) => {
+ const [currState, setCurrentState] = useState(0);
+
+ const structuringData = [
+ {
+ info: "Its a code editor for html css and js made using codemirror your can write your code seprately for html css and js. ",
+
+ },
+ {
+ info: "Javascript will work normally and can be used to manipulate things but their will not be shown any output for it like for console loging.",
+
+ },
+ {
+ info: "Css output will be shown when try to make style changes using it.",
+
+ },
+ {
+ info: "Lastly all your output will be displayed in output section as you type.",
+
+ },
+ ];
+
+ useEffect(() => {
+ setCurrentState(0);
+ }, [showModal]);
+
+ const buttonHandler = (val) => (e) => {
+ if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
+ setCurrentState(currState + val);
+ };
+ if (!showModal) return false;
+ return (
+ <Fragment>
+ <div className='code-editor-modal'>
+ <img src={close} alt="clonse" onClick={toggle} className="close-icon" />
+ <div className='content'>
+ <h1 className='text'>How to Use!</h1>
+ <p>{structuringData[currState].info}</p>
+ <div className='button-section'>
+ {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
+ <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
+ {currState === 3 ? "Done" : "Next"}
+ </button>
+ </div>
+ </div>
+ </div>
+ <div onClick={toggle} className='code-editor-backdrop' />
+ </Fragment>
+ );
+};
+
+export default Modal;
diff --git a/src/plays/code-editor/Readme.md b/src/plays/code-editor/Readme.md
@@ -0,0 +1,27 @@
+# Code editor 
+
+It is a code editor for html ,css and js inspired from codepen made using codemirror and react-codemirror2 for writing and executing the code at same time !
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: yung-coder
+- Gihub Link: https://github.com/yung-coder
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)
diff --git a/src/plays/code-editor/close.png b/src/plays/code-editor/close.png
diff --git a/src/plays/code-editor/cover.png b/src/plays/code-editor/cover.png