Rich text

Display and edit rich text

With the Rich text input element, you can:

• display rich text on a page,
• allow users to input and edit rich text,
• allow users to mention other users in the text.

In the screenshot above, you can see two sections with:

1. the element in editing mode, where users can type and style content
2. the element in read-only mode, where users can see what the content will look like on an HTML page.

Style rich text

When using the Rich text input element, you can:

• type markdown,
• show or hide the style bar,
• add bullet points, ordered lists, links, quotes, and code blocks, and
• tag / mention other users.

Here's what it looks like in action:

Add mentions

If you want to allow users to tag other users, you'll need to define a list of users who can be tagged.

In order to do that, you'll need to:

• select the element on the page
• go to the Settings > Mentions
• provide a list of users with an Id and Label,
• map the Id and Label values of the element to the correct columns (or keys) in your list of users.

In the example above, we have an array variable (i.e. a list) with two users. Each user has an id and a name.

In the element settings, we bound the users variable to the Mentions Lists property, and mapped the id and name values to the Id and Label properties of the element.

Update or create record

A really cool way to use the Rich text input element is to allow users to create or update content.

For example, users could:

• write articles for you,
• update their user profile, or
• create a product page.

In order to do that, you'll need to:

1. add a button with a workflow triggered On click, and
2. send the value from the Rich text - value variable.

In the example above, we make an API request to POST the value of the Rich text - value variable to an article column in our backend.

You can follow the same logic to send data to an Airtable database, Xano, Supabase, or any other backend.

Custom menu

In the design tab of the rich text input element, you can choose to enable Custom menu:

This option allows you to design your own editing menu, to match your brand's design system for example:

You can add the buttons you want with the style you want and use the Execute component action to trigger the desired behavior:

Here’s what it looks like in action with the Toggle Bold, Toggle Italic, and Toggle Underline actions:

Rich text component actions include:

• Focus Rich text to focus the user on the rich text element
• Set link to add a link to the selected text
• Set tag to choose the HTML tag of the selected text
• Toggle bold to make the selected text bold
• Toggle italic to make the selected text italic
• Toggle underlineto underline the selected text
• Toggle strike to strike out the selected text
• Set color to choose a color for the selected text
• Toggle bullet list to create an unordered list of items
• Toggle ordered list to create a numbered list of items
• Toggle Code Block to create a code block
• Toggle Blockquote to create a blockquote
• Undo to undo the previous user action
• Redo to redo the previous user action