contentful / field-editors

React components and extensions for building Contentful entry editor
https://contentful-field-editors.netlify.app/
MIT License
149 stars 114 forks source link

feat: allow MultipleEntryReferenceEditor to render children prop #1662

Open nerdess opened 1 month ago

nerdess commented 1 month ago

The commit message is a bit misleading. This is about offering the ability to extend the body of an MultipleReferenceEditor entry with custom React elements.

Check storyboard > Multiple Entry > Custom Children.

The content "Some custom children..." has been added using the new optional renderCustomChildren prop.

Bildschirmfoto 2024-05-23 um 14 54 52
<MultipleEntryReferenceEditor
    renderCustomChildren={() => {
      return <>Some custom children. Anything can be rendered here!</>;
    }}
    viewType="link"
    sdk={sdk}
    isInitiallyDisabled={isInitiallyDisabled}
    parameters={{
      instance: instanceParams || {
        showCreateEntityAction: true,
        showLinkEntityAction: true,
      },
  }}
/>

I was missing this feature when developing a custom Contentul app. Might be useful for others.

colomolo commented 2 weeks ago

Hi @nerdess. MultipleEntryReferenceEditor component have renderCustomCard prop that has similar functionality. I believe you can achive the same result with it.

Please refer to the Storybook: https://contentful-field-editors.netlify.app/?path=/story/editors-multiple-entry--custom-card

nerdess commented 2 weeks ago

@colomolo Yeah I am aware of renderCustomCard and I started with it but faced limitations. It's been half a year since I did that amendment, if I remember correctly it was like this: with just popping in the children I did have the correct header out-of-the-box and also the drag/drop functionality of the list. I did not have to rebuild all that.