I'm trying to make a project like (https://pretty-print-json.js.org/) using react js and tailwind CSS. And I became able to just minify and formatted the JSON data. My project live site (https://json-formatter-eta.vercel.app/)

Now, I have 3 questions. 1 - How can I add line numbers in the text area? 2 - How can I highlight the line which is clicked by the user to edit? 3 - How can I format the text color depending on the key-value? I mean key should have one color and the value should have another color.

Is it possible by using textarea? Or do I have to use content editable div? If I have to use content editable div then how it could be possible to get the value of the div(because if I use innerHTML to get the value of the div it replaces the space with   and then it would not be possible to format the JSON file.)

All I have to done by using pure javascript. Could you anyone help me to done my project please?