One interesting feature allows users to click on a tag and have it added to a contenteditable div. This function works smoothly initially, but when toggling back and forth, the cursor unexpectedly jumps to the end of the div.
When a user adds a variable for the first time, the cursor behaves as expected.
https://i.sstatic.net/NzI5y.png
However, when the user removes and re-adds the tag, an issue arises.
https://i.sstatic.net/N7I7P.png
This behavior is specific to iOS Safari and can be attributed to the following code:
insertTextAtCursor = (text, paste = false) => {
const sel = window.getSelection();
// Ensure focus on the compose element
this.compose.focus(); // reference to contenteditable div
if (sel.getRangeAt && sel.rangeCount) {
const range = sel.getRangeAt(0);
range.deleteContents();
if (paste) {
range.insertNode(document.createTextNode(text));
range.selectNode(document.createTextNode(text));
} else {
range.insertNode(text);
range.selectNode(text);
}
// After deleting and replacing with HTML, clean up any empty nodes left behind
const newRange = range.cloneRange();
range.setEndBefore(text);
newRange.setStartAfter(text);
newRange.setEndAfter(text);
sel.removeAllRanges();
sel.addRange(newRange);
}
}
Edit: The cursor enlarges significantly after adding the display: inline-block property.
https://i.sstatic.net/dBNFt.png
HTML:
<div id="variable-message-input-message-fb39fc57-7909-47e2-9de8-042e70eee3ad" class="variable-message__compose" contenteditable="true" name="message" placeholder="" style="
/* display: inline-block; */"><span spellcheck="false" contenteditable="false" id="span-First Name" class="variable-message__variable"><i>{</i><div>First</div><b>_</b><div>Name</div><i>}</i><span class="variable-message__close"></span></span></div>
CSS:
background-color: #fcfcfc;
border: 1px solid #e3e3e3;
border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
color: #404040;
min-height: 4rem;
padding: 1rem 1.2rem;