diff --git a/package.json b/package.json index b4ad350..9c670d6 100644 --- a/package.json +++ b/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", diff --git a/src/fromRedactor.tsx b/src/fromRedactor.tsx index 3371cd2..525f27a 100644 --- a/src/fromRedactor.tsx +++ b/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: {} }), diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx index ce486b6..36508e1 100644 --- a/src/toRedactor.tsx +++ b/src/toRedactor.tsx @@ -185,6 +185,9 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = { }, script: (attrs: any, child: any) => { return `` + }, + "social-embeds": (attrs: any, child: any) => { + return `` } } 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 = `${text}` + text = `${text}` } else if(jsonValue['classname'] && !jsonValue['id']){ - text = `${text}` + text = `${text}` } else if(jsonValue['id'] && !jsonValue['classname']){ - text = `${text}` + text = `${text}` } } if (jsonValue.text.includes('\n') && !jsonValue['break']) { diff --git a/test/expectedJson.ts b/test/expectedJson.ts index 7b38a64..5b394de 100644 --- a/test/expectedJson.ts +++ b/test/expectedJson.ts @@ -1717,7 +1717,7 @@ export default { ] }, "inline-classname-and-id": { - "html": '

This is test for adding inline class and id

', + "html": '

This is test for adding inline class and id

', "json": [ { "type": "p", diff --git a/test/expectedMarkdown.ts b/test/expectedMarkdown.ts index c46ce32..68458ba 100644 --- a/test/expectedMarkdown.ts +++ b/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/blt2cf669e5016d5e07/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/blt2cf669e5016d5e07/blt3108327519cf8663/65a8be2d14eace6980a5abd6/test-base-64.jpeg)` +(./image.jpeg)` }, { "title": "Anchor Link Conversion", diff --git a/test/fromRedactor.test.ts b/test/fromRedactor.test.ts index 2bf13f6..e27debd 100644 --- a/test/fromRedactor.test.ts +++ b/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 = `` + 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: ""}] }]}) + }) }) diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts index dccbfe4..2c8a017 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -242,5 +242,11 @@ describe("Testing json to html conversion", () => { const html = toRedactor(json); expect(html).toBe(`
alt
caption
`) }) + + 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(``); + }) })