Problem with Docx editor within my web app(seeking high flexibilitty) / Google Docs API getter that returns a position of user's cursor?

Question

I have an app focused on automation of administrative processes. It works thanks to docx templates mapped to some fields inside my db. Example:

• Mapped document: Dear {client.firstName} {client.lastName}, we are pleased to offer you a job as a {client.appliedForJobRole}
• Result: Dear John Doe, we are pleased to offer you a job as a janitor.

I'm trying to implement a document mapping technology within my app so mapping the templates by employees wouldn't be a total headache for them.

My expectations of how the document mapper should look like:

The flow should be like this:

1. I place cursor/click somewhere inside the docx.
2. After that - a dropdown opens up and I'm able to select a field from my database.
3. After selecting the field a placeholder in format {fieldName} would be placed at the position of where I had initially clicked.
4. Bonus feature: If it's possible, I want to be able to show Field Verbose Value instead of {fieldValue} with proper styling(as seen in the picture) - only on client side. The actual docx will still have {fieldValue}

The functionality doesn't have to be exactly like shown in the picture - it's just for reference so you know what I want to achieve.

My tech stack:

• Vue
• Fast API that uses LibreOffice(necessary conversions) and docxtemplater(exchanging placeholders for actual values inside the .docx)

What I tried so far ?

Solution WYSIWYG editor + conversions I tried to use WYSIWYG editor(Quill) with conversions using both LibreOffice and Mammoth.js - DOCX->HTML(Import) and HTML->DOCX(Export)

• Result These conversions were Ok when I was converting some really basic documents. Results from more complex documents weren't really satisfying. That's why I abandoned this idea.

Solution OnlyOffice Using full fledged DOCX web editor - OnlyOffice.

• Result I couldn't find a way on how to edit UI of Onlyoffice nor I couldn't find out how to programatically change content of DOCX.

Solution Google Docs API Using full fledged DOCX web editor - Google Docs API.

• My findings This one looks the most promising as Google Workspace provides App Scripts where I can define my own functionality to some extend. I went trough the documentation and found out that it may be a problem to retrieve client's cursor position.

My questions

• First question is aimed at the ones who worked with the Google Docs API - Do you see a way on how to achieve this functionality using mentioned Google's platform ? Does Google Docs API provide a way to track user's actions(click in editor) so I can react to them(extract position of click so I can place there a new text({fieldValue}) according to field chosen from the dropdown(I saw that you can add custom UI element in toolbar)) ?
• Second question - Do you know any library or platform that would suit my needs more appropriately ? Or maybe do you see a way on how to implement this value/feature more efficiently ?

I want to know other developer's perspective before I start to implement this feature so thanks for any response.