Contact salesLog in
Try for free

Spice up things with Rich Text 🌶️

Add a RichText component

Let's have fun with some text formatting, importing and rendering the RichText component from ReactBricks (and setting a default value for the new "description" prop):

// Thumbnail.tsx
import React from 'react'
import { types, Text, RichText } from 'react-bricks/frontend'
const Thumbnail: types.Brick = () => {
return (
<div className="p-6 text-center">
<Text
propName="title"
renderBlock={({ children }) => <h1 className="text-2xl font-bold">{children}</h1>}
placeholder="Type a title..."
/>
<RichText
propName="description"
renderBlock={({ children }) => (
<p className="text-lg text-gray-500">{children}</p>
)}
placeholder="Type a description"
allowedFeatures={[
types.RichTextFeatures.Bold,
types.RichTextFeatures.Highlight,
]}
/>
</div>
)
}
Thumbnail.schema = {
name: 'thumbnail',
label: 'Thumbnail',
getDefaultProps: () => ({
title: 'Hello, world!',
description: 'Lorem ipsum dolor sit amet.',
}),
sideEditProps: [],
}
export default Thumbnail

You see that now you are able to edit also a description text below the headline, and, if you select a part of this text, you can apply a Bold or Highlight style.

Rich text visual edit

The RichText component has the allowedFeatures props where you can specify an array of allowed rich text features. Here we enabled just Bold and Highlight, but you could choose also Italic, Code, Link, OrderedList, UnorderedList.

Override the default formats

If we don't like the default yellow background for the highlight, we can change it, overriding the renderHighlight render function. The same is true for every rich text feature renderer:

<RichText
propName="description"
renderBlock={({ children }) => (
<p className="text-lg text-gray-500">{children}</p>
)}
placeholder="Type a description"
allowedFeatures={[
types.RichTextFeatures.Bold,
types.RichTextFeatures.Highlight,
]}
renderHighlight={({ children }) => (
<span className="px-1 rounded bg-blue-200 text-blue-900">
{children}
</span>
)}
/>

And now our highlight text appear in this way:

Render custom highlight
Time to get points

If you'd like the user to be able add color to some words in a rich text, you can:

Subscribe to our newsletter!

Be the first to discover our latest news. No spam, promise.