CTC-2582 Add rich text resolver samples

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<PortableTextReactComponents> = {
+  // The specific logic for each component is explained later in the lesson
+  types: {
+    component: ({
+      value,
+    }: PortableTextTypeComponentProps<PortableTextComponent>) => {
+      // 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 <CalloutComponent item={componentItem as Component_Callout} />;
+        case contentTypes.action.codename:
+          return <CTAButton reference={componentItem as Action} />;
+        case contentTypes.content_chunk.codename:
+          return <ContentChunk item={componentItem as Block_ContentChunk} />;
+        default:
+          return `Unsupported content type &quot;${componentItem.system.type}&quot;`
+      }
+    }
+  }
+}

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<PortableTextReactComponents> = {
+  // 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 <PortableText value= { portableText } components = { portableTextComponents } />;
+};
+
+// 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 <div>
+// <div>
+//   <MyComponent value={richTextElement} />
+// </div>

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<PortableTextReactComponents> = {
+  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<IPortableTextInternalLink>) => {
+      // 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 <InternalLink link={link}>{children}</InternalLink>;
+    },
+  }
+}