fix(edit-content): Make our dotAddImage custom plugins for TinyMCE wo…

…rk 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>

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',

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 `<img src="${asset.assetVersion || asset.asset}"
+    return `<img src="${getImageAssetUrl(asset)}"
     alt="${asset.title}"
     data-field-name="${asset.titleImage}"
     data-inode="${asset.inode}"

core-web/libs/utils/src/lib/dot-utils.spec.ts

@@ -1,40 +1,69 @@
-// import { DotPageRenderState } from '../../../../apps/dotcms-ui/src/app/portlets/dot-edit-page/shared/models';
-// import { mockDotRenderedPage } from '../../../../apps/dotcms-ui/src/app/test/dot-page-render.mock';
-// import { mockUser } from '../../../../apps/dotcms-ui/src/app/test/login-service.mock';
-// import { getDownloadLink } from './dot-utils';
-// import { DotPageRender } from '@dotcms/dotcms-models';
-
-// describe('Dot Utils', () => {
-//     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('');
+        });
+    });
+});

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 || '';
+    }
+}