diff --git a/js/structure-in-rte/structure_in_rte_use_standalone_resolver.jsx b/js/structure-in-rte/structure_in_rte_use_standalone_resolver.jsx new file mode 100644 index 00000000..266650f5 --- /dev/null +++ b/js/structure-in-rte/structure_in_rte_use_standalone_resolver.jsx @@ -0,0 +1,84 @@ +import React from "react"; +import { PortableText, toPlainText } from "@portabletext/react"; +import { nodeParse, transformToPortableText } from "@kontent-ai/rich-text-resolver" +import { resolveImage, resolveTable, toHTMLImageDefault } from "@kontent-ai/rich-text-resolver/utils/html"; + +const richTextElement = {/* rich text element from SDK response */} + +/** + * object, defining resolution for various portable text objects. + * to be passed into component. + */ +const portableTextComponents = { + types: { + // resolution for component custom block, representing linked items/components in rich text content + component: ({ value }) => { + const item = richTextElement.linkedItems.find(item => item.system.codename === value.component._ref); + return
{item?.elements.text_element.value}
; + }, + // resolution for tables in rich text. + // makes use of resolveTable helper method included in the package. + table: ({ value }) => { + const tableString = resolveTable(value, toPlainText); + return <>{tableString}; + }, + // resolution for assets in rich text. + // makes use of resolveImage helper method included in the package. + image: ({ value }) => { + const imageString = resolveImage(value, toHTMLImageDefault); + return <>{imageString}; + } + }, + marks: { + // resolution for links to external URLs + link: ({ value, children }) => { + const target = (value?.href || '').startsWith('http') ? '_blank' : undefined + return ( + + {children} + + ) + }, + // resolution for links to content items + internalLink: ({ value, children }) => { + const item = richTextElement.linkedItems.find(item => item.system.id === value?.reference._ref); + return ( + + {children} + + ) + } + }, + block: { + /** + * custom resolution for h1 tag. this specific example showcases anchor creation. + * + * createAnchorString can return e.g. a sanitized, url-friendly text content + * of the heading or any other string representing the anchor. + * + * all default tags/blocks can be overridden in this manner. + */ + h1: ({ value, children }) => ( +

+ {children} +

+ ), + }, + } + + // custom component rendering the resolved rich text + const MyComponent = ({ props }) => { + // https://github.com/portabletext/react-portabletext#customizing-components + + const parsedTree = nodeParse(props.element.value); // or browserParse, converts HTML to JSON tree + const portableText = transformToPortableText(parsedTree); // converts JSON tree to portable text + + return ( + /** + * component from @portabletext/react package. + * accepts an array of portable text blocks and the `components` object which + * defines resolution for individual portable text entities. + */ + + ); + }; \ No newline at end of file diff --git a/ts/structure-in-rte/structure_in_rte_use_standalone_resolver.tsx b/ts/structure-in-rte/structure_in_rte_use_standalone_resolver.tsx new file mode 100644 index 00000000..7cf96b7e --- /dev/null +++ b/ts/structure-in-rte/structure_in_rte_use_standalone_resolver.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { PortableText, PortableTextComponentProps, PortableTextMarkComponentProps, PortableTextReactComponents, PortableTextTypeComponentProps, toPlainText } from "@portabletext/react"; +import { nodeParse, transformToPortableText } from "@kontent-ai/rich-text-resolver" +import { resolveImage, resolveTable, toHTMLImageDefault } from "@kontent-ai/rich-text-resolver/utils/html"; +import { PortableTextComponent, PortableTextTable, PortableTextImage, PortableTextExternalLink, PortableTextInternalLink, PortableTextBlock } from "@kontent-ai/rich-text-resolver/types/transformer" +import { Elements } from "@kontent-ai/delivery-sdk" + +const richTextElement: Elements.RichTextElement = {/* rich text element from SDK response */} + +/** + * object, defining resolution for various portable text objects. + * to be passed into component. + */ +const portableTextComponents: Partial = { + types: { + // resolution for component custom block, representing linked items/components in rich text content + component: ({ value }: PortableTextTypeComponentProps) => { + const item = richTextElement.linkedItems.find(item => item.system.codename === value.component._ref); + return
{item?.elements.text_element.value}
; + }, + // resolution for tables in rich text. + // makes use of resolveTable helper method included in the package. + table: ({ value }: PortableTextTypeComponentProps) => { + const tableString = resolveTable(value, toPlainText); + return <>{tableString}; + }, + // resolution for assets in rich text. + // makes use of resolveImage helper method included in the package. + image: ({ value }: PortableTextTypeComponentProps) => { + const imageString = resolveImage(value, toHTMLImageDefault); + return <>{imageString}; + } + }, + marks: { + // resolution for links to external URLs + link: ({ value, children }: PortableTextMarkComponentProps) => { + const target = (value?.href || '').startsWith('http') ? '_blank' : undefined + return ( + + {children} + + ) + }, + // resolution for links to content items + internalLink: ({ value, children }: PortableTextMarkComponentProps) => { + const item = richTextElement.linkedItems.find(item => item.system.id === value?.reference._ref); + return ( + + {children} + + ) + } + }, + block: { + /** + * custom resolution for h1 tag. this specific example showcases anchor creation. + * + * createAnchorString can return e.g. a sanitized, url-friendly text content + * of the heading or any other string representing the anchor. + * + * all default tags/blocks can be overridden in this manner. + */ + h1: ({ value, children }: PortableTextComponentProps) => ( +

+ {children} +

+ ), + }, + } + + // custom component rendering the resolved rich text + const MyComponent = ({ props }) => { + // https://github.com/portabletext/react-portabletext#customizing-components + + const parsedTree = nodeParse(props.element.value); // or browserParse, converts HTML to JSON tree + const portableText = transformToPortableText(parsedTree); // converts JSON tree to portable text + + return ( + /** + * component from @portabletext/react package. + * accepts an array of portable text blocks and the `components` object which + * defines resolution for individual portable text entities. + */ + + ); + }; \ No newline at end of file