The Taxi rich text editor allows text to be styled and links to be added without the user having to insert any HTML tags.
You can give any text area in your Email Design System rich text functionality. Using Rich Text you can provide your team with styling options such as bold, italics, underline, colours, fonts, text size etc. You can also restrict it so no styling can be added.
Make sure the controls are perfectly suited to your teams so they have all the options they need without having the opportunity to add in styling they shouldn't.
Music: https://www.bensound.com/royalty-free-music
By default, the rich text field allows an editor to add three types of formatting:
The Design System developer can add extra styles (e.g. text with brand colours) and refine the default styles (e.g. change the text colour for links).
To make an editable rich the word rich' must be added to the editable tag:
<editable name="editablename" rich></editable>
Use type="rich" to use a the rich editor as a field:
<field name="fieldname" type="rich"></field>
There are 2 notations for customised styles:
A single tag style consists of a single tag with fixed attributes. So if you can express the custom style with a single span tag with a fixed style attribute, you can use a single tag style. To redefine a link you need to use multiple tags (as a field tag is needed to set the href) so the multi-tag notation must be used.
Rich style definitions can appear anywhere in the Design System.
<span name="cool" label="Cool text" style="color: red;" rich-style-example> Example text </span>
Adding rich-style-example' to the end of this span tag marks it out as defining a rich style. The name and label attributes are used to give the style a name and optionally a label. Other attributes are optional and will be used when the style is applied to the text. The style="" attribute is not mandatory | use whichever attributes are needed for your style. Also note that any HTML tag can be used, not just <span>.
If the name matches one of the default styles (bold,italic) then the default style will be redefined to your new definition, otherwise the style will appear as a custom style on the custom styles list.
<rich-editable-style name="link"> <a replace-href="{{href}}" replace-style="color:{{acolor}}" replace="{{ rich.selection_text }}"></a> <field name="href" type="href"></field> <field name="acolor" type="color" default="#111111"></field> </rich-editable-style>
A <rich-editable-style> block is used to define a multi-tag style. In this case a link is used with fields for colour and href. Normal taxi replace-attribute notation is used. {{rich.selection_text}} is used to refer to the selected text from the rich editor.
Styles defined as a rich editable style are made available to all rich text fields in an Email Design System.
You may wish to control which rich editable styles are available on a given rich text field. You can do this by adding the allow-styles attribute to a given rich text field. Permitted values are bold, italic, link and any custom style names you may have. Values are separated with a space.
In this example, the rich text field will allow bold and italic formatting, but no custom styles or ability to add a link:
<field name="fieldname" type="rich" allow-styles="bold italic"></field>
If you want to have no styling options on a rich text field you can use allow-styles="none".
<field name="fieldname" type="rich" allow-styles="none"></field>
When more than one style is applied to the same piece of text, the styles nest inside one another in the rendered HTML. By default this order is fixed: bold, italic and underline sit innermost, custom styles sit in the middle, and links wrap everything (outermost). You can take explicit control of the order by adding a nest-level attribute to a <rich-editable-style>.
nest-level is a positive whole number where 1 is the innermost layer and higher numbers wrap further outside. A common use is nesting a link inside a text style instead of outside it:
<rich-editable-style name="bodyText" nest-level="2">
<span replace-style="font-weight:600;" replace="{{ rich.selection_text }}"></span>
</rich-editable-style>
<rich-editable-style name="link" nest-level="1">
<a replace-href="{{href}}" replace="{{ rich.selection_text }}"></a>
<field name="href" type="href"></field>
</rich-editable-style>
Here the link (level 1) nests inside the text style (level 2), producing <span><a>…</a></span> rather than <a><span>…</span></a>.
You can express any number of levels — for example a block wrapper, a text style and a link as three distinct layers. The numbers alone decide the nesting, so the result is the same regardless of the order the styles are listed in allow-styles:
<rich-editable-style name="block" nest-level="3"> … </rich-editable-style> <rich-editable-style name="bodyText" nest-level="2"> … </rich-editable-style> <rich-editable-style name="link" nest-level="1"> … </rich-editable-style>
Defaults: styles without a nest-level keep their existing behaviour — bold, italic and underline default to level 1, custom styles to level 2, and link to level 3. Email Design Systems that don't use the attribute render exactly as before, so the feature is entirely opt-in.
Notes:
You can pass custom parameters to rich text fields that control which styling options appear based on the field's context. This enables context-aware styling where the same rich-editable-style can show different options depending on where the rich text field is placed.
Define static parameters directly as attributes on the rich text field. These are accessible in choice rules via field.params.*:
<field type="rich" name="body" label="Body Text" show_red="true" allow-styles="textColor"></field>
In your rich-editable-style, you can then use the parameter in a choice rule:
<rich-editable-style name="textColor" label="Text Color">
<span replace-style="color:{{color}}" replace="{{rich.selection_text}}"></span>
<field type="dropdown" name="color" label="Color">
<choice value="#000000" label="Black"></choice>
<choice value="#FF0000" label="Red" rule="{% unless field.params.show_red %}{% remove %}{% endunless %}"></choice>
</field>
</rich-editable-style>
The "Red" option will only appear for rich text fields that have show_red="true" set.
Use the replace-* convention for dynamic parameters that reference other field values. The replace- prefix indicates the value should be evaluated as a Liquid expression:
<editable name="settings" label="Settings">
<field type="dropdown" names="body_background" label="Background Color">
<choice body_background="#FFFFFF" label="White"></choice>
<choice body_background="#013D5B" label="Atlantic (Dark Blue)"></choice>
</field>
</editable>
<editable name="content" label="Content">
<field type="rich" name="body" label="Body Text"
replace-background="{{editables.settings.body_background}}"
allow-styles="textColor"></field>
</editable>
The replace-background attribute evaluates the Liquid expression and makes the result available as field.params.background in choice rules:
<rich-editable-style name="textColor" label="Text Color">
<span replace-style="color:{{color}}" replace="{{rich.selection_text}}"></span>
<field type="dropdown" name="color" label="Color">
<!-- Dark colors for light backgrounds -->
<choice value="#000000" label="Black"
rule="{% unless field.params.background == '#FFFFFF' %}{% remove %}{% endunless %}"></choice>
<!-- Light colors for dark backgrounds -->
<choice value="#FFFFFF" label="White"
rule="{% unless field.params.background == '#013D5B' %}{% remove %}{% endunless %}"></choice>
</field>
</rich-editable-style>
When the background color dropdown changes, the rich text field's font color options automatically update to show only colors appropriate for the selected background.
Note: This feature requires Dynamic Dropdown Choice Rules to be enabled at the organization level. Contact support to activate this capability for your account.
The <style-example-only> tag can be used where styles are defined but not used in default content. Everything inside a <style-example-only> tag is removed before rendering.
In addition, you can specify which style information should be added to any inline links in a rich text field by adding the link-style= attribute to a rich text field, for example:
<editable name="bodycopy" link-style="color:#ffffff;" rich> body copy text </editable>
In this example, any links added in this rich text field will have a style attribute added setting the colour to white. (Note that currently, liquid references can't be added to the link-style attribute).