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

feat: add all default components for RTE

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-02-13 10:44:54 +01:00
committed by Christel Westerberg
parent 7804f574d6
commit 4006312cfc
3 changed files with 159 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Image/index.tsx
View File

@@ -1,11 +1,17 @@
import NextImage, { type ImageProps } from "next/image"
"use client"
import NextImage, { type ImageProps, type ImageLoaderProps } from "next/image"
function imageLoader({ quality, src, width }: ImageLoaderProps) {
return `${src}?w=${width}${quality ? "&q=" + quality : ""}`
}
// Next/Image adds & instead of ? before the params
export default function Image(props: ImageProps) {
return (
<NextImage
{...props}
src={`${props.src}?`}
loader={imageLoader}
/>
)
}

160
components/JsonToHtml/renderOptions.tsx
View File

@@ -7,40 +7,122 @@ import { RTEMarkType } from "@/types/rte/node"
import styles from "./jsontohtml.module.css"
import type { Attributes } from "@/types/rte/attrs"
import type { EmbedByUid } from "@/types/components/jsontohtml"
import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"
function extractPossibleAttributes(attrs: Attributes) {
const props: Record<string, any> = {}
if (attrs.id) {
props.id = attrs.id
}
if (attrs.class) {
props.className = attrs.class
} else if (attrs["class-name"]) {
props.className = attrs["class-name"]
} else if (attrs.classname) {
props.className = attrs.classname
}
return props
}
export const renderOptions: RenderOptions = {
[RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
if (node.attrs.url) {
const props = extractPossibleAttributes(node.attrs)
return (
<a href={node.attrs.url} target={node.attrs.target ?? "_blank"}>{next(node.children, embeds, fullRenderOptions)}</a>
<a
{...props}
href={node.attrs.url}
target={node.attrs.target ?? "_blank"}
>
{next(node.children, embeds, fullRenderOptions)}
</a>
)
}
return null
},
[RTETypeEnum.blockquote]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <blockquote {...props}>{next(node.children, embeds, fullRenderOptions)}</blockquote>
},
[RTETypeEnum.code]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <code {...props}>{next(node.children, embeds, fullRenderOptions)}</code>
},
[RTETypeEnum.embed]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
if (node.attrs.src) {
props.src = node.attrs.src
}
if (node.attrs.url) {
props.src = node.attrs.url
}
if (!props.src) {
return null
}
return (
<iframe {...props}>
{next(node.children, embeds, fullRenderOptions)}
</iframe>
)
},
[RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
return <h1 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h1>
const props = extractPossibleAttributes(node.attrs)
return <h1 {...props}>{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>
const props = extractPossibleAttributes(node.attrs)
return <h2 {...props}>{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>
const props = extractPossibleAttributes(node.attrs)
return <h3 {...props}>{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>
const props = extractPossibleAttributes(node.attrs)
return <h4 {...props}>{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>
const props = extractPossibleAttributes(node.attrs)
return <h5 {...props}>{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>
const props = extractPossibleAttributes(node.attrs)
return <h6 {...props}>{next(node.children, embeds, fullRenderOptions)}</h6>
},
[RTETypeEnum.hr]: () => {
return <hr />
},
[RTETypeEnum.li]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <li {...props}>{next(node.children, embeds, fullRenderOptions)}</li>
},
[RTETypeEnum.ol]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <ol {...props}>{next(node.children, embeds, fullRenderOptions)}</ol>
},
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
return <p className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</p>
const props = extractPossibleAttributes(node.attrs)
return <p {...props}>{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
@@ -59,8 +141,9 @@ export const renderOptions: RenderOptions = {
)
}
} else {
const props = extractPossibleAttributes(node.attrs)
return (
<Link href={node.attrs.href}>
<Link {...props} href={node.attrs.href}>
{next(node.children, embeds, fullRenderOptions)}
</Link>
)
@@ -70,27 +153,75 @@ export const renderOptions: RenderOptions = {
return null
},
[RTETypeEnum.table]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <table {...props}>{next(node.children, embeds, fullRenderOptions)}</table>
},
[RTETypeEnum.thead]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <thead {...props}>{next(node.children, embeds, fullRenderOptions)}</thead>
},
[RTETypeEnum.tbody]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <tbody {...props}>{next(node.children, embeds, fullRenderOptions)}</tbody>
},
[RTETypeEnum.tfoot]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <tfoot {...props}>{next(node.children, embeds, fullRenderOptions)}</tfoot>
},
[RTETypeEnum.tr]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <tr {...props}>{next(node.children, embeds, fullRenderOptions)}</tr>
},
[RTETypeEnum.th]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <th {...props}>{next(node.children, embeds, fullRenderOptions)}</th>
},
[RTETypeEnum.td]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <td {...props}>{next(node.children, embeds, fullRenderOptions)}</td>
},
[RTETypeEnum.ul]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
const props = extractPossibleAttributes(node.attrs)
return <ul {...props}>{next(node.children, embeds, fullRenderOptions)}</ul>
},
/** TextNode wrappers */
[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 (
<>
@@ -99,6 +230,7 @@ export const renderOptions: RenderOptions = {
</>
)
},
[RTEMarkType.classnameOrId]: (children: React.ReactNode, className?: string, id?: string) => {
let props = {
className,
@@ -111,5 +243,13 @@ export const renderOptions: RenderOptions = {
delete props.id
}
return <span {...props}>{children}</span>
}
},
/**
* Contentstack can return something called `default` as seen here in their
* own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
*/
default: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
return next(node.children, embeds, fullRenderOptions)
},
}

2
types/requests/asides/contact.ts
View File

@@ -1,5 +1,5 @@
import { Lang } from "@/types/lang"
import type { Edges } from "../utils/edges"
import type { Lang } from "@/types/lang"
export type ContactNode = {
mailing_address: {