I am developing an application aimed at automating administrative tasks, which utilizes docx templates linked to certain fields in my database. For instance:
- Template: Dear
{client.firstName} {client.lastName}, we’re excited to offer you a role as a {client.appliedForJobRole}. - Output: Dear John Doe, we’re excited to offer you a role as a janitor.
I’m working on integrating a document mapping feature that simplifies the template mapping process for employees. The desired functionality includes:
- User clicks inside the docx document.
- A dropdown menu appears, allowing selection from a database field.
- Upon selection, a placeholder in the form of
{fieldName} should be inserted at the clicked location. - A bonus would be showing
Field Verbose Value instead of {fieldValue} on the client side, while keeping the actual docx file unchanged.
Technologies in use:- Vue
- Fast API with LibreOffice for conversion and docxtemplater for replacing placeholders with actual values.
Previous attempts include:- WYSIWYG Editor + Conversions: I experimented with Quill and conversions via LibreOffice and Mammoth.js but found that complex documents yielded unsatisfactory results.
- OnlyOffice: I explored using OnlyOffice’s web editor but faced difficulties modifying its UI or programmatically altering docx content.
- Google Docs API: This seems most promising, as Google Workspace offers App Scripts for custom functionality, but I’m uncertain about tracking user cursor position.
My inquiries:- For those experienced with Google Docs API, do you have suggestions for achieving the aforementioned functionality? Can it track user actions in the editor to pinpoint cursor position for text insertion?
- Are there any libraries or platforms that better align with my requirements, or do you have recommendations for more efficient implementation of this feature?
I would appreciate insights from fellow developers before proceeding.
You could also explore using TinyMCE for docx editing. Its plugins offer smooth drag-and-drop feature creation, adding flexibility. While it requires configuring for field placeholders, it lets you listen to user interactions, potentially detecting cursor positions. For docx generation & conversion, Aspose.Words may offer advanced capabilities aligned with those complex document needs. 
In my experience, tackling document automation and placeholder management in web applications often involves some creative workarounds. While Google Docs API offers a rich set of functionalities through their App Scripts, tracking the cursor position isn’t directly supported. However, you might be able to use a workaround like temporarily inserting a placeholder or dummy text when the user clicks, and then use that text to determine the cursor position programmatically. Another approach could be exploring services like CKEditor combined with its collaborative features, which provide more control over the UI and user interactions, making it easier to insert placeholders and manage within-doc field selections. For dynamic document handling and field replacements, also look into integrating ProseMirror or Slate.js, which give a bit more flexibility concerning rich text editing features. These might better align with your template mapping requirements.
A potential route you could explore is leveraging the capabilities of a custom-built Vue component to handle cursor positioning and placeholder insertion. By capturing mouse or keyboard events when a user interacts with the docx displayed in your Vue application, you could potentially keep track of cursor locations without needing direct API support. Also, examining libraries that work well with Vue, like TipTap which builds on ProseMirror, might empower you to implement a more tailored document editing experience with flexible field management. This approach could offer dynamic interaction possibilities, keeping your UI intuitive for users. Additionally, integrating Vue with JavaScript APIs to monitor and update document states dynamically could provide a seamless interaction flow for users."}
From my experience with similar scenarios, you might want to consider using editor platforms like At.js alongside other content-editing frameworks like the Summernote for managing placeholders and cursor positioning efficiently. At.js allows you to manage autocompletion features that might facilitate dynamic field insertion as users navigate through the document. Furthermore, combining it with robust backend processing using libraries like Pandoc for format conversion could aid in overcoming docx limitations. This system might align well with your needs, ensuring you maintain the flexibility and control over document formatting and content handling.