feat: enhances rich text upload with custom field API

* feat: adds admin.upload.collections[collection-name].fields to the RTE to save specific data on upload elements

* chore: renames flatten to unflatten in reduceFieldsToValues, disables automatic arrow function return in eslint

* docs: adds documentation for upload.collections[collection-name].fields feature

* feat: adds recursion to richText field to populate relationship and upload nested fields

* chore: removes unused css

* fix: import path for createRichTextRelationshipPromise

* docs: updates docs to include images for the RTE upload docs
This commit is contained in:
Jarrod Flesch
2022-01-21 10:15:51 -05:00
committed by GitHub
parent d07bb932ca
commit 0e4eb906f2
23 changed files with 885 additions and 259 deletions

View File

@@ -77,6 +77,16 @@ The default `leaves` available in Payload are:
Set this property to `true` to hide this field's gutter within the admin panel. The field gutter is rendered as a vertical line and padding, but often if this field is nested within a Group, Block, or Array, you may want to hide the gutter.
**`upload.collections[collection-name].fields`**
This allows [fields](/docs/fields/overview) to be saved as meta data on an upload field inside the Rich Text Editor. When this is present, the fields will render inside a modal that can be opened by clicking the "edit" button on the upload element.
![RichText upload element](https://payloadcms.com/images/fields/richText/rte-upload-element.jpg)
*RichText field using the upload element*
![RichText upload element modal](https://payloadcms.com/images/fields/richText/rte-upload-fields-modal.jpg)
*RichText upload element modal displaying fields from the config*
### Relationship element
The built-in `relationship` element is a powerful way to reference other Documents directly within your Rich Text editor.
@@ -143,7 +153,7 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
]
}
],
elements: [
leaves: [
'bold',
'italic',
{
@@ -154,7 +164,17 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
// any plugins that are required by this leaf go here
]
}
]
],
upload: {
collections: {
media: {
fields: [
// any fields that you would like to save
// on an upload element in the `media` collection
],
},
},
},
}
}
]