Merge pull request #334 from Kentico/custom-assets-domain

feat: Adds support for custom asset domains (fixes #333)
kontent-ai · Dec 16, 2021 · 2e5ae06 · 2e5ae06
2 parents d584e08 + 361d62d
commit 2e5ae06
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 12 deletions.
diff --git a/lib/config/delivery-configs.ts b/lib/config/delivery-configs.ts
@@ -85,4 +85,9 @@ export interface IDeliveryClientConfig {
      * with circular refences)
      */
     linkedItemsReferenceHandler?: LinkedItemsReferenceHandler;
+
+    /**
+     * Sets custom domain for assets
+     */
+    assetsDomain?: string;
 }
diff --git a/lib/mappers/element.mapper.ts b/lib/mappers/element.mapper.ts
@@ -1,4 +1,5 @@
 import { enumHelper } from '@kentico/kontent-core';
+import { deliveryUrlHelper } from '../utilities';
 
 import { IDeliveryClientConfig } from '../config';
 import { Contracts } from '../contracts';
@@ -13,6 +14,11 @@ import {
     IContentItemWithRawElements
 } from '../models';
 
+interface IRichTextImageUrlRecord {
+    originalUrl: string;
+    newUrl: string;
+}
+
 export class ElementMapper {
     constructor(private readonly config: IDeliveryClientConfig) {}
 
@@ -185,17 +191,23 @@ export class ElementMapper {
             }
         }
 
+        // get rich text images
+        const richTextImagesResult = this.getRichTextImages(rawElement.images);
+
         // extract and map links & images
         const links: ILink[] = this.mapRichTextLinks(rawElement.links);
-        const images: IRichTextImage[] = this.mapRichTextImages(rawElement.images);
+        const images: IRichTextImage[] = richTextImagesResult.richTextImages;
+
+        // replace asset urls in html
+        const richTextHtml: string = this.getRichTextHtml(rawElement.value, richTextImagesResult.imageUrlRecords);
 
         return {
             images: images,
             linkedItemCodenames: rawElement.modular_content,
             links: links,
             name: rawElement.name,
             type: ElementType.RichText,
-            value: rawElement.value
+            value: richTextHtml
         };
     }
 
@@ -231,6 +243,11 @@ export class ElementMapper {
             for (const assetContract of assetContracts) {
                 let renditions: { [renditionPresetCodename: string]: ElementModels.Rendition } | null = null;
 
+                // get asset url (custom domain may be configured)
+                const assetUrl: string = this.config.assetsDomain
+                    ? deliveryUrlHelper.replaceAssetDomain(assetContract.url, this.config.assetsDomain)
+                    : assetContract.url;
+
                 if (assetContract.renditions) {
                     renditions = {};
 
@@ -239,13 +256,14 @@ export class ElementMapper {
 
                         renditions[renditionKey] = {
                             ...rendition,
-                            url: `${assetContract.url}?${rendition.query}` // enhance rendition with absolute url
+                            url: `${assetUrl}?${rendition.query}` // enhance rendition with absolute url
                         };
                     }
                 }
 
                 const asset: ElementModels.AssetModel = {
                     ...assetContract,
+                    url: assetUrl, // use custom url of asset which may contain custom domain
                     renditions
                 };
 
@@ -384,21 +402,53 @@ export class ElementMapper {
         return links;
     }
 
-    private mapRichTextImages(imagesJson: Contracts.IRichTextElementImageWrapperContract): IRichTextImage[] {
+    private getRichTextHtml(richTextHtml: string, richTextImageRecords: IRichTextImageUrlRecord[]): string {
+        for (const richTextImageRecord of richTextImageRecords) {
+            // replace rich text image url if it differs
+            if (richTextImageRecord.newUrl !== richTextImageRecord.originalUrl) {
+                richTextHtml = richTextHtml.replace(
+                    new RegExp(richTextImageRecord.originalUrl, 'g'),
+                    richTextImageRecord.newUrl
+                );
+            }
+        }
+
+        return richTextHtml;
+    }
+
+    private getRichTextImages(imagesJson: Contracts.IRichTextElementImageWrapperContract): {
+        richTextImages: IRichTextImage[];
+        imageUrlRecords: IRichTextImageUrlRecord[];
+    } {
         const images: IRichTextImage[] = [];
+        const imageUrlRecords: IRichTextImageUrlRecord[] = [];
 
         for (const imageId of Object.keys(imagesJson)) {
             const imageRaw = imagesJson[imageId];
+
+            // image may contain custom asset domain
+            const imageUrl: string = this.config.assetsDomain
+                ? deliveryUrlHelper.replaceAssetDomain(imageRaw.url, this.config.assetsDomain)
+                : imageRaw.url;
+
             images.push({
                 description: imageRaw.description ?? null,
                 imageId: imageRaw.image_id,
-                url: imageRaw.url,
+                url: imageUrl,
                 height: imageRaw.height ?? null,
                 width: imageRaw.width ?? null
             });
+
+            imageUrlRecords.push({
+                originalUrl: imageRaw.url,
+                newUrl: imageUrl
+            });
         }
 
-        return images;
+        return {
+            imageUrlRecords: imageUrlRecords,
+            richTextImages: images
+        };
     }
 
     private resolveElementMap(

diff --git a/lib/utilities/delivery-url.helper.ts b/lib/utilities/delivery-url.helper.ts
@@ -0,0 +1,17 @@
+import * as urlParse from 'url-parse';
+
+export class DeliveryUrlHelper {
+    replaceAssetDomain(originalAssetUrl: string, customDomain: string): string {
+        const urlPath = this.getUrlPathname(originalAssetUrl);
+
+        return `${customDomain}${urlPath}`;
+    }
+
+    getUrlPathname(url: string): string {
+        const parsedUrl = urlParse(url);
+
+        return parsedUrl.pathname;
+    }
+}
+
+export const deliveryUrlHelper = new DeliveryUrlHelper();
diff --git a/lib/utilities/index.ts b/lib/utilities/index.ts
@@ -1,2 +1,3 @@
 export * from './linked-items.helper';
 export * from './guid.helper';
+export * from './delivery-url.helper';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,9 +72,11 @@
     },
     "dependencies": {
         "@kentico/kontent-core": "9.4.0",
-        "uuid": "8.3.2"
+        "uuid": "8.3.2",
+        "url-parse": "1.5.3"
     },
     "devDependencies": {
+        "@types/url-parse": "1.4.5",
         "@types/jasmine": "3.10.2",
         "@types/node": "16.11.12",
         "@types/uuid": "8.3.3",

diff --git a/readme.md b/readme.md
@@ -156,7 +156,8 @@ Following is a list of configuration options for DeliveryClient (`IDeliveryClien
 | globalHeaders?      | (queryConfig: IQueryConfig) => IHeader[] | Adds ability to add extra headers to each http request                                                                               |
 | retryStrategy?      |          IRetryStrategyOptions           | Retry strategy configuration                                                                                                         |
 | linkedItemsReferenceHandler?      |          LinkedItemsReferenceHandler           | Indicates if content items are automatically mapped. Available values: 'map' or 'ignore'                                                                                                         |
-| propertyNameResolver?      |          PropertyNameResolver           | Used to map properties. Choose one of following default resolvers: `snakeCasePropertyNameResolver`, `pascalCasePropertyNameResolver` & `camelCasePropertyNameResolver` or create your own PropertyNameResolver function                                                                                                        |
+| propertyNameResolver?      |          PropertyNameResolver           | Used to map properties. Choose one of following default resolvers: `snakeCasePropertyNameResolver`, `pascalCasePropertyNameResolver` & `camelCasePropertyNameResolver` or create your own PropertyNameResolver function                                                                                                        | 
+| assetsDomain?      |          string            | Custom domain for assets. Changes url of assets in both asset & rich text elements                                                                                 |
 
 ### Create typed models
 

diff --git a/test/browser/isolated-tests/elements/assets/custom-assets-domain.spec.json b/test/browser/isolated-tests/elements/assets/custom-assets-domain.spec.json
@@ -0,0 +1,66 @@
+{
+    "item": {
+        "system": {
+            "id": "335d17ac-b6ba-4c6a-ae31-23c1193215cb",
+            "collection": "default",
+            "name": "My article",
+            "codename": "my_article",
+            "language": "en-US",
+            "type": "article",
+            "sitemap_locations": [],
+            "last_modified": "2019-03-27T13:21:11.38Z",
+            "workflow_step": "published"
+        },
+        "elements": {
+            "property1": {
+                "type": "asset",
+                "name": "Teaser image",
+                "value": [
+                    {
+                        "name": "sources.jpg",
+                        "type": "image/jpeg",
+                        "size": 45376,
+                        "description": "Description of what the asset represents.",
+                        "url": "https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/3e76909f-599f-4742-b472-77fd4b510e92/sources.jpg",
+                        "width": 640,
+                        "height": 457,
+                        "renditions": {
+                            "default": {
+                                "rendition_id": "b447ca6c-8020-4e8f-be57-1d110721e535",
+                                "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
+                                "width": 1280,
+                                "height": 1024,
+                                "query": "w=1280&h=1024&fit=clip&rect=2396,169,1280,1024"
+                            }
+                        }
+                    }
+                ]
+            },
+            "property2": {
+                "type": "asset",
+                "name": "Teaser image",
+                "value": [
+                    {
+                        "name": "sources.jpg",
+                        "type": "image/jpeg",
+                        "size": 45376,
+                        "description": "Description of what the asset represents.",
+                        "url": "https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/3e76909f-599f-4742-b472-77fd4b510e92/sources.jpg",
+                        "width": 640,
+                        "height": 457,
+                        "renditions": {
+                            "default": {
+                                "rendition_id": "b447ca6c-8020-4e8f-be57-1d110721e535",
+                                "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
+                                "width": 1280,
+                                "height": 1024,
+                                "query": "w=1280&h=1024&fit=clip&rect=2396,169,1280,1024"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "modular_content": {}
+}