Caret at the beginning of a line with rich text treated incorrectly

[BartoszGrajdek]

Description

Once cursor is placed at the beginning of a line with nested block right after the cursor browser starts providing incorrect rects. We had an investigation and it seems like it thinks that the caret is placed in a line above.

Possible solutions

1. Wrap all text-leafs with span/p just like lexical does
2. Try switching from using \n

Source

#220

Video

Video.mov

Useful snippet

function displaySpan() {
  const selection = window.getSelection();
  const caretRect = selection.getRangeAt(0).getClientRects()[0];
  const {height, top, left} = caretRect;
  const span = document.createElement('span');
  const body = document.querySelector('#root');
  span.classList.add('test');
  span.style.width = '1px';
  span.style.position = 'fixed';
  span.style.backgroundColor = 'orangered';
  span.style.height = `${height}px`;
  span.style.top = `${top}px`;
  span.style.left = `${left}px`;
  body.appendChild(span);
}

function hideSpan() {
  const span = document.querySelector('.test');
  span?.remove();
}

[BartoszGrajdek]

Note

It's now working much better, but there's still some refinement we could do