I am new to this, I'm building a website with a blog. Right now, I want to create a text editor, the text area is just plain txt that will be JSON. Basically I need an input text like in any website, and render the html, just like this one here when you write a question post. That allows bold, italics, quotes, images, bullet points...

Is there an easy way, any npm package that includes this? Because I was thinking to do it myself but my thoughts seem quite convoluted.

For instance, I want to detect links and upload images along with the text. I believe I have to parse the text into html and regex for links to add the tags. And about the images maybe upload them beforehand to the server with multer and then add the link in the text. And later detect my image folder and parse the text into a img component. Is this too complicated?

Also later I need to display this JSON, I believe I need to use dangerouslySetInnerHTML or react-json-to-html and react sanitize-html.

Is this correct? Or is there a better way? I'm open to suggestions.

Thanks for the help.