Merge pull request #31 from contentstack/EB-635-json-rte-to-support-video-tag

JSON RTE to support video tag

Author: sairajchouhan

src/fromRedactor.tsx

@@ -70,6 +70,18 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = {
   DIV: (el: HTMLElement) => {
     return { type: 'div', attrs: {} }
   },
+  VIDEO: (el: HTMLElement) => {
+    const srcArray = Array.from(el.querySelectorAll("source")).map((source) =>
+      source.getAttribute("src")
+    );
+
+    return {
+      type: 'embed',
+      attrs: {
+        src: srcArray.length > 0 ? srcArray[0] : null,
+      },
+    }
+  },
   STYLE: (el: HTMLElement) => {
     return { type: 'style', attrs: { "style-text": el.textContent } }
   },
@@ -403,6 +415,9 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
   if (nodeName === 'FIGCAPTION') {
     return null
   }
+  if (nodeName === 'SOURCE') {
+    return null;
+  }
   if (nodeName === 'DIV') {
     const dataType = el.attributes['data-type']?.value
     if (dataType === 'row') {
@@ -610,7 +625,7 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject
         return jsx('element', elementAttrs, [{ text: '' }])
       }
     }
-    if (nodeName === 'IMG' || nodeName === 'IFRAME') {
+    if (nodeName === 'IMG' || nodeName === 'IFRAME' || nodeName === 'VIDEO') {
       if (elementAttrs?.attrs?.["redactor-attributes"]?.width) {
         let width = elementAttrs.attrs["redactor-attributes"].width
         if (width.slice(width.length - 1) === '%') {

test/expectedJson.ts

@@ -1756,6 +1756,15 @@ export default {
             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>`
         },
     ],
+    "video-tag": [
+        {
+            json: {"type":"doc","uid":"cfd06695ff85459c90f2d2d4da01af10","attrs":{},"children":[{"type":"embed","attrs":{"src":"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"},"uid":"2c144d07b3a14d8f98c78125b964edcb","children":[{"text":""}]}]}, 
+            html: `<video><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" /></video>`},
+        {
+            json: {"type":"doc","uid":"00459467e3184fdcab0ba1819f0e3645","attrs":{},"children":[{"type":"embed","attrs":{"src":"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm","style":{},"redactor-attributes":{"controls":"","width":"250"},"width":250},"uid":"83fb5d7ce52c4f78872d33478bb12f2f","children":[{"text":""}]}]},
+            html: `<video controls width="250"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" /><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" /></video>`,
+        }
+    ],
     'table-rowspan-colspan': {
         html: `<p></p>
             <table style="text-align: center;">

test/fromRedactor.test.ts

@@ -303,6 +303,14 @@ describe("CS-41001", () =>{
         const jsonValue = fromRedactor(body);
         expect(jsonValue).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"p","attrs":{},"uid":"uid","children":[{"text":"Hello"}]},{"type":"fragment","attrs":{},"uid":"uid","children":[{"text":" beautiful "}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":"World"}]}]})
     })
+    test("should convert video tag into embed", () => {
+        expectedValue['video-tag'].forEach((testCase) => {
+            const dom = new JSDOM(testCase.html);
+            let htmlDoc = dom.window.document.querySelector("body");
+            const jsonValue = fromRedactor(htmlDoc);
+            expect(omitdeep(jsonValue, "uid")).toStrictEqual( omitdeep(testCase.json, "uid"))
+        })
+    })
 
     test('table JSON should have proper structure with rowspan and colspan', () => {
         const testCases = ['table-rowspan-colspan', 'table-rowspan-colspan-2', 'table-rowspan-colspan-3']