scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add imageContainer reference in rte

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-04 10:33:49 +02:00
parent 55a71f001f
commit 6184662caa
14 changed files with 252 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/JsonToHtml/renderOptions.tsx
+110 -18
View File
@@ -2,25 +2,33 @@ import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import ImageContainer from "../ImageContainer"
import Divider from "../TempDesignSystem/Divider"
import BiroScript from "../TempDesignSystem/Text/BiroScript"
import Body from "../TempDesignSystem/Text/Body"
import Caption from "../TempDesignSystem/Text/Caption"
import Footnote from "../TempDesignSystem/Text/Footnote"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import Title from "../TempDesignSystem/Text/Title"
import { hasAvailableFormat } from "./utils"
import styles from "./jsontohtml.module.css"
import type { EmbedByUid } from "@/types/components/jsontohtml"
import { EmbedEnum } from "@/types/requests/utils/embeds"
import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
import {
AvailableFormatEnum,
RTEItemTypeEnum,
RTETypeEnum,
} from "@/types/rte/enums"
import type {
RTEDefaultNode,
RTEImageNode,
RTENext,
RTENode,
RTERegularNode,
RTETextNode,
} from "@/types/rte/node"
import { RTEMarkType } from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"
@@ -57,14 +65,16 @@ export const renderOptions: RenderOptions = {
if (node.attrs.url) {
const props = extractPossibleAttributes(node.attrs)
return (
<a
<Link
{...props}
href={node.attrs.url}
target={node.attrs.target ?? "_blank"}
key={node.uid}
target={node.attrs.target ?? "_blank"}
variant="underscored"
color="burgundy"
>
{next(node.children, embeds, fullRenderOptions)}
</a>
</Link>
)
}
return null
@@ -217,7 +227,7 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<li key={node.uid} {...props}>
<li key={node.uid} {...props} className={styles.li}>
{next(node.children, embeds, fullRenderOptions)}
</li>
)
@@ -244,6 +254,21 @@ export const renderOptions: RenderOptions = {
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
const hasFormat = node.children.some((item) =>
hasAvailableFormat((item as RTETextNode).classname)
)
// If a child node has an available format as className, we wrap it in a
// span and render the children with the correct component
if (hasFormat) {
return (
<span {...props} key={node.uid}>
{next(node.children, embeds, fullRenderOptions)}
</span>
)
}
return (
<Body {...props} key={node.uid}>
{next(node.children, embeds, fullRenderOptions)}
@@ -264,11 +289,11 @@ export const renderOptions: RenderOptions = {
if (image?.node.__typename === EmbedEnum.SysAsset) {
const alt = image?.node?.title ?? node.attrs.alt
const props = extractPossibleAttributes(node.attrs)
props.className = styles.image
return (
<Image
key={node.uid}
alt={alt}
className={styles.image}
height={image.node.dimension.height}
src={image?.node?.url}
width={image.node.dimension.width}
@@ -276,16 +301,37 @@ export const renderOptions: RenderOptions = {
/>
)
}
} else {
const props = extractPossibleAttributes(node.attrs)
const href = node.attrs?.locale
? `/${node.attrs.locale}${node.attrs.href}`
: node.attrs.href
return (
<Link {...props} href={href} key={node.uid}>
{next(node.children, embeds, fullRenderOptions)}
</Link>
)
} else if (type === RTEItemTypeEnum.entry) {
const entry = embeds?.[node?.attrs?.["entry-uid"]]
if (entry?.node.__typename === EmbedEnum.ImageContainer) {
const leftImage = insertResponseToImageVaultAsset(
entry.node.image_left
)
const rightImage = insertResponseToImageVaultAsset(
entry.node.image_right
)
return (
<ImageContainer leftImage={leftImage} rightImage={rightImage} />
)
} else {
// If entry is not an ImageContainer, it is a page and we return it as a link
const props = extractPossibleAttributes(node.attrs)
const href = node.attrs?.locale
? `/${node.attrs.locale}${node.attrs.href}`
: node.attrs.href
return (
<Link
{...props}
href={href}
key={node.uid}
variant="underscored"
color="burgundy"
>
{next(node.children, embeds, fullRenderOptions)}
</Link>
)
}
}
}
@@ -300,7 +346,6 @@ export const renderOptions: RenderOptions = {
const image = insertResponseToImageVaultAsset(attrs)
const alt = image.meta.alt ?? image.title
const height = parseInt(attrs.height.replaceAll("px", ""))
const width = parseInt(attrs.width.replaceAll("px", ""))
const props = extractPossibleAttributes(attrs)
return (
@@ -308,7 +353,7 @@ export const renderOptions: RenderOptions = {
<Image
alt={alt}
className={styles.image}
height={height}
height={365}
src={image.url}
width={width}
{...props}
@@ -487,6 +532,53 @@ export const renderOptions: RenderOptions = {
if (!id) {
delete props.id
}
if (className === AvailableFormatEnum.footnote) {
return (
<Footnote key={id} {...props}>
{children}
</Footnote>
)
}
if (className === AvailableFormatEnum.caption) {
return (
<Caption key={id} {...props}>
{children}
</Caption>
)
}
if (className === AvailableFormatEnum["script-1"]) {
return (
<BiroScript key={id} type="one" {...props}>
{children}
</BiroScript>
)
}
if (className === AvailableFormatEnum["script-2"]) {
return (
<BiroScript key={id} type="two" {...props}>
{children}
</BiroScript>
)
}
if (className === AvailableFormatEnum["subtitle-1"]) {
return (
<Subtitle key={id} {...props}>
{children}
</Subtitle>
)
}
if (className === AvailableFormatEnum["subtitle-2"]) {
return (
<Subtitle key={id} {...props}>
{children}
</Subtitle>
)
}
return (
<span key={id} {...props}>
{children}