diff --git a/ts/structure-in-rte/resolve_rich_text_components_items.ts b/ts/structure-in-rte/resolve_rich_text_components_items.ts new file mode 100644 index 00000000..275a8023 --- /dev/null +++ b/ts/structure-in-rte/resolve_rich_text_components_items.ts @@ -0,0 +1,35 @@ +import { PortableTextComponent, PortableTextReactComponents, PortableTextTypeComponentProps } from "@portabletext/react"; + +// Defines how to transform Kontent.ai-specific portable text components +const portableTextComponents: Partial = { + // The specific logic for each component is explained later in the lesson + types: { + component: ({ + value, + }: PortableTextTypeComponentProps) => { + // TODO: Specify where 'element' comes from + const componentOrItem = element.linkedItems.find( + (i) => i.system.codename === value.component._ref + ); + + if (!componentOrItem) { + throw new Error( + "Content item wasn't found. Check your request depth." + ); + } + + // Renders specific React components based on the content type + switch (componentOrItem.system.type) { + // Check https://kontent.ai/learn/strongly-typed-models to create content type models + case contentTypes.callout.codename: + return ; + case contentTypes.action.codename: + return ; + case contentTypes.content_chunk.codename: + return ; + default: + return `Unsupported content type "${componentItem.system.type}"` + } + } + } +} \ No newline at end of file diff --git a/ts/structure-in-rte/resolve_rich_text_flow.ts b/ts/structure-in-rte/resolve_rich_text_flow.ts new file mode 100644 index 00000000..1e45551b --- /dev/null +++ b/ts/structure-in-rte/resolve_rich_text_flow.ts @@ -0,0 +1,35 @@ +import { Elements } from '@kontent-ai/delivery-sdk'; +import { nodeParse, transformToPortableText } from "@kontent-ai/rich-text-resolver" +import { PortableText, PortableTextReactComponents } from "@portabletext/react"; + +// Defines how to transform Kontent.ai-specific portable text components +const portableTextComponents: Partial = { + // The logic for each portable text component is explained later in the lesson + types: { + component: {}, // Components in rich text + table: {}, // Tables in rich text + image: {} // Assets in rich text + }, + marks: { + link: {}, // Links to external URLs + internalLink: {} // Links to content items + }, +} + +// Custom React component that renders your rich text element +const MyComponent = ({ value }: Elements.RichTextElement) => { + // Converts Kontent.ai rich text HTML to a JSON tree + const parsedTree = nodeParse(value); + // Converts the JSON tree to portable text + const portableText = transformToPortableText(parsedTree); + // Renders portable text based on the specified portable text component transformations + return ; +}; + +// In your application code, get a content item and retrieve its rich text element. +// Get familiar with retrieving content in https://kontent.ai/learn/develop/hello-world +const richTextElement: Elements.RichTextElement = response.data.item.elements.richtext; +// Example: using 'MyComponent' to render your rich text element in a
+//
+// +//
\ No newline at end of file diff --git a/ts/structure-in-rte/resolve_rich_text_links_to_items.ts b/ts/structure-in-rte/resolve_rich_text_links_to_items.ts new file mode 100644 index 00000000..954dea69 --- /dev/null +++ b/ts/structure-in-rte/resolve_rich_text_links_to_items.ts @@ -0,0 +1,26 @@ +import { PortableTextMarkComponentProps, PortableTextReactComponents } from "@portabletext/react"; +import {IPortableTextInternalLink} from "@kontent-ai/rich-text-resolver"; + +// Defines how to transform Kontent.ai-specific portable text components +const portableTextComponents: Partial = { + marks: { + // TODO: Explain where 'value' and 'children' come from when the transformation happens + internalLink: ({ + value, + children, + // TODO: Resolve "@kontent-ai/rich-text-resolver"' has no exported member named 'IPortableTextInternalLink'? + }: PortableTextMarkComponentProps) => { + // TODO: Explain where 'element' comes from + const link = element.links.find( + (l) => l.linkId === value?.reference._ref + ); + if (!link) { + throw new Error( + "Cannot find link reference in links. This should never happen." + ); + } + // TODO: Show what 'InternalLink' does + return {children}; + }, + } +} \ No newline at end of file diff --git a/ts/structure-in-rte/structure_in_rte_resolve_links_to_items.ts b/ts/structure-in-rte/structure_in_rte_resolve_links_to_items.ts deleted file mode 100644 index de185ed7..00000000 --- a/ts/structure-in-rte/structure_in_rte_resolve_links_to_items.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript -import { createRichTextHtmlResolver, Elements, createDeliveryClient, linkedItemsHelper, IContentItem } from '@kontent-ai/delivery-sdk'; - -// Initializes the Delivery client -const deliveryClient = createDeliveryClient({ - environmentId: '' -}); - -// Tip: Create strongly typed models according to https://kontent.ai/learn/strongly-typed-models -export type Article = IContentItem<{ - title: Elements.TextElement; - body: Elements.RichTextElement; -}>; - -// Gets your content item -const response = await deliveryClient.item
('my_article') - .toPromise(); - -// Stores the contents of the rich text element -const richTextElement = response.data.item.elements.body; - -// Note: The code below executes correctly in browser. To adjust the code for nodejs, see https://kontent.ai/learn/js-rte-nodejs -// Defines how to resolve the rich text element -const resolvedRichText = createRichTextHtmlResolver().resolveRichText({ - // Gives the resolver the contents of your rich text. - element: richTextElement, - urlResolver: (linkId, linkText, link) => { - let url = '#unsupported-link-type'; - // Checks the content type of the linked content item - if (link.type === 'article') - url = `/articles/${link.urlSlug}`; - return { - linkHtml: `${url}`, - // You can also return a plain URL - linkUrl: url, - }; - } -}); - -const resolvedHtml = resolvedRichText.html; diff --git a/ts/structure-in-rte/structure_in_rte_resolve_tweet.ts b/ts/structure-in-rte/structure_in_rte_resolve_tweet.ts deleted file mode 100644 index 6521d1c0..00000000 --- a/ts/structure-in-rte/structure_in_rte_resolve_tweet.ts +++ /dev/null @@ -1,44 +0,0 @@ -// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript -import { createRichTextHtmlResolver, Elements, createDeliveryClient, linkedItemsHelper, IContentItem } from '@kontent-ai/delivery-sdk'; - -const deliveryClient = createDeliveryClient({ - environmentId: '' -}); - -// Tip: Create strongly typed models according to https://kontent.ai/learn/strongly-typed-models -export type Article = IContentItem<{ - title: Elements.TextElement; - body: Elements.RichTextElement; -}>; - -// Gets your content item with the rich text element -const response = await deliveryClient.item
('my_article') - .toPromise(); - -// Gets the contents of the rich text element -const richTextElement = response.data.item.elements.body; - -// Note: The code below executes correctly in browser. To adjust the code for nodejs, see https://kontent.ai/learn/js-rte-nodejs -// Defines how to resolve the rich text element -const resolvedRichText = createRichTextHtmlResolver().resolveRichText({ - // Gives the resolver the contents of your rich text - element: richTextElement, - // Points the resolver to the content items and components that might be used in the rich text element - linkedItems: linkedItemsHelper.convertLinkedItemsToArray(response.data.linkedItems), - contentItemResolver: (itemId, contentItem) => { - // For tweet items and components, resolves to the following HTML markup - if (contentItem && contentItem.system.type === 'tweet') { - return { - contentItemHtml: `` - }; - } - - // For other type of items and components, resolves to an empty string - return { - contentItemHtml: `
Unsupported type ${contentItem.system.type}
` - }; - } -}); - -// Gets the resolved HTML content of your rich text -const resolvedRichTextHtml = resolvedRichText.html;