• Ideally this is a React app. So start by creating one and keep only the relevant files needed for the project (starter files are shown below).

• Install necessary dependency packages (you may refer and use the ones mentioned below) using npm. Codemirror dependency is the text editor (npm) package and react-codemirror2 is used to have custom controlled components of codemirror.

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.31",
  "@fortawesome/free-brands-svg-icons": "^5.15.0",
  "@fortawesome/free-solid-svg-icons": "^5.15.0",
  "@fortawesome/react-fontawesome": "^0.1.11",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "codemirror": "^5.58.1",
  "react": "^16.13.1",
  "react-codemirror2": "^7.2.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.3"
},

• There are two panes in this code editor- One where the code is run (upper half of the app that contains the three code containers) and the other where the output is displayed (lower half ‘result’ code window). So, create two divisions in app.js to accommodate them.
• Create a custom component called Editor (preferably) which will be used in taking input of HTML, CSS, JS code snippets in their respective code containers.

<div className="pane top-pane">
        <Editor /*HTML code editor*//>  
        <Editor /*CSS code editor*//>
        <Editor /*JS code editor*//>
</div>

• To render a web page within another web page an iframe element must be used.

<div className="bottom-pane">
        <iframe
          srcDoc={srcDoc}
          /*Title option*/
          /*sandbox option*/
          /*frameBorder option*/
          /*width-height option*/
          /*Title option*/
        ></iframe>
</div>

• Fill in dummy test code in Editor function editor.js and import it to your app.js to check whether the custom component Editor is working or not.

export default Editor;
 
import Editor from "./Editor";

• It is recommended to use the codemirror package for this component so that you can have controlled usage for the code editor which will then help in controlling your input/output values and event handlers. So, import the code-editor (Controlled) component from the react-codemirror2 package.

import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import /* codemirror XML (HTML) mode */
import /* codemirror CSS mode */
import /* codemirror JS mode */

• Create buttons for each code container for opening (expanding) and closing (collapsing) individual code-editors. The expand/collapse buttons will function like this (only focus on the buttons’ working now, all other features will be implemented as you progress through the following milestones).
• Implement the controlled usage for the editor which should contain the event handlers (like onChange), values and other necessary arguments that create the editor as indicated below.

<ControlledEditor
        onBeforeChange={/* Pass in a custom made function that will handle the change */}
        value={/* Give the value */}
        className= /* Give an appropriate name for styling reference in CSS */
        options={{
         /* Give all relevant options */
        }}
/>

• Export this component as a function with appropriate arguments such as language name, value, onChange event handler (a separate function to be made, you may reuse the following code).

function handleChange(editor, data, /* An argument that handles the value of this function */) {
    onChange(/* The passed in argument that decides this function's value (argument) */);
  }

• Go back to your existing code divisions/classes and give appropriate class names to every relevant sub-structure of the code-editor.
• Observe the sample code-editor image and also visit codepen.io and implement similar (and better) styling to your code-editor.
• Style each of the sub-structures like body, top-pane, top-pane header, individual code-editors, editor components and so on.
• This is an iterative task and needs to be done again when some more new features are added.

.CodeMirror {
  height: 100% !important;
}

body {}
.top-pane {}
.top-header {}
.top-header .clear-all-btn {}
.top-header .clear-all-btn:hover {}
.pane {}
.editor-container {}
.editor-title {}
.editor-container.collapsed {}
 
.editor-container.collapsed .CodeMirror-scroll {
  position: absolute;
  overflow: hidden !important;
}
 
.CodeMirror {
  height: 100% !important;
}
 
.code-mirror-wrapper {}
.expand-collapse-btn {}
.ct {}
.ti {}
 
@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url(./font/Roboto-Regular.ttf) format("truetype");
}

• We need a ‘source’ document in the main App function in app.js that needs to be used inside the iframe element to render the website. To render any website a HTML code is sufficient with all of HTML, CSS, JS codes wrapped properly in it. So, create this variable (which is ideally a template string) such that it understands language specific inputs and accordingly creates a HTML page with the relevant source code of each language wrapped in its tag (like <body> for HTML) .
• On using this ‘source document’ variable in the iframe as one of its arguments you will be able to render pages.
• Further set a time-delay between code input and output (to avoid data execution cluttering when your site is hosted).

const srcDoc = `
<html>
  <body>${html}</body>
  /* CSS code */
  /* JS code */
</html>
` 

useEffect(() => {
    const timeout = setTimeout(() => {
     /* Source Document Code as function */
    }, 250);
 
    return () => clearTimeout(timeout);
  }, [html, css, js, /* Source document function call so that the site responds again to new code changes */]);

• To implement the main feature of this task, create a custom useLocalStorage hook in useLocalStorage.js file.
• This hook will ideally take two parameters-namely a key and an initialValue. The key will be pointing towards the language pane.
• Using this key, extract the JSON value (via useState function) and check if it’s null or contains some value. If null, JSON needs to be returned (after parsing it obviously).
• Check if the initialValue is of type function or not. Accordingly return the initialValue.
• Also use the useEffect hook to make sure that when the value (associated with useState hook) or the key value changes, the key is set as the stringified version of value (JSON).
• Finally use this hook in the main App function of app.jsin place of previously used useState of all language-specific useState’s defined before.
• Now install fortawesome/fontawesome (for react) after selecting appropriate icons from the font awesome site to plug-in all relevant icons to complete your code-editor!

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCompressAlt, faExpandAlt } from "@fortawesome/free-solid-svg-icons";
import { faHtml5, faCss3Alt, faJs } from "@fortawesome/free-brands-svg-icons";

import { useState, useEffect } from "react";
 
const PREFIX = /* To prefix your key so that you can easily identify your localhost instance */;
 
function useLocalStorage(key, initialValue) {
  const prefixedKey = PREFIX + key;
 
  const [value, setValue] = useState(() => { /*Use states*/
    const jsonValue = /*Get the items from local storage based on the prefix key */;
    
    if (jsonValue != null) return /* Parsed value of jsonValue */;
 
    if (typeof initialValue === "function") {
      return /* initialValue as a function*/;
    } else {
      return /* initialValue as a variable*/;
    }
  });
 
  useEffect(() => {
    if(!value) setValue(/* Set to null */)
      localStorage.setItem(prefixedKey, JSON.stringify(value));
      /* Set the localstorage's prefixed key with the new stringified json of value */
  }, [prefixedKey, value]);
 
  return [value, setValue];
}
 
export default useLocalStorage;