Nested editor components

[rishii1909]

Is your feature request related to a problem? Please describe. I have been trying to create a page editor, and everything has been great so far, except for allowing the user to customize the header in the same UI as any other page. The header UI loads successfully but no changes are possible as such.

Describe the solution you'd like Any way to nest <Editor/>, or <Frame data={} /> to allow for dynamic rendering of subcomponents such as header/footer

Additional context Here is my current implementation : <Editor resolver={Resolvers} > <Grid celled className='full-height admin-panel'> <GridColumn className='sideMenu' width='13'> <Fade transitionDuration={transition} show={menuJsonData}> <Editor enabled={true} resolver={Resolvers}> <Frame data={menuJsonData}> <Element is={Container} className='full-height flex-cont' canvas> <div className='full-height red'> <Header as='h2' icon> <Icon name='add circle' /> <HeaderContent>Add content here</HeaderContent> </Header> <div> </div> </div> </Element> </Frame> </Editor> </Fade> <Frame> <Element is={Container} className='full-height flex-cont' canvas> <div className='full-height red'> <Header as='h2' icon> <Icon name='add circle' /> <HeaderContent>Add content here</HeaderContent> </Header> <div> </div> </div> </Element> </Frame> </GridColumn> <GridColumn className='sideMenu' width='3'> <SettingsPanel></SettingsPanel> <Toolbox slug={slug}></Toolbox> </GridColumn> </Grid> </Editor>

[ankri]

Could you please elaborate further, why you need nested <Editor />s? One at root level should be fine.

[pepas24]

I don't know if have a nested Editor is the best aproach, but I have a similar use case, for example, think of a Header component that receive a categories prop:

<Header logo={logo} categories={categories} />

How can one pass the category as dynamic prop (from the a backend endpoint)?, because the data serialized and saved in the db it's a plain array and if the user add a new category (probably in a different view of the app or even an other app) will not be reflected in that object, without add a sort of method that update the categories prop of the Header component in the serialized layout. Maybe the only solution is to modify directly the data in the Frame component?

[hugominas]

Hi @pepas24 I guess you should be using state manager for that like Redux, on our case we are using https://www.npmjs.com/package/react-hooks-global-state its a lightweight hooks option. I think this should be handled outside of Craft as its defined by your ecosystem

[pepas24]

@hugominas Yes, I understand that is out of the scope of Craft.js but can you point me out with an example or some reference on how to solve this kind of problems? I mean, the Header component in the last example expect some props, but if that props are in the serialized state of Craft I can't pass down to it because the state was loaded from <Frame data={data} />. I was trying to fetch the categories from the component itself but feels like an antipatern. I'm new on React so I don't use Redux but I will take a look at react-hooks-global-state as you mention. Thanks

[hugominas]

Yap that's how we handle it. We have global application state using one of the mentioned options and each component updates itself when this changes. So you can fetch the data on page load from an endpoint, update the global state without the need to pass things down the component tree. react-hooks-global-state is a good starting point! hope it works out for you