I am looking for solution and scratching my head from 3 days to get the solution for this, but not able to achieve it,
Suppose I have contenteditable p like this
<p contenteditable="true">Hello There <span class="link">Google</span></p>
Now what i want is, when user navigates the caret inside this p tag, it should treat whole span as a single character, i.e
When caret is at end of "Google" text, and user presses left arrow key, caret should at start of "Google" and vice versa
When caret is at end of "Google" text, and user enters any text it should not come inside span tag, the text's parent should be p tag and vice versa
I found the similar question here
In a contenteditable element, move the cursor between HTML tags
But didn't find the answer.
I also tried to do this by get and set caret position, but failed,
Any suggestions would highly appreciated.
Providing contenteditable="false" to nested span tag, would make span again non-editable, and carat will simply count this as a single word and move to following charaters.
I hope this is what you are looking for.
<p contenteditable="true">Hello There <span contenteditable="false" class="link">Google</span>, this part is again editable.</p>