fix(richtext-lexical): ensure sub-fields have access to full document data in form state (#9869)
Fixes https://github.com/payloadcms/payload/issues/10940 This PR does the following: - adds a `useDocumentForm` hook to access the document Form. Useful if you are within a sub-Form - ensure the `data` property passed to field conditions, read access control, validation and filterOptions is always the top-level document data. Previously, for fields within lexical blocks/links/upload, this incorrectly was the lexical block-level data. - adds a `blockData` property to hooks, field conditions, read/update/create field access control, validation and filterOptions for all fields. This allows you to access the data of the nearest parent block, which is especially useful for lexical sub-fields. Users that were previously depending on the incorrect behavior of the `data` property in order to access the data of the lexical block can now switch to the new `blockData` property
This commit is contained in:
@@ -654,6 +654,26 @@ const ExampleCollection = {
|
||||
]}
|
||||
/>
|
||||
|
||||
## useDocumentForm
|
||||
|
||||
The `useDocumentForm` hook works the same way as the [useForm](#useform) hook, but it always gives you access to the top-level `Form` of a document. This is useful if you need to access the document's `Form` context from within a child `Form`.
|
||||
|
||||
An example where this could happen would be custom components within lexical blocks, as lexical blocks initialize their own child `Form`.
|
||||
|
||||
```tsx
|
||||
'use client'
|
||||
|
||||
import { useDocumentForm } from '@payloadcms/ui'
|
||||
|
||||
const MyComponent: React.FC = () => {
|
||||
const { fields: parentDocumentFields } = useDocumentForm()
|
||||
|
||||
return (
|
||||
<p>The document's Form has ${Object.keys(parentDocumentFields).length} fields</p>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## useCollapsible
|
||||
|
||||
The `useCollapsible` hook allows you to control parent collapsibles:
|
||||
|
||||
Reference in New Issue
Block a user