Merge pull request #21 from contentstack/development

feat: to add support for inline class and id while converting json data to html
contentstack · Mar 20, 2023 · 1e8a550 · 1e8a550
2 parents 5473a1b + 1e16b59
commit 1e8a550
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/json-rte-serializer",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "This Package converts Html Document to Json and vice-versa.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx
@@ -153,7 +153,7 @@ const TEXT_WRAPPERS: IJsonToHtmlTextTags = {
   },
   'inlineCode': (child: any, value:any) => {
     return `<span data-type='inlineCode'>${child}</span>`
-  }
+  },
 }
 export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string => {
   //TODO: optimize assign once per function call
@@ -165,6 +165,17 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
     if (jsonValue['break']) {
       text += `<br/>`
     }
+    if(jsonValue['classname'] || jsonValue['id']){
+      if(jsonValue['classname'] && jsonValue['id']){
+        text = `<span class=${jsonValue['classname']} id=${jsonValue['id']}>${text}</span>`
+      }
+      else if(jsonValue['classname'] && !jsonValue['id']){
+        text = `<span class=${jsonValue['classname']}>${text}</span>`
+      }
+      else if(jsonValue['id'] && !jsonValue['classname']){
+        text = `<span id=${jsonValue['id']}>${text}</span>`
+      }
+    }
     if (jsonValue.text.includes('\n')) {
       text = text.replace(/\n/g, '<br/>')
     }

diff --git a/test/expectedJson.ts b/test/expectedJson.ts
@@ -1714,5 +1714,36 @@ export default {
                 ]
             }
         ]
+    },
+    "inline-classname-and-id": {
+        "html": '<p><span>This is test for adding inline <span class=class>class</span> and <span id=id>id</span></span></p>',
+        "json": [
+                    {
+                        "type": "p",
+                        "attrs": {},
+                        "children": [
+                            {
+                                "type": "span",
+                                "attrs": {},
+                                "children": [
+                                    {
+                                        "text": "This is test for adding inline "
+                                    },
+                                    {
+                                        "text": "class",
+                                        "classname": "class"
+                                    },
+                                    {
+                                        "text": " and "
+                                    },
+                                    {
+                                        "text": "id",
+                                        "id": "id"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+        ]
     }
 }
diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts
@@ -115,4 +115,11 @@ describe("Testing json to html conversion", () => {
         let testResult = isEqual(htmlValue, expectedValue["'\n' to <br>"].html)
         expect(testResult).toBe(true)
     })
+
+    it("Inline classname and id", () => {
+        let jsonValue = expectedValue["inline-classname-and-id"].json
+        let htmlValue = toRedactor({ type: "doc", attrs: {}, children: jsonValue })
+        let testResult = isEqual(htmlValue, expectedValue["inline-classname-and-id"].html)
+        expect(testResult).toBe(true)
+    })
 })