How to make a text component in SVG similar to the HTML textarea tag, like a simple text editor?

Question

JavaScript

I needed to find/create a web component based on SVG tags that could have basic text editing functionality:

1. using SVG tag text, not tagtextarea
   
2. processing of insertion, overwriting of characters under the cursor and on the left; selecting text in order to replace it with another typed one - all by analogy with textarea.
   
3. window size should adapt to the size of the parent, include text scrolling in the window
   
4. the component should be able to work with a large number of characters, say up to 100,000 (desirable)
   

As far as I know, SVG tags are the model that will eventually be rendered by the renderer.
Let's say I will use the MVC framework / library for dynamic display.
I did not find ready-made components, maybe I was looking badly. What do you advise? How does the component work?

Answer 1

put MCE Editor into svg?