diff --git a/package.json b/package.json index 2de8391..b4ad350 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/json-rte-serializer", - "version": "2.0.9", + "version": "2.0.10", "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 555ce99..3371cd2 100644 --- a/src/fromRedactor.tsx +++ b/src/fromRedactor.tsx @@ -15,7 +15,7 @@ const isInline = ['span', 'a', 'inlineCode', 'reference'] const isVoid = ['img', 'embed'] -const ELEMENT_TAGS: IHtmlToJsonElementTags = { +export const ELEMENT_TAGS: IHtmlToJsonElementTags = { A: (el: HTMLElement) => { const attrs: Record = {} const target = el.getAttribute('target'); @@ -49,7 +49,11 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = { const assetName = splittedUrl[splittedUrl?.length - 1] return { type: 'reference', attrs: { "asset-name": assetName,"content-type-uid" : "sys_assets", "asset-link": el.getAttribute('src'), "asset-type": `image/${imageType}`, "display-type": "display", "type": "asset", "asset-uid": assetUid } } } - return { type: 'img', attrs: { url: el.getAttribute('src') } } + const imageAttrs : any = { type: 'img', attrs: { url: el.getAttribute('src') } } + if (el.getAttribute('width')) { + imageAttrs.attrs['width'] = el.getAttribute('width') + } + return imageAttrs }, LI: () => ({ type: 'li', attrs: {} }), OL: () => ({ type: 'ol', attrs: {} }), @@ -98,7 +102,8 @@ const ELEMENT_TAGS: IHtmlToJsonElementTags = { SCRIPT: (el: HTMLElement) => { return { type: 'script', attrs: {} } }, - HR: () => ({ type: 'hr', attrs: {} }) + HR: () => ({ type: 'hr', attrs: {} }), + FIGCAPTION: () => ({ type: 'figcaption', attrs: {} }), } const TEXT_TAGS: IHtmlToJsonTextTags = { @@ -156,7 +161,7 @@ const traverseChildAndWarpChild = (children: Array, allowNonStandardTags if (child.hasOwnProperty('type')) { if (isInline.includes(child.type)) { if (child.type === "reference") { - if (child.attrs && (child.attrs['display-type'] === "inline" || child.attrs['display-type'] === "link")) { + if (child.attrs && (child.attrs['display-type'] === "inline" || child.attrs['display-type'] === "link" || child.attrs['inline'] )) { inlineElementIndex.push(index) } else { hasBlockElement = true @@ -437,7 +442,15 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject } } elementAttrs.attrs["redactor-attributes"] = redactor - return jsx('element', { attrs: { ...elementAttrs?.attrs, type, "asset-caption": caption, "link": link, "asset-alt": alt, target, position, "asset-link": fileLink, "asset-uid": uid, "display-type": displayType, "asset-name": fileName, "asset-type": contentType, "content-type-uid": contentTypeUid }, type: "reference", uid: generateId() }, children) + const assetAttrs = { ...elementAttrs?.attrs, type, "asset-caption": caption, "link": link, "asset-alt": alt, target, position, "asset-link": fileLink, "asset-uid": uid, "display-type": displayType, "asset-name": fileName, "asset-type": contentType, "content-type-uid": contentTypeUid } + if(assetAttrs.target === "_self"){ + delete assetAttrs.target + } + if(redactor.inline){ + assetAttrs.inline = true + delete redactor.inline + } + return jsx('element', { attrs: assetAttrs, type: "reference", uid: generateId() }, children) } } if (nodeName === 'FIGCAPTION') { @@ -626,11 +639,14 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject const { href, target } = newChildren[0].attrs?.["redactor-attributes"] extraAttrs['anchorLink'] = href; if (target && target !== '') { - extraAttrs['target'] = true; + extraAttrs['target'] = target === "_blank"; } const imageAttrs = newChildren[0].children; if(imageAttrs[0].type === 'img'){ + if(imageAttrs[0].attrs.width){ + sizeAttrs.width = imageAttrs[0].attrs.width + } elementAttrs = getFinalImageAttributes({elementAttrs, newChildren : imageAttrs, extraAttrs, sizeAttrs}) } @@ -655,6 +671,16 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs) return jsx('element', elementAttrs, [{ text: '' }]) } + if (newChildren[0]?.type === 'img'){ + let extraAttrs: { [key: string]: any } = {} + const imageAttrs = newChildren[0] + elementAttrs = getImageAttributes(imageAttrs, imageAttrs.attrs || {}, extraAttrs) + elementAttrs.attrs['anchorLink'] = el.getAttribute('href') + if(el.getAttribute('target')) + elementAttrs.attrs['target'] = el.getAttribute('target') + return jsx('element', elementAttrs, [{ text: '' }]) + + } } if (nodeName === 'IMG' || nodeName === 'IFRAME' || nodeName === 'VIDEO') { if (elementAttrs?.attrs?.["redactor-attributes"]?.width) { @@ -670,6 +696,10 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject if (elementAttrs?.attrs?.["redactor-attributes"]?.inline) { elementAttrs.attrs.inline = Boolean(elementAttrs?.attrs?.["redactor-attributes"]?.inline) } + if(nodeName === "IMG" && elementAttrs.attrs.width){ + elementAttrs.attrs.style.width = `${elementAttrs.attrs.width}px` + elementAttrs.attrs.style['max-width'] = `${elementAttrs.attrs.width}px` + } return jsx('element', elementAttrs, [{ text: '' }]) } if (nodeName === 'BLOCKQUOTE') { @@ -843,6 +873,12 @@ export const fromRedactor = (el: any, options?:IHtmlToJsonOptions) : IAnyObject } } + if(nodeName === "DIV"){ + if(el.style?.overflow === 'hidden' && children.find((child: any) => child.type === 'reference')){ + elementAttrs = { ...elementAttrs, type: 'p', attrs: {} } + } + } + if (children.length === 0) { children = [{ text: '' }] } @@ -928,6 +964,13 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt sizeAttrs.width = newChildren[0].attrs.width.toString(); } + if(!isNaN(parseInt(sizeAttrs.width))){ + sizeAttrs.style = { + width: `${sizeAttrs.width}px`, + "max-width": `${sizeAttrs.width}px` + } + } + const childAttrs = { ...newChildren[0].attrs, ...sizeAttrs, style: { 'text-align': style?.['text-align'] }, caption: extraAttrs['caption'] } extraAttrs = { ...extraAttrs, ...sizeAttrs } @@ -935,7 +978,10 @@ const getFinalImageAttributes = ({elementAttrs, newChildren, extraAttrs, sizeAtt delete childAttrs.caption } - const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs); + const imageAttrs = getImageAttributes(elementAttrs, childAttrs, extraAttrs); + + delete imageAttrs?.attrs?.['redactor-attributes']?.['anchorlink']; + delete imageAttrs?.attrs?.['redactor-attributes']?.['style']; return imageAttrs } diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx index 5a200fb..ce486b6 100644 --- a/src/toRedactor.tsx +++ b/src/toRedactor.tsx @@ -482,6 +482,14 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string } if(jsonValue['type'] === 'img'){ attrsJson['src'] = allattrs['url'] + + if(allattrs['caption']) figureStyles.caption = allattrs['caption'] + if(allattrs['position']) figureStyles.position = allattrs['position'] + if(allattrs['anchorLink']) figureStyles.anchorLink = `href="${allattrs['anchorLink']}"` + if(allattrs['target']){ + figureStyles.anchorLink += ` target="${allattrs['target']}"` + } + figureStyles.fieldsEdited.push(figureStyles.caption) } if(!(options?.customElementTypes && !isEmpty(options.customElementTypes) && options.customElementTypes[jsonValue['type']])) { delete attrsJson['url'] diff --git a/test/expectedJson.ts b/test/expectedJson.ts index 2a2e482..7b38a64 100644 --- a/test/expectedJson.ts +++ b/test/expectedJson.ts @@ -892,7 +892,7 @@ export default { "json": [{"type":"p","attrs":{},"uid":"e39e29ed819f49fdb1504b17cf6fe1ff","children":[{"text":""}]},{"type":"reference","attrs":{"asset-name":null,"content-type-uid":"sys_assets","asset-link":null,"asset-type":"image/png","display-type":"display","type":"asset","asset-uid":"bltecea58c1a7fa27f4","style":{},"redactor-attributes":{"asset_uid":"bltecea58c1a7fa27f4","height":"auto"}},"uid":"b87802e2367148e29a2c4ba81c2182ec","children":[{"text":""}]}] }, "14": { - "html": "

This is Bold, Italic, underline, Strikethrough, inline-code , 2x , 2x

H1

h2

h3

h4

h5
h6
Block quote

Block Code

center

Right

Justify

  1. order list
  2. 2

1

2

3

4

5

6


", + "html": "

This is Bold, Italic, underline, Strikethrough, inline-code , 2x , 2x

H1

h2

h3

h4

h5
h6
Block quote

Block Code

center

Right

Justify

  1. order list
  2. 2

1

2

3

4

5

6


", "json": [ { "type": "p", @@ -1346,8 +1346,7 @@ export default { "sys-style-type": "display" }, "type": "asset", - "target": "_self", - "asset-link": "https://images.contentstack.io/v3/assets/bltbdb397c7cc18a214/blt9fedd0336c2f7f0d/61fe9fb699c8a84a577b9f40/crop_area.jpeg", + "asset-link": "https://picsum.photos/200/300", "asset-uid": "blt9fedd0336c2f7f0d", "display-type": "display", "asset-name": "crop_area.jpeg", @@ -1630,78 +1629,78 @@ export default { "nonStandardTags": 0 }, "image-to-reference": { - "html": ``, - "json": {"attrs": {}, "children": [{"attrs": {"asset-link": "https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg", "asset-name": "landscape-3.jpg", "asset-type": "image/jpg", "asset-uid": "bltfea8157ddfb8e776", "content-type-uid": "sys_assets", "display-type": "display", "redactor-attributes": {"asset_uid": "bltfea8157ddfb8e776", "height": "auto", "src": "https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg"}, "style": {}, "type": "asset"}, "children": [{"text": ""}], "type": "reference", "uid": "640c377d18dd4613a448734c019dcd0a"}], "type": "doc", "uid": "5b5269ef0d65476d9c3ef300676530b2"}, + "html": ``, + "json": {"attrs": {}, "children": [{"attrs": {"asset-link": "/landscape-3.jpg", "asset-name": "landscape-3.jpg", "asset-type": "image/jpg", "asset-uid": "bltfea8157ddfb8e776", "content-type-uid": "sys_assets", "display-type": "display", "redactor-attributes": {"asset_uid": "bltfea8157ddfb8e776", "height": "auto", "src": "/landscape-3.jpg"}, "style": {}, "type": "asset"}, "children": [{"text": ""}], "type": "reference", "uid": "640c377d18dd4613a448734c019dcd0a"}], "type": "doc", "uid": "5b5269ef0d65476d9c3ef300676530b2"}, }, "image-to-image":{ - "html": ``, - "json": {"type":"doc","uid":"519ef5a2f4b844239e176033a5b03fff","attrs":{},"children":[{"type":"img","attrs":{"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","style":{},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","height":"auto"}},"uid":"7afdc063abad4612948f660ae0c98738","children":[{"text":""}]}]} + "html": ``, + "json": {"type":"doc","uid":"519ef5a2f4b844239e176033a5b03fff","attrs":{},"children":[{"type":"img","attrs":{"url":"/landscape-3.jpg","style":{},"redactor-attributes":{"src":"/landscape-3.jpg","height":"auto"}},"uid":"7afdc063abad4612948f660ae0c98738","children":[{"text":""}]}]} }, "reference-caption": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"38f94c35f7ab4709a1d21daf867d7676","attrs":{},"children":[{"type":"p","attrs":{},"uid":"40ce549d9e5a40b780f741d498fcea2d","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"none","captionAttrs":{},"caption":"Landscape","asset-caption":"Landscape","width":"auto","max-width":"auto"},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":"auto","max-width":"auto","position":"none","asset-caption":"Landscape"},"uid":"fe81be61294b4aceba412002b5c93b57","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"38f94c35f7ab4709a1d21daf867d7676","attrs":{},"children":[{"type":"p","attrs":{},"uid":"40ce549d9e5a40b780f741d498fcea2d","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"/landscape-3.jpg","position":"none","captionAttrs":{},"caption":"Landscape","asset-caption":"Landscape","width":"auto","max-width":"auto"},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":"auto","max-width":"auto","position":"none","asset-caption":"Landscape"},"uid":"fe81be61294b4aceba412002b5c93b57","children":[{"text":""}]}]} }, "image-caption": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"1ed9b08a9f7546f39bbd163ca4664b6f","attrs":{},"children":[{"type":"p","attrs":{},"uid":"781340d798224492bab7b064c2295abe","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"none","captionAttrs":{},"caption":"Landscape","width":"auto","max-width":"auto"},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":"auto","max-width":"auto","caption":"Landscape"},"uid":"4db6444ff9d7447d875b5ca72490e6a3","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"1ed9b08a9f7546f39bbd163ca4664b6f","attrs":{},"children":[{"type":"p","attrs":{},"uid":"781340d798224492bab7b064c2295abe","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"src":"/landscape-3.jpg","position":"none","captionAttrs":{},"caption":"Landscape","width":"auto","max-width":"auto"},"url":"/landscape-3.jpg","width":"auto","max-width":"auto","caption":"Landscape"},"uid":"4db6444ff9d7447d875b5ca72490e6a3","children":[{"text":""}]}]} }, "image-caption-width": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"c0b6dcd5ff8d4d9998b6579caf4e6ba8","attrs":{},"children":[{"type":"p","attrs":{},"uid":"18a1761f71e94b14a603047c4a6e74a7","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"none","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":295,"max-width":"auto"},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":295,"max-width":"auto","caption":"Landscape"},"uid":"13ccb1fe8e504e4a9a8917f900075d8b","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"c0b6dcd5ff8d4d9998b6579caf4e6ba8","attrs":{},"children":[{"type":"p","attrs":{},"uid":"18a1761f71e94b14a603047c4a6e74a7","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"src":"/landscape-3.jpg","position":"none","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":295,"max-width":"auto"},"url":"/landscape-3.jpg","width":295,"max-width":"auto","caption":"Landscape"},"uid":"13ccb1fe8e504e4a9a8917f900075d8b","children":[{"text":""}]}]} }, "reference-caption-width": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"0c10195ed57a4158b6bd2d77caf5d114","attrs":{},"children":[{"type":"p","attrs":{},"uid":"19618972c45a4dde958f20900364a390","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"none","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","asset-caption":"Landscape","width":298,"max-width":"auto"},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":298,"max-width":"auto","position":"none","asset-caption":"Landscape"},"uid":"e947c5963d3e48548dc6d0273a9b5166","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"0c10195ed57a4158b6bd2d77caf5d114","attrs":{},"children":[{"type":"p","attrs":{},"uid":"19618972c45a4dde958f20900364a390","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"none"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"/landscape-3.jpg","position":"none","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","asset-caption":"Landscape","width":298,"max-width":"auto"},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":298,"max-width":"auto","position":"none","asset-caption":"Landscape"},"uid":"e947c5963d3e48548dc6d0273a9b5166","children":[{"text":""}]}]} }, "image-caption-position": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"f0151eff09864e0da93bd200136696d8","attrs":{},"children":[{"type":"p","attrs":{},"uid":"a33831e032bb467eb9239e22a3d40c1f","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":295},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":295,"caption":"Landscape"},"uid":"81da4a3879e94a0ea05dce4947a31a27","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"f0151eff09864e0da93bd200136696d8","attrs":{},"children":[{"type":"p","attrs":{},"uid":"a33831e032bb467eb9239e22a3d40c1f","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":295},"url":"/landscape-3.jpg","width":295,"caption":"Landscape"},"uid":"81da4a3879e94a0ea05dce4947a31a27","children":[{"text":""}]}]} }, "reference-caption-position": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"52ae03d354a14e35b9320245ca608620","attrs":{},"children":[{"type":"p","attrs":{},"uid":"3a36a8d2de9e4a3cab85caa6eb4ec36e","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","asset-caption":"Landscape","width":298},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":298,"position":"center","asset-caption":"Landscape"},"uid":"b9a4e61bddde493e85c537a8daa5cc62","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"52ae03d354a14e35b9320245ca608620","attrs":{},"children":[{"type":"p","attrs":{},"uid":"3a36a8d2de9e4a3cab85caa6eb4ec36e","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","asset-caption":"Landscape","width":298},"asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":298,"position":"center","asset-caption":"Landscape"},"uid":"b9a4e61bddde493e85c537a8daa5cc62","children":[{"text":""}]}]} }, "anchor-image-width-position-caption": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"d712f7746e984559bbf591d689ef69f6","attrs":{},"children":[{"type":"p","attrs":{},"uid":"79d6defd99624ecc8302db0479330d72","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","anchorLink":"https://app.contentstack.com/","asset-caption":"Landscape","width":204},"link": "https://app.contentstack.com/","asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":204,"position":"center","asset-caption":"Landscape"},"uid":"abc8e6a7f2974ad2a876356a6f4ae0fb","children":[{"text":""}]}]} + "json": {"type":"doc","uid":"d712f7746e984559bbf591d689ef69f6","attrs":{},"children":[{"type":"p","attrs":{},"uid":"79d6defd99624ecc8302db0479330d72","children":[{"text":""}]},{"type":"reference","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"asset_uid":"bltfea8157ddfb8e776","src":"/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","anchorLink":"https://app.contentstack.com/","asset-caption":"Landscape","width":204},"link": "https://app.contentstack.com/","asset-name":"landscape-3.jpg","content-type-uid":"sys_assets","asset-link":"/landscape-3.jpg","asset-type":"image/jpg","display-type":"display","type":"asset","asset-uid":"bltfea8157ddfb8e776","width":204,"position":"center","asset-caption":"Landscape"},"uid":"abc8e6a7f2974ad2a876356a6f4ae0fb","children":[{"text":""}]}]} }, "anchor-reference-width-position-caption": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","uid":"d6cd7b938dcc41a8a75fb8bad29aa2e9","attrs":{},"children":[{"type":"p","attrs":{},"uid":"c17f2b982464422aaa58499b9525b437","children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","anchorLink":"https://app.contentstack.com/","width":204},"url":"https://images.contentstack.io/v3/assets/blt858e12437ac2679e/bltfea8157ddfb8e776/6329f1106a7f7364973c028c/landscape-3.jpg","width":204,"caption":"Landscape","link":"https://app.contentstack.com/"},"children":[{"text":""}]}]} + "json": {"type":"doc","attrs":{},"children":[{"type":"p","attrs":{},"children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"https://picsum.photos/200/300","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":204},"url":"https://picsum.photos/200/300","anchorLink":"https://app.contentstack.com/","width":204,"caption":"Landscape"},"children":[{"text":""}]}]} }, "'\n' to
": { "html": '

This is test for break element
This is text on the next line.

', diff --git a/test/expectedMarkdown.ts b/test/expectedMarkdown.ts index 9078c3c..c46ce32 100644 --- a/test/expectedMarkdown.ts +++ b/test/expectedMarkdown.ts @@ -354,7 +354,7 @@ Some Paragraph and adding a [link](www.google.com) in the middle.` "asset-uid": "blt6a5e908abbd88573", "content-type-uid": "sys_assets", "target": "_self", - "href": "https://images.contentstack.io/v3/assets/blt2cf669e5016d5e07/blt6a5e908abbd88573/65a8bd5e14eace2183a5abcc/Phillip-Island-Penguin-Parade-10.jpeg" + "href": "https://picsum.photos/200/300" }, "children": [ { @@ -371,7 +371,7 @@ Some Paragraph and adding a [link](www.google.com) in the middle.` }], "markdown": ` -Also adding an asset as a link here. Here are the [Penguins.](https://images.contentstack.io/v3/assets/blt2cf669e5016d5e07/blt6a5e908abbd88573/65a8bd5e14eace2183a5abcc/Phillip-Island-Penguin-Parade-10.jpeg) Enjoy!` +Also adding an asset as a link here. Here are the [Penguins.](https://picsum.photos/200/300) Enjoy!` }, { "title": "Ordered List Conversion", diff --git a/test/fromRedactor.test.ts b/test/fromRedactor.test.ts index 0c5f484..2bf13f6 100644 --- a/test/fromRedactor.test.ts +++ b/test/fromRedactor.test.ts @@ -1,5 +1,5 @@ // @ts-nocheck -import { fromRedactor, getNestedValueIfAvailable } from "../src/fromRedactor" +import { ELEMENT_TAGS, fromRedactor, getNestedValueIfAvailable } from "../src/fromRedactor" import { JSDOM } from "jsdom" import isEqual from "lodash.isequal" import omitdeep from "omit-deep-lodash" @@ -295,6 +295,21 @@ describe("Testing html to json conversion", () => { const json = htmlToJson(html) expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"https://picsum.photos/200","height":"141","alt":"image_(9).png","caption":"ss","type":"asset","asset-alt":"image_(9).png","max-height":"141","max-width":"148","sys-style-type":"display","position":"right","captionAttrs":{"style":"text-align:center"},"anchorLink":"ss.com","target":true,"asset-caption":"ss"},"class-name":"embedded-asset","width":148,"type":"asset","asset-caption":"ss","link":"ss.com","asset-alt":"image_(9).png","target":"_blank","position":"right","asset-link":"https://picsum.photos/200","asset-uid":"blt137d845621ef8168","display-type":"display","asset-name":"image_(9).png","asset-type":"image/png","content-type-uid":"sys_assets"},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]}] }) }) + test("should convert asset to reference with non standard tags", () => { + const html = `
+
image_(9).png +
ss
+
+
+

` + const json = htmlToJson(html, { allowNonStandardTags: true }) + expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"https://picsum.photos/200","height":"141","alt":"image_(9).png","caption":"ss","type":"asset","asset-alt":"image_(9).png","max-height":"141","max-width":"148","sys-style-type":"display","position":"right","captionAttrs":{"style":"text-align:center"},"anchorLink":"ss.com","target":true,"asset-caption":"ss"},"class-name":"embedded-asset","width":148,"type":"asset","asset-caption":"ss","link":"ss.com","asset-alt":"image_(9).png","target":"_blank","position":"right","asset-link":"https://picsum.photos/200","asset-uid":"blt137d845621ef8168","display-type":"display","asset-name":"image_(9).png","asset-type":"image/png","content-type-uid":"sys_assets"},"uid":"uid","children":[{"text":""}]},{"type":"p","attrs":{},"uid":"uid","children":[{"text":""}]}] }) + }) + test("should convert inline asset reference HTML to proper JSON", () => { + let html = `

image (7).png
dasdasdasdasdasdasddaasdasdasdas
Hello
World
` + 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"}]}]}) + }) }) @@ -372,9 +387,12 @@ describe("CS-41001", () =>{ }) }) - - - +describe("ELEMENT_TAGS", () => { + test("should have FIGCAPTION as a standard element tag", () => { + const standardElementTags = Object.keys(ELEMENT_TAGS); + expect(standardElementTags).toContain("FIGCAPTION"); + }) +}) function htmlToJson (html: string, options: IHtmlToJsonOptions) { const dom = new JSDOM(html); diff --git a/test/testingData.ts b/test/testingData.ts index ba4bf23..216d948 100644 --- a/test/testingData.ts +++ b/test/testingData.ts @@ -9,7 +9,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -23,7 +23,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
`, + expectedHtml: `
`, }, alt: { value: getDoc([ @@ -35,7 +35,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -55,7 +55,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am BATMAN
`, + expectedHtml: `
I am BATMAN
`, }, caption: { value: getDoc([ @@ -67,7 +67,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -87,7 +87,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
BATMAN
`, + expectedHtml: `
BATMAN
`, }, alignment: { value: getDoc([ @@ -99,7 +99,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -129,7 +129,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -158,7 +158,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -178,7 +178,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
`, + expectedHtml: `
`, }, anchor: { value: getDoc([ @@ -190,7 +190,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -211,7 +211,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
`, + expectedHtml: `
`, }, "anchor-target": { value: getDoc([ @@ -223,7 +223,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -245,7 +245,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
`, + expectedHtml: `
`, }, "anchor-alignment-target-alt-caption": { value: getDoc([ @@ -257,7 +257,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -290,7 +290,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -327,7 +327,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -364,7 +364,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -394,7 +394,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
`, + expectedHtml: `
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
I am BATMAN
BATMAN
`, }, "inline-base": { value: getDoc([ @@ -418,7 +418,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -443,7 +443,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `

I ambatman

`, + expectedHtml: `

I ambatman

`, }, "inline-alt": { value: getDoc([ @@ -467,7 +467,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -494,7 +494,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `

I amI am BATMANbatman

`, + expectedHtml: `

I amI am BATMANbatman

`, }, "inline-caption": { value: getDoc([ @@ -518,7 +518,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -545,7 +545,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am
BATMAN
Batman
`, + expectedHtml: `
I am
BATMAN
Batman
`, }, "inline-alignment": { value: getDoc([ @@ -569,7 +569,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -618,7 +618,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -647,7 +647,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am batman
I am batman
`, + expectedHtml: `
I am batman
I am batman
`, }, "inline-anchor": { value: getDoc([ @@ -671,7 +671,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -699,7 +699,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `

I am batman

`, + expectedHtml: `

I am batman

`, }, "inline-anchor-target": { value: getDoc([ @@ -723,7 +723,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -756,7 +756,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am
I am BATMAN
BATMAN
batman
`, + expectedHtml: `
I am
I am BATMAN
BATMAN
batman
`, }, "inline-anchor-alignment-target-alt-caption": { value: getDoc([ @@ -780,7 +780,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -836,7 +836,7 @@ export const imageAssetData = { "asset-uid": "bltb87e0bd5764c421e", "content-type-uid": "sys_assets", "asset-link": - "https://images.contentstack.io/v3/assets/blt90bbfcce23680d08/bltb87e0bd5764c421e/64abd49b7b26dfaeede17525/batman.png", + "https://picsum.photos/200/300", "asset-name": "batman.png", "asset-type": "image/png", type: "asset", @@ -873,7 +873,7 @@ export const imageAssetData = { ], }, ]), - expectedHtml: `
I am BATMAN
BATMAN
I am batman
I am BATMAN
BATMAN
I am batman
`, + expectedHtml: `
I am BATMAN
BATMAN
I am batman
I am BATMAN
BATMAN
I am batman
`, }, }; diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts index 85608a1..dccbfe4 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -228,7 +228,7 @@ describe("Testing json to html conversion", () => { test("RT-253 - should convert to proper HTML image code", () => { const json = {"type":"doc","attrs":{},"children":[{"type":"img","attrs":{"url":"https://picsum.photos/200","width":100},"children":[{"text":""}]}],"_version":3 } const html = toRedactor(json); - expect(html).toBe(''); + expect(html).toBe(''); }); test("RT-264 - reference asset should have proper unit in the converted image", () => { @@ -236,5 +236,11 @@ describe("Testing json to html conversion", () => { const html = toRedactor(json); expect(html).toBe(`
`); }) + + test("RT-292", () => { + const json = {"type":"doc","uid":"41870a48806348eb866c1944d37d3a5d","attrs":{},"children":[{"type":"img","attrs":{"url":"https://picsum.photos/536/354","style":{},"redactor-attributes":{"position":"none","caption":"caption","inline":"true","width":"243","dirty":"true","max-width":"243","src":"https://picsum.photos/536/354","alt":"alt","anchorLink":"link","target":true},"width":"217","inline":"true","caption":"caption","alt":"alt","anchorLink":"link","target":"_blank"},"uid":"bedc4931f5aa4fd59fd6411665f931e2","children":[{"text":""}]}] } + const html = toRedactor(json); + expect(html).toBe(`
alt
caption
`) + }) })