Hello im building a block based richtext editor and found the issue that using multiple contenteditable blocks breaks the abillity to move from the center of a line up to the center of the line above.
normal behavior is that the focus moves to the beginning of the current content editable field eg. from here
<div contenteditable>this is a text<div>
<div contenteditable>this is a| text<div>
to
<div contenteditable>this is a text<div>
<div contenteditable>|this is a text<div>
with js i can capture the current selection as range and get a DOMRECT to check if the range is in the topmost line of this element then trigger the focus to move to the contenteditable field above it eg:
<div contenteditable>this is a text<div>
<div contenteditable>this is a| text<div>
to
<div contenteditable>this is a text|<div>
<div contenteditable>this is a text<div>
the issue is that this will not move the caret to the position above but just to either the start or the end of the contenteditable block
i found tools like https://editorjs.io/ but its implementation just jumps first to the start of the element and then to the end of the element above. then i found https://www.notion.so and its editor can in fact move up into the previous contenteditable field so there needs to be a possible solution
for notion this also works for non Monospaced fonts as i first thought they calculate the width of the line based on the element and then add the width of the characters to get to the same percent of width as the lower line has to the caret
so my question is how can i calculate the position the caret needs to go inside the upper contenteditable field based on the position of the caret inside the lower contenteditable field so that my result would work like this: (this time written without the html tags for better readabiltiy)
this is a text
this is the second line of block one
this is a| text
this is the second line of block two
to
this is a text
this is t|he second line of block one
this is a text
this is the second line of block two
thanks for your time
P.S. notions editor is also using multiple contenteditable fields