How to use highcharts in prosemirror?

I have made a node called search_chart in which I want to render a highchart. I am using the nodeview to render the highchart. However, the highchart renders and disappears in quick succession (most prob due to not being well defined in schema). I referred to the code-mirror node view, however am not sure how will this work. Since highcharts usually contain of svgs and div elements, I have made the content of my node to be explicitly only contain those tags. However, this didn’t help. Can you take me to the right direction?

Thanks in advance :slight_smile:

Does it always disappear immediately on being rendered? Are there any interesting DOM changes happening inside the chart? Have you tried defining an ignoreMutation method that always returns true?

Hey! Thanks @marijn, the ignoreMutation fix works.

Can you give a brief insight as to what was happening exactly? And why does this work?

Thanks again

I’m not actually sure what is happening, and there might still be a problem. The instant re-parse was probably because you have some timeouts or animations messing with your DOM inside the node, which caused ProseMirror to believe that it had to re-parse that part of its document representation. But the question is still why that ended up dropping the node entirely. What kind of DOM structure are you generating?

I was generating a high charts block inside a “chart” node. I had used a timeout inside the highcharts to ensure it finds the “id” of the generated node. Probably that was causing the issue. However, the problem disappeared when I moved the highcharts to a separate angular component and used $compile. Not sure what was happening.