Customer node elements and positioning


I have created a custom document node that I want to translate to a DOM container that has a title. But I don’t want that title to be part of the DOM that ProseMirror consider when calculating positions. I defined my elements like this:

DiscourseContainerElement.prototype.toDOM = (node) => {
  var el = document.createElement("b");
  return ['div', {discourse:node.attrs.owlclass}, el, ["div", 0]];

This works reasonably well except the cursor makes weird jumps when going around the title of my container. And if the document only consists of one DiscourseContainerElement:

  "type": "doc",
  "content": [
      "type": "discourseContainer",
      "attrs": {
        "owlclass": "",
        "hghandle": "",
        "title": "Begin"
      "content": [
          "type": "paragraph"

The cursor appears right after it on the paragraph as it should. But when I try to move the cursor with left or up arrow, towards the title I get an exception:

resolvedpos.js:237 Uncaught RangeError: Position 5 out of rangeresolve @ resolvedpos.js:237resolveCached @ resolvedpos.js:264resolve @ node.js:320selectionFromDOM @ selection.js:323readFromDOM @ selection.js:86poller @ selection.js:44

In more complicated cases I get weird jump or inability to move the cursor at all etc.

Do you have an idea? Should I try to create a complete working example reproducing the issue? Is it resolvable or as soon as a custom node creates some text content as “decoration” around the real document content, positions will get messed up?

Thanks much! Boris

One thing you could try is giving the <b> element a contenteditable: false attribute.

Seems to be working so far, thanks!