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.

[panchaoco]

Please save me some time and use the following template. In 90% of all issues I can't reproduce the problem because I don't know what exactly you are doing, in which environment, or which y-* version is responsible. Just use the following template even if you think the problem is obvious.

Checklist

• [ ] 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.

Describe the bug 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.

To Reproduce Steps to reproduce the behavior:

1. Go to https://demos.yjs.dev/codemirror.next/codemirror.next.html
2. Open the same demo address again with a new browser
3. Type in the first line
4. Observe cursor and username on other clients

Expected behavior It is expected that the user name can be displayed normally

Screenshots

Environment Information Yjs Demo

Additional context Add any other context about the problem here.

[tg44]

@panchaoco do you have any solution to this?

[dmonad]

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

[tg44]

@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".