fix: embed link issue in images and test cases

Author: Jayesh2812

src/fromRedactor.tsx

@@ -49,7 +49,11 @@ export const ELEMENT_TAGS: IHtmlToJsonElementTags = {
         const assetName = splittedUrl[splittedUrl?.length - 1]
         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 } }
     }
-    return { type: 'img', attrs: { url: el.getAttribute('src'), width: el.getAttribute('width') } }
+    const imageAttrs : any = { type: 'img', attrs: { url: el.getAttribute('src') } }
+    if (el.getAttribute('width')) {
+      imageAttrs.attrs['width'] = el.getAttribute('width')
+    }
+    return imageAttrs
   },
   LI: () => ({ type: 'li', attrs: {} }),
   OL: () => ({ type: 'ol', attrs: {} }),
@@ -631,12 +635,14 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         const { href, target } = newChildren[0].attrs?.["redactor-attributes"]
         extraAttrs['anchorLink'] = href;
         if (target && target !== '') {
-            extraAttrs['target'] = target;
+            extraAttrs['target'] = target === "_blank";
         }
         const imageAttrs = newChildren[0].children;
 
         if(imageAttrs[0].type === 'img'){
-          sizeAttrs.width = imageAttrs[0].attrs.width
+          if(imageAttrs[0].attrs.width){
+            sizeAttrs.width = imageAttrs[0].attrs.width
+          }
         elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs})
 
         }
@@ -661,6 +667,16 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs)
         return jsx('element', elementAttrs, [{ text: '' }])
       }
+      if (newChildren[0]?.type === 'img'){
+        let extraAttrs: { [key: string]: any } = {}
+        const imageAttrs = newChildren[0]
+        elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs)
+        elementAttrs.attrs['anchorLink'] = el.getAttribute('href')
+        if(el.getAttribute('target'))
+          elementAttrs.attrs['target'] = el.getAttribute('target')
+        return jsx('element', elementAttrs, [{ text: '' }])
+
+      }
     }
     if (nodeName === 'IMG' || nodeName === 'IFRAME' || nodeName === 'VIDEO') {
       if (elementAttrs?.attrs?.["redactor-attributes"]?.width) {
@@ -676,7 +692,7 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
       if (elementAttrs?.attrs?.["redactor-attributes"]?.inline) {
         elementAttrs.attrs.inline = Boolean(elementAttrs?.attrs?.["redactor-attributes"]?.inline)
       }
-      if(elementAttrs.attrs.width){
+      if(nodeName === "IMG" && elementAttrs.attrs.width){
         elementAttrs.attrs.style.width = `${elementAttrs.attrs.width}px`
         elementAttrs.attrs.style['max-width'] = `${elementAttrs.attrs.width}px`
       }
@@ -952,11 +968,8 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt
     delete childAttrs.caption
   }
 
-  const imageAttrs = getImageAttributes(elementAttrs, {... childAttrs, ...extraAttrs}, extraAttrs);
-  if(imageAttrs.attrs.link){
-    imageAttrs.attrs.anchorLink = imageAttrs.attrs.link;
-    delete imageAttrs.attrs.link;
-  }
+  const imageAttrs = getImageAttributes(elementAttrs,  childAttrs, extraAttrs);
+  
   delete imageAttrs?.attrs?.['redactor-attributes']?.['anchorlink'];
   delete imageAttrs?.attrs?.['redactor-attributes']?.['style'];
 

test/expectedJson.ts

@@ -1700,7 +1700,7 @@ export default {
         <figure style="margin: auto; text-align: center;width: 204px;"><a href="https://app.contentstack.com/"><img src="https://images.contentstack.io/v3/assets/***REMOVED***/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg" /></a>
           <figcaption style="text-align: center;" style="text-align: center;">Landscape</figcaption>
         </figure>`,
-        "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/***REMOVED***/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/***REMOVED***/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":204,"caption":"Landscape","link":"https://app.contentstack.com/"},"children":[{"text":""}]}]}
+        "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/***REMOVED***/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":204},"url":"https://images.contentstack.io/v3/assets/***REMOVED***/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","anchorLink":"https://app.contentstack.com/","width":204,"caption":"Landscape"},"children":[{"text":""}]}]}
     },
     "'\n' to <br>": {
         "html": '<p>This is test for break element<br/>This is text on the next line.</p>',

test/toRedactor.test.ts

@@ -228,13 +228,19 @@ describe("Testing json to html conversion", () => {
     test("RT-253 - should convert to proper HTML image code", () => {
       const json = {"type":"doc","attrs":{},"children":[{"type":"img","attrs":{"url":"***REMOVED***200","width":100},"children":[{"text":""}]}],"_version":3      }
       const html = toRedactor(json);
-      expect(html).toBe('<img width="100" src="***REMOVED***200"/>');
+      expect(html).toBe('<img width="100" src="***REMOVED***200" />');
     });
 
     test("RT-264 - reference asset should have proper unit in the converted image", () => {
       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":"***REMOVED***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    }
       const html = toRedactor(json);
       expect(html).toBe(`<figure style="margin: 0; text-align: right"><img src="***REMOVED***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="***REMOVED***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>`);
     })
+
+    test("RT-292", () => {
+      const json = {"type":"doc","uid":"41870a48806348eb866c1944d37d3a5d","attrs":{},"children":[{"type":"img","attrs":{"url":"***REMOVED***536/354","style":{},"redactor-attributes":{"position":"none","caption":"caption","inline":"true","width":"243","dirty":"true","max-width":"243","src":"***REMOVED***536/354","alt":"alt","anchorLink":"link","target":true},"width":"217","inline":"true","caption":"caption","alt":"alt","anchorLink":"link","target":"_blank"},"uid":"bedc4931f5aa4fd59fd6411665f931e2","children":[{"text":""}]}]    }
+      const html = toRedactor(json);
+      expect(html).toBe(`<figure><a href="link" target="_blank"><img position="none" caption="caption" inline="true" width="217" dirty="true" max-width="243" src="***REMOVED***536/354" alt="alt" anchorLink="link" target="_blank" style="width: 217; height: auto;"/></a><figcaption>caption</figcaption></figure>`)
+    })
 })