Changing the way text is entered on the whiteboard

There is an open source WBO whiteboard https://github.com/lovasoa/whitebophir. I want to allow the user in my WBO forked version to edit text directly on SVG without noticing the transition between editing and viewing modes. I was thinking about for example a contenteditable div that appears when the user clicks on a text area, and that can be closed by clicking the cursor away from it. The text displayed in textarea should look identical to the text drawn on SVG. It must have cross browser compatibility on Firefox, Chrome and Edge. My WBO version code will be sent to the selected freelancer. An example below.