fix: RT-292 image conversions

contentstack · Aug 29, 2024 · 59270d0 · 59270d0
1 parent 3a19496
commit 59270d0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/fromRedactor.tsx b/src/fromRedactor.tsx
@@ -49,7 +49,7 @@ 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') } }
+    return { type: 'img', attrs: { url: el.getAttribute('src'), width: el.getAttribute('width') } }
   },
   LI: () => ({ type: 'li', attrs: {} }),
   OL: () => ({ type: 'ol', attrs: {} }),
@@ -631,11 +631,12 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         const { href, target } = newChildren[0].attrs?.["redactor-attributes"]
         extraAttrs['anchorLink'] = href;
         if (target && target !== '') {
-            extraAttrs['target'] = true;
+            extraAttrs['target'] = target;
         }
         const imageAttrs = newChildren[0].children;
 
         if(imageAttrs[0].type === 'img'){
+          sizeAttrs.width = imageAttrs[0].attrs.width
         elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs})
 
         }
@@ -675,6 +676,10 @@ 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){
+        elementAttrs.attrs.style.width = `${elementAttrs.attrs.width}px`
+        elementAttrs.attrs.style['max-width'] = `${elementAttrs.attrs.width}px`
+      }
       return jsx('element', elementAttrs, [{ text: '' }])
     }
     if (nodeName === 'BLOCKQUOTE') {
@@ -933,14 +938,27 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt
       sizeAttrs.width = newChildren[0].attrs.width.toString();
   }
 
+  if(!isNaN(parseInt(sizeAttrs.width))){
+    sizeAttrs.style = {
+      width: `${sizeAttrs.width}px`,
+      "max-width": `${sizeAttrs.width}px`
+    }
+  }
+
   const childAttrs = { ...newChildren[0].attrs, ...sizeAttrs, style: { 'text-align': style?.['text-align'] }, caption: extraAttrs['caption'] }
   extraAttrs = { ...extraAttrs, ...sizeAttrs }
 
   if (!childAttrs.caption) {
     delete childAttrs.caption
   }
 
-  const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
+  const imageAttrs = getImageAttributes(elementAttrs, {... childAttrs, ...extraAttrs}, extraAttrs);
+  if(imageAttrs.attrs.link){
+    imageAttrs.attrs.anchorLink = imageAttrs.attrs.link;
+    delete imageAttrs.attrs.link;
+  }
+  delete imageAttrs?.attrs?.['redactor-attributes']?.['anchorlink'];
+  delete imageAttrs?.attrs?.['redactor-attributes']?.['style'];
 
   return imageAttrs
 }

diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx
@@ -482,6 +482,14 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
       }
       if(jsonValue['type'] === 'img'){
         attrsJson['src'] = allattrs['url']
+
+        if(allattrs['caption']) figureStyles.caption = allattrs['caption']
+        if(allattrs['position']) figureStyles.position = allattrs['position']
+        if(allattrs['anchorLink']) figureStyles.anchorLink = `href="${allattrs['anchorLink']}"`
+        if(allattrs['target']){
+          figureStyles.anchorLink += ` target="${allattrs['target']}"`
+        }
+        figureStyles.fieldsEdited.push(figureStyles.caption)
       }
       if(!(options?.customElementTypes && !isEmpty(options.customElementTypes) && options.customElementTypes[jsonValue['type']])) {
         delete attrsJson['url']