Skip to content

Commit ab22d49

Browse files
reeshika-hreeshika-h
committed
Support for image type asset in JsonToHtml
1 parent bc714a3 commit ab22d49

File tree

4 files changed

+109
-4
lines changed

4 files changed

+109
-4
lines changed

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { jsonToHTML } from '../src/json-to-html'
22
import { embeddedAssetWithRenderOption } from './mock/render-options'
3+
34
import {
45
blockquoteJson,
56
codeJson,
@@ -29,7 +30,8 @@ import {
2930
unorderListJson1,
3031
unorderListJson2,
3132
orderListJson2,
32-
testJsonRte,} from './mock/json-element-mock'
33+
testJsonRte,
34+
testJsonAsset} from './mock/json-element-mock'
3335
import {
3436
blockquoteHtml,
3537
codeHtml,
@@ -54,7 +56,8 @@ import {
5456
classAndIdAttrsHtml,
5557
styleObjHtml,
5658
referenceObjHtml,
57-
referenceObjHtmlBlock} from './mock/json-element-mock-result'
59+
referenceObjHtmlBlock,
60+
imagetags} from './mock/json-element-mock-result'
5861
describe('Node parser paragraph content', () => {
5962
it('Should accept proper values', done => {
6063
const entry = { uid: 'uid'}
@@ -637,4 +640,11 @@ describe('Node parse json_rte Content', () => {
637640
expect(entry.json_rte).toEqual(classAndIdAttrsHtml)
638641
done()
639642
})
643+
it('Testing json to html', done =>{
644+
const entry = testJsonAsset
645+
const paths =['json_rte']
646+
jsonToHTML({ entry: entry, paths})
647+
expect(entry.json_rte).toEqual(imagetags)
648+
done()
649+
})
640650
})

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const classAndIdAttrsHtml = "<a class=\"class_a\" id=\"id_p\" href=\"LINK.com\">
2222
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>"
2323
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>"
2424
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>"
25+
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/***REMOVED***/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>"
2526
export {
2627
h1Html,
2728
h2Html,
@@ -46,5 +47,7 @@ export {
4647
classAndIdAttrsHtml,
4748
styleObjHtml,
4849
referenceObjHtml,
49-
referenceObjHtmlBlock
50+
referenceObjHtmlBlock,
51+
imagetags,
52+
5053
}

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

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2249,6 +2249,64 @@ const testJsonRte = {
22492249
"updated_by": "",
22502250
"url": "/version-ten",
22512251
"version": "100"
2252+
2253+
}
2254+
const testJsonAsset={
2255+
"uid": "",
2256+
"_version": 3,
2257+
"locale": "en-us",
2258+
"json_rte":{
2259+
"type": "doc",
2260+
"attrs": {},
2261+
"uid": "ddec1e08f4634eaca512b113ba4da946",
2262+
"children": [
2263+
{
2264+
"uid": "7dd9bbe6b18449b8b83cabe084b02da4",
2265+
"type": "reference",
2266+
"attrs": {
2267+
"display-type": "display",
2268+
"asset-uid": "bltb87e0bd5764c421e",
2269+
"content-type-uid": "sys_assets",
2270+
"asset-link": "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png",
2271+
"asset-name": "batman.png",
2272+
"asset-type": "image/png",
2273+
"type": "asset",
2274+
"class-name": "embedded-asset",
2275+
"redactor-attributes": {
2276+
"position": "right",
2277+
"alt": "batman",
2278+
"caption": "The Batman",
2279+
"anchorLink": "https://batman.com",
2280+
"target": true,
2281+
"height": "257"
2282+
},
2283+
"style": {
2284+
"text-align": "right",
2285+
"max-width": "137px",
2286+
"float": "right",
2287+
"width": "137px",
2288+
"max-height": "257px",
2289+
"height": "257px"
2290+
},
2291+
"position": "right",
2292+
"asset-alt": "batman",
2293+
"asset-caption": "The Batman",
2294+
"link": "https://batman.com",
2295+
"target": "_blank",
2296+
"max-width": "137",
2297+
"width": "137",
2298+
"max-height": "257",
2299+
"height": "257"
2300+
},
2301+
"children": [
2302+
{
2303+
"text": ""
2304+
}
2305+
]
2306+
}
2307+
],
2308+
"_version": 22
2309+
}
22522310
}
22532311
export {
22542312
h1Json,
@@ -2285,5 +2343,6 @@ export {
22852343
unorderListJson1,
22862344
unorderListJson2,
22872345
orderListJson2,
2288-
testJsonRte
2346+
testJsonRte,
2347+
testJsonAsset
22892348
}

‎src/helper/enumerate-entries.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,39 @@ export function referenceToHTML(
8484
}
8585
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>`;
8686
}
87+
if (node.attrs && node.attrs['content-type-uid']=== 'sys_assets' || node.attrs.type === 'asset') {
88+
// Extract image information
89+
const src = node.attrs['asset-link'];
90+
const alt = node.attrs?.['redactor-attributes']?.['alt'];
91+
const link = node.attrs.link;
92+
const target = node.attrs.target || "";
93+
const caption = node.attrs?.['redactor-attributes']?.['asset-caption'] || node.attrs?.['asset-caption'] || "";
94+
const style = node.attrs.style;
95+
const asset_uid= node.attrs['asset-uid'];
96+
97+
// Build img tag with optional attributes
98+
let imageTag = `<img asset_uid="${asset_uid}" src="${src}" alt="${alt}"`;
99+
100+
if(node.attrs['asset_uid']){
101+
imageTag += `asset_uid=${asset_uid}`;
102+
}
103+
if (node.attrs.target === "_blank") {
104+
imageTag += ` target="_blank"`;
105+
}
106+
if (node.attrs.style) {
107+
imageTag += ` style="${node.attrs.style}"`;
108+
}
109+
110+
imageTag += " />";
111+
112+
const figureTag = `<figure style="${style}">` +
113+
(node.attrs.link ? `<a href="${link}" target="${target || ""}">` : "") +
114+
imageTag +
115+
(node.attrs.link ? `</a>` : "") +
116+
(caption ? `<figcaption>${caption}</figcaption>` : "") +
117+
`</figure>`;
118+
return figureTag;
119+
}
87120
function sendToRenderOption(referenceNode: Node): string {
88121
return (renderOption[referenceNode.type] as RenderNode)(referenceNode, undefined);
89122
}

0 commit comments

Comments
 (0)