@contentful/field-editor-shared 2.16.0 → 2.17.0-alpha.0

package/dist/cjs/utils/entityHelpers.js

@@ -30,6 +30,9 @@ _export(exports, {
     getFieldValue: function() {
         return getFieldValue;
     },
+    getResolvedImageUrl: function() {
+        return getResolvedImageUrl;
+    },
     isAssetField: function() {
         return isAssetField;
     },
@@ -236,3 +239,33 @@ const getEntryImage = async ({ entry, contentType, localeCode }, getAsset)=>{
         return null;
     }
 };
+const DOWNLOADS_ENDPOINT = 'downloads.ctfassets.net';
+const TRANSFORMATIONS_ENDPOINT = 'images.ctfassets.net';
+const getResolvedImageUrl = (url, params)=>{
+    try {
+        const urlToParse = url.startsWith('//') ? `https:${url}` : url;
+        const parsedUrl = new URL(urlToParse);
+        if (parsedUrl.hostname === DOWNLOADS_ENDPOINT) {
+            parsedUrl.hostname = TRANSFORMATIONS_ENDPOINT;
+        }
+        if (params) {
+            Object.entries(params).forEach(([key, value])=>{
+                if (value !== undefined) {
+                    parsedUrl.searchParams.set(key, value.toString());
+                }
+            });
+        }
+        const result = parsedUrl.toString();
+        return url.startsWith('//') ? result.replace(/^https:/, '') : result;
+    } catch  {
+        if (!params) return url;
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value])=>{
+            if (value !== undefined) {
+                searchParams.set(key, value.toString());
+            }
+        });
+        const queryString = searchParams.toString();
+        return queryString ? `${url}?${queryString}` : url;
+    }
+};

package/dist/cjs/utils/entityHelpers.test.js

@@ -149,3 +149,118 @@ describe('getEntityStatus', ()=>{
         });
     });
 });
+describe('getResolvedImageUrl', ()=>{
+    describe('URL parsing and domain replacement', ()=>{
+        test('replaces downloads.ctfassets.net with images.ctfassets.net', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+        test('handles protocol-relative URLs', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('//downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('//images.ctfassets.net/space/asset.jpg');
+        });
+        test('does not modify URLs that are not from downloads.ctfassets.net', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://example.com/image.jpg');
+            expect(result).toBe('https://example.com/image.jpg');
+        });
+        test('does not modify images.ctfassets.net URLs', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://images.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+    });
+    describe('query parameters', ()=>{
+        test('adds width parameter', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?width=100');
+        });
+        test('adds height parameter', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                height: 200
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?height=200');
+        });
+        test('adds fit parameter', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                fit: 'thumb'
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?fit=thumb');
+        });
+        test('adds multiple parameters', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100,
+                height: 200,
+                fit: 'thumb'
+            });
+            expect(result).toContain('width=100');
+            expect(result).toContain('height=200');
+            expect(result).toContain('fit=thumb');
+            expect(result).toContain('images.ctfassets.net');
+        });
+        test('skips undefined parameters', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100,
+                height: undefined,
+                fit: 'thumb'
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?width=100&fit=thumb');
+        });
+        test('returns URL without query string when no params provided', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+        test('returns URL without query string when all params are undefined', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: undefined,
+                height: undefined,
+                fit: undefined
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+    });
+    describe('relative URL fallback', ()=>{
+        test('returns relative URL unchanged when no params provided', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('/assets/image.jpg');
+            expect(result).toBe('/assets/image.jpg');
+        });
+        test('appends query params to relative URLs', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('/assets/image.jpg', {
+                width: 100,
+                height: 200
+            });
+            expect(result).toBe('/assets/image.jpg?width=100&height=200');
+        });
+        test('handles relative URLs with undefined params', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('/assets/image.jpg', {
+                width: 100,
+                height: undefined
+            });
+            expect(result).toBe('/assets/image.jpg?width=100');
+        });
+        test('returns relative URL unchanged when all params are undefined', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('/assets/image.jpg', {
+                width: undefined,
+                height: undefined
+            });
+            expect(result).toBe('/assets/image.jpg');
+        });
+    });
+    describe('edge cases', ()=>{
+        test('preserves existing query parameters', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg?foo=bar', {
+                width: 100
+            });
+            expect(result).toContain('foo=bar');
+            expect(result).toContain('width=100');
+        });
+        test('handles URLs with fragments', ()=>{
+            const result = (0, _entityHelpers.getResolvedImageUrl)('https://downloads.ctfassets.net/space/asset.jpg#section', {
+                width: 100
+            });
+            expect(result).toContain('images.ctfassets.net');
+            expect(result).toContain('width=100');
+            expect(result).toContain('#section');
+        });
+    });
+});

package/dist/esm/utils/entityHelpers.js

@@ -189,3 +189,33 @@ export const getEntryImage = async ({ entry, contentType, localeCode }, getAsset
         return null;
     }
 };
+const DOWNLOADS_ENDPOINT = 'downloads.ctfassets.net';
+const TRANSFORMATIONS_ENDPOINT = 'images.ctfassets.net';
+export const getResolvedImageUrl = (url, params)=>{
+    try {
+        const urlToParse = url.startsWith('//') ? `https:${url}` : url;
+        const parsedUrl = new URL(urlToParse);
+        if (parsedUrl.hostname === DOWNLOADS_ENDPOINT) {
+            parsedUrl.hostname = TRANSFORMATIONS_ENDPOINT;
+        }
+        if (params) {
+            Object.entries(params).forEach(([key, value])=>{
+                if (value !== undefined) {
+                    parsedUrl.searchParams.set(key, value.toString());
+                }
+            });
+        }
+        const result = parsedUrl.toString();
+        return url.startsWith('//') ? result.replace(/^https:/, '') : result;
+    } catch  {
+        if (!params) return url;
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value])=>{
+            if (value !== undefined) {
+                searchParams.set(key, value.toString());
+            }
+        });
+        const queryString = searchParams.toString();
+        return queryString ? `${url}?${queryString}` : url;
+    }
+};

package/dist/esm/utils/entityHelpers.test.js

@@ -1,4 +1,4 @@
-import { getEntityStatus } from './entityHelpers';
+import { getEntityStatus, getResolvedImageUrl } from './entityHelpers';
 describe('getEntityStatus', ()=>{
     function createEntity(props) {
         return props;
@@ -145,3 +145,118 @@ describe('getEntityStatus', ()=>{
         });
     });
 });
+describe('getResolvedImageUrl', ()=>{
+    describe('URL parsing and domain replacement', ()=>{
+        test('replaces downloads.ctfassets.net with images.ctfassets.net', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+        test('handles protocol-relative URLs', ()=>{
+            const result = getResolvedImageUrl('//downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('//images.ctfassets.net/space/asset.jpg');
+        });
+        test('does not modify URLs that are not from downloads.ctfassets.net', ()=>{
+            const result = getResolvedImageUrl('https://example.com/image.jpg');
+            expect(result).toBe('https://example.com/image.jpg');
+        });
+        test('does not modify images.ctfassets.net URLs', ()=>{
+            const result = getResolvedImageUrl('https://images.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+    });
+    describe('query parameters', ()=>{
+        test('adds width parameter', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?width=100');
+        });
+        test('adds height parameter', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                height: 200
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?height=200');
+        });
+        test('adds fit parameter', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                fit: 'thumb'
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?fit=thumb');
+        });
+        test('adds multiple parameters', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100,
+                height: 200,
+                fit: 'thumb'
+            });
+            expect(result).toContain('width=100');
+            expect(result).toContain('height=200');
+            expect(result).toContain('fit=thumb');
+            expect(result).toContain('images.ctfassets.net');
+        });
+        test('skips undefined parameters', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: 100,
+                height: undefined,
+                fit: 'thumb'
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg?width=100&fit=thumb');
+        });
+        test('returns URL without query string when no params provided', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg');
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+        test('returns URL without query string when all params are undefined', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg', {
+                width: undefined,
+                height: undefined,
+                fit: undefined
+            });
+            expect(result).toBe('https://images.ctfassets.net/space/asset.jpg');
+        });
+    });
+    describe('relative URL fallback', ()=>{
+        test('returns relative URL unchanged when no params provided', ()=>{
+            const result = getResolvedImageUrl('/assets/image.jpg');
+            expect(result).toBe('/assets/image.jpg');
+        });
+        test('appends query params to relative URLs', ()=>{
+            const result = getResolvedImageUrl('/assets/image.jpg', {
+                width: 100,
+                height: 200
+            });
+            expect(result).toBe('/assets/image.jpg?width=100&height=200');
+        });
+        test('handles relative URLs with undefined params', ()=>{
+            const result = getResolvedImageUrl('/assets/image.jpg', {
+                width: 100,
+                height: undefined
+            });
+            expect(result).toBe('/assets/image.jpg?width=100');
+        });
+        test('returns relative URL unchanged when all params are undefined', ()=>{
+            const result = getResolvedImageUrl('/assets/image.jpg', {
+                width: undefined,
+                height: undefined
+            });
+            expect(result).toBe('/assets/image.jpg');
+        });
+    });
+    describe('edge cases', ()=>{
+        test('preserves existing query parameters', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg?foo=bar', {
+                width: 100
+            });
+            expect(result).toContain('foo=bar');
+            expect(result).toContain('width=100');
+        });
+        test('handles URLs with fragments', ()=>{
+            const result = getResolvedImageUrl('https://downloads.ctfassets.net/space/asset.jpg#section', {
+                width: 100
+            });
+            expect(result).toContain('images.ctfassets.net');
+            expect(result).toContain('width=100');
+            expect(result).toContain('#section');
+        });
+    });
+});

package/dist/types/utils/entityHelpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="jest" />
 import { Asset, ContentType, ContentTypeField, Entry, File } from '../typesEntity';
 export declare function getFieldValue({ 
 /**
@@ -80,4 +81,9 @@ export declare const getEntryImage: ({ entry, contentType, localeCode, }: {
     localeCode: string;
     defaultLocaleCode: string;
 }, getAsset: (assetId: string) => Promise<unknown>) => Promise<null | File>;
+export declare const getResolvedImageUrl: (url: string, params?: {
+    width?: number;
+    height?: number;
+    fit?: string;
+}) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-shared",
-  "version": "2.16.0",
+  "version": "2.17.0-alpha.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "e685baec786ae9c9a6e0660bdb17005304646593"
+  "gitHead": "aae7ea3dcdc2010b1bc8c15a4d6ce3ddba9702e2"
 }