How to allow bookmarks to stick outside of the editor?

danijar · January 8, 2021, 7:43am

I’m using setBookmark() to show the cursors of other users in a collaborative editor, with name tags above them. When a bookmark is near the border of the editor, the name tag sometimes has to reach outside of the editor window. However, the .CodeMirror HTML element uses “overflow: hidden;”. This prevents the name tags from sticking outside of the editor.

Changing the CSS rule to “overflow: visible;” introduces unwanted whitespace on the right side of the editor and means that normal text that should be inside the editor is visible below the editor. According to this thread, it also seems like this cannot be solved by styling the bookmark element but would require CodeMirror to work without using “overflow: hidden;” in a parent node of the bookmarks.

All good when the bookmark is far from the sides:

The name tag should not be cut off:

marijn · January 8, 2021, 8:44am

This is entirely impossible with CSS (elements cannot stick outside of a scrolling parent element), unfortunately. So you’ll probably want to give up on the bookmark approach and use an overlaid DOM node (using of cursorCoords to find the position). That a bit more awkward since you have to manually make sure the widget stays aligned, of course.

danijar · January 8, 2021, 6:17pm

Thanks for the quick reply.

We can set an invisible bookmark, put the name tag outside of the editor with “position: absolute”, and have it track the bookmark position via JavaScript.

I don’t know whether cursorCoords would help because the cursors of collaborating users are only visual hints and not actual CodeMirror cursors.

By the way, I think it would be nice to have a way to move bookmarks without having to delete and reinserting them.