feat: dynamically allow attribute values to be empty if elemnt and attribute is passed throug as options

Author: shreya-kamble

README.md

@@ -162,6 +162,12 @@ On the other hand, the `customTextWrapper` parser function provides the followin
 -   `value`: The value passed against the child element
 
 
+You can pass an object to `allowedEmptyAttributes` to retain empty attribute values for specific element types during HTML conversion.
+
+**Note:**  
+By default, if nothing is passed to `allowedEmptyAttributes`, we retain the `alt` attribute for `<img>` and `reference` (asset) element types, even when its value is empty, during HTML conversion.
+
+
 You can use the following customized JSON RTE Serializer code to convert your JSON RTE field data into HTML format.
 
 ```javascript
@@ -216,6 +222,10 @@ const htmlValue = jsonToHtml(
                 return `<color data-color="${value}">${child}</color>`;
             },
         },
+        allowedEmptyAttributes : {
+             "p": ["dir"],
+             "img" : ["width"]
+        }
     }
 );
 

src/toRedactor.tsx

@@ -1,6 +1,6 @@
 import kebbab from 'lodash.kebabcase'
 import isEmpty from 'lodash.isempty'
-import {IJsonToHtmlElementTags, IJsonToHtmlOptions, IJsonToHtmlTextTags} from './types'
+import {IJsonToHtmlElementTags, IJsonToHtmlOptions, IJsonToHtmlTextTags, IJsonToHtmlAllowedEmptyAttributes} from './types'
 import isPlainObject from 'lodash.isplainobject'
 import {replaceHtmlEntities, forbiddenAttrChars } from './utils'
 
@@ -213,11 +213,28 @@ const TEXT_WRAPPERS: IJsonToHtmlTextTags = {
     return `<span data-type='inlineCode'>${child}</span>`
   },
 }
+const ALLOWED_EMPTY_ATTRIBUTES: IJsonToHtmlAllowedEmptyAttributes = {
+  img: ['alt'],
+  reference: ['alt']
+}
+
 export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string => {
   //TODO: optimize assign once per function call
   if(options?.customTextWrapper && !isEmpty(options.customTextWrapper)){
     Object.assign(TEXT_WRAPPERS,options.customTextWrapper)
   }
+  if (options?.allowedEmptyAttributes && !isEmpty(options.allowedEmptyAttributes)) {
+    Object.keys(options.allowedEmptyAttributes).forEach(key => {
+      if (key === 'img' || key === 'reference') {
+        ALLOWED_EMPTY_ATTRIBUTES[key] = [
+          'alt',
+          ...(options.allowedEmptyAttributes?.[key] || [])
+        ];
+      } else {
+        ALLOWED_EMPTY_ATTRIBUTES[key] = options.allowedEmptyAttributes?.[key] ?? [];
+      }
+    });
+  }
   if (jsonValue.hasOwnProperty('text')) {
     let text = jsonValue['text'].replace(/</g, '&lt;').replace(/>/g, '&gt;')
     if (jsonValue['break']) {
@@ -510,12 +527,20 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
         if (forbiddenAttrChars.some(char => item[0].includes(char))) {
           return; 
         }
-        if((jsonValue['type'] === 'img' || (jsonValue['type'] === 'reference') && jsonValue.attrs['display-type'] === 'display' ) && item[0] === 'alt'){
-          attrs += `${item[0]}="${replaceHtmlEntities(item[1])}" `
-          return;
-        }
+        if (ALLOWED_EMPTY_ATTRIBUTES.hasOwnProperty(jsonValue['type'])) {
+          if (ALLOWED_EMPTY_ATTRIBUTES[jsonValue['type']].includes(item[0])) {
+            // Check for 'display-type' attribute for reference type, as refernce is used for entries and assets
+            if (jsonValue['type'] === 'reference' && jsonValue.attrs['display-type'] === 'display') {
+              attrs += `${item[0]}="${replaceHtmlEntities(item[1])}" `;
+              return;
+            }
+            attrs += `${item[0]}="${replaceHtmlEntities(item[1])}" `;
+            return;        
+          }
+        }       
         return item[1] ? (item[1] !== '' ? (attrs += `${item[0]}="${replaceHtmlEntities(item[1])}" `) : '') : ''
       })
+      
       attrs = (attrs.trim() ? ' ' : '') + attrs.trim()
     }
     if (jsonValue['type'] === 'table') {

src/types.ts

@@ -14,10 +14,12 @@ export interface IHtmlToJsonElementTags { [key: string]: (el:HTMLElement) => IHt
 
 export interface IJsonToHtmlTextTags { [key: string]: (child:any, value:any) => string }
 export interface IJsonToHtmlElementTags { [key: string]: (attrs:string,child:string,jsonBlock:IAnyObject,extraProps?:object) => string }
+export interface IJsonToHtmlAllowedEmptyAttributes { [key: string]: string[]; }
 export interface IJsonToMarkdownElementTags{[key: string]: (attrsJson:IAnyObject,child:string) => string}
 export interface IJsonToMarkdownTextTags{ [key: string]: (child:any, value:any) => string }
 export interface IJsonToHtmlOptions {
     customElementTypes?: IJsonToHtmlElementTags,
     customTextWrapper?: IJsonToHtmlTextTags,
     allowNonStandardTypes?: boolean,
+    allowedEmptyAttributes?: IJsonToHtmlAllowedEmptyAttributes,
 }

test/expectedJson.ts

@@ -2206,8 +2206,13 @@ export default {
 
     },
     "RT-268":{
-        "html": `<img alt="" src="image_url.jpeg" width="100" style="width: 100; height: auto;" />`,
-        "json": 
+        "html": [
+            `<img alt="" src="image_url.jpeg" width="100" style="width: 100; height: auto;" />`,
+            `<figure style="margin: 0"><img src="https://stag-images.csnonprod.com/v3/assets/blt3381770ff6804fa1/blt8c34458f407b3862/6572c368e7a0d4196d105010/compass-logo-v2-final.png" class="embedded-asset" content-type-uid="sys_assets" type="asset" alt="" asset-alt="compass-logo-v2-final.png" style="width: auto" data-sys-asset-filelink="https://stag-images.csnonprod.com/v3/assets/blt3381770ff6804fa1/blt8c34458f407b3862/6572c368e7a0d4196d105010/compass-logo-v2-final.png" data-sys-asset-uid="blt8c34458f407b3862" data-sys-asset-filename="compass-logo-v2-final.png" data-sys-asset-contenttype="image/png" data-sys-asset-alt="compass-logo-v2-final.png" sys-style-type="display"/></figure>`,
+            `<p dir="">This is for testing purpose</p>`,
+            `<img position="left" alt="" width="100" dirty="true" dir="" max-width="100" height="150" src="https://images.contentstack.io/v3/assets/blta29a98d37041ffc4/blt0f2e045a5f4ae8bd/646df9c6b8153a80eb810a6e/tony-litvyak-PzZQFFeRt54-unsplash.jpg" /><p dir="">This is for testing purpose</p>`
+        ],
+        "json": [
             {
                 "id": "a4794fb7214745a2a47fc24104b762f9",
                 "type": "docs",
@@ -2231,9 +2236,116 @@ export default {
                         ]
                     }
                 ]
+            },
+            {
+                "uid": "a59f9108e99747d4b3358d9e22b7c685",
+                "type": "doc",
+                "attrs": {
+                    "dirty": true
+                },
+                "children": [
+                    {
+                        "uid": "a41aede53efe46018e00de52b6d0970e",
+                        "type": "reference",
+                        "attrs": {
+                            "display-type": "display",
+                            "asset-uid": "blt8c34458f407b3862",
+                            "content-type-uid": "sys_assets",
+                            "asset-link": "https://stag-images.csnonprod.com/v3/assets/blt3381770ff6804fa1/blt8c34458f407b3862/6572c368e7a0d4196d105010/compass-logo-v2-final.png",
+                            "asset-name": "compass-logo-v2-final.png",
+                            "asset-type": "image/png",
+                            "type": "asset",
+                            "class-name": "embedded-asset",
+                            "alt": "",
+                            "asset-alt": "compass-logo-v2-final.png",
+                            "inline": false
+                        },
+                        "children": [
+                            {
+                                "text": ""
+                            }
+                        ]
+                    }
+                ],
+                "_version": 2
+            },
+            {
+                "uid": "a59f9108e99747d4b3358d9e22b7c685",
+                "type": "doc",
+                "attrs": {
+                    "dirty": true
+                },
+                "children": [
+                    {
+                        "uid": "8e7309d3c617401898f45c1c3ae62f1e",
+                        "type": "p",
+                        "attrs": {
+                            "style": {},
+                            "redactor-attributes": {},
+                            "dir": ""
+                        },
+                        "children": [
+                            {
+                                "text": "This is for testing purpose"
+                            }
+                        ]
+                    }
+                ],
+                "_version": 2
+            },
+            {
+                "uid": "a59f9108e99747d4b3358d9e22b7c685",
+                "type": "doc",
+                "attrs": {
+                    "dirty": true
+                },
+                "children": [
+                    {
+                        "uid": "e22e5bcaa65b41beb3cc48a8d8cf175c",
+                        "type": "img",
+                        "attrs": {
+                            "url": "https://images.contentstack.io/v3/assets/blta29a98d37041ffc4/blt0f2e045a5f4ae8bd/646df9c6b8153a80eb810a6e/tony-litvyak-PzZQFFeRt54-unsplash.jpg",
+                            "width": 100,
+                            "dirty": true,
+                            "style": {
+                                "text-align": "left",
+                                "width": "100px",
+                                "max-width": "100px",
+                                "float": "left"
+                            },
+                            "redactor-attributes": {
+                                "position": "left",
+                                "alt": ""
+                            },
+                            "dir": "",
+                            "alt": "",
+                            "max-width": 100,
+                            "height": 150
+                        },
+                        "children": [
+                            {
+                                "text": ""
+                            }
+                        ]
+                    },
+                    {
+                        "uid": "8e7309d3c617401898f45c1c3ae62f1e",
+                        "type": "p",
+                        "attrs": {
+                            "style": {},
+                            "redactor-attributes": {},
+                            "dir": ""
+                        },
+                        "children": [
+                            {
+                                "text": "This is for testing purpose"
+                            }
+                        ]
+                    }
+                ],
+                "_version": 2
             }
-            
-        
+        ]
     }
 
 }

test/toRedactor.test.ts

@@ -292,10 +292,29 @@ describe("Testing json to html conversion", () => {
     expect(html).toBe(`<img alt="Infographic showing 3 results from Forrester study of Contentstack CMS: $3M increase in profit, $507.3K productivity savings and $2.0M savings due to reduced time to publish." src="https://images.contentstack.io/v3/assets/blt7359e2a55efae483/bltea2a11144a2c68b5/63c08b7f438f80612c397994/CS_Infographics_ForresterReport_Data_3_1200x628_(1).png" position="center" width="641" style="width: 641; height: auto;" />`)
     })
 
-    test(' should retain empty string value for alt attribute', () => {
-       const json = expectedValue['RT-268'].json;
-       const html = toRedactor(json);
-       expect(html).toBe(expectedValue['RT-268'].html);
+    describe("RT-268", ()=>{
+      it(' should retain empty string value for alt attribute for img type', () => {
+        const json = expectedValue['RT-268'].json[0];
+        const html = toRedactor(json);
+        expect(html).toBe(expectedValue['RT-268'].html[0]);
+     })
+     it(' should retain empty string value for alt attribute for asset reference', () => {
+      const json = expectedValue['RT-268'].json[1];
+      const html = toRedactor(json);
+      expect(html).toBe(expectedValue['RT-268'].html[1]);
+    })
+    it(' should retain empty string value for attributes passed through "allowedEmptyAttributes" prop', () => {
+      const json = expectedValue['RT-268'].json[2];
+      const html = toRedactor(json, {allowedEmptyAttributes: { p: ["dir"]} });
+      expect(html).toBe(expectedValue['RT-268'].html[2]);
+    })
+    it(' should retain empty string value for attributes passed through "allowedEmptyAttributes" prop, where alt is empty too (default empty)', () => {
+      const json = expectedValue['RT-268'].json[3];
+      const html = toRedactor(json, {allowedEmptyAttributes: { "img": ['dir'],"p": ["dir"]} });
+      expect(html).toBe(expectedValue['RT-268'].html[3]);
     })
+    
+    })
+
 })