How I made my own text editor like VSCode

Hello World! I am back with a new article 🎉....

Today, I am going to talk about the editor which I have made 👉 tiny editor; which is very helpful to write code on web browser and many more..

So, How I made?

Libraries / Frameworks

React JS

CodeMirror

Monaco Editor

tiny-unique-id

FontAwesome Icons

react-sandbox-editor

Database (to save code and auth)

Cloud Firestore (Firebase)

How I made code input / editor?

To make the Editor / Input I have used CodeMirror Classic Editor

<ControlledEditor 
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                lineWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true,
                autoCloseBrackets: true,
                matchBrackets: true,
                autoCloseTags: true,
                matchTags: true,
            }}
/>

And for VSCode Editor, I have used Monaco Editor VS Code Editor

<Editor
     defaultLanguage="javascript"
     theme="vs-dark"
     value={js}
     onChange={setJs}
     className='editor'
   />

How output is shown

To show output, I have used iframe

<iframe
      srcDoc={srcDoc}
       title="output"
       sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
       frameBorder="0"
       width="100%"
       height="100%"
      />