In our Thumbnail
brick, let's change the "Thumbnail" text with a visual editable Text from React Bricks:
// Thumbnail.tsximport React from 'react'import { types, Text } from 'react-bricks'const Thumbnail: types.Brick = () => {return (<div className="p-6 text-center"><TextpropName="title"renderBlock={({ children }) => <h1 className="text-2xl font-bold">{children}</h1>}placeholder="Type a title..."/></div>)}Thumbnail.schema = {name: 'thumbnail',label: 'Thumbnail',getDefaultProps: () => ({}),sideEditProps: [],}export default Thumbnail
Now, when you add a Thumbnail, you'll see a "New text" title.
But the real news here is that you can click on the text and edit it directly! Isn't it cool?
The Text component needs 3 props:
propName
: the name of the prop for textrenderBlock
: a functional component rendering the textplaceholder
: the text to show when the text is emptyWhere does the "New text" come from?
It is the default text for a Text component where no default is provided. Let's fix it!
Go to the schema
static property and add a good default for our title
prop:
// Thumbnail.tsx...Thumbnail.schema = {name: 'thumbnail',label: 'Thumbnail',getDefaultProps: () => ({title: 'Hello, world!'}),sideEditProps: [],}export default Thumbnail
Now you see that when you add a new Thumbnail, the Hello, world!
text appears.
Yes, I know you chose another text... 😎