RichTextViewer

The RichTextViewer can display html, richtext, or markdown formatted text as styled output. You can set the type of the RichTextViewer to one of those three values, and that will determine how the component renders the content provided.

For more information on how to use the features and props for this component, check out the developer documentation.

If the RichTextViewer type is set to richtext, the component expects the content to be formatted as a Slate rich text object. Proper text styling and rich elements will render as they appeared within the RichTextEditor that they were composed in.

If the RichTextViewer type is set to html, the content can be any valid HTML text. Passing invalid HTML could potentially cause an error. In this event, the RichTextViewer will render the ErrorState component with an optional onRetry function if provided.

If the RichTextViewer type is set to markdown, the component expects the content to be valid markdown syntax. Similar to the RichTextEditor's markdown input, the following markdown syntax is fully supported in this mode: headings, bold, italics, strikethrough, lists, links, and images. Check out this documentation for more information on markdown syntax.

Custom styling

The markdown mode for RichTextViewer's support custom component renering for certain text patterns or markdown elements. The markdownMap prop accepts an object where each attribute matches one of the marked.js tokens, and its corresponding value is a functional component that accepts the token and returns a custom component. This is a useful feature for overriding native markdown renderings with more controlled component behavior for similar elements. In the following example, the native link is replaced with a Cosmos Link that includes a preview feature.

Another custom rendering prop that the RichTextViewer offers is the interactionRenderers array. An interactionRenderer is an object that includes a regex pattern and a component. When the RichTextViewer content changes, each interactionRenderer is applied to the text and any portions of the text that match the provided regex will be replaced with the associated component. The Feed component leverages this feature for special renderings of mentions and tags. The following demo includes this same functionality. Try creating a mention via the @ trigger, or a tag using #, and then see how those elements are rendered in the RichTextViewer.

NameTypeDefaultDescription
content*string
type*
'markdown' |'html' |'richtext' 
interactionRenderersInteractionRenderers[]
markdownMapMDMap
onRetry