diff --git a/src/fromRedactor.tsx b/src/fromRedactor.tsx index ad0f18d..27242cd 100644 --- a/src/fromRedactor.tsx +++ b/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) === '%') { diff --git a/test/expectedJson.ts b/test/expectedJson.ts index 3f75383..f2584d0 100644 --- a/test/expectedJson.ts +++ b/test/expectedJson.ts @@ -1756,6 +1756,15 @@ export default { html : `

Feelin' this Web Components thing.

Heard of it?

Hi There!
` }, ], + "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: ``}, + { + 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: ``, + } + ], 'table-rowspan-colspan': { html: `

diff --git a/test/fromRedactor.test.ts b/test/fromRedactor.test.ts index a340cda..7efee5c 100644 --- a/test/fromRedactor.test.ts +++ b/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']