Merge pull request #89 from contentstack/fix/reference-to-html-for-assets-fix

fix: reference-to-html method fix for asset reference

Author: nadeem-cs

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
 
+## [1.3.11](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.11) (2024-08-21)
+ - Fix: Reference to HTML fixed to support assets that are referenced
+
 ## [1.3.10](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.10) (2024-07-08)
  - Enhancement: Update default node options
 

__test__/json-to-html.test.ts

@@ -167,6 +167,19 @@ describe('Node parser reference content', () => {
         expect(entry.json_rte[0]).toEqual(referenceObjHtml)
         done()
     })
+
+    it('should convert to html when asset embedded as link in json_rte', done => {
+        const entry = {
+            uid: 'entry_uid',
+            rte_data: {...embeddedAssetAsLinkJsonEntry},
+        }
+        const paths = ["rte_data"]
+        const result = `<p>asda<a class="embedded-entry redactor-component undefined-entry" href="https://images.contentstack.io/v3/assets/***REMOVED***/***REMOVED***/657304603ed4d5773c01feed/Screenshot_2023-03-01_at_1.09.39_PM.png" target="_self" content-type-uid="sys_assets" data-sys-asset-uid="***REMOVED***" sys-style-type="download">s<strong>das</strong></a><strong>d</strong>as</p>`
+        jsonToHTML({ entry: entry, paths })
+         
+        expect(entry.rte_data).toBe(result)
+        done()
+    })
 })
 
 describe('Node parse text Content', () => {

__test__/mock/json-element-mock.ts

@@ -1139,38 +1139,51 @@ const paragraphJsonArrayEntry = {
 }
 
 const embeddedAssetAsLinkJsonEntry = {
-  uid: 'entry_uid',
-  rte_data: {
-    type: 'doc',
-    attrs: {},
-    uid: 'rte_uid',
-    children: [
+  "type": "doc",
+  "attrs": {},
+  "uid": "1b212916f2784af4bcf9a0af5018364e",
+  "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: '' }
-        ]
+          "type": "p",
+          "attrs": {},
+          "uid": "3f3a84966368435388b7b9948283be2e",
+          "children": [
+              {
+                  "text": "asda"
+              },
+              {
+                  "uid": "c2384ca128a64ee89e82b7aaab77e7b1",
+                  "type": "reference",
+                  "attrs": {
+                      "display-type": "link",
+                      "type": "asset",
+                      "class-name": "embedded-entry redactor-component undefined-entry",
+                      "asset-uid": "***REMOVED***",
+                      "content-type-uid": "sys_assets",
+                      "target": "_self",
+                      "href": "https://images.contentstack.io/v3/assets/***REMOVED***/***REMOVED***/657304603ed4d5773c01feed/Screenshot_2023-03-01_at_1.09.39_PM.png"
+                  },
+                  "children": [
+                      {
+                          "text": "s"
+                      },
+                      {
+                          "text": "das",
+                          "bold": true
+                      }
+                  ]
+              },
+              {
+                  "text": "d",
+                  "bold": true
+              },
+              {
+                  "text": "as"
+              }
+          ]
       }
-    ],
-    _version: 4
-  }
+  ],
+  "_version": 1
 }
 
 const embeddedAssetJsonEntry = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/utils",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "Contentstack utilities for Javascript",
   "main": "dist/index.es.js",
   "types": "dist/types/index.d.ts",

src/helper/enumerate-entries.ts

@@ -77,12 +77,18 @@ export function referenceToHTML(
   renderOption: RenderOption,
   renderEmbed?: (metadata: Metadata) => EmbeddedItem | EntryNode,
 ): string {
-  if (node.attrs.type === 'entry' && node.attrs['display-type'] === 'link') {
+  if ((node.attrs.type === 'entry' || node.attrs.type === 'asset') && node.attrs['display-type'] === 'link') {
     const entryText = node.children ? nodeChildrenToHTML(node.children, renderOption, renderEmbed) : '';
+
+    let aTagAttrs = `${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${node.attrs.href || node.attrs.url}"`;
     if (node.attrs.target) {
-      return `<a${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${node.attrs.href || node.attrs.url}" target="${node.attrs.target}">${entryText}</a>`   
+      aTagAttrs +=` target="${node.attrs.target}"`;
+    }
+    if(node.attrs.type == 'asset') {
+      aTagAttrs += ` type="asset" content-type-uid="sys_assets" ${node.attrs['asset-uid'] ? `data-sys-asset-uid="${node.attrs['asset-uid']}"` : ``} sys-style-type="download"`
     }
-    return `<a${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${node.attrs.href || node.attrs.url}">${entryText}</a>`;
+    const aTag = `<a${aTagAttrs}>${entryText}</a>`;
+    return aTag;
   }
 
   function sendToRenderOption(referenceNode: Node): string {