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>
19 lines
408 B
TypeScript
19 lines
408 B
TypeScript
import {
|
|
InlineBlockContainer,
|
|
InlineBlockEditButton,
|
|
InlineBlockLabel,
|
|
InlineBlockRemoveButton,
|
|
} from '@payloadcms/richtext-lexical/client'
|
|
import React from 'react'
|
|
|
|
export const BlockComponent: React.FC = () => {
|
|
return (
|
|
<InlineBlockContainer>
|
|
<p>Test</p>
|
|
<InlineBlockEditButton />
|
|
<InlineBlockLabel />
|
|
<InlineBlockRemoveButton />
|
|
</InlineBlockContainer>
|
|
)
|
|
}
|