Jodit Merge Field Plugin
Jodit Merge Field Plugin
Description
This project is a technical extension developed for Jodit, a high-performance WYSIWYG rich text editor. The plugin allows users to visually insert “merge fields” or dynamic tags, an essential feature for applications managing email templates, legal contracts, or any document requiring dynamic data personalization.
Key Features:
- Integrated UI: Adds a custom button to the Jodit toolbar with a dropdown menu for seamless tag selection.
- Placeholder Insertion: Simplifies the insertion of variables (e.g.,
{{first_name}},{{order_id}}) at the exact cursor position, improving end-user precision. - TypeScript-Based Architecture: Developed with strong typing to ensure compatibility with the editor’s core and facilitate long-term maintenance.
- Highly Configurable: Allows developers to externally define the list of fields and custom delimiters, adapting to any backend logic.
- Lightweight & Efficient: Designed to have minimal impact on editor performance, following the best practices of the Jodit plugin API.
Technologies used:
- Core Language: TypeScript for robust and type-safe logic.
- Jodit API: Advanced usage of toolbar controllers and Selection Range manipulation.
- Development Environment: Custom configuration for source code compilation and bundling.
Project Role:
- As the sole developer, I researched Jodit’s internal documentation to extend its native functionalities. I designed the node insertion logic and dynamic UI configuration. This project reflects my ability to dive into third-party source code and build modular solutions on top of complex architectures.
Impact:
This project demonstrates technical seniority by interacting with low-level APIs within a complex editor. It provides a solid foundation for any developer needing to implement templating systems, saving hours of manual development and configuration.
Technical Stack
- TypeScript
- Jodit Editor API
- JavaScript (ES6+)
- Git / GitHub
Features
- Custom toolbar button
- Field list injectable via configuration
- Intelligent focus and cursor position handling
- Modular and extensible codebase