NodeView with nested structure and parsing

1

I’m trying to make a custom node view which has a non-trivial structure and contentDOM is not a direct descendant of the dom.

list_item: () => {
  let dom = document.createElement("li");
  let contentDOM = document.createElement("div");     
  dom.innerHTML = `<span>prefix: </span><div class="inner"></div>`;
  dom.querySelector(".inner").appendChild(contentDOM);
  return { dom, contentDOM };
}

The Enter is set to split the list item and Shift+Enter is set to split the paragraphs inside the list item.

The problem is when I do Backspace on a 2nd empty line:

Screenshot 2020-04-12 at 11.54.06

Instead of putting a cursor at the end of the first line it removes all lines from a list item.

I suspect the parsing of DOM isn’t set correctly but I can’t figure out how to do that — the callbacks in a parsing rule for list_item don’t get called at all (see console.log(...) there).

CodeSandbox with minimal setup: https://codesandbox.io/s/prosemirror-example-oe8rn?file=/src/index.js

Video: https://v.usetapes.com/PwYlqSYCSg

2

Added some console.log inside PM:

  • Seems like contentElement isn’t get called if getContent is set.
  • getContent is set by PM itself on rule (and overrides the one provided by me) if contentLost is true

But I can’t figure out how contentLost become true in my case — seems like contentDOM element is being detached from dom element at some point.