Broken keyboard navigation with custom paragraph view

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:

  1. Set cursor at the first line of the first paragraph
  2. 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 > + 1 &&
            (dir == "up" ? - > (box.bottom - * 2
             : box.bottom - coords.bottom > (coords.bottom - * 2))
          return false

Do you have any suggestions regarding this case?

That was a library bug. Attached patch should help.

1 Like

Wow! It works, awesome, thank you!