How to add other features of Editor in HTML

Question

I have created HTML Code Preview Editor Project in just 2 lines of HTML code.

Video Link :
https://youtu.be/POPrwJ8hRsY

Code Link:
https://code.sololearn.com/WE127f088k0m/?ref=app

Now, I am thinking to created it full Editor like vs code or codesandbox online editor in HTML. Please guide me. Thanks

Answer 1

If you're looking for ideas of improvement, here are some:
- You can add syntax highlighting to your code editor like shown at: https://htmlcodeeditor.com/
You could use CodeMirror( https://codemirror.net/ ) to achieve this without writing your own syntax highlighter.
- Maybe a WYSIWYG mode would help. In other words, you edit the HTML in a preview-like mode. TinyMCE and a few other libraries can help you with this.
TinyMCE is documented at: https://www.tiny.cloud/
A basic demo of TinyMCE is at: https://www.tiny.cloud/docs/demo/basic-example/