Inserting html content and ensuring the cursor is NOT in the span that is inserted

[sdraper69]

I am allowing the user to insert some information into the editor. For example on a click of a button the current day (e.g. Monday) will be inserted.

I do this by doing this...

let value = "Monday";
let html = "<span class='editorMetaProperty'   data-property='day'>" + value + "</span> ";
this.editor.insertHTML(html, true);

This gets inserted fine, however, if the user starts typing, then they are typing within the inserted span. I don't want this to happen.

Main question : After I have inserted the HTML, how can I force the cursor to be outside of the inserted span? The user should still be able to type, and it should look like it is next to it, however, I want it outside of the span

Secondary Question: Ideally, I wouldn't want the user to ever be able to type/change the inserted HTML as it is an inserted property. It would be nicer if it got selected/highlighted as one object. Is there any way to achieve such behavior?

[JiHong88]

let value = "Monday";
let html = "<span class='editorMetaProperty'  data-property='day' contenteditable='false'>" + value + "</span> " + this.editor.util.zeroWidthSpace;
this.editor.insertHTML(html, true);

From 2.42.1 version, it will work even if you don't put "zeroWidthSpace".

[sdraper69]

Great, that answers my initial question.Thank you