DX | 31-07-2024 | Release

__test__/gql/gql-json-to-html.test.ts

@@ -91,8 +91,8 @@ describe('Node parser reference content', () => {
 
         GQL.jsonToHTML({entry, paths})
 
-        expect(entry.single_rte).toEqual('<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>')
-        expect(entry.multiple_rte).toEqual(['<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>'])
+        expect(entry.single_rte).toEqual('<img src=\"/asset_uid_1/dummy.pdf\" alt=\"dummy.pdf\" />')
+        expect(entry.multiple_rte).toEqual(['<img src=\"/asset_uid_1/dummy.pdf\" alt=\"dummy.pdf\" />'])
         done()
     })
 
@@ -101,8 +101,8 @@ describe('Node parser reference content', () => {
 
         GQL.jsonToHTML({entry, paths})
 
-        expect(entry[0].single_rte).toEqual('<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>')
-        expect(entry[0].multiple_rte).toEqual(['<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>'])
+        expect(entry[0].single_rte).toEqual('<img src=\"/asset_uid_1/dummy.pdf\" alt=\"dummy.pdf\" />')
+        expect(entry[0].multiple_rte).toEqual(['<img src=\"/asset_uid_1/dummy.pdf\" alt=\"dummy.pdf\" />'])
         done()
     })
 

__test__/json-to-html.test.ts

@@ -31,7 +31,8 @@ import {
     unorderListJson2,
     orderListJson2,
     testJsonRte,
-    testJsonAsset} from './mock/json-element-mock'
+    testJsonAsset,
+    embeddedAssetAsLinkJsonEntry} from './mock/json-element-mock'
 import {
     blockquoteHtml,
     codeHtml,
@@ -116,7 +117,7 @@ describe('Node parser paragraph content', () => {
 
 
 describe('Node parser reference content', () => {
-    it.skip('Should render reference asset to html from Entry',  done => {
+    it('Should render reference asset to html from Entry',  done => {
         const entry = {...embeddedAssetJsonEntry}
 
         jsonToHTML({entry, paths: ['rich_text_editor', 'rte']})
@@ -126,7 +127,7 @@ describe('Node parser reference content', () => {
         done()
     })
 
-    it.skip('Should render reference asset to html from Entries',  done => {
+    it('Should render reference asset to html from Entries',  done => {
         const entry = [{ ...embeddedAssetJsonEntry }]
 
         jsonToHTML({entry, paths: ['rich_text_editor', 'rte']})
@@ -136,7 +137,7 @@ describe('Node parser reference content', () => {
         done()
     })
 
-    it.skip('Should render reference asset to html from Entry with custom render option',  done => {
+    it('Should render reference asset to html from Entry with custom render option',  done => {
         const entry = {...embeddedAssetJsonEntry}
 
         jsonToHTML({entry, paths: ['rich_text_editor', 'rte'], renderOption: embeddedAssetWithRenderOption.renderOption})
@@ -146,7 +147,7 @@ describe('Node parser reference content', () => {
         done()
     })
 
-    it.skip('Should render reference asset to html from Entries with custom render option',  done => {
+    it('Should render reference asset to html from Entries with custom render option',  done => {
         const entry = [{ ...embeddedAssetJsonEntry }]
 
         jsonToHTML({entry, paths: ['rich_text_editor', 'rte'], renderOption: embeddedAssetWithRenderOption.renderOption})

__test__/mock/json-element-mock-result.ts

@@ -22,7 +22,7 @@ const classAndIdAttrsHtml = "<a class=\"class_a\" id=\"id_p\" href=\"LINK.com\">
 const styleObjHtml = "<h1 style=\"text-align:justify;\">heading1</h1><h2 style=\"text-align:left;\">heading2</h2><h3 style=\"text-align:right;\">heading3</h3><h4 style=\"text-align:justify;\">heading4</h4><h5 style=\"text-align:justify;\">heading5</h5><h6 style=\"text-align:justify;\">heading6</h6>"
 const referenceObjHtml = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-3\" target=\"_blank\">Open entry as a link in new tab</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-2\" target=\"_self\">Bold entry</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-4\" target=\"_blank\"><strong>Bold entry open in new tab</strong></a></p>"
 const referenceObjHtmlBlock = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/Test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Embed entry as a link open in new tab</a></p><ul><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\">Entry as a link</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Open entry as a link in new tab</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\"><strong><u>Entry as a link bold</u></strong></a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"khjgf\" target=\"_blank\"><strong><u>Open bold entry as a link in new tab </u></strong></a></li><li><a href=\"https://\" target=\"_self\"><strong><u>Link URL</u></strong></a></li><li><a href=\"https://\" target=\"_blank\"><strong><u>Open link in new tab</u></strong></a></li></ul>"
-const imagetags = "<figure style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\"><a href=\"https://batman.com\" target=\"_blank\"><img asset_uid=\"bltb87e0bd5764c421e\" src=\"https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png\" alt=\"batman\" target=\"_blank\" style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\" /></a><figcaption>The Batman</figcaption></figure>"
+const imagetags = "<figure style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\"><a href=\"https://batman.com\" target=\"_blank\"><img asset_uid=\"bltb87e0bd5764c421e\" class=\"embedded-asset\" src=\"https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png\" alt=\"batman\" target=\"_blank\" style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\" /></a><figcaption>The Batman</figcaption></figure>"
 export {
     h1Html,
     h2Html,

__test__/mock/json-element-mock.ts

@@ -1138,6 +1138,41 @@ const paragraphJsonArrayEntry = {
 
 }
 
+const embeddedAssetAsLinkJsonEntry = {
+  uid: 'entry_uid',
+  rte_data: {
+    type: 'doc',
+    attrs: {},
+    uid: 'rte_uid',
+    children: [
+      {
+        type: 'p',
+        uid: 'p_uid',
+        attrs: {},
+        children: [
+          { text: '' },
+          {
+            uid: 'ref_uid',
+            type: 'reference',
+            attrs: {
+              'display-type': 'link',
+              type: 'asset',
+              'class-name': 'embedded-entry redactor-component undefined-entry',
+              'asset-uid': 'asset_uid_2',
+              'content-type-uid': 'sys_assets',
+              target: '_self',
+              href: 'https://picsum.photos/200'
+            },
+            children: [ { text: 'Door matching', bold: true, underline: true } ]
+          },
+          { text: '' }
+        ]
+      }
+    ],
+    _version: 4
+  }
+}
+
 const embeddedAssetJsonEntry = {
     uid: 'entry_uid',
     rich_text_editor: {...assetReferenceJson},
@@ -2328,9 +2363,10 @@ export {
   blockquoteJson,
   paragraphEntry,
   unorderListJson, 
-  assetReferenceJson, 
+  assetReferenceJson,
   paragraphJsonArrayEntry, 
   embeddedAssetJsonEntry,
+  embeddedAssetAsLinkJsonEntry,
   embeddedEntryJsonEntry,
   entryReferenceLinkJson,
   entryReferenceBlockJson,

__test__/reference-to-html.test.ts

@@ -152,14 +152,14 @@ describe('Reference Node To HTML', () => {
         }
 
         const resultHTML = referenceToHTML(node, renderOption)
-        expect(resultHTML).toEqual('<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>')
+        expect(resultHTML).toEqual('<img src=https://image.url/11.jpg>')
         done()
     })
     it('Should return image for undefined node asset from default node option', done => {
         const node = assetReferenceJson.children[0] as unknown as Node
 
         const resultHTML = referenceToHTML(node, defaultNodeOption)
-        expect(resultHTML).toEqual('<figure><img asset_uid=\"asset_uid_1\" src=\"https://image.url/11.jpg\" /></figure>')
+        expect(resultHTML).toEqual('<figure><img asset_uid=\"asset_uid_1\" class=\"embedded-asset\" src=\"https://image.url/11.jpg\" /></figure>')
         done()
     })
 

src/helper/enumerate-entries.ts

@@ -77,47 +77,6 @@ export function referenceToHTML(
   renderOption: RenderOption,
   renderEmbed?: (metadata: Metadata) => EmbeddedItem | EntryNode,
 ): string {
-  if ( node.children!== undefined && node.attrs.type === 'asset' && node.attrs['content-type-uid'] === 'sys_assets') {
-
-    // Extract image information
-    const src = node.attrs['asset-link'];
-    const alt = node.attrs?.['redactor-attributes']?.['alt'];
-    const link = node.attrs.link;
-    const target = node.attrs.target || "";
-    const caption = node.attrs?.['redactor-attributes']?.['asset-caption'] || node.attrs?.['asset-caption'] || "";
-    const style = node.attrs.style;
-    const asset_uid= node.attrs['asset-uid'];
-
-    // Build img tag with optional attributes
-    let imageTag = `<img `;
-
-    if(node.attrs['asset-uid']){
-      imageTag += `asset_uid="${asset_uid}"`;
-    }
-    if(node.attrs['asset-link']){
-      imageTag += ` src="${src}"`;
-    }
-    if (node.attrs?.['redactor-attributes']?.['alt']) {
-      imageTag += ` alt="${alt}"`;
-    }
-    if (node.attrs.target === "_blank") {
-      imageTag += ` target="_blank"`;
-    }
-    if (node.attrs.style) {
-      imageTag += ` style="${style}"`;
-    }
-
-    imageTag += " />";
-
-    const figureTag = `<figure${style ? ` style="${style}"` : ''}>` +
-      (link ? `<a href="${link}" target="${target || ""}">` : "") +
-      imageTag +
-      (link ? `</a>` : "") +
-      (caption ? `<figcaption>${caption}</figcaption>` : "") +
-      `</figure>`;
-    return figureTag;
-  }
-
   if (node.attrs.type === 'entry' && node.attrs['display-type'] === 'link') {
     const entryText = node.children ? nodeChildrenToHTML(node.children, renderOption, renderEmbed) : '';
     if (node.attrs.target) {

src/options/default-node-options.ts

@@ -105,7 +105,22 @@ export const defaultNodeOption: RenderOption = {
 
     ['reference']:(node: Node, next: Next) => {
         if (node.attrs.type === 'asset') {
-            return `<img${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${sanitizeHTML(node.attrs['class-name'])}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${sanitizeHTML(node.attrs['asset-link'])}" />`
+            const src = node.attrs['asset-link'];
+            const alt = node.attrs?.['redactor-attributes']?.['alt'];
+            const link = node.attrs.link;
+            const target = node.attrs.target || "";
+            const caption = node.attrs?.['redactor-attributes']?.['asset-caption'] || node.attrs?.['asset-caption'] || "";
+            const style = node.attrs.style;
+            const asset_uid= node.attrs['asset-uid'];
+
+            let imageTag = `<img${asset_uid ? ` asset_uid="${asset_uid}"` : `` }${node.attrs['class-name'] ? ` class="${sanitizeHTML(node.attrs['class-name'])}"`: ``}${src ? ` src="${sanitizeHTML(src)}"` : ``}${alt ? ` alt="${alt}"` : `` }${target === "_blank" ? ` target="_blank"` : `` }${style ? ` style="${style}"` : `` } />`;
+
+            return `<figure${style ? ` style="${style}"` : ''}>` +
+                    (link ? `<a href="${link}" target="${target || ""}">` : "") +
+                    imageTag +
+                    (link ? `</a>` : "") +
+                    (caption ? `<figcaption>${caption}</figcaption>` : "") +
+                    `</figure>`;
         }
         return ``
     },