Callback when NodeView is inserted into DOM

[elimarable]

So, I have nearly the exact same question as:

Fire event when NodeView underlying DOM element is inserted into DOM

I’m using NodeView to render React component which is using react-lazy-load package inside. The code looks like this: https://bitbucket.org/atlassian/atlaskit/src/dbadad6df5536ce5ad686aee8bc1df41f338d8e6/packages/editor-core/src/nodeviews/factory.tsx?at=master&fileviewer=file-view-default The problem is that react-lazy-load checks whether its DOM element is inside the document or is in the viewport and renders children in this case. Otherwise it renders an empty div. When NodeView’s “dom” is a…

But I didn’t think I should necro a thread from 2017, particularly since my question doesn’t involve React. Instead, it involves MathQuill (again). I’ll let the MathQuill docs explain:

MQ.MathField.reflow()

MathQuill uses computed dimensions, so if they change (because an element was mathquill-ified before it was in the visible HTML DOM, or the font size changed), then you’ll need to tell MathQuill to recompute:

var mathFieldSpan = $('<span>\\sqrt{2}</span>');
var mathField = MQ.MathField(mathFieldSpan[0]);
mathFieldSpan.appendTo(document.body);
mathField.reflow();

Currently, if I load markup into Prosemirror that contains math expressions, they sometimes have visual bugs. Is there a callback for when the NodeView gets added to the DOM, so that I can call mathField.reflow()?

[marijn]

Node views are only created when they are about to be added to the document tree, so I think just setting a requestAnimationFrame when the view is created should work.

[elimarable]

Using requestAnimationFrame worked perfectly, thank you!