During collaborative editing, if the user's cursor is on the top, bottom, left, and right borders of the editor, the user name will be overflowed and hidden. about y-codemirror.next HOT 3 CLOSED

@dmonad yes, and no. In the last 1 hour I tried to solve this like you advised (before I even commented), and the top padding solved the problem as you say. The main problem is not the top/bottom, but the left/right direction. If I render usernames as email addresses, they can be ~20-30 char long easily. Creating a 30 char long right padding is not a good UX :( One better solution would be if the content would overflow top/right, we would try to render it bottom/left from the cursor. In a case when there is no space for top/bottom or left/right the padding advice would still be valid, but at least we would add a much bigger room for "styling".

from y-codemirror.next.

@panchaoco do you have any solution to this?

from y-codemirror.next.

Hi @panchaoco & @tg44,

I get this and I'd like to change it too. Unfortunately, there is nothing I can do about this.

CodeMirror (and most other editors) wrap the content in a div that hides content that is not inside a div. This is the expected behavior, unless you create an editor without a scrollarea.

Since content is hidden, I can't ensure that the cursor is visible. So this is literally something I can't fix since I have no control over it.

You can fix this in your application by increasing the padding of the scrollarea. Alternatively, you can disable the scrollarea and make content outside the div visible. This article might help: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content

from y-codemirror.next.