Multiple floating elements colliding/overlapping

[matisszemturis]

Hello!
I want to create Notion/Google Docs like commenting system.

1. If there is free space, each comment is anchored to right-start of a related comment.
2. If there is not enough space, the selected comment is prioritized and the rest are pushed up/down.

Do you have any ideas on how to handle such a use case?

[atomiks]

Make the floating element a vertical flexbox column. All comments go inside that: https://codesandbox.io/s/flamboyant-poincare-nr6cr8?file=/src/App.js

Additional logic:

• If comment = 1, use right-start placement
• If comment > 1, use right placement, so they're centered

[matisszemturis]

This is a nice way of handling all items in a single column with equal gaps, but sometimes comments are spread apart and gaps between comments should be bigger.
If comment has enough space on top/bottom, it should align "right-start" with relevant mark node.
If comment does't have enough space it should shift top/bottom.

[atomiks]

Yeah probably requires custom middleware/logic. Issue is currently being tracked already though: #2268