Merged in feat/SW-327-pdf-support (pull request #1276)

feat(SW-327): added support to link to pdf files from CS

* feat(SW-327): added support to link to pdf files from CS


Approved-by: Matilda Landström

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"]]
+        const imageTypeRegex = /^image\//
-        if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
+        const isImage = imageTypeRegex.test(node.attrs["asset-type"])
-          if (image.node.url) {
+        if (isImage) {
-            const alt = image?.node?.title ?? node.attrs.alt
+          const image = embeds?.[node?.attrs?.["asset-uid"]]
-            const props = extractPossibleAttributes(node.attrs)
+          if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
-            props.className = styles.image
+            if (image.node.url) {
-            return (
+              const alt = image?.node?.title ?? node.attrs.alt
-              <div className={styles.imageContainer}>
+              const props = extractPossibleAttributes(node.attrs)
-                <Image
+              props.className = styles.image
-                  alt={alt}
+              return (
-                  className={styles.image}
+                <div className={styles.imageContainer}>
-                  src={image.node.url}
+                  <Image
-                  fill
+                    alt={alt}
-                  sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+                    className={styles.image}
-                  {...props}
+                    src={image.node.url}
-                />
+                    fill
-              </div>
+                    sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
-            )
+                    {...props}
+                  />
+                </div>
+              )
+            }
           }
+        } else if (node.attrs["display-type"] === "link" && node.attrs.href) {
+          return (
+            <Link
+              href={node.attrs.href}
+              key={node.uid}
+              variant="icon"
+              textDecoration="underline"
+              color="burgundy"
+              target="_blank"
+            >
+              {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
+              )}
+              <OpenInNewSmallIcon color="burgundy" />
+            </Link>
+          )
         }
       } 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)

lib/graphql/Fragments/Blocks/Content.graphql

@@ -28,6 +28,7 @@ fragment Content_ContentPage on ContentPageBlocksContent {
         edges {
           node {
             __typename
+            ...Image
             ...ImageContainer
             ...AccountPageLink
             ...CollectionPageLink

lib/graphql/Fragments/Image.graphql

@@ -1,4 +1,5 @@
 fragment Image on SysAsset {
+  content_type
   description
   dimension {
     height

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(),
+  content_type: z.string(),
-  dimension: z.object({
+  description: z.string().nullable().optional(),
-    height: z.number(),
+  dimension: z
-    width: z.number(),
+    .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