Exception when editor is initialized out of view

[lishid]

Describe the issue

Seems that a recent commit introduced an exception when initializing an editor that's out of view due to display: none.

Commit in question: codemirror/view@4b6d0c9

Exception:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at TextNode.lineInner (index.js:221:64)
    at TextNode.line (index.js:23:21)
    at HeightMapGap.blockAt (index.js:4184:36)
    at HeightMapGap.lineAt (index.js:4189:25)
    at HeightMapBranch.lineAt (index.js:4290:26)
    at HeightMapBranch.lineAt (index.js:4290:26)
    at HeightMapBranch.lineAt (index.js:4290:26)
    at HeightMapBranch.lineAt (index.js:4290:26)
    at HeightMapBranch.lineAt (index.js:4290:26)
    at HeightMapBranch.lineAt (index.js:4290:26)
lineBlockAtHeight	@	index.js:4921
measure	@	index.js:6180

Specific debugging leads to a NaN here:

Then here:

Browser and platform

Windows Chrome

Reproduction link

No response

[marijnh]

Just creating an editor with its parent option pointing at a display: none div does not trigger this. Can you give me some more information on how to reproduce it?

[lishid]

Hmm I can't seem to reproduce it at https://codemirror.net/try/ because it's running an older version of cm6 without the offending line.

The error seems to be generated from this line: codemirror/view@74eae0e#diff-306633a4b2416fe4a2c298e7201348ad340e11f3cf64ece4133de41401880f28R348

As far as I can tell, I'm getting it to show up when hooking a requestMeasure in a plugin update. I have a modified gutter plugin that's calling requestMeasure to find out the line heights. The stack trace points to this specific requestMeasure.

I also noted that I can't seem to reproduce if the document is short. It only reproduced with documents longer than ~2x viewport height or more. Furthermore, once it happens, the editor stops working even when brought back into view. The error will just keep throwing.

[marijnh]

Hmm I can't seem to reproduce it at https://codemirror.net/try/ because it's running an older version of cm6 without the offending line.

Are you sure? The website is updated on every release, and that patch has been released.

No luck reproducing this, also with a larger doc.

[lishid]

Well here's what I'm seeing in the try sandbox: (note the missing let refBlock = ...)

And here's the current source on main:

[lishid]

I have further located the cause to this division by zero. Might have something to do with line wrapping too.

[marijnh]

Oh indeed, there was something flaky in my website rebuild script causing it to build from outdated packages. That should be fixed now, can you take another shot at reproducing this in the sandbox? (Or just paste a script that reproduces it so I can run it locally.)

[lishid]

Sounds good, will do.

[lishid]

Ok so the root cause is this trace:
ViewState.measure() (Need to use a scroll target to bypass the inView check while editor is not in view)
https://github.com/codemirror/view/blob/9d312953c8e4f786ffd41fd07735d1f8064ef51d/src/viewstate.ts#L263

DocView.measureTextSize() (which returns 0 for lineHeight)
https://github.com/codemirror/view/blob/9d312953c8e4f786ffd41fd07735d1f8064ef51d/src/docview.ts#L331

The dummy element is appended to this.dom, which is hidden, which causes the subsequent getBoundingClientRect to give an empty rect, causing lineHeight to be 0.

Repro is:

import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"

let dom = document.createElement('div');
dom.style.display = 'none';
dom.style.whiteSpace = 'pre-wrap';
document.body.appendChild(dom);

let cm = new EditorView({
  doc: new Array(500).fill("console.log('hello')").join('\n'),
  extensions: [basicSetup, javascript(), EditorView.updateListener.of(update => {
    update.view.requestMeasure({read: () => null, write: () => null});
  })],
  parent: dom
})

// This causes `scrollTarget` to be set to a non-null value in `measure`
cm.dispatch({
  selection: {
    anchor: 1,
    head: 1,
  },
  scrollIntoView: true,
});

setTimeout(() => dom.style.display = '', 1000);

[marijnh]

Ah, thanks -- I was missing the scrolling-to-something part in my attempts to reproduce. Can reproduce it with that. Attached patch makes it ignore line heights of zero.