The "affinity cursor" is a really lovely innovation. Most HTML/DOM/contenteditable based rich text editors end up adding support for virtual cursors that enable you to have the insertion cursor somewhere that the native browser cursor hasn't got support for (next to a floating image, end of a table row). Effectively this is what this is doing.

Internally the inline formatting will be marked as tags in a rage, exactly like html. Essentially there is a possible cursor position both inside and outside a formatting tag, but both appear as the same visual location on the screen. This is such a lovely way to indicate the difference.

So with this code:

  Something <b>bold</b>

There are two cursor positions that are visually the same place:

  Something |<b>|bold</b>
            ^   ^

Most editors "jump" over one of those positions to hide the implementation detail from users. This idea exposes it with a little tail on the cursor.