8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
73 lines
1.5 KiB
TypeScript
73 lines
1.5 KiB
TypeScript
import { cx } from 'class-variance-authority'
|
|
|
|
import { nodesToHtml } from './utils'
|
|
|
|
import styles from './jsontohtml.module.css'
|
|
|
|
import type { RTENode } from './types/rte/node'
|
|
import type { RenderOptions } from './types/rte/option'
|
|
import { ContentBlockType } from './types/rte/enums'
|
|
|
|
export type Node<T> = {
|
|
node: T
|
|
}
|
|
|
|
type Image = {
|
|
id: number
|
|
title: string
|
|
url: string
|
|
focalPoint: {
|
|
x: number
|
|
y: number
|
|
}
|
|
dimensions?: {
|
|
width: number
|
|
height: number
|
|
}
|
|
meta: {
|
|
alt?: string | null
|
|
caption?: string | null
|
|
}
|
|
}
|
|
export type Embeds =
|
|
| {
|
|
__typename: Exclude<ContentBlockType, 'ImageContainer'>
|
|
system?: { uid: string } | undefined | null
|
|
url?: string | undefined | null
|
|
title?: string | undefined | null
|
|
}
|
|
| {
|
|
__typename: 'ImageContainer'
|
|
system?: { uid: string } | undefined | null
|
|
url?: string | undefined | null
|
|
title?: string | undefined | null
|
|
image_left?: Image | undefined
|
|
image_right?: Image | undefined
|
|
}
|
|
|
|
export type EmbedByUid = Record<string, Node<Embeds>>
|
|
|
|
export type JsonToHtmlProps = {
|
|
embeds: Node<Embeds>[]
|
|
nodes: RTENode[]
|
|
renderOptions?: RenderOptions
|
|
className?: string
|
|
}
|
|
|
|
export function JsonToHtml({
|
|
embeds,
|
|
nodes,
|
|
renderOptions = {},
|
|
className,
|
|
}: JsonToHtmlProps) {
|
|
if (!Array.isArray(nodes) || !nodes.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className={cx(styles.container, className)}>
|
|
{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
|
|
</section>
|
|
)
|
|
}
|