Rendering a React component inside a node

21

@marijn: you mean retrieving the react component from that DOM subtree ? That is not needed. Only the DOM node to which the react component has been mounted to is needed for unmounting:

ReactDOM.unmountComponentAtNode(domContainerNode)

and domContainerNode elements can easily be found with a DOM query in the hook, from the root of the subtree to be deleted.

22

ProseMirror will ā€˜dropā€™ whole subtrees at a time, without recursing through them, so an unmount-related callback would not be called for every node, but only for each subtree thatā€™s dropped. So youā€™d want to scan those in the callback, to find the relevant React components.

Does that sound like itā€™d work?

23

Yes, that is fine. In the callback, the React cleanup can be done, for each component within that dropped subtree.

24

Implemented in this commit, which will be part of the upcoming 0.11.0

1 Like
25

great, thanks, I look forward to 0.11.0

27

how could callback be implemented for cleaning in react?

28

Hey guys - I have been trying to render React components as NodeView too. I have created this repo to show what I am currently doing:

  1. Use a NodeView to render the component
  2. Instead of using ReactDOM.render, I am using ReactDOM.createPortal. I return the portal component to my editor component which then renders it on the page for it to access my appā€™s context
  3. Iā€™ve wrapped the NodeView in a React context so that its props are available within the component using hooks

Is this how you guys are approaching it too?

4 Likes
29

Thank you for the idea. Actually Iā€™m trying to replicate this, but now I think prosemirror is split into different modules. So now where can we find { Block } coz we canā€™t find Block in prosemirror/dist/model ?

30

There is no export named Block in the entire library. See the reference manual to look up specific exports.

31

Sorry If Iā€™m wrong but I was referring to this prosemirror-with-react-rendered-node/example-node.js at master Ā· ericandrewlewis/prosemirror-with-react-rendered-node Ā· GitHub