New visual editing - how to use components in NextJS?

Community Support
1

Hi guys,

So I am working on porting my NextJS content_blocks builder over from React databinding to the new editable regions. At the beginning this went like a breeze, because in almost no time I had a working array of content_blocks where I defined editables for text and images. And this works perfectly. But my content_blocks don’t only have text and images that are editable, but also some settings like background-color and padding. So I figured that is where components come in right? But here is where I am having problems:

  • Now the first problem that arose is that the @cloudcannon/editable-regions package is not transpiled and so it is unusable with the NextJs bundler. I’ve already made a Github issue and think I tackled this by incorporating a registerReactComponent in my app directly which seems to work (I can log window.cc_components in the browser console).
  • The docs are not clear on where to define the data-attributes for components (the example doesn’t show them) and doesn’t show how to handle nested front-matter paths. But I’ve tried both defining them in the component block and outside of it.

So here’s what my structure looks like:

<div data-editable="array" data-id-key="type" data-prop="content_blocks">
<div data-editable="array-item" data-id={block.type}>
<section block={block} data-component="cta" data-editable="component" data-prop="#content_blocks.4">...some text-editables</Section>
</div>
</div>

I’ve tried different things for data-prop, like content_blocks.4, content_blocks.index.4 and more but to no avail. When I remove data-prop, Cloudcannon overwrites the props resulting in an empty div, when I add it, the content shows but you cant visual edit anymore, although the outline indicators are showing on hover. Hope anyone get put me in the right direction. Is the data-prop the issue or is the registration not working correctly.

Tx!

1 Like
2

Hi Lex :waving_hand:

Thanks for your GitHub report (and PR!). I’ll give them a closer look and follow up with you over there!

It’s also good to hear that the editable regions have been working well for you so far, and the example you’ve posted looks very close to what you want. When you have nested editable regions, their data-props are all relative to their parents data-prop and in the case of array items, their data-prop is always their index in the array. This means that your component already has the context of content_blocks.4 from its parents, and so all it needs is data-prop="".

All together it’d look like:

<div data-editable="array" data-id-key="type" data-prop="content_blocks"> 
<div data-editable="array-item" data-id={block.type}>
<section block={block} data-component="cta" data-editable="component" data-prop=""></section>
</div>
</div>

You could even combine the array item and component, since array items also support live rendering components, in which case you’d have:

<div data-editable="array" data-id-key="type" data-component-key="type" data-prop="content_blocks"> 
<div data-editable="array-item" data-id={block.type} data-component={block.type}>
</div>
</div>
3 Likes
3

Ha, I feel kinda stupid now. Thanks @Tate!

2 Likes