Hi, we faced a problem when keyboard navigation through paragraph node doesn’t work as expected. It happens if we want to modify paragraph view and wrap it into another div.
Here is full example: ProseMirror Custom Paragraph Node Key Nav issue - CodeSandbox
The main thing is that ParagraphView is customized and wrapped into additional div (src/views.js).
Steps to reproduce:
- Set cursor at the first line of the first paragraph
- Press arrow down to move to another line until you select next image node
Expected: image node becomes active when arrow down is pressed in the end of paragraph
Actual: image node becomes active when arrow down is pressed somewhere in the middle of paragraph
We’ve done some research and ended up with endOfTextblockVertical function at prosemirror-view/src/domcoords.ts#L408
This code bellow does comparison assuming that paragraph’s firstChild is always inline. But I guess it’s not a rule since paragraph is actually block node.
for (let child = dom.firstChild; child; child = child.nextSibling) {
let boxes
if (child.nodeType == 1) boxes = (child as HTMLElement).getClientRects()
else if (child.nodeType == 3) boxes = textRange(child as Text, 0, child.nodeValue!.length).getClientRects()
else continue
for (let i = 0; i < boxes.length; i++) {
let box = boxes[i]
if (box.bottom > box.top + 1 &&
(dir == "up" ? coords.top - box.top > (box.bottom - coords.top) * 2
: box.bottom - coords.bottom > (coords.bottom - box.top) * 2))
return false
}
}
Do you have any suggestions regarding this case?