Skip to content

Commit 990fa80

Browse files
Jayesh2812Jayesh2812
authored
Merge pull request #55 from contentstack/asset-bug-fix
Asset bug fix
2 parents 3aa9b03 + 56bba8b commit 990fa80

File tree

5 files changed

+76
-15
lines changed

5 files changed

+76
-15
lines changed

‎src/fromRedactor.tsx

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const isInline = ['span', 'a', 'inlineCode', 'reference']
1515
const isVoid = ['img', 'embed']
1616

1717

18-
const ELEMENT_TAGS: IHtmlToJsonElementTags = {
18+
export const ELEMENT_TAGS: IHtmlToJsonElementTags = {
1919
A: (el: HTMLElement) => {
2020
const attrs: Record<string, string> = {}
2121
const target = el.getAttribute('target');
@@ -49,7 +49,11 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
4949
const assetName = splittedUrl[splittedUrl?.length - 1]
5050
return { type: 'reference', attrs: { "asset-name": assetName,"content-type-uid" : "sys_assets", "asset-link": el.getAttribute('src'), "asset-type": `image/${imageType}`, "display-type": "display", "type": "asset", "asset-uid": assetUid } }
5151
}
52-
return { type: 'img', attrs: { url: el.getAttribute('src') } }
52+
const imageAttrs : any = { type: 'img', attrs: { url: el.getAttribute('src') } }
53+
if (el.getAttribute('width')) {
54+
imageAttrs.attrs['width'] = el.getAttribute('width')
55+
}
56+
return imageAttrs
5357
},
5458
LI: () => ({ type: 'li', attrs: {} }),
5559
OL: () => ({ type: 'ol', attrs: {} }),
@@ -98,7 +102,8 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
98102
SCRIPT: (el: HTMLElement) => {
99103
return { type: 'script', attrs: {} }
100104
},
101-
HR: () => ({ type: 'hr', attrs: {} })
105+
HR: () => ({ type: 'hr', attrs: {} }),
106+
FIGCAPTION: () => ({ type: 'figcaption', attrs: {} }),
102107
}
103108

104109
const TEXT_TAGS: IHtmlToJsonTextTags = {
@@ -437,7 +442,11 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
437442
}
438443
}
439444
elementAttrs.attrs["redactor-attributes"] = redactor
440-
return jsx('element', { attrs: { ...elementAttrs?.attrs, type, "asset-caption": caption, "link": link, "asset-alt": alt, target, position, "asset-link": fileLink, "asset-uid": uid, "display-type": displayType, "asset-name": fileName, "asset-type": contentType, "content-type-uid": contentTypeUid }, type: "reference", uid: generateId() }, children)
445+
const assetAttrs = { ...elementAttrs?.attrs, type, "asset-caption": caption, "link": link, "asset-alt": alt, target, position, "asset-link": fileLink, "asset-uid": uid, "display-type": displayType, "asset-name": fileName, "asset-type": contentType, "content-type-uid": contentTypeUid }
446+
if(assetAttrs.target === "_self"){
447+
delete assetAttrs.target
448+
}
449+
return jsx('element', { attrs: assetAttrs, type: "reference", uid: generateId() }, children)
441450
}
442451
}
443452
if (nodeName === 'FIGCAPTION') {
@@ -626,11 +635,14 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
626635
const { href, target } = newChildren[0].attrs?.["redactor-attributes"]
627636
extraAttrs['anchorLink'] = href;
628637
if (target && target !== '') {
629-
extraAttrs['target'] = true;
638+
extraAttrs['target'] = target === "_blank";
630639
}
631640
const imageAttrs = newChildren[0].children;
632641

633642
if(imageAttrs[0].type === 'img'){
643+
if(imageAttrs[0].attrs.width){
644+
sizeAttrs.width = imageAttrs[0].attrs.width
645+
}
634646
elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs})
635647

636648
}
@@ -655,6 +667,16 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
655667
elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs)
656668
return jsx('element', elementAttrs, [{ text: '' }])
657669
}
670+
if (newChildren[0]?.type === 'img'){
671+
let extraAttrs: { [key: string]: any } = {}
672+
const imageAttrs = newChildren[0]
673+
elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs)
674+
elementAttrs.attrs['anchorLink'] = el.getAttribute('href')
675+
if(el.getAttribute('target'))
676+
elementAttrs.attrs['target'] = el.getAttribute('target')
677+
return jsx('element', elementAttrs, [{ text: '' }])
678+
679+
}
658680
}
659681
if (nodeName === 'IMG' || nodeName === 'IFRAME' || nodeName === 'VIDEO') {
660682
if (elementAttrs?.attrs?.["redactor-attributes"]?.width) {
@@ -670,6 +692,10 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
670692
if (elementAttrs?.attrs?.["redactor-attributes"]?.inline) {
671693
elementAttrs.attrs.inline = Boolean(elementAttrs?.attrs?.["redactor-attributes"]?.inline)
672694
}
695+
if(nodeName === "IMG" && elementAttrs.attrs.width){
696+
elementAttrs.attrs.style.width = `${elementAttrs.attrs.width}px`
697+
elementAttrs.attrs.style['max-width'] = `${elementAttrs.attrs.width}px`
698+
}
673699
return jsx('element', elementAttrs, [{ text: '' }])
674700
}
675701
if (nodeName === 'BLOCKQUOTE') {
@@ -928,14 +954,24 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt
928954
sizeAttrs.width = newChildren[0].attrs.width.toString();
929955
}
930956

957+
if(!isNaN(parseInt(sizeAttrs.width))){
958+
sizeAttrs.style = {
959+
width: `${sizeAttrs.width}px`,
960+
"max-width": `${sizeAttrs.width}px`
961+
}
962+
}
963+
931964
const childAttrs = { ...newChildren[0].attrs, ...sizeAttrs, style: { 'text-align': style?.['text-align'] }, caption: extraAttrs['caption'] }
932965
extraAttrs = { ...extraAttrs, ...sizeAttrs }
933966

934967
if (!childAttrs.caption) {
935968
delete childAttrs.caption
936969
}
937970

938-
const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
971+
const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
972+
973+
delete imageAttrs?.attrs?.['redactor-attributes']?.['anchorlink'];
974+
delete imageAttrs?.attrs?.['redactor-attributes']?.['style'];
939975

940976
return imageAttrs
941977
}

‎src/toRedactor.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,14 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
482482
}
483483
if(jsonValue['type'] === 'img'){
484484
attrsJson['src'] = allattrs['url']
485+
486+
if(allattrs['caption']) figureStyles.caption = allattrs['caption']
487+
if(allattrs['position']) figureStyles.position = allattrs['position']
488+
if(allattrs['anchorLink']) figureStyles.anchorLink = `href="${allattrs['anchorLink']}"`
489+
if(allattrs['target']){
490+
figureStyles.anchorLink += ` target="${allattrs['target']}"`
491+
}
492+
figureStyles.fieldsEdited.push(figureStyles.caption)
485493
}
486494
if(!(options?.customElementTypes && !isEmpty(options.customElementTypes) && options.customElementTypes[jsonValue['type']])) {
487495
delete attrsJson['url']

‎test/expectedJson.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1346,7 +1346,6 @@ export default {
13461346
"sys-style-type": "display"
13471347
},
13481348
"type": "asset",
1349-
"target": "_self",
13501349
"asset-link": "https://images.contentstack.io/v3/assets/bltbdb397c7cc18a214/blt9fedd0336c2f7f0d/61fe9fb699c8a84a577b9f40/crop_area.jpeg",
13511350
"asset-uid": "blt9fedd0336c2f7f0d",
13521351
"display-type": "display",
@@ -1701,7 +1700,7 @@ export default {
17011700
<figure style="margin: auto; text-align: center;width: 204px;"><a href="https://app.contentstack.com/"><img src="https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg" /></a>
17021701
<figcaption style="text-align: center;" style="text-align: center;">Landscape</figcaption>
17031702
</figure>`,
1704-
"json": {"type":"doc","uid":"d6cd7b938dcc41a8a75fb8bad29aa2e9","attrs":{},"children":[{"type":"p","attrs":{},"uid":"c17f2b982464422aaa58499b9525b437","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","anchorLink":"https://app.contentstack.com/","width":204},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":204,"caption":"Landscape","link":"https://app.contentstack.com/"},"children":[{"text":""}]}]}
1703+
"json": {"type":"doc","attrs":{},"children":[{"type":"p","attrs":{},"children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":204},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","anchorLink":"https://app.contentstack.com/","width":204,"caption":"Landscape"},"children":[{"text":""}]}]}
17051704
},
17061705
"'\n' to <br>": {
17071706
"html": '<p>This is test for break element<br/>This is text on the next line.</p>',

‎test/fromRedactor.test.ts

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import { fromRedactor, getNestedValueIfAvailable } from "../src/fromRedactor"
2+
import { ELEMENT_TAGS, fromRedactor, getNestedValueIfAvailable } from "../src/fromRedactor"
33
import { JSDOM } from "jsdom"
44
import isEqual from "lodash.isequal"
55
import omitdeep from "omit-deep-lodash"
@@ -295,6 +295,16 @@ describe("Testing html to json conversion", () => {
295295
const json = htmlToJson(html)
296296
expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"https://picsum.photos/200","height":"141","alt":"image_(9).png","caption":"ss","type":"asset","asset-alt":"image_(9).png","max-height":"141","max-width":"148","sys-style-type":"display","position":"right","captionAttrs":{"style":"text-align:center"},"anchorLink":"ss.com","target":true,"asset-caption":"ss"},"class-name":"embedded-asset","width":148,"type":"asset","asset-caption":"ss","link":"ss.com","asset-alt":"image_(9).png","target":"_blank","position":"right","asset-link":"https://picsum.photos/200","asset-uid":"blt137d845621ef8168","display-type":"display","asset-name":"image_(9).png","asset-type":"image/png","content-type-uid":"sys_assets"},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]}] })
297297
})
298+
test("should convert asset to reference with non standard tags", () => {
299+
const html = `<figure style="margin: 0; text-align: right">
300+
<div style="display: inline-block"><a href="ss.com" target="_blank"><img src="https://picsum.photos/200" height="141" alt="image_(9).png" caption="ss" anchorLink="ss.com" class="embedded-asset" content-type-uid="sys_assets" type="asset" asset-alt="image_(9).png" width="148" max-height="141" max-width="148" style="max-height: 141px; height: 141px; text-align: right; max-width: 148px; width: auto" data-sys-asset-filelink="https://picsum.photos/200" data-sys-asset-uid="blt137d845621ef8168" data-sys-asset-filename="image_(9).png" data-sys-asset-contenttype="image/png" data-sys-asset-caption="ss" data-sys-asset-alt="image_(9).png" data-sys-asset-link="ss.com" data-sys-asset-position="right" data-sys-asset-isnewtab="true" sys-style-type="display" /></a>
301+
<figcaption style="text-align:center">ss</figcaption>
302+
</div>
303+
</figure>
304+
<p></p>`
305+
const json = htmlToJson(html, { allowNonStandardTags: true })
306+
expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"https://picsum.photos/200","height":"141","alt":"image_(9).png","caption":"ss","type":"asset","asset-alt":"image_(9).png","max-height":"141","max-width":"148","sys-style-type":"display","position":"right","captionAttrs":{"style":"text-align:center"},"anchorLink":"ss.com","target":true,"asset-caption":"ss"},"class-name":"embedded-asset","width":148,"type":"asset","asset-caption":"ss","link":"ss.com","asset-alt":"image_(9).png","target":"_blank","position":"right","asset-link":"https://picsum.photos/200","asset-uid":"blt137d845621ef8168","display-type":"display","asset-name":"image_(9).png","asset-type":"image/png","content-type-uid":"sys_assets"},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]}] })
307+
})
298308
})
299309

300310

@@ -372,14 +382,16 @@ describe("CS-41001", () =>{
372382
})
373383
})
374384

375-
376-
377-
385+
describe("ELEMENT_TAGS", () => {
386+
test("should have FIGCAPTION as a standard element tag", () => {
387+
const standardElementTags = Object.keys(ELEMENT_TAGS);
388+
expect(standardElementTags).toContain("FIGCAPTION");
389+
})
390+
})
378391

379392
function htmlToJson (html: string, options: IHtmlToJsonOptions) {
380393
const dom = new JSDOM(html);
381394
let htmlDoc = dom.window.document.querySelector("body");
382395
return fromRedactor(htmlDoc, options);
383396

384-
}
385-
397+
}

‎test/toRedactor.test.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,13 +228,19 @@ describe("Testing json to html conversion", () => {
228228
test("RT-253 - should convert to proper HTML image code", () => {
229229
const json = {"type":"doc","attrs":{},"children":[{"type":"img","attrs":{"url":"https://picsum.photos/200","width":100},"children":[{"text":""}]}],"_version":3 }
230230
const html = toRedactor(json);
231-
expect(html).toBe('<img width="100" src="https://picsum.photos/200"/>');
231+
expect(html).toBe('<img width="100" src="https://picsum.photos/200" />');
232232
});
233233

234234
test("RT-264 - reference asset should have proper unit in the converted image", () => {
235235
const json = {"type":"doc","attrs":{},"uid":"6a547ebccbd74c0c9a521ee95acfb223","children":[{"uid":"942be31c040145b6a7541ec4f73754c5","type":"reference","attrs":{"display-type":"display","asset-uid":"bltcbce74d3891aaa9d","content-type-uid":"sys_assets","asset-link":"https://picsum.photos/200","asset-name":"MATHERAN.jpg","asset-type":"image/jpeg","type":"asset","class-name":"embedded-asset","width":"192","style":{"max-height":"144px","height":"144px","text-align":"right","max-width":"192px","width":"auto"},"redactor-attributes":{"height":"144","position":"right"},"max-height":"144","height":"144","position":"right","max-width":"192"},"children":[{"text":""}]}],"_version":1 }
236236
const html = toRedactor(json);
237237
expect(html).toBe(`<figure style="margin: 0; text-align: right"><img src="https://picsum.photos/200" height="144" class="embedded-asset" content-type-uid="sys_assets" type="asset" width="192" max-height="144" max-width="192" style="max-height: 144px; height: 144px; text-align: right; max-width: 192px; width: auto" data-sys-asset-filelink="https://picsum.photos/200" data-sys-asset-uid="bltcbce74d3891aaa9d" data-sys-asset-filename="MATHERAN.jpg" data-sys-asset-contenttype="image/jpeg" data-sys-asset-position="right" sys-style-type="display"/></figure>`);
238238
})
239+
240+
test("RT-292", () => {
241+
const json = {"type":"doc","uid":"41870a48806348eb866c1944d37d3a5d","attrs":{},"children":[{"type":"img","attrs":{"url":"https://picsum.photos/536/354","style":{},"redactor-attributes":{"position":"none","caption":"caption","inline":"true","width":"243","dirty":"true","max-width":"243","src":"https://picsum.photos/536/354","alt":"alt","anchorLink":"link","target":true},"width":"217","inline":"true","caption":"caption","alt":"alt","anchorLink":"link","target":"_blank"},"uid":"bedc4931f5aa4fd59fd6411665f931e2","children":[{"text":""}]}] }
242+
const html = toRedactor(json);
243+
expect(html).toBe(`<figure><a href="link" target="_blank"><img position="none" caption="caption" inline="true" width="217" dirty="true" max-width="243" src="https://picsum.photos/536/354" alt="alt" anchorLink="link" target="_blank" style="width: 217; height: auto;"/></a><figcaption>caption</figcaption></figure>`)
244+
})
239245
})
240246

0 commit comments

Comments
 (0)