Decorators

You can use decorators to modify the rendering behaviour of your content.

Usage #

The decorator find your custom patterns and will decorate them with the component that you want.

You can use createDecorator utility to create your custom decorators.

Each decorator can have three parts:

• strategy
• component
• props

Strategy #

The decorator strategy help you to find the patterns that needs to be replaced.

You can define easily your strategies with the help of findEntitiesOf utility.

Component #

After finding the matches of your pattern in the editor state, they'll be replaced by the provided component.

props(optional) #

You can optionally pass some default props to your component. The props value should be an object.

As an example, you can define a decorator that find all link entities and replace those entities with the link component.

Example #

An example of createDecorator to add images to the editor: