diff --git a/package-lock.json b/package-lock.json index ffd20c4..2251efd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@contentstack/json-rte-serializer", - "version": "2.0.3", + "version": "2.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@contentstack/json-rte-serializer", - "version": "2.0.3", + "version": "2.0.4", "license": "MIT", "dependencies": { "array-flat-polyfill": "^1.0.1", diff --git a/package.json b/package.json index ca8e35e..2746f10 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/json-rte-serializer", - "version": "2.0.3", + "version": "2.0.4", "description": "This Package converts Html Document to Json and vice-versa.", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/fromRedactor.tsx b/src/fromRedactor.tsx index ecf7779..2609d54 100644 --- a/src/fromRedactor.tsx +++ b/src/fromRedactor.tsx @@ -160,8 +160,10 @@ const traverseChildAndWarpChild = (children: Array) => { const whiteCharPattern = /^[\s ]{2,}$/ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject | null => { + // If node is text node if (el.nodeType === 3) { if (whiteCharPattern.test(el.textContent)) return null + if (["TABLE", "THEAD", "TBODY", "TR"].includes(el?.parentElement?.nodeName ?? "") && el?.textContent?.trim?.()?.length === 0) return null if (el.textContent === '\n') { return null } diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx index b8791d6..829a7d8 100644 --- a/src/toRedactor.tsx +++ b/src/toRedactor.tsx @@ -49,6 +49,8 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = { return `` }, p: (attrs: any, child: any) => { + if(child.includes("${child}` return `${child}

` }, ol: (attrs: any, child: any) => { @@ -118,6 +120,53 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = { } else if (extraAttrs?.displayType === 'asset') { return `${child}` } + + else if (extraAttrs?.displayType === "display") { + const anchor = jsonBlock?.["attrs"]?.["link"]; + + const caption = jsonBlock?.["attrs"]?.["asset-caption"]; + const position = jsonBlock?.["attrs"]?.["position"]; + const inline = jsonBlock?.["attrs"]?.["inline"] + let figureAttrs = "" + const figureStyles = { + margin: "0", + }; + attrs = ` src="${jsonBlock?.["attrs"]?.["asset-link"]}"` + attrs; + let img = ``; + + if (anchor) { + const target = jsonBlock?.["attrs"]?.["target"]; + let anchorAttrs = `href="${anchor}"`; + if (target) { + anchorAttrs = `${anchorAttrs} target="${target}"`; + } + img = `${img}`; + } + + if (caption || (position && position !== "none")) { + const figcaption = caption + ? `
${caption}
` + : ""; + + if (inline && position !== "right" && position !== "left") { + figureStyles["display"] = "inline-block"; + } + if (position && position !== "none") { + figureStyles[inline ? "float" : "text-align"] = position; + } + + if(figcaption){ + img = `
${img}${figcaption}
`; + } + } + if(!isEmpty(figureStyles)){ + figureAttrs = ` style="${getStyleStringFromObject(figureStyles)}"` + } + if(inline && !caption && (!position ||position==='none')){ + return img + } + return `${img}`; + } return `${child}` }, inlineCode: (attrs: any, child: any) => { @@ -362,7 +411,9 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string delete attrsJson['content-type-uid'] attrsJson['sys-style-type'] = allattrs['display-type'] delete attrsJson['display-type'] - } else if (attrsJson['type'] === "asset") { + } + + else if (attrsJson['type'] === "asset") { attrsJson['data-sys-asset-filelink'] = allattrs['asset-link'] delete attrsJson['asset-link'] attrsJson['data-sys-asset-uid'] = allattrs['asset-uid'] @@ -399,7 +450,16 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string if (!attrsJson['sys-style-type']) { attrsJson['sys-style-type'] = String(allattrs['asset-type']).indexOf('image') > -1 ? 'display' : 'download' } - + if (attrsJson?.["display-type"] === "display") { + const styleObj = jsonValue?.["attrs"]?.["style"] ?? {}; + if (!styleObj["width"]) { + styleObj["width"] = "auto"; + } + delete styleObj["float"]; + // (attrsJson["style"] && typeof attrsJson["style"] === 'string') + // ? (attrsJson["style"] += getStyleStringFromObject(styleObj)) : + (attrsJson["style"] = getStyleStringFromObject(styleObj)); + } delete attrsJson['display-type'] } } @@ -468,3 +528,10 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string return children } + + +function getStyleStringFromObject(styleObj: { [key: string]: string }) { + return Object.keys(styleObj) + .map((key) => `${key}: ${styleObj[key]}`) + .join("; "); +} \ No newline at end of file diff --git a/test/fromRedactor.test.ts b/test/fromRedactor.test.ts index 1c5c3fb..e35ffc1 100644 --- a/test/fromRedactor.test.ts +++ b/test/fromRedactor.test.ts @@ -270,3 +270,38 @@ describe('getNestedValueIfAvailable', () => { }); }); +describe("CS-41001", () =>{ + test("should not add fragment for text nodes having white spaces", () => { + const dom = new JSDOM(); + const document = dom.window.document; + const body = document.createElement("body"); + const td1 = document.createElement("td"); + const td2 = document.createElement("td"); + const tr = document.createElement("tr"); + const text = document.createTextNode(` `) + td1.textContent = "Hello"; + td2.textContent = "World"; + tr.appendChild(td1); + tr.append(text) + tr.appendChild(td2); + body.append(tr) + const jsonValue = fromRedactor(body); + expect(jsonValue).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"tr","attrs":{},"uid":"uid","children":[{"type":"td","attrs":{},"uid":"uid","children":[{"text":"Hello"}]},{"type":"td","attrs":{},"uid":"uid","children":[{"text":"World"}]}]}]}) + }) + test("should add fragment for text nodes between block nodes", () => { + const dom = new JSDOM(); + const document = dom.window.document; + const body = document.createElement("body"); + const p1 = document.createElement("p"); + const p2 = document.createElement("p"); + const text = document.createTextNode(` beautiful `) + p1.textContent = "Hello"; + p2.textContent = "World"; + body.appendChild(p1); + body.append(text) + body.appendChild(p2); + 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"}]}]}) + }) +}) + diff --git a/test/testingData.ts b/test/testingData.ts new file mode 100644 index 0000000..2002600 --- /dev/null +++ b/test/testingData.ts @@ -0,0 +1,887 @@ +export const imageAssetData = { + base: { + value: getDoc([ + { + uid: "0b1d2b71639f4b83a9daeb082e1bd52c", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + inline: false, + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
`, + }, + alt: { + value: getDoc([ + { + uid: "c867e74ab2bc463aa3642bf66c7cb3b7", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "none", + }, + style: {}, + "asset-alt": "I am BATMAN", + position: "none", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
I am BATMAN
`, + }, + caption: { + value: getDoc([ + { + uid: "1f19dba931004b0cb96c7f9d290b160f", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "none", + caption: "BATMAN", + }, + style: {}, + position: "none", + "asset-caption": "BATMAN", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
BATMAN
`, + }, + alignment: { + value: getDoc([ + { + uid: "21f67557c705485890272fb9ecbaf32b", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "left", + }, + style: { + "text-align": "left", + "max-width": "undefinedpx", + float: "left", + }, + position: "left", + }, + children: [ + { + text: "", + }, + ], + }, + + { + uid: "b917e3fbe6004de9880749bbc5f435d7", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "right", + }, + style: { + "text-align": "right", + "max-width": "undefinedpx", + float: "right", + }, + position: "right", + }, + children: [ + { + text: "", + }, + ], + }, + { + uid: "253bddc12f0946f2a0bea2cb243ec6e1", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "center", + }, + style: { + "text-align": "center", + }, + position: "center", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
`, + }, + anchor: { + value: getDoc([ + { + uid: "00630ce6eacc458d9016ae7a2797f537", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "left", + anchorLink: "https://www.batman.com", + }, + style: {}, + position: "none", + link: "https://www.batman.com", + dir: "ltr", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
`, + }, + "anchor-target": { + value: getDoc([ + { + uid: "609354a1bba14e82b7b5f1f3364e38eb", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "none", + anchorLink: "https://www.batman.com", + target: true, + }, + style: {}, + position: "none", + link: "https://www.batman.com", + target: "_blank", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
`, + }, + "anchor-alignment-target-alt-caption": { + value: getDoc([ + { + uid: "e28bbdda490b48a6b1a6f88a2eaf1201", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "none", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + }, + style: {}, + "asset-alt": "I am BATMAN", + position: "none", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + }, + children: [ + { + text: "", + }, + ], + }, + { + uid: "7df91929ac78495f90b230d174a516c8", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "left", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + }, + style: { + "text-align": "left", + "max-width": "undefinedpx", + float: "left", + }, + "asset-alt": "I am BATMAN", + position: "left", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + }, + children: [ + { + text: "", + }, + ], + }, + { + uid: "d2c713568e69437ab6508cc269536613", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "center", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + }, + style: { + "text-align": "center", + "max-width": "undefinedpx", + float: "left", + }, + "asset-alt": "I am BATMAN", + position: "center", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + }, + children: [ + { + text: "", + }, + ], + }, + { + uid: "a670bcec53e54dd3b67a93838cb064df", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "right", + alt: "I am BATMAN", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + }, + style: { + "text-align": "right", + "max-width": "undefinedpx", + float: "right", + }, + position: "right", + "asset-alt": "I am BATMAN", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + }, + children: [ + { + text: "", + }, + ], + }, + ]), + expectedHtml: `
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
`, + }, + "inline-base": { + value: getDoc([ + { + uid: "b3aeae85e85446e484f43390be7b83e0", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "I am", + }, + { + uid: "0b1d2b71639f4b83a9daeb082e1bd52c", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + inline: true, + "redactor-attributes": { + position: "none", + inline: true, + }, + style: {}, + position: "none", + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "batman", + }, + ], + }, + ]), + expectedHtml: `

I ambatman

`, + }, + "inline-alt": { + value: getDoc([ + { + uid: "f2b9cbb9371b498ca52084f9fb0d5539", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "I am", + }, + { + uid: "c867e74ab2bc463aa3642bf66c7cb3b7", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "none", + inline: true, + }, + style: {}, + "asset-alt": "I am BATMAN", + position: "none", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "batman", + }, + ], + }, + ]), + expectedHtml: `

I amI am BATMANbatman

`, + }, + "inline-caption": { + value: getDoc([ + { + uid: "c8cb166c89a945f98e1b9f1366635bad", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "I am ", + }, + { + uid: "1f19dba931004b0cb96c7f9d290b160f", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "none", + caption: "BATMAN", + inline: true, + }, + style: {}, + position: "none", + "asset-caption": "BATMAN", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "Batman", + }, + ], + }, + ]), + expectedHtml: `
I am
BATMAN
Batman
`, + }, + "inline-alignment": { + value: getDoc([ + { + uid: "75c3ff4800d34df6bf4243d62208406e", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "", + }, + { + uid: "21f67557c705485890272fb9ecbaf32b", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "left", + inline: true, + }, + style: { + "text-align": "left", + "max-width": "undefinedpx", + float: "left", + }, + position: "left", + dir: "ltr", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "I am batman", + }, + ], + }, + { + uid: "c3cab5a27496401ab7306108748a982e", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "", + }, + { + uid: "b917e3fbe6004de9880749bbc5f435d7", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "right", + inline: true, + }, + style: { + "text-align": "right", + "max-width": "undefinedpx", + float: "right", + }, + position: "right", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "I am batman", + }, + ], + }, + ]), + expectedHtml: `
I am batman
I am batman
`, + }, + "inline-anchor": { + value: getDoc([ + { + uid: "4384b7f3907b4bd6a126901c39df99e1", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "I am", + }, + { + uid: "00630ce6eacc458d9016ae7a2797f537", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "none", + anchorLink: "https://www.batman.com", + inline: true, + }, + style: {}, + position: "none", + link: "https://www.batman.com", + dir: "ltr", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: " batman", + }, + ], + }, + ]), + expectedHtml: `

I am batman

`, + }, + "inline-anchor-target": { + value: getDoc([ + { + uid: "d6d6f24c461a4c20bfaa63a05ac76b69", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "I am", + }, + { + uid: "e28bbdda490b48a6b1a6f88a2eaf1201", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "none", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + inline: true, + }, + style: {}, + "asset-alt": "I am BATMAN", + position: "none", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "batman", + }, + ], + }, + ]), + expectedHtml: `
I am
I am BATMAN
BATMAN
batman
`, + }, + "inline-anchor-alignment-target-alt-caption": { + value: getDoc([ + { + uid: "08eaff382ac0443e9268c7a3c59a8f06", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "", + }, + { + uid: "7df91929ac78495f90b230d174a516c8", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + alt: "I am BATMAN", + position: "left", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + inline: true, + }, + style: { + "text-align": "left", + "max-width": "undefinedpx", + float: "left", + }, + "asset-alt": "I am BATMAN", + position: "left", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "I am batman", + }, + ], + }, + { + uid: "ec216ba8b3c04ca78f6552f1d8199267", + type: "p", + attrs: { + style: {}, + "redactor-attributes": {}, + dir: "ltr", + }, + children: [ + { + text: "", + }, + { + uid: "a670bcec53e54dd3b67a93838cb064df", + type: "reference", + attrs: { + "display-type": "display", + "asset-uid": "bltb87e0bd5764c421e", + "content-type-uid": "sys_assets", + "asset-link": + "https://images.contentstack.io/v3/assets/***REMOVED***/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "asset-name": "batman.png", + "asset-type": "image/png", + type: "asset", + "class-name": "embedded-asset", + "redactor-attributes": { + position: "right", + alt: "I am BATMAN", + caption: "BATMAN", + anchorLink: "https://www.batman.com", + target: true, + inline: true, + }, + style: { + "text-align": "right", + "max-width": "undefinedpx", + float: "right", + }, + position: "right", + "asset-alt": "I am BATMAN", + "asset-caption": "BATMAN", + link: "https://www.batman.com", + target: "_blank", + inline: true, + }, + children: [ + { + text: "", + }, + ], + }, + { + text: "I am batman", + }, + ], + }, + ]), + expectedHtml: `
I am BATMAN
BATMAN
I am batman
I am BATMAN
BATMAN
I am batman
`, + }, +}; + +function getDoc(value: any) { + return { + type: "doc", + attrs: {}, + uid: "ddec1e08f4634eaca512b113ba4da946", + children: value, + }; +} diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts index 198b9c7..38e84bb 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -2,6 +2,7 @@ import { toRedactor } from "../src/toRedactor" import { isEqual } from "lodash" import expectedValue from "./expectedJson" +import { imageAssetData } from "./testingData" describe("Testing json to html conversion", () => { it("heading conversion", () => { @@ -141,4 +142,85 @@ describe("Testing json to html conversion", () => { expect(htmlValue).toBe(html); }); }) + describe("Image Type Asset", () => { + describe("Block", () => { + let f = ""; + it("should convert to
(base case)", () => { + const { value, expectedHtml } = imageAssetData["base"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(alt)", () => { + const { value, expectedHtml } = imageAssetData["alt"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(caption)", () => { + const { value, expectedHtml } = imageAssetData["caption"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(alignment)", () => { + const { value, expectedHtml } = imageAssetData["alignment"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor)", () => { + const { value, expectedHtml } = imageAssetData["anchor"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor and target)", () => { + const { value, expectedHtml } = imageAssetData["anchor-target"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor alignment target alt caption)", () => { + const { value, expectedHtml } = + imageAssetData["anchor-alignment-target-alt-caption"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + }); + + describe("Inline", () => { + it("should convert to
(base case)", () => { + const { value, expectedHtml } = imageAssetData["inline-base"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(alt)", () => { + const { value, expectedHtml } = imageAssetData["inline-alt"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(caption)", () => { + const { value, expectedHtml } = imageAssetData["inline-caption"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(alignment)", () => { + const { value, expectedHtml } = imageAssetData["inline-alignment"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor)", () => { + const { value, expectedHtml } = imageAssetData["inline-anchor"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor and target)", () => { + const { value, expectedHtml } = imageAssetData["inline-anchor-target"]; + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + it("should convert to
(anchor alignment target alt caption)", () => { + const { value, expectedHtml } = + imageAssetData["inline-anchor-alignment-target-alt-caption"]; + + const html = toRedactor(value); + expect(html).toBe(expectedHtml); + }); + }); + }); }) \ No newline at end of file