diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 862d8bc1b..4b9a8d308 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/components/JsonToHtml/renderOptions.tsx @@ -2,6 +2,7 @@ import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import { insertResponseToImageVaultAsset } from "@/utils/imageVault" +import { OpenInNewSmallIcon } from "../Icons" import ImageContainer from "../ImageContainer" import Divider from "../TempDesignSystem/Divider" import Table from "../TempDesignSystem/Table" @@ -341,25 +342,49 @@ export const renderOptions: 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 === ContentEnum.blocks.SysAsset) { - if (image.node.url) { - const alt = image?.node?.title ?? node.attrs.alt - const props = extractPossibleAttributes(node.attrs) - props.className = styles.image - return ( -
- {alt} -
- ) + const imageTypeRegex = /^image\// + const isImage = imageTypeRegex.test(node.attrs["asset-type"]) + if (isImage) { + const image = embeds?.[node?.attrs?.["asset-uid"]] + if (image?.node.__typename === ContentEnum.blocks.SysAsset) { + if (image.node.url) { + const alt = image?.node?.title ?? node.attrs.alt + const props = extractPossibleAttributes(node.attrs) + props.className = styles.image + return ( +
+ {alt} +
+ ) + } } + } else if (node.attrs["display-type"] === "link" && node.attrs.href) { + return ( + + {next( + // Sometimes editors happen to nest a reference inside a link and vice versa. + // In that case use the outermost link, i.e. ignore nested links. + node.children.flatMap(noNestedLinksOrReferences), + embeds, + fullRenderOptions + )} + + + ) } } else if (type === RTEItemTypeEnum.entry) { const entry = embeds?.[node?.attrs?.["entry-uid"]] @@ -375,11 +400,17 @@ export const renderOptions: RenderOptions = { } return null } else if ( - entry?.node.__typename === ContentEnum.blocks.LoyaltyPage || - entry?.node.__typename === ContentEnum.blocks.ContentPage || entry?.node.__typename === ContentEnum.blocks.AccountPage || entry?.node.__typename === ContentEnum.blocks.CollectionPage || - entry?.node.__typename === ContentEnum.blocks.HotelPage + entry?.node.__typename === ContentEnum.blocks.ContentPage || + entry?.node.__typename === ContentEnum.blocks.DestinationCityPage || + entry?.node.__typename === + ContentEnum.blocks.DestinationCountryPage || + entry?.node.__typename === + ContentEnum.blocks.DestinationOverviewPage || + entry?.node.__typename === ContentEnum.blocks.HotelPage || + entry?.node.__typename === ContentEnum.blocks.LoyaltyPage || + entry?.node.__typename === ContentEnum.blocks.StartPage ) { // If entry is not an ImageContainer, it is a page and we return it as a link const props = extractPossibleAttributes(node.attrs) diff --git a/lib/graphql/Fragments/Blocks/Content.graphql b/lib/graphql/Fragments/Blocks/Content.graphql index 9c62f9425..c77fdc589 100644 --- a/lib/graphql/Fragments/Blocks/Content.graphql +++ b/lib/graphql/Fragments/Blocks/Content.graphql @@ -28,6 +28,7 @@ fragment Content_ContentPage on ContentPageBlocksContent { edges { node { __typename + ...Image ...ImageContainer ...AccountPageLink ...CollectionPageLink diff --git a/lib/graphql/Fragments/Image.graphql b/lib/graphql/Fragments/Image.graphql index 89d7c4057..5e9271a90 100644 --- a/lib/graphql/Fragments/Image.graphql +++ b/lib/graphql/Fragments/Image.graphql @@ -1,4 +1,5 @@ fragment Image on SysAsset { + content_type description dimension { height diff --git a/server/routers/contentstack/schemas/blocks/image.ts b/server/routers/contentstack/schemas/blocks/image.ts index a2c3e74b3..113564a46 100644 --- a/server/routers/contentstack/schemas/blocks/image.ts +++ b/server/routers/contentstack/schemas/blocks/image.ts @@ -4,11 +4,14 @@ import { ContentEnum } from "@/types/enums/content" export const imageSchema = z.object({ __typename: z.literal(ContentEnum.blocks.SysAsset), - description: z.string().optional(), - dimension: z.object({ - height: z.number(), - width: z.number(), - }), + content_type: z.string(), + description: z.string().nullable().optional(), + dimension: z + .object({ + height: z.number(), + width: z.number(), + }) + .nullable(), metadata: z.any(), // JSON // system for SysAssets is not the same type // as for all other types eventhough they have