NodeView with nested structure and parsing

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>`;
  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:


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.