How to insert variable in to HTML ediotr (QUILL or any) with javascript/jquery

Question

I am using Quill editor, and i want to insert some pre define text with other text that will be changed dynamicly at the time send email using that content.

Example

HI contact_name,

Details: order_details

Thanks company_name

Here contact_name, order_details, company_name are variables they will be chagned dynamicly.

Here is my code using that i get it done:

var Inline = Quill.import('blots/inline');

class HighlightBlot extends Inline {
    static create(value) {
        let node = super.create();
        node.classList.add('highlighted'); // Add your class name here
        node.setAttribute('style', 'background-color: #EDEDEE;padding: 2px 5px 2px 5px;'); // Customize your highlight style here
        return node;
    }
}

HighlightBlot.blotName = 'highlight';
HighlightBlot.tagName = 'span';
Quill.register(HighlightBlot);


let editors = {};
let focusedEditorId = null;



// Insert text at cursor position
function insertTextAtCursor(text) {
    if (focusedEditorId) {
        const quill = editors[focusedEditorId];
        const range = quill.getSelection();
        if (range) {
            quill.insertText(range.index, text, 'highlight', true);

        }
    }
}


// Handle dropdown change event for each select within input-container
$('#action_html_div').on('change', '.insert_variable', function() {
    const textToInsert = $(this).val();
    if (textToInsert) {
        insertTextAtCursor(textToInsert);
        $(this).val(''); // Reset dropdown
    }
});

quill editor added in diffreat function and stroed in editors array using here like that editors [focusedEditorId];

But with this i am getting problem if there is no text in the editor and a variable instreated then on type after that variable it's included with variable and having variable background color.

check image for problem

in that contact_last_name is variable "text added manually" added to this on type after insert variable.

i want like that