Merge pull request #62 from contentstack/development

Development

Author: Ashwini-Rathod

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/json-rte-serializer",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "This Package converts Html Document to Json and vice-versa.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

src/fromRedactor.tsx

@@ -60,7 +60,15 @@ export const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   P: () => ({ type: 'p', attrs: {} }),
   PRE: () => ({ type: 'code', attrs: {} }),
   UL: () => ({ type: 'ul', attrs: {} }),
-  IFRAME: (el: HTMLElement) => ({ type: 'embed', attrs: { src: el.getAttribute('src') } }),
+  IFRAME: (el: HTMLElement) => {
+    if(el.getAttribute('data-type') === "social-embeds") {
+      const src = el.getAttribute('src')
+      el.removeAttribute('data-type')
+      el.removeAttribute('src')
+      return { type: 'social-embeds', attrs: { src } }
+    }
+    return { type: 'embed', attrs: { src: el.getAttribute('src') } }
+  },
   TABLE: (el: HTMLElement) => ({ type: 'table', attrs: {} }),
   THEAD: (el: HTMLElement) => ({ type: 'thead', attrs: {} }),
   TBODY: (el: HTMLElement) => ({ type: 'tbody', attrs: {} }),

src/toRedactor.tsx

@@ -185,6 +185,9 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
   },
   script: (attrs: any, child: any) => {
     return `<script ${attrs}>${child}</script>`
+  },
+  "social-embeds": (attrs: any, child: any) => {
+    return `<iframe${attrs} data-type="social-embeds" ></iframe>`
   }
 }
 const TEXT_WRAPPERS: IJsonToHtmlTextTags = {
@@ -222,13 +225,13 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
     }
     if(jsonValue['classname'] || jsonValue['id']){
       if(jsonValue['classname'] && jsonValue['id']){
-        text = `<span class=${jsonValue['classname']} id=${jsonValue['id']}>${text}</span>`
+        text = `<span class="${jsonValue['classname']}" id="${jsonValue['id']}">${text}</span>`
       }
       else if(jsonValue['classname'] && !jsonValue['id']){
-        text = `<span class=${jsonValue['classname']}>${text}</span>`
+        text = `<span class="${jsonValue['classname']}">${text}</span>`
       }
       else if(jsonValue['id'] && !jsonValue['classname']){
-        text = `<span id=${jsonValue['id']}>${text}</span>`
+        text = `<span id="${jsonValue['id']}">${text}</span>`
       }
     }
     if (jsonValue.text.includes('\n') && !jsonValue['break']) {

test/expectedJson.ts

@@ -1717,7 +1717,7 @@ 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>',
+        "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",

test/expectedMarkdown.ts

@@ -258,7 +258,7 @@ This is a paragraph with \`inline code\`.`
                     "display-type": "display",
                     "asset-uid": "blt3108327519cf8663",
                     "content-type-uid": "sys_assets",
-                    "asset-link": "https://images.contentstack.io/v3/assets/***REMOVED***/blt3108327519cf8663/65a8be2d14eace6980a5abd6/test-base-64.jpeg",
+                    "asset-link": "./image.jpeg",
                     "asset-name": "test-base-64.jpeg",
                     "asset-type": "image/jpeg",
                     "type": "asset",
@@ -290,7 +290,7 @@ This is a paragraph with \`inline code\`.`
 
       
 ![test-base-64.jpeg]
-(https://images.contentstack.io/v3/assets/***REMOVED***/blt3108327519cf8663/65a8be2d14eace6980a5abd6/test-base-64.jpeg)`
+(./image.jpeg)`
 }, 
 {
     "title": "Anchor Link Conversion",

test/fromRedactor.test.ts

@@ -310,6 +310,11 @@ describe("Testing html to json conversion", () => {
         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"}]}]})
     })
+    test("should convert social embed to proper social embed json", () => {
+        let html = `<iframe src="https://www.youtube.com/embed/3V-Sq7_uHXQ" data-type="social-embeds"></iframe>`
+        const json = htmlToJson(html)
+        expect(json).toEqual({ type: "doc", attrs: {}, uid: "uid", children:[{ type: "social-embeds", uid: 'uid', attrs: { src: "https://www.youtube.com/embed/3V-Sq7_uHXQ" }, children: [{ text: ""}] }]})
+    })
 })
 
 

test/toRedactor.test.ts

@@ -242,5 +242,11 @@ describe("Testing json to html conversion", () => {
       const html = toRedactor(json);
       expect(html).toBe(`<figure><a href="link" target="_blank"><img position="none" caption="caption" inline="true" width="217" dirty="true" max-width="243" src="***REMOVED***536/354" alt="alt" anchorLink="link" target="_blank" style="width: 217; height: auto;"/></a><figcaption>caption</figcaption></figure>`)
     })
+
+    test("should have proper HTML for social-embeds", () => {
+      const json = {"type":"doc","attrs":{},"uid":"18396bf67f1f4b0a9da57643ac0542ca","children":[{"uid":"45a850acbeb949db86afe415625ad1ce","type":"social-embeds","attrs":{"src":"https://www.youtube.com/embed/3V-Sq7_uHXQ","width":560,"height":320},"children":[{"text":""}]}],"_version":1    }
+      const html = toRedactor(json);
+      expect(html).toBe(`<iframe src="https://www.youtube.com/embed/3V-Sq7_uHXQ" width="560" height="320" data-type="social-embeds" ></iframe>`);
+    })
 })