@kontent-ai/delivery-sdk
Advanced tools
@kontent-ai/delivery-sdk - npm Package Versions
Changelog
15.0.0-0 (2024-09-10)
⚠ BREAKING CHANGES
- Removes parser & rich text resolver. To work with RTE use the newer and better
@kontent-ai/rich-text-resolverlibrary instead. - Removes
propertyNameresolver configuration. All elements are now referenced only by their codenames present in Kontent.ai
Features
- Adds narrowing types for Taxonomy & Multiple choice elements (3118752)
- Adds optional generic types to
IContentItemnarrowing down available values of system attributes (8c894af) - Makes
RichTextElementtake generic parameter narrowing down allowed types of linked items (68b31a8) - Removes
propertyNameresolver configuration. All elements are now referenced only by their codenames present in Kontent.ai (7ef5951) - Removes parser & rich text resolver. To work with RTE use the newer and better
@kontent-ai/rich-text-resolverlibrary instead. (2bd30c3) - updates deps (82c2c11)
Upgrading to new RTE parser
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);