117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
import Image from "next/image"
|
|
import Link from "next/link"
|
|
|
|
import { EmbedEnum } from "@/types/requests/utils/embeds"
|
|
import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
|
|
import { RTEMarkType } from "@/types/rte/node"
|
|
|
|
import styles from "./jsontohtml.module.css"
|
|
|
|
import type { EmbedByUid } from "@/types/components/jsontohtml"
|
|
import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
|
|
import type { RenderOptions } from "@/types/rte/option"
|
|
|
|
export const renderOptions: RenderOptions = {
|
|
[RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
if (node.attrs.url) {
|
|
return (
|
|
<a href={node.attrs.url} target={node.attrs.target ?? "_blank"}>{next(node.children, embeds, fullRenderOptions)}</a>
|
|
)
|
|
}
|
|
return null
|
|
},
|
|
[RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h1 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h1>
|
|
},
|
|
[RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h2 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h2>
|
|
},
|
|
[RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h3 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h3>
|
|
},
|
|
[RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h4 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h4>
|
|
},
|
|
[RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h5 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h5>
|
|
},
|
|
[RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <h6 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h6>
|
|
},
|
|
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
return <p className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</p>
|
|
},
|
|
[RTETypeEnum.reference]: (node: RTENode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
|
if ("attrs" in node) {
|
|
const type = node.attrs.type
|
|
if (type === RTEItemTypeEnum.asset) {
|
|
const image = embeds?.[node?.attrs?.["asset-uid"]]
|
|
if (image.node.__typename === EmbedEnum.SysAsset) {
|
|
const alt = image?.node?.title ?? node.attrs.alt
|
|
return (
|
|
<Image
|
|
alt={alt}
|
|
className={styles.image}
|
|
height={image.node.dimension.height}
|
|
src={image?.node?.url}
|
|
unoptimized
|
|
width={image.node.dimension.width}
|
|
/>
|
|
)
|
|
}
|
|
} else {
|
|
return (
|
|
<Link href={node.attrs.href}>
|
|
{next(node.children, embeds, fullRenderOptions)}
|
|
</Link>
|
|
)
|
|
}
|
|
}
|
|
|
|
return null
|
|
},
|
|
|
|
[RTEMarkType.bold]: (children: React.ReactNode) => {
|
|
return <strong>{children}</strong>
|
|
},
|
|
[RTEMarkType.italic]: (children: React.ReactNode) => {
|
|
return <em>{children}</em>
|
|
},
|
|
[RTEMarkType.underline]: (children: React.ReactNode) => {
|
|
return <u>{children}</u>
|
|
},
|
|
[RTEMarkType.strikethrough]: (children: React.ReactNode) => {
|
|
return <s>{children}</s>
|
|
},
|
|
[RTEMarkType.inlineCode]: (children: React.ReactNode) => {
|
|
return <span>{children}</span>
|
|
},
|
|
[RTEMarkType.subscript]: (children: React.ReactNode) => {
|
|
return <sub>{children}</sub>
|
|
},
|
|
[RTEMarkType.superscript]: (children: React.ReactNode) => {
|
|
return <sup>{children}</sup>
|
|
},
|
|
[RTEMarkType.break]: (children: React.ReactNode) => {
|
|
return (
|
|
<>
|
|
<br />
|
|
{children}
|
|
</>
|
|
)
|
|
},
|
|
[RTEMarkType.classnameOrId]: (children: React.ReactNode, className?: string, id?: string) => {
|
|
let props = {
|
|
className,
|
|
id,
|
|
}
|
|
if (!className) {
|
|
delete props.className
|
|
}
|
|
if (!id) {
|
|
delete props.id
|
|
}
|
|
return <span {...props}>{children}</span>
|
|
}
|
|
}
|