feat: support for nested attrs

Author: Jayesh2812

src/fromRedactor.tsx

@@ -232,13 +232,14 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
     return jsx('element', { type: "doc", uid: generateId(), attrs: {} }, children)
   }
   if (options?.allowNonStandardTags && !Object.keys(ELEMENT_TAGS).includes(nodeName) && !Object.keys(TEXT_TAGS).includes(nodeName)) {
-    const attributes = el.attributes
-    const attribute = {}
-    Array.from(attributes).forEach((child: any) => {
-      attribute[child.nodeName] = child.nodeValue
+    const attributes = (el as HTMLElement).attributes
+    const attributeMap = {}
+    Array.from(attributes).forEach((attribute) => {
+      let { nodeName, value } = attribute
+        attributeMap[nodeName] = getNestedValueIfAvailable(value)
     })
     console.warn(`${nodeName} is not a standard tag of JSON RTE.`)
-    return jsx('element', { type: nodeName.toLowerCase(), attrs: { ...attribute } }, children)
+    return jsx('element', { type: nodeName.toLowerCase(), attrs: { ...attributeMap } }, children)
   }
   const isEmbedEntry = el.attributes['data-sys-entry-uid']?.value
   const type = el.attributes['type']?.value
@@ -791,4 +792,15 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt
   const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs);
 
   return imageAttrs
-}
+}
+
+const getNestedValueIfAvailable = (value: string) => {
+  try {
+    if (typeof value === "string" && value.match(/^{|\[/i)) {
+      return JSON.parse(value);
+    }
+    return value
+  } catch {
+    return value;
+  }
+};

src/toRedactor.tsx

@@ -2,6 +2,7 @@ import kebbab from 'lodash/kebabCase'
 import isEmpty from 'lodash/isEmpty'
 
 import {IJsonToHtmlElementTags, IJsonToHtmlOptions, IJsonToHtmlTextTags} from './types'
+import { isPlainObject } from 'lodash'
 
 const ELEMENT_TYPES: IJsonToHtmlElementTags = {
   'blockquote': (attrs: string, child: string) => {
@@ -223,7 +224,13 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
   if (options?.allowNonStandardTypes && !Object.keys(ELEMENT_TYPES).includes(jsonValue['type']) && jsonValue['type'] !== 'doc') {
     let attrs = ''
     Object.entries(jsonValue?.attrs|| {}).forEach(([key, val]) => {
-      attrs += val ? ` ${key}="${val}"` : ` ${key}`;
+      if(isPlainObject(val)){
+        val = JSON.stringify(val)
+        attrs += ` ${key}='${val}'` 
+      }
+      else{
+        attrs += val ? ` ${key}="${val}"` : ` ${key}`;
+      }
     })
     attrs = (attrs.trim() ? ' ' : '') + attrs.trim()
     console.warn(`${jsonValue['type']} is not a valid element type.`)

test/expectedJson.ts

@@ -1745,5 +1745,15 @@ export default {
                         ]
                     }
         ]
-    }
+    },
+    "nested-attrs": [   
+        {
+            json: {"type":"doc","uid":"uid","attrs":{},"children":[{"type":"hangout-module","attrs":{},"children":[{"type":"hangout-chat","attrs":{"from":"Paul, Addy","nested":{"to":"JD"}},"children":[{"type":"hangout-discussion","attrs":{},"children":[{"type":"hangout-message","attrs":{"from":"Paul","profile":"profile.png","datetime":"2013-07-17T12:02"},"children":[{"type":"p","uid":"uid","attrs":{},"children":[{"text":"Feelin' this Web Components thing."}]},{"type":"p","uid":"uid","attrs":{},"children":[{"text":"Heard of it?"}]}]}]}]},{"type":"hangout-chat","attrs":{},"children":[{"text":"Hi There!"}]}]}]},
+            html : `<hangout-module><hangout-chat from="Paul, Addy" nested='{"to":"JD"}'><hangout-discussion><hangout-message from="Paul" profile="profile.png" datetime="2013-07-17T12:02"><p>Feelin' this Web Components thing.</p><p>Heard of it?</p></hangout-message></hangout-discussion></hangout-chat><hangout-chat>Hi There!</hangout-chat></hangout-module>`
+        },
+        {
+            json: {"type":"doc","uid":"uid","attrs":{},"children":[{"type":"hangout-module","attrs":{},"children":[{"type":"hangout-chat","attrs":{"from":"Paul, Addy","nested-json":{"to":"Hello World","more-nesting":{"from":"Beautiful World"}}},"children":[{"type":"hangout-discussion","attrs":{},"children":[{"type":"hangout-message","attrs":{"from":"Paul","profile":"profile.png","datetime":"2013-07-17T12:02"},"children":[{"type":"p","uid":"uid","attrs":{},"children":[{"text":"Feelin' this Web Components thing."}]},{"type":"p","uid":"uid","attrs":{},"children":[{"text":"Heard of it?"}]}]}]}]},{"type":"hangout-chat","attrs":{},"children":[{"text":"Hi There!"}]}]}]},
+            html : `<hangout-module><hangout-chat from="Paul, Addy" nested-json='{"to":"Hello World","more-nesting":{"from":"Beautiful World"}}'><hangout-discussion><hangout-message from="Paul" profile="profile.png" datetime="2013-07-17T12:02"><p>Feelin' this Web Components thing.</p><p>Heard of it?</p></hangout-message></hangout-discussion></hangout-chat><hangout-chat>Hi There!</hangout-chat></hangout-module>`
+        },
+    ]
 }

test/fromRedactor.test.ts

@@ -15,6 +15,8 @@ const docWrapper = (children: any) => {
 const compareValue = (json1,json2) => {
     return isEqual(JSON.stringify(omitdeep(json1, "uid")), JSON.stringify(omitdeep(docWrapper(json2), "uid")))
 }
+
+jest.mock('uuid', () => ({ v4: () => 'uid' }));
 describe("Testing html to json conversion", () => {
     it("paragraph conversion", () => {
         let html = "<p>This is test</p>"
@@ -224,4 +226,14 @@ describe("Testing html to json conversion", () => {
           ], "type": "p" }]))
         expect(testResult).toBe(true)
     })
+
+    test("should convert stringified attrs to proper nested JSON attrs", () => {
+      for (const testCase of expectedValue["nested-attrs"]) {
+        const { json, html } = testCase;
+        const dom = new JSDOM(html);
+        let htmlDoc = dom.window.document.querySelector("body");
+        const jsonValue = fromRedactor(htmlDoc, { allowNonStandardTags: true });
+        expect(jsonValue).toStrictEqual(json);
+      }
+    });
 })

test/toRedactor.test.ts

@@ -122,4 +122,11 @@ describe("Testing json to html conversion", () => {
         let testResult = isEqual(htmlValue, expectedValue["inline-classname-and-id"].html)
         expect(testResult).toBe(true)
     })
+    test("should have stringified attrs for nested json", () => {
+        for (const testCase of expectedValue["nested-attrs"]) {
+          const { json, html } = testCase;
+          const htmlValue = toRedactor(json, { allowNonStandardTypes: true });
+          expect(htmlValue).toBe(html);
+        }
+      });
 })