Merge pull request #57 from contentstack/development

Development

Author: Jayesh2812

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/json-rte-serializer",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "This Package converts Html Document to Json and vice-versa.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

src/fromRedactor.tsx

@@ -15,7 +15,7 @@ const isInline = ['span', 'a', 'inlineCode', 'reference']
 const isVoid = ['img', 'embed']
 
 
-const ELEMENT_TAGS: IHtmlToJsonElementTags = {
+export const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   A: (el: HTMLElement) => {
     const attrs: Record<string, string> = {}
     const target = el.getAttribute('target');
@@ -49,7 +49,11 @@ 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') } }
+    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: {} }),
@@ -98,7 +102,8 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   SCRIPT: (el: HTMLElement) => {
     return { type: 'script', attrs: {} }
   },
-  HR: () => ({ type: 'hr', attrs: {} })
+  HR: () => ({ type: 'hr', attrs: {} }),
+  FIGCAPTION: () => ({ type: 'figcaption', attrs: {} }),
 }
 
 const TEXT_TAGS: IHtmlToJsonTextTags = {
@@ -156,7 +161,7 @@ const traverseChildAndWarpChild = (children: Array<Object>, allowNonStandardTags
     if (child.hasOwnProperty('type')) {
       if (isInline.includes(child.type)) {
         if (child.type === "reference") {
-          if (child.attrs && (child.attrs['display-type'] === "inline" || child.attrs['display-type'] === "link")) {
+          if (child.attrs && (child.attrs['display-type'] === "inline" || child.attrs['display-type'] === "link" || child.attrs['inline'] )) {
             inlineElementIndex.push(index)
           } else {
             hasBlockElement = true
@@ -437,7 +442,15 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         }
       }
       elementAttrs.attrs["redactor-attributes"] = redactor
-      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)
+      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 }
+      if(assetAttrs.target === "_self"){
+        delete assetAttrs.target
+      }
+      if(redactor.inline){
+        assetAttrs.inline = true
+        delete redactor.inline
+      }
+      return jsx('element', { attrs: assetAttrs, type: "reference", uid: generateId() }, children)
     }
   }
   if (nodeName === 'FIGCAPTION') {
@@ -626,11 +639,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'] = true;
+            extraAttrs['target'] = target === "_blank";
         }
         const imageAttrs = newChildren[0].children;
 
         if(imageAttrs[0].type === 'img'){
+          if(imageAttrs[0].attrs.width){
+            sizeAttrs.width = imageAttrs[0].attrs.width
+          }
         elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs})
 
         }
@@ -655,6 +671,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) {
@@ -670,6 +696,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(nodeName === "IMG" && 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') {
@@ -843,6 +873,12 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
       }
     }
 
+    if(nodeName === "DIV"){
+      if(el.style?.overflow === 'hidden' && children.find((child: any) => child.type === 'reference')){
+        elementAttrs = { ...elementAttrs,  type: 'p', attrs: {} }
+      }
+    }
+
     if (children.length === 0) {
       children = [{ text: '' }]
     }
@@ -928,14 +964,24 @@ 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);
+  
+  delete imageAttrs?.attrs?.['redactor-attributes']?.['anchorlink'];
+  delete imageAttrs?.attrs?.['redactor-attributes']?.['style'];
 
   return imageAttrs
 }

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']