Merge pull request #28 from contentstack/development

Support for rendering image type assets while json to html conversion and fix empty fragment added between table

Author: Jayesh2812

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/json-rte-serializer",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "This Package converts Html Document to Json and vice-versa.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package.json

@@ -160,8 +160,10 @@ const traverseChildAndWarpChild = (children: Array<Object>) => {
 
 const whiteCharPattern = /^[\s ]{2,}$/
 export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject | null => {
+  // If node is text node
   if (el.nodeType === 3) {
     if (whiteCharPattern.test(el.textContent)) return null
+    if (["TABLE", "THEAD", "TBODY", "TR"].includes(el?.parentElement?.nodeName ?? "") && el?.textContent?.trim?.()?.length === 0) return null
     if (el.textContent === '\n') {
       return null
     }

src/fromRedactor.tsx

@@ -49,6 +49,8 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
     return `<iframe${attrs}></iframe>`
   },
   p: (attrs: any, child: any) => {
+    if(child.includes("<figure"))
+    return `<div${attrs} style="overflow: hidden"><span>${child}</span></div>`
     return `<p${attrs}>${child}</p>`
   },
   ol: (attrs: any, child: any) => {
@@ -118,6 +120,53 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
     } else if (extraAttrs?.displayType === 'asset') {
       return `<figure${attrs}>${child}</figure>`
     }
+     
+    else if (extraAttrs?.displayType === "display") {
+      const anchor = jsonBlock?.["attrs"]?.["link"];
+
+      const caption = jsonBlock?.["attrs"]?.["asset-caption"];
+      const position = jsonBlock?.["attrs"]?.["position"];
+      const inline = jsonBlock?.["attrs"]?.["inline"]
+      let figureAttrs = ""
+      const figureStyles = {
+        margin: "0",
+      };
+      attrs = ` src="${jsonBlock?.["attrs"]?.["asset-link"]}"` + attrs;
+      let img = `<img${attrs}/>`;
+
+      if (anchor) {
+        const target = jsonBlock?.["attrs"]?.["target"];
+        let anchorAttrs = `href="${anchor}"`;
+        if (target) {
+          anchorAttrs = `${anchorAttrs} target="${target}"`;
+        }
+        img = `<a ${anchorAttrs}>${img}</a>`;
+      }
+
+      if (caption || (position && position !== "none")) {
+        const figcaption = caption
+          ? `<figcaption style="text-align:center">${caption}</figcaption>`
+          : "";
+        
+        if (inline && position !== "right" && position !== "left") {
+          figureStyles["display"] = "inline-block";
+        }
+        if (position && position !== "none") {
+          figureStyles[inline ? "float" : "text-align"] = position;
+        }
+        
+        if(figcaption){
+          img = `<div style="display: inline-block">${img}${figcaption}</div>`;
+        }
+      }
+      if(!isEmpty(figureStyles)){
+        figureAttrs = ` style="${getStyleStringFromObject(figureStyles)}"`
+      }
+      if(inline && !caption && (!position ||position==='none')){
+        return img
+      }
+      return `<figure${figureAttrs ? figureAttrs : ""}>${img}</figure>`;
+    }
     return `<span${attrs}>${child}</span>`
   },
   inlineCode: (attrs: any, child: any) => {
@@ -362,7 +411,9 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
           delete attrsJson['content-type-uid']
           attrsJson['sys-style-type'] = allattrs['display-type']
           delete attrsJson['display-type']
-        } else if (attrsJson['type'] === "asset") {
+        } 
+        
+        else if (attrsJson['type'] === "asset") {
           attrsJson['data-sys-asset-filelink'] = allattrs['asset-link']
           delete attrsJson['asset-link']
           attrsJson['data-sys-asset-uid'] = allattrs['asset-uid']
@@ -399,7 +450,16 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
           if (!attrsJson['sys-style-type']) {
             attrsJson['sys-style-type'] = String(allattrs['asset-type']).indexOf('image') > -1 ? 'display' : 'download'
           }
-
+          if (attrsJson?.["display-type"] === "display") {
+            const styleObj = jsonValue?.["attrs"]?.["style"] ?? {};
+            if (!styleObj["width"]) {
+              styleObj["width"] = "auto";
+            }
+            delete styleObj["float"];
+            // (attrsJson["style"] && typeof attrsJson["style"] === 'string')
+            //   ? (attrsJson["style"] += getStyleStringFromObject(styleObj)) :
+            (attrsJson["style"] = getStyleStringFromObject(styleObj));
+          }
           delete attrsJson['display-type']
         }
       }
@@ -468,3 +528,10 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
 
   return children
 }
+
+
+function getStyleStringFromObject(styleObj: { [key: string]: string }) {
+  return Object.keys(styleObj)
+    .map((key) => `${key}: ${styleObj[key]}`)
+    .join("; ");
+}

src/toRedactor.tsx

@@ -270,3 +270,38 @@ describe('getNestedValueIfAvailable', () => {
     });
 
 });
+describe("CS-41001", () =>{
+    test("should not add fragment for text nodes having white spaces", () => {
+        const dom = new JSDOM();
+        const document = dom.window.document;
+        const body = document.createElement("body");
+        const td1 = document.createElement("td");
+        const td2 = document.createElement("td");
+        const tr = document.createElement("tr");
+        const text = document.createTextNode(` `)
+        td1.textContent = "Hello";
+        td2.textContent = "World";
+        tr.appendChild(td1);
+        tr.append(text)
+        tr.appendChild(td2);
+        body.append(tr)
+        const jsonValue = fromRedactor(body);
+        expect(jsonValue).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"tr","attrs":{},"uid":"uid","children":[{"type":"td","attrs":{},"uid":"uid","children":[{"text":"Hello"}]},{"type":"td","attrs":{},"uid":"uid","children":[{"text":"World"}]}]}]})
+    })
+    test("should add fragment for text nodes between block nodes", () => {
+        const dom = new JSDOM();
+        const document = dom.window.document;
+        const body = document.createElement("body");
+        const p1 = document.createElement("p");
+        const p2 = document.createElement("p");
+        const text = document.createTextNode(` beautiful `)
+        p1.textContent = "Hello";
+        p2.textContent = "World";
+        body.appendChild(p1);
+        body.append(text)
+        body.appendChild(p2);
+        const jsonValue = fromRedactor(body);
+        expect(jsonValue).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"p","attrs":{},"uid":"uid","children":[{"text":"Hello"}]},{"type":"fragment","attrs":{},"uid":"uid","children":[{"text":" beautiful "}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":"World"}]}]})
+    })
+})
+