Select Span as a single element

I have the ability for users to insert some meta data (e.g. the day). it goes into the edit like this…

<span class="metaData">Wednesday </span>

there could be user text on either side of the span e.g. My favourite day of the week is <span class="metaData">Wednesday </span> becuase I have PE at school.

I want to make it so the metaData span is treated as a single “lump”, e.g. if they click anywhere in it, it highlights the entire span. If they overwrite it, it gets rid of the entire span, etc.

Hopefully, this makes sense. ANy pointers would be much appriciated

[JiHong88]

editorInstance.onClick = (event, core) => {
    const element = event.target
    if(core.util.hasClass(element, "metaData")){
        core.setRange(element, 0, element, 1);
    }
}

editorInstance.onKeyDown = (event, core) => {
    const range = core.getRange();
    if(core.util.hasClass(range.commonAncestorContainer, "metaData")){
        core.util.removeItem(range.commonAncestorContainer);
    }
}

[JiHong88]

In a simple implementation, you can do something like this:

this.editor.onClick = function (e, core) {
    const element = event.target
    if(core.util.hasClass(element, "metaData")){
        const a = core.util.createTextNode(core.util.zeroWidthSpace);
        const a1 = core.util.createTextNode(core.util.zeroWidthSpace);
        element.parentNode.insertBefore(a, element);
        element.parentNode.insertBefore(a1, element.nextSibling);
        core.setRange(a, 0, a1, 1);
    }
}