From 70d3af43965993d1f33e1706da8e13b150da366f Mon Sep 17 00:00:00 2001
From: Jayesh Deorukhkar <jddeorukhkar@gmail.com>
Date: Wed, 1 Nov 2023 10:50:57 +0530
Subject: [PATCH] feat: added support for inline image type asset

---
 src/toRedactor.tsx | 45 +++++++++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx
index 442d5c2..788b103 100644
--- a/src/toRedactor.tsx
+++ b/src/toRedactor.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) => {
@@ -140,22 +142,21 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
 
       if (caption || (position && position !== "none")) {
         const figcaption = `<figcaption style="text-align:center">${caption}</figcaption>`;
-        let figureAttrs = ``;
-
+        const figureStyles = {
+          margin: '0'
+        }
+        if(inline && position !== 'right' && position !== 'left') {
+          figureStyles["display"] = "inline-block"
+        }
         if (position && position !== "none") {
-          const style = Object.entries(jsonBlock["attrs"]["style"])
-            .map((entry) => entry.join(":"))
-            .join(";");
-
-          if (style) figureAttrs = ` style="${style}"`;
+          figureStyles[ inline ? "float": "text-align"]= position
         }
-        img = `<figure${figureAttrs ? figureAttrs : ""}>${img}${
+        
+        
+        img = `<figure style="${getStyleStringFromObject(figureStyles)}">${img}${
           caption ? figcaption : ""
         }</figure>`;
       }
-      if(inline){
-        img = `<span>${img}</span>`
-      }
       return `${img}`;
     }
     return `<span${attrs}>${child}</span>`
@@ -402,7 +403,18 @@ 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["display-type"]) {
+          const styleObj = jsonValue["attrs"]["style"];
+          if(jsonValue["attrs"]["position"] === 'center'){
+            styleObj['object-fit'] = "contain"
+          }
+          delete styleObj['float']
+          attrsJson["style"] = getStyleStringFromObject(styleObj);
+          console.dir({jsonValue, attrsJson, figureStyles, styleObj}, {depth:null})
+
+        }
+        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']
@@ -443,6 +455,7 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
           delete attrsJson['display-type']
         }
       }
+      
       if (jsonValue['type'] === "style") {
         delete attrsJson['style-text']
       }
@@ -501,6 +514,7 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
         return children
       }
     }
+    
     attrs = (attrs.trim() ? ' ' : '') + attrs.trim()
 
     return ELEMENT_TYPES[orgType || jsonValue['type']](attrs, children,jsonValue, figureStyles)
@@ -508,3 +522,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("; ");
+}
\ No newline at end of file