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>
21 lines
502 B
TypeScript
21 lines
502 B
TypeScript
'use client'
|
|
import {
|
|
BlockCollapsible,
|
|
BlockEditButton,
|
|
BlockRemoveButton,
|
|
} from '@payloadcms/richtext-lexical/client'
|
|
import { useFormFields } from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const BlockComponent: React.FC = () => {
|
|
const key = useFormFields(([fields]) => fields.key)
|
|
|
|
return (
|
|
<BlockCollapsible>
|
|
MY BLOCK COMPONENT. Value: {(key?.value as string) ?? '<no value>'}
|
|
Edit: <BlockEditButton />
|
|
<BlockRemoveButton />
|
|
</BlockCollapsible>
|
|
)
|
|
}
|