gets rendered as
and now consider the task of inserting character in between first and second words.
User should be able (predictably) to chose where to insert the character: after
t in "first" or before
s in "second" so inside that
Ideally it should be two caret positions (marked by
But this clearly has UX implications, e.g. both caret positions share the same place on rendering canvas/surface:
so user will see caret "stuck" while LEFT/RIGHT navigation.
I have solved this in my blocknote.net by inventing "directional caret", when caret arrives to that position from the right it caret stops here:
and if caret arrives from the left it stops here:
This works OK so far but the main problem is in visual feedback - after some time when you see caret blinking at that position you cannot determine where next character (say, 'X') typed will go, it could be
firstX<strong>second</strong> or first<strong>Xsecond</strong>
Any idea of how to modify caret rendering to show its "real" position? In Sciter I've added "trail" to the caret:
but something tells me that it can be made better, so asking.
In fact there other "unusual" caret positions that I am handling in next version, for example position in between
<ul> <li>ul item</li> </ul> <ol> <li>ol item</li> </ol>
it is required to allow text (e.g.
<p>) insertion between these two lists. Ideally chosen caret rendering should support such cases too.