I have build an editor, which are used to build online posters. It an editor in the middle and blocks from the right you drag in, and then you can edit the properties of the blocks, in the editor to the right that pops up when you click a block.

My content for posters are divided into "Poster (one)" > "Section (many)" > "Blocks (many)"

Until now i have had a a large Provider on top of evertyhing, PosterProvider.

My problem is when we edit a block, it updated the block in the provider, but i kinda rebuilds the HTML again, since i show all sections by doing:

poster.sections.map(....)

Now, what i wanted to do was to make a SectionProvider - which only handles the sections content. It would register itself with the PosterProvider, that data could be retrieved from it. Then when i Save the entire poster to database, the PosterProvider, would ask each sectionprovider, for its content.

This way, editing a single block somewhere, wouldnt make PosterProvider rerender (or try to rerender) everything. Also, our data / posters gets really large, so the data is like ~10mb in raw JSON - you can feel the slowness of the system

But, my problem is right now, that even if i make the SectionProvider, my editor, isnt in the sectionproviders space, and cannot be in its space. I do not know how to "reference a foreign provider". Ususally my editor just did const poster = usePoster() and then we would have access to everything.

However now, with SectionProvider, there isnt "one place to go" for updating blocks - and I am struggling as to how to do this pattern correctly.

Hope my question makes sense.