d55306980e
### What
This PR introduces a new `beforeDocumentControls` slot to the edit view
of both collections and globals.
It allows injecting one or more custom components next to the document
control buttons (e.g., Save, Publish, Save Draft) in the admin UI —
useful for adding context, additional buttons, or custom UI elements.
#### Usage
##### For collections:
```
admin: {
components: {
edit: {
beforeDocumentControls: ['/path/to/CustomComponent'],
},
},
},
```
##### For globals:
```
admin: {
components: {
elements: {
beforeDocumentControls: ['/path/to/CustomComponent'],
},
},
},
```
24 lines
556 B
TypeScript
24 lines
556 B
TypeScript
import type { BeforeDocumentControlsServerProps } from 'payload'
|
|
|
|
import React from 'react'
|
|
|
|
const baseClass = 'custom-draft-button'
|
|
|
|
export function CustomDraftButton(props: BeforeDocumentControlsServerProps) {
|
|
return (
|
|
<div
|
|
className={baseClass}
|
|
id="custom-draft-button"
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'calc(var(--base) / 4)',
|
|
}}
|
|
>
|
|
<p className="nav__label" style={{ color: 'var(--theme-text)', margin: 0 }}>
|
|
Custom Draft Button
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|