You can now use the Show More/Show Less truncation functionality with rich text fields. Previously, truncation was not supported with rich text because we risked cutting off a closing HTML tag, which could break the page.
Upgrade Implications:
Note: This theme version includes breaking changes. Be sure to follow the upgrade implications in the breaking changes post.
This feature is available in Early Access in English on the branch
early-access-spring-22. Here’s how to use the Early Access branches of the Theme and SDK!
For the full process on adding rich text and rich text truncation to your card, follow the steps in the Rich Text unit. The following highlights the changes needed for rich text truncation if you already have rich text on your card.
In built-in theme cards that use ANSWERS.formatRichText, we have updated the showMoreDetails object to take in a new truncatedDetails property, so you will only get this property by default if you add these cards after upgrading to Theme 1.29 or later. If you want to use RTF truncation on a previously forked card or on a card you added RTF to, use truncatedDetails in place of showMoreLimit for the RTF card showMoreDetails property.
Your card will look something like:
return {
title: profile.name, // The header text of the card
url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
...
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
// Note: If you are using rich text for the details, you should not enable this feature.
showMoreDetails: {
truncatedDetails: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 38) : null, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},
...
}
The value for truncatedDetails is similar to details, but passes an additional parameter to ANSWERS.formatRichText: the character count that the rich text content will be truncated at, in this case 38. This character count will ignore all non-text characters, such as HTML tags and formatting. Any string value can be passed into truncatedDetails.
For example if you have the below card details:
The 3 hashbangs at the start and middle will be ignored, as well as the new line symbols. Truncating at 38 characters would result in the below HTML.
By default, an ellipsis is added to the end of the truncated text. This can be customized by adding one more parameter to ANSWERS.formatRichText to specify the suffix.
For example, to remove the ellipsis completely, you could specify a blank string instead:
ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 38, '')
Finally, showMoreLimit can still be used for truncating non rich text, but truncatedDetails must be used instead of showMoreLimit for RTF fields.