From 9ad9f567ea3fb5e6724b0d45e4fa1c5c35de480e Mon Sep 17 00:00:00 2001 From: Rafael Velazco Date: Tue, 26 Mar 2024 14:29:11 -0400 Subject: [PATCH] fix(edit-content): Make our dotAddImage custom plugins for TinyMCE work in Angular FILEASSET #27969 (#28075) * fix: make FILEASSET images work with Angular TinyMCE implementation * fix tests --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> --- .../utils/editor.utils.spec.ts | 1 + .../dot-wysiwyg-plugin/utils/editor.utils.ts | 3 +- core-web/libs/utils/src/lib/dot-utils.spec.ts | 109 +++++++++++------- core-web/libs/utils/src/lib/dot-utils.ts | 30 ++++- 4 files changed, 101 insertions(+), 42 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.spec.ts index 96c102f2227d..776c0153d5d3 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.spec.ts @@ -7,6 +7,7 @@ describe('formatDotImageNode', () => { it('should return formatted image node', () => { const asset: DotCMSContentlet = { ...EMPTY_CONTENTLET, + baseType: 'DOTASSET', assetVersion: 'version', asset: 'asset', title: 'title', diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.ts index 7945c8c26b82..e6310ed414e9 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-wysiwyg-field/dot-wysiwyg-plugin/utils/editor.utils.ts @@ -1,7 +1,8 @@ import { DotCMSContentlet } from '@dotcms/dotcms-models'; +import { getImageAssetUrl } from '@dotcms/utils'; export const formatDotImageNode = (asset: DotCMSContentlet) => { - return `${asset.title} { -// it('should return anchor with the correct values', () => { -// const blobMock = new Blob(['']); -// const fileName = 'doc.txt'; -// spyOn(window.URL, 'createObjectURL'); -// const anchor = getDownloadLink(blobMock, fileName); - -// expect(anchor.download).toEqual(fileName); -// expect(window.URL.createObjectURL).toHaveBeenCalledWith(blobMock); -// }); - -// it('should return unique URL with host, language and device Ids', () => { -// const mockRenderedPageState = new DotPageRenderState( -// mockUser(), -// new DotPageRender({ -// ...mockDotRenderedPage(), -// viewAs: { -// ...mockDotRenderedPage().viewAs, -// device: { -// identifier: 'abc123', -// cssHeight: '800', -// cssWidth: '1200', -// name: 'custom', -// inode: '123zxc' -// } -// } -// }) -// ); - -// const url = dotUtils.generateDotFavoritePageUrl(mockRenderedPageState); - -// expect(url).toEqual('/an/url/test?&language_id=1&device_id=abc123'); -// }); -// }); +import { DotCMSBaseTypesContentTypes } from '@dotcms/dotcms-models'; +import { EMPTY_CONTENTLET } from '@dotcms/utils-testing'; + +import { getImageAssetUrl } from './dot-utils'; + +describe('Dot Utils', () => { + describe('getImageAssetUrl', () => { + it('should return fileAssetVersion when baseType is FILEASSET and fileAssetVersion is defined', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: DotCMSBaseTypesContentTypes.FILEASSET, + fileAssetVersion: 'fileAssetVersion', + fileAsset: 'fileAsset' + }; + + expect(getImageAssetUrl(contentlet)).toEqual('fileAssetVersion'); + }); + + it('should return fileAsset when baseType is FILEASSET and fileAssetVersion is not defined', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: DotCMSBaseTypesContentTypes.FILEASSET, + fileAsset: 'fileAsset' + }; + + expect(getImageAssetUrl(contentlet)).toEqual('fileAsset'); + }); + + it('should return assetVersion when baseType is DOTASSET and assetVersion is defined', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: DotCMSBaseTypesContentTypes.DOTASSET, + assetVersion: 'assetVersion', + asset: 'asset' + }; + + expect(getImageAssetUrl(contentlet)).toEqual('assetVersion'); + }); + + it('should return asset when baseType is DOTASSET and assetVersion is not defined', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: DotCMSBaseTypesContentTypes.DOTASSET, + asset: 'asset' + }; + + expect(getImageAssetUrl(contentlet)).toEqual('asset'); + }); + + it('should return asset when baseType is not FILEASSET or DOTASSET', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: 'OTHER', + asset: 'asset' + }; + + expect(getImageAssetUrl(contentlet)).toEqual('asset'); + }); + + it('should return empty string when asset is not defined and baseType is not FILEASSET or DOTASSET', () => { + const contentlet = { + ...EMPTY_CONTENTLET, + baseType: 'OTHER' + }; + + expect(getImageAssetUrl(contentlet)).toEqual(''); + }); + }); +}); diff --git a/core-web/libs/utils/src/lib/dot-utils.ts b/core-web/libs/utils/src/lib/dot-utils.ts index af7256256f67..0a323f88a656 100644 --- a/core-web/libs/utils/src/lib/dot-utils.ts +++ b/core-web/libs/utils/src/lib/dot-utils.ts @@ -1,4 +1,8 @@ -import { DotPageToolUrlParams } from '@dotcms/dotcms-models'; +import { + DotCMSBaseTypesContentTypes, + DotCMSContentlet, + DotPageToolUrlParams +} from '@dotcms/dotcms-models'; /** * Generate an anchor element with a Blob file to eventually be click to force a download @@ -66,3 +70,27 @@ export function getRunnableLink(url: string, currentPageUrlParams: DotPageToolUr return url; } + +/** + * Get the image asset URL + * + * @export + * @param {DotCMSContentlet} asset + * @return {*} {string} + */ +export function getImageAssetUrl(contentlet: DotCMSContentlet): string { + if (!contentlet?.baseType) { + return contentlet.asset; + } + + switch (contentlet?.baseType) { + case DotCMSBaseTypesContentTypes.FILEASSET: + return contentlet.fileAssetVersion || contentlet.fileAsset; + + case DotCMSBaseTypesContentTypes.DOTASSET: + return contentlet.assetVersion || contentlet.asset; + + default: + return contentlet?.asset || ''; + } +}