RangeError: Index 0 out of range for <>

1

I am trying to customize ProseMirror 0.15. Now when I eneter some text and I hit the button for “Select parent node”, the parent node is selected and it shows a blue border around the text. But in my console I get the following error:

RangeError: Index 0 out of range for <>

And it points to:

// :: (number) → Node
// Get the child node at the given index. Raise an error when the
// index is out of range.
Fragment$2.prototype.child = function child (index) {
  var found = this.content[index];
  if (!found) { throw new RangeError("Index " + index + " out of range for " + this) }
  return found
};

What could this be? I really have no clue.

2

Something is trying to index into an empty fragment (node contents), but without a stack trace or a more detailed description of the steps you took (preferably try them on http://prosemirror.net/), I can’t tell why.

3

Upgrading to latest 0.16.0 fixed the issue. So probably an old bug or some 0.16.0 code with 0.15.0 code, because I realized that npm installed 0.15.0 and I was copying from latest github to customize some elements. Now it seems to work fine.

4

There’s still some bug. In the editors in the demo it doesn’t happen. But when I hit the button of “Select parent node” the text isn’t selected, but it gets a blue border. In the demo’s the text is selected. When I look in my generated css, the p tag has gotten a ProseMirror-selectednode class. In the demo’s the text is just selected. Where does this happen?

And when the text is selected with a blue border and I click on the selected text, I get the range error again.

Also when I click the code button and I add some text and when I remove the text I also get the Range error.

Uncaught RangeError: Index 0 out of range for <>
at Fragment$2.child (fragment.js:155)
at ContentMatch$1.matchFragment (content.js:279)
at ContentExpr$1.getMatchAt (content.js:50)
at Node$2.contentMatchAt (node.js:308)
at new ParseContext (from_dom.js:294)
at DOMParser$1.parse (from_dom.js:128)
at parseBetween (domchange.js:107)
at readDOMChange (domchange.js:192)
at DOMChange$1.finish (domchange.js:46)
at domchange.js:18
5

To reproduce the error I’ve started from scratch (basic setup) and I’ve monitored every change and checked when I got the error or not.

To use a customized schema. I first tested it with the prosemirror-schema-basic schema. Everything worked. Now I copied this schema to a separate file and included it. Everything worked and no error so far.

After that I changed the schema a little bit, by adding a heading of level=1 to the doc (partial snippet):

export const nodes = {
    doc: {
        content: 'heading[level=1] block+'
    },
    ...

Now when I run the editor I do the following steps:

  • Add some text
  • Click on text
  • Click “Select parent node” -> text gets highlighted
  • Click on highlighted text -> Out of range error

So when using:

content: 'block+'

it all works, but adding the

heading[level=1]

it gives an out of range error when selecting the text as parent node and clicking on the selected text.

6

I really can’t find an explanation for this or is this the expected behavior. Please can someone else test it also. I used a clean install and just changed:

content: 'block+'

to

content: 'heading[level=1] block+'

Then to get the out of range error in the console, follow the following steps:

  • Type a heading with some text
  • Hit enter
  • Type a paragraph with some text
  • Select some text of the paragraph with the mouse
  • Hit the “Select parent node” button in the menubar
  • Click on the selected text

The last action triggers the out of range error. Is this expected behavior or might this be a small bug? I’d really like to have it confirmed.

7

Throwing errors is generally not expected behavior (unless you feed the library invalid inputs), so yes, definitely a bug. This patch fixes it.