Improve remote user's cursor

[aditya211935]

There are two issues with remote caret.

1. When remote user's cursor is on the first line, their name inside tooltip is cut off. The tooltip doesn't automatically repositions itself when there isn't enough vertical space.

Screen.Recording.2022-07-04.at.2.12.03.AM.mov

2. Remote user's cursor tooltip is not shown when they are typing. It's only shown when the cursor is actually moved.

Screen.Recording.2022-07-04.at.2.15.53.AM.mov

Since currently, we store relative position for cursors, awareness doesn't get updated when the cursor is moved while typing. This causes the second issue. To fix that, I've refactored the code to also save Codemirror.Position information inside cursors set in headpos key. And any time doc's state changes, we compare the before and after headpos, and update the position accordingly.
I've used cm.addWidget instead of cm.setBookmark (as done previously) because bookmarks are inserted as children to .Codemirror-line node. However, all .Codemirror-line nodes have z-index: 2. This causes the DOM node that occurs first in the DOM tree to have a higher stacking context. This means, when we position tooltip to be below the current line, it'll appear behind the next line.

Demo

Screen.Recording.2022-07-04.at.2.22.18.AM.mov

Known Issue
Because we only store relative position of cursors, and because in typeObserver function we don't really know which user made that change, we rely on comparing before and after headpos. This however has its limitations. Consider the scenario where user A and user B are collaborating. The text is 1234. A's cursor is between 3 and 4. Now, B inserts something before 1. Then, A's tooltip will be shown to B, even though A has not typed anything. This is because when users are collaborating on the same line, then any changes to that line will also change ch key of headpos.

[aditya211935]

@dmonad Any feedback?