Merge pull request #61 from contentstack/RT-350

feat: add support for social embeds

Author: Jayesh2812

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 = {

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/VD6xJq8NguY" 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/VD6xJq8NguY" }, 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="https://picsum.photos/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/VD6xJq8NguY","width":560,"height":320},"children":[{"text":""}]}],"_version":1    }
+      const html = toRedactor(json);
+      expect(html).toBe(`<iframe src="https://www.youtube.com/embed/VD6xJq8NguY" width="560" height="320"></iframe>`);
+    })
 })