63cc9668df
With this PR, you can now customize the way that `blocks` and `inlineBlocks` are rendered within Lexical's `BlocksFeature` by passing your own React components. This is super helpful when you need to create "previews" or more accurate UI for your Lexical blocks. For example, let's say you have a `gallery` block where your admins select a bunch of images. By default, Lexical would just render a collapsible with your block's fields in it. But now you can customize the `admin.components.Block` property on your `block` config by passing it a custom React component for us to render instead. So using that, with this `gallery` example, you could make a dynamic gallery React component that shows the images to your editors - and then render our built-in `BlockEditButton` to allow your editors to manage your gallery in a drawer. Here is an example where the BlockEditButton is added to the default Block Collapsible/Header:  --------- Co-authored-by: James <james@trbl.design>
11 lines
258 B
TypeScript
11 lines
258 B
TypeScript
'use client'
|
|
|
|
import { useFormFields } from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const LabelComponent: React.FC = () => {
|
|
const key = useFormFields(([fields]) => fields.key)
|
|
|
|
return <div>{(key?.value as string) ?? '<no value>'}yaya</div>
|
|
}
|