Injectable javascript to auto-fit SVG text to text area

We need a very small modification made to an existing project that has been built in WooCommerce. The application allows customers to create custom designs, and includes the feature to add text. However, there is an issue with the default behaviour - at present, text does not automatically resize to fit a given text area. I have attached screenshots demonstrating this - we want the text AREA to remain the same size, and the text itself to shrink to fit the area, as customers type text. There is an existing javascript plugin which does this for HTML elements, but the application uses SVG text and we are unable to port the functionality of bigText ourselves. We want this to be the DEFAULT behaviour - so the only way to manually adjust text is using the resize handles on the text bounding box. IDEALLY, the final project would be written as a javascript plugin which can be simply injected into the page, this will allow both for easy demonstration, easy testing and easy import into the application without having to significantly modify anything. Please kindly include examples of anything similar you have done before, and experience working with SVG-based applications.