@kontent-ai/delivery-sdk
Advanced tools
Changelog
15.0.0-0 (2024-09-10)
@kontent-ai/rich-text-resolver
library instead.propertyName
resolver configuration. All elements are now referenced only by their codenames present in
Kontent.aiIContentItem
narrowing down available values of system attributes
(8c894af)RichTextElement
take generic parameter narrowing down allowed types of linked items
(68b31a8)propertyName
resolver configuration. All elements are now referenced only by their codenames present in
Kontent.ai
(7ef5951)@kontent-ai/rich-text-resolver
library instead.
(2bd30c3)In < 15.0.0
versions of this SDK you were able to resolve RTE elements like this:
import { createRichTextHtmlResolver, createDeliveryClient, linkedItemsHelper } from '@kontent-ai/delivery-sdk';
export type Movie = IContentItem<{
plot: Elements.RichTextElement;
}>;
export type Actor = IContentItem<{
firstName: Elements.RichTextElement;
}>;
// get content item with rich text element
const response = (
await createDeliveryClient({ environmentId: '<YOUR_ENVIRONMENT_ID>' }).item<Movie>('itemCodename').toPromise()
).data;
// get rich text element
const richTextElement = response.item.plot;
// resolve HTML
const resolvedRichText = createRichTextHtmlResolver().resolveRichText({
element: richTextElement,
linkedItems: linkedItemsHelper.convertLinkedItemsToArray(response.data.linkedItems),
imageResolver: (imageId, image) => {
return {
imageHtml: `<img class="xImage" src="${image?.url}">`,
// alternatively you may return just url
imageUrl: 'customUrl'
};
},
urlResolver: (linkId, linkText, link) => {
return {
linkHtml: `<a class="xLink">${link?.link?.urlSlug}</a>`,
// alternatively you may return just url
linkUrl: 'customUrl'
};
},
contentItemResolver: (itemId, contentItem) => {
if (contentItem && contentItem.system.type === 'actor') {
const actor = contentItem as Actor;
return {
contentItemHtml: `<div class="xClass">${actor.elements.firstName.value}</div>`
};
}
return {
contentItemHtml: ''
};
}
});
const resolvedHtml = resolvedRichText.html;
But since this resolver is now removed in >= 15.0.0
you need to resolve RTE using the @kontent-ai/rich-text-resolver
package:
import { createDeliveryClient, Elements, IContentItem } from '@kontent-ai/delivery-sdk';
import { PortableTextOptions, toHTML } from '@portabletext/to-html';
import { nodeParse, transformToPortableText, resolveTable, resolveImage } from '@kontent-ai/rich-text-resolver';
type Movie = IContentItem<{
title: Elements.TextElement;
plot: Elements.RichTextElement<Actor>;
}>;
type Actor = IContentItem<{
first_name: Elements.RichTextElement;
}>;
const itemResponse = await createDeliveryClient({
environmentId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9'
})
.item<Movie>('warrior')
.toPromise();
const richTextElement = itemResponse.data.item.elements.plot;
const linkedItems = Object.values(itemResponse.data.linkedItems);
const parsedTree = nodeParse(richTextElement.value);
const portableText = transformToPortableText(parsedTree);
const portableTextComponents: PortableTextOptions = {
components: {
types: {
image: ({ value }) => {
return resolveImage(value, (image) => {
return `<img class="xImage" src="${image.asset.url}">`;
});
},
component: ({ value }) => {
const linkedItem = linkedItems.find((item) => item.system.codename === value.component._ref);
switch (linkedItem?.system.type) {
case 'actor': {
const actor = linkedItem as Actor;
return `<div class="xClass">${actor.elements.first_name.value}</div>`;
}
default: {
return `Resolver for type ${linkedItem?.system.type} not implemented.`;
}
}
},
table: ({ value }) => {
// default impl
return resolveTable(value, toHTML);
}
},
marks: {
internalLink: ({ children, value }) => {
return `<a class="xLink" href="https://yourdomain.com/actor/${value.reference._ref}">${children}</a>`;
}
}
}
};
const resolvedHtml = toHTML(portableText, portableTextComponents);