fix: proper conversion of HTML inline asset to JSON

Author: Jayesh2812

src/fromRedactor.tsx

@@ -161,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
@@ -446,6 +446,10 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
       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)
     }
   }
@@ -869,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: '' }]
     }

test/fromRedactor.test.ts

@@ -305,6 +305,11 @@ describe("Testing html to json conversion", () => {
         const json = htmlToJson(html, { allowNonStandardTags: true })
         expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"***REMOVED***200","height":"141","alt":"image_(9).png","caption":"ss","type":"asset","asset-alt":"image_(9).png","max-height":"141","max-width":"148","sys-style-type":"display","position":"right","captionAttrs":{"style":"text-align:center"},"anchorLink":"ss.com","target":true,"asset-caption":"ss"},"class-name":"embedded-asset","width":148,"type":"asset","asset-caption":"ss","link":"ss.com","asset-alt":"image_(9).png","target":"_blank","position":"right","asset-link":"***REMOVED***200","asset-uid":"blt137d845621ef8168","display-type":"display","asset-name":"image_(9).png","asset-type":"image/png","content-type-uid":"sys_assets"},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]}]        })
     })
+    test("should convert inline asset reference HTML to proper JSON", () => {
+        let html = `<p></p><div style="overflow: hidden"><span><figure style="margin: 0; float: right"><img src="http://localhost:8001/v3/assets/blt77b66f7ca0622ce9/bltc1b32227100685b6/66c81798d5c529eebeabd447/image_(7).png" height="86" alt="image (7).png" inline="true" class="embedded-asset" content-type-uid="sys_assets" type="asset" asset-alt="image (7).png" width="168" max-height="86" max-width="168" style="max-height: 86px; height: 86px; text-align: right; max-width: 168px; width: auto" data-sys-asset-filelink="http://localhost:8001/v3/assets/blt77b66f7ca0622ce9/bltc1b32227100685b6/66c81798d5c529eebeabd447/image_(7).png" data-sys-asset-uid="bltc1b32227100685b6" data-sys-asset-filename="image (7).png" data-sys-asset-contenttype="image/png" data-sys-asset-alt="image (7).png" data-sys-asset-position="right" sys-style-type="display"/></figure>dasdasdasdasdasdasddaasdasdasdas<br/>Hello<br/>World</span></div>`
+        const json = htmlToJson(html)
+        expect(json).toEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"http://localhost:8001/v3/assets/blt77b66f7ca0622ce9/bltc1b32227100685b6/66c81798d5c529eebeabd447/image_(7).png","height":"86","alt":"image (7).png","type":"asset","asset-alt":"image (7).png","max-height":"86","max-width":"168","sys-style-type":"display","position":"right"},"class-name":"embedded-asset","width":168,"type":"asset","asset-alt":"image (7).png","position":"right","asset-link":"http://localhost:8001/v3/assets/blt77b66f7ca0622ce9/bltc1b32227100685b6/66c81798d5c529eebeabd447/image_(7).png","asset-uid":"bltc1b32227100685b6","display-type":"display","asset-name":"image (7).png","asset-type":"image/png","content-type-uid":"sys_assets","inline":true},"uid":"uid","children":[{"text":""}]},{"text":"dasdasdasdasdasdasddaasdasdasdas"},{"text":"\n","break":false,"separaterId":"uid"},{"text":"Hello"},{"text":"\n","break":false,"separaterId":"uid"},{"text":"World"}]}]})
+    })
 })
 
 
@@ -394,4 +399,5 @@ function htmlToJson (html: string, options: IHtmlToJsonOptions) {
     let htmlDoc = dom.window.document.querySelector("body");
    return fromRedactor(htmlDoc, options);
 
-}
+}
+