Docs Developer Site
Developer Docs Next.XP next Nextjs Rich text, links, and media

Rich text, links, and media

Contents

Rich text from XP contains structured information for internal links, images, and macros in addition to HTML. The adapter’s RichTextView adapts Next.XP metadata and URL handling, then delegates the underlying React rendering to @enonic/react-components.

Rich text data

Include the adapter’s richTextQuery selection when querying a rich-text field. The result supplies processed HTML and reference data for links, images, and macros. Pass the complete value and page metadata to RichTextView.

import RichTextView from '@enonic/nextjs-adapter/views/RichTextView';

export function Article({data, meta}) {
    return <RichTextView data={data.body} meta={meta}/>;
}

The view supplies @enonic/react-components with Next.js-aware link, image, and macro adapters. The supporting library parses the processed HTML and resolves its structured references. A custom replacer may override individual DOM nodes.

URL processing

In Guillotine 9, imageUrl, mediaUrl, attachmentUrl, and pageUrl return objects and require a subselection. For application fields outside rich text, query them with the adapter’s helpers and render them with the matching functions:

  • imageUrlQuery()/imageUrl(), mediaUrlQuery()/mediaUrl(), and attachmentUrlQuery()/attachmentUrl() build absolute media URLs based on ENONIC_MEDIA_CDN, which defaults to ENONIC_API.

  • pageUrlQuery()/pageUrl(data, meta) build site-relative content URLs, adding a non-default locale.

`... on media_Image { ${imageUrlQuery({scale: 'width(500)'})} }`

<img src={imageUrl(photo.imageUrl)}/>
<Link href={pageUrl(parent.pageUrl, meta)}>Back</Link>

RichTextView applies the same functions to links and images in rich text.

Enonic XP 8 media references use /_/media:image/ and /_/media:attachment/. Adapter 6 recognizes these formats.

Editing behavior

Keep adapter rich-text and macro views in the render path while previewing. They add the component information required for in-place editing and can render disabled or unresolved macros safely.

See the Guillotine documentation for the underlying rich-text GraphQL schema.

Contents

Contents