\s*(?[\s\S]*?)\s*<\/Warning>/,
toBlock: ({ body = '' }) => `\n\n${body}\n\n`,
toPreview: ({ body = '' }) => {
const element = document.createElement('div');
const destroy = CMS.renderRichText(element, body);
element.className = 'bg-red-100';
element.addEventListener('Unmount', destroy, { once: true });
return element;
},
});
```
:::
In the Svelte example, the component itself calls the method with an [attachment](https://svelte.dev/docs/svelte/@attach), which runs the returned `destroy` function automatically when the component is unmounted:
```svelte
renderRichText(element, body)}>
```
Because the nested value goes through the same component matching as the field itself, a component can contain other components, or even another instance of itself, as long as the [`pattern`](/en/docs/api/editor-components#required-properties) of each component can match its own block within the parent’s. Any nested component preview is rendered in place, whether it returns a string, a DOM element or a React element.
::: tip Raw values for nested fields
The value of a nested RichText field is passed to `toPreview` as is, including the syntax of any component within it. It’s never partially rendered, regardless of the order in which components are registered, so you can always pass it to `renderRichText` or process it yourself.
:::
## Using `marked` and `DOMPurify`
If you need an HTML string rather than a rendered element — for example, to pass it to a React component’s `dangerouslySetInnerHTML` prop — Sveltia CMS exposes the two libraries it uses internally, so you don’t need to add a dependency of your own:
* `marked` — The [Marked](https://marked.js.org/) parser, which converts a Markdown string to an HTML string
* `DOMPurify` — The [DOMPurify](https://github.com/cure53/DOMPurify) sanitizer, which strips scripts and other dangerous markup from an HTML string
These are available on the `window` object when Sveltia CMS is loaded, whether you use the CDN build or the npm package. No additional imports are necessary to use them.
```js
const html = DOMPurify.sanitize(marked.parse(markdown));
```
The CMS renders the preview pane with the `breaks` option enabled, meaning a single line break becomes a `
`. Pass the same option if you want your output to match:
```js
const html = DOMPurify.sanitize(marked.parse(markdown, { breaks: true }));
```
Note that, unlike `renderRichText`, this approach doesn’t render custom editor components or resolve internal image paths; the value is converted as plain Markdown.
::: danger Security Risk
Always sanitize the HTML before inserting it into the DOM, as the examples above do. Markdown allows raw HTML, so skipping the sanitizer can expose your CMS to [cross-site scripting](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) (XSS) attacks if untrusted users have access to the CMS, especially when using [Open Authoring](/en/docs/workflows/open), because entries can be written by anybody.
:::
::: warning Shared parser instance
`marked` is the very parser the CMS uses to render the preview pane, so any extension you add with [`marked.use()`](https://marked.js.org/using_pro) also changes how the CMS itself renders Markdown. Prefer passing [options](https://marked.js.org/using_advanced) to `marked.parse()` for one-off customization.
:::