diff --git a/src/jsonToMarkdown.tsx b/src/jsonToMarkdown.tsx index 1a7b84b..6f9abcd 100644 --- a/src/jsonToMarkdown.tsx +++ b/src/jsonToMarkdown.tsx @@ -1,239 +1,278 @@ -import {IJsonToMarkdownElementTags, IJsonToMarkdownTextTags} from './types' -import {cloneDeep} from 'lodash' -import {Node} from 'slate' +import { IJsonToMarkdownElementTags, IJsonToMarkdownTextTags } from "./types"; +import { cloneDeep } from "lodash"; +import { Node } from "slate"; -let listTypes = ['ol', 'ul'] -const elementsToAvoidWithinMarkdownTable = ['ol', 'ul', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'reference', 'img', 'fragment'] +let listTypes = ["ol", "ul"]; +const elementsToAvoidWithinMarkdownTable = [ + "ol", + "ul", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "blockquote", + "code", + "reference", + "img", + "fragment", +]; const ELEMENT_TYPES: IJsonToMarkdownElementTags = { - 'blockquote': (attrs: any, child: any) => { + blockquote: (attrs: any, child: any) => { return ` -> ${child}` +> ${child}`; }, - 'h1': (attrs: any, child: string) => { + h1: (attrs: any, child: string) => { return ` -#${child}#` +# ${child}`; }, - 'h2': (attrs: any, child: any) => { + h2: (attrs: any, child: any) => { return ` -##${child}##` +## ${child}`; }, - 'h3': (attrs: any, child: any) => { + h3: (attrs: any, child: any) => { return ` -###${child}###` +### ${child}`; }, - 'h4': (attrs: any, child: any) => { + h4: (attrs: any, child: any) => { return ` -####${child}####` +#### ${child}`; }, - 'h5': (attrs: any, child: any) => { + h5: (attrs: any, child: any) => { return ` -#####${child}#####` +##### ${child}`; }, - 'h6': (attrs: any, child: any) => { + h6: (attrs: any, child: any) => { return ` -######${child}######` +###### ${child}`; }, img: (attrsJson: any, child: any) => { - if(attrsJson) { - let imageAlt = attrsJson?.['alt'] ? attrsJson['alt'] : 'enter image description here' - let imageURL = attrsJson?.['url'] ? attrsJson['url'] : '' - return ` + if (attrsJson) { + let imageAlt = attrsJson?.["alt"] + ? attrsJson["alt"] + : "enter image description here"; + let imageURL = attrsJson?.["url"] ? attrsJson["url"] : ""; + return ` ![${imageAlt}] -(${imageURL})` +(${imageURL})`; } - return '' + return ""; }, p: (attrs: any, child: any) => { return ` -${child}` +${child}`; }, code: (attrs: any, child: any) => { return ` - ${child} ` + ${child} `; }, - ol: (attrs: any, child: any) => { - return `${child}` + ol: (attrs: any, child: any) => { + return `${child}`; }, ul: (attrs: any, child: any) => { - return `${child}` + return `${child}`; }, li: (attrs: any, child: any) => { - return `${child}` + return `${child}`; }, a: (attrsJson: any, child: any) => { - return `[${child}](${attrsJson.url})` + return `[${child}](${attrsJson.url})`; }, hr: (attrs: any, child: any) => { return ` -----------` +----------`; }, span: (attrs: any, child: any) => { - return `${child}` + return `${child}`; }, - reference: (attrsJson: any, child: any): any => { - if(attrsJson?.['display-type'] === 'display') { - if(attrsJson) { - let assetName = attrsJson?.['asset-name'] ? attrsJson['asset-name'] : 'enter image description here' - let assetURL = attrsJson?.['asset-link'] ? attrsJson['asset-link'] : '' - return ` + reference: (attrsJson: any, child: any): any => { + if (attrsJson?.["display-type"] === "display") { + if (attrsJson) { + let assetName = attrsJson?.["asset-name"] + ? attrsJson["asset-name"] + : "enter image description here"; + let assetURL = attrsJson?.["asset-link"] ? attrsJson["asset-link"] : ""; + return ` ![${assetName}] -(${assetURL})` +(${assetURL})`; } - } - else if(attrsJson?.['display-type'] === 'link') { - if(attrsJson) { - return `[${child}](${attrsJson?.['href'] ? attrsJson['href'] : "#"})` + } else if (attrsJson?.["display-type"] === "link") { + if (attrsJson) { + return `[${child}](${attrsJson?.["href"] ? attrsJson["href"] : "#"})`; } } }, fragment: (attrs: any, child: any) => { - return child + return child; }, table: (attrs: any, child: any) => { - return `${child}` - }, - tbody: (attrs: any, child: any) => { - return `${child}` - }, - thead: (attrs: any, child: any) => { - let tableBreak = '|' - if(attrs.cols) { - if(attrs.addEmptyThead) { - let tHeadChildren = '| ' - for(let i = 0; i < attrs.cols; i++) { - tHeadChildren += '| ' - tableBreak += ' ----- |' - } - return `${tHeadChildren}\n${tableBreak}\n` + return `${child}`; + }, + tbody: (attrs: any, child: any) => { + return `${child}`; + }, + thead: (attrs: any, child: any) => { + let tableBreak = "|"; + if (attrs.cols) { + if (attrs.addEmptyThead) { + let tHeadChildren = "| "; + for (let i = 0; i < attrs.cols; i++) { + tHeadChildren += "| "; + tableBreak += " ----- |"; } - else{ - for(let i = 0; i < attrs.cols; i++) { - tableBreak += ' ----- |' - } - return `${child}\n${tableBreak}\n` + return `${tHeadChildren}\n${tableBreak}\n`; + } else { + for (let i = 0; i < attrs.cols; i++) { + tableBreak += " ----- |"; } + return `${child}\n${tableBreak}\n`; + } } - - return `${child}` + + return `${child}`; }, tr: (attrs: any, child: any) => { - return `| ${child}\n` + return `| ${child}\n`; }, td: (attrs: any, child: any) => { - return ` ${child.trim()} |` + return ` ${child.trim()} |`; }, th: (attrs: any, child: any) => { - return ` ${child.trim()} |` - } -} + return ` ${child.trim()} |`; + }, +}; const TEXT_WRAPPERS: IJsonToMarkdownTextTags = { - 'bold': (child: any, value: any) => { + bold: (child: any, value: any) => { return `**${child}**`; }, - 'italic': (child: any, value: any) => { + italic: (child: any, value: any) => { return `*${child}*`; }, - 'strikethrough': (child: any, value: any) => { + strikethrough: (child: any, value: any) => { return `~~${child}~~`; }, - 'inlineCode': (child: any, value: any) => { - return `\`${child}\`` + inlineCode: (child: any, value: any) => { + return `\`${child}\``; }, -} +}; const getOLOrULStringFromJson = (value: any) => { - let child = '' - let nestedListFound = false - if(listTypes.includes(value.type)){ - let start = parseInt(value?.attrs?.start || 1) - let symbol = value?.attrs?.listStyleType || '- ' - Array.from(value.children).forEach((val: any, index) => { - if(val.hasOwnProperty('type') && val.type === 'li' && value.children[index + 1] && value.children[index + 1]?.type && listTypes.includes(value.children[index + 1].type)){ - let liChildren = jsonToMarkdownSerializer(val) - let nestedListChildren = getOLOrULStringFromJson(value.children[index + 1]) - let indentedNestedListChildren = nestedListChildren.split('\n').filter((child) => child.length).map((child) => ` ${child}`).join('\n') - if(value.type === 'ol') { - child += `${index + start}. ${liChildren}\n${indentedNestedListChildren}\n` - nestedListFound = true + let child = ""; + let nestedListFound = false; + if (listTypes.includes(value.type)) { + let start = parseInt(value?.attrs?.start || 1); + let symbol = value?.attrs?.listStyleType || "- "; + Array.from(value.children).forEach((val: any, index) => { + if ( + val.hasOwnProperty("type") && + val.type === "li" && + value.children[index + 1] && + value.children[index + 1]?.type && + listTypes.includes(value.children[index + 1].type) + ) { + let liChildren = jsonToMarkdownSerializer(val); + let nestedListChildren = getOLOrULStringFromJson( + value.children[index + 1] + ); + let indentedNestedListChildren = nestedListChildren + .split("\n") + .filter((child) => child.length) + .map((child) => ` ${child}`) + .join("\n"); + if (value.type === "ol") { + child += `${ + index + start + }. ${liChildren}\n${indentedNestedListChildren}\n`; + nestedListFound = true; + } + if (value.type === "ul") + child += `${symbol}${liChildren}\n${indentedNestedListChildren}\n`; + } else if (val.hasOwnProperty("type") && !listTypes.includes(val.type)) { + let liChildren = jsonToMarkdownSerializer(val); + if (value.type === "ol") + child += `${ + nestedListFound ? index + start - 1 : index + start + }. ${liChildren}\n`; + if (value.type === "ul") child += `${symbol}${liChildren}\n`; } - if(value.type === 'ul') child += `${symbol}${liChildren}\n${indentedNestedListChildren}\n` - } - else if(val.hasOwnProperty('type') && !listTypes.includes(val.type)){ - let liChildren = jsonToMarkdownSerializer(val) - if(value.type === 'ol') child += `${nestedListFound ? (index + start - 1): index + start}. ${liChildren}\n` - if(value.type === 'ul') child += `${symbol}${liChildren}\n` - } - }) + }); } return ` -${child}` -} +${child}`; +}; export const jsonToMarkdownSerializer = (jsonValue: any): string => { - if (jsonValue.hasOwnProperty('text')) { - let text = jsonValue['text'].replace(//g, '>') - if (jsonValue['break']) { - text += `
` + if (jsonValue.hasOwnProperty("text")) { + let text = jsonValue["text"].replace(//g, ">"); + if (jsonValue["break"]) { + text += `
`; } - if (jsonValue.text.includes('\n') && !jsonValue['break']) { - text = text.replace(/\n/g, '
') + if (jsonValue.text.includes("\n") && !jsonValue["break"]) { + text = text.replace(/\n/g, "
"); } Object.entries(jsonValue).forEach(([key, value]) => { if (TEXT_WRAPPERS.hasOwnProperty(key)) { - text = TEXT_WRAPPERS[key](text, value) + text = TEXT_WRAPPERS[key](text, value); } - }) - return text + }); + return text; } - let children: any = '' - if(!jsonValue['type']) return children + let children: any = ""; + if (!jsonValue["type"]) return children; if (jsonValue.children) { - children = Array.from(jsonValue.children).map((child) => jsonToMarkdownSerializer(child)) - if (jsonValue['type'] === 'blockquote') { + children = Array.from(jsonValue.children).map((child) => + jsonToMarkdownSerializer(child) + ); + if (jsonValue["type"] === "blockquote") { children = children.map((child: any) => { - if (child === '\n') { - return '
' + if (child === "\n") { + return "
"; } - return child - }) + return child; + }); } - children = children.join('') + children = children.join(""); } - if (ELEMENT_TYPES[jsonValue['type']]) { - let tableAttrs = {} - if(jsonValue['type'] === 'ol' || jsonValue['type'] === 'ul') { - //@ts-ignore - return getOLOrULStringFromJson(jsonValue) + if (ELEMENT_TYPES[jsonValue["type"]]) { + let tableAttrs = {}; + if (jsonValue["type"] === "ol" || jsonValue["type"] === "ul") { + //@ts-ignore + return getOLOrULStringFromJson(jsonValue); } - if(jsonValue['type'] === 'table') { - tableAttrs = cloneDeep(jsonValue['attrs']) - let thead = Array.from(jsonValue['children']).find((child: any) => child.type && child.type === 'thead') - if(!thead) { - tableAttrs['addEmptyThead'] = true - let emptyTableHead = ELEMENT_TYPES['thead'](tableAttrs, children) - if(emptyTableHead) children = emptyTableHead + children + if (jsonValue["type"] === "table") { + tableAttrs = cloneDeep(jsonValue["attrs"]); + let thead = Array.from(jsonValue["children"]).find( + (child: any) => child.type && child.type === "thead" + ); + if (!thead) { + tableAttrs["addEmptyThead"] = true; + let emptyTableHead = ELEMENT_TYPES["thead"](tableAttrs, children); + if (emptyTableHead) children = emptyTableHead + children; } } - if(jsonValue['type'] === 'td' || jsonValue['type'] === 'th') { - let NonAllowedTableChild = Array.from(jsonValue['children']).find((child: any) => elementsToAvoidWithinMarkdownTable.includes(child.type)) - if(NonAllowedTableChild) children = Node.string(jsonValue) + if (jsonValue["type"] === "td" || jsonValue["type"] === "th") { + let NonAllowedTableChild = Array.from(jsonValue["children"]).find( + (child: any) => elementsToAvoidWithinMarkdownTable.includes(child.type) + ); + if (NonAllowedTableChild) children = Node.string(jsonValue); } - return ELEMENT_TYPES[jsonValue['type']](jsonValue['attrs'], children) - } - return children -} + return ELEMENT_TYPES[jsonValue["type"]](jsonValue["attrs"], children); + } + return children; +}; diff --git a/test/expectedJson.ts b/test/expectedJson.ts index 777a02d..5b394de 100644 --- a/test/expectedJson.ts +++ b/test/expectedJson.ts @@ -527,7 +527,7 @@ export default { ] }, "6": { - "html": "

", + "html": "

", "json": [ { "type": "p", @@ -579,10 +579,10 @@ export default { { "type": "embed", "attrs": { - "src": "https://www.***REMOVED***.com/embed/CSvFpBOe8eY", + "src": "https://www.youtube.com/embed/CSvFpBOe8eY", "style": {}, "redactor-attributes": { - "src": "https://www.***REMOVED***.com/embed/CSvFpBOe8eY" + "src": "https://www.youtube.com/embed/CSvFpBOe8eY" } }, "uid": "26067652d613404b8091f6e83d7af301", @@ -615,7 +615,7 @@ export default { ] } ], - "htmlUpdated": "

" + "htmlUpdated": "

" }, "7": { "html": "

this is link

paragraph with class

paragraph with id

", @@ -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", @@ -1167,13 +1167,13 @@ export default { { "type": "embed", "attrs": { - "src": "https://www.***REMOVED***.com/embed/v55JVEJg7i4", + "src": "https://www.youtube.com/embed/v55JVEJg7i4", "style": { "width": "88%", "height": "300px" }, "redactor-attributes": { - "src": "https://www.***REMOVED***.com/embed/v55JVEJg7i4", + "src": "https://www.youtube.com/embed/v55JVEJg7i4", "width": "88", "height": "300", "style": "width: 88%; height: 300px;" @@ -1346,7 +1346,7 @@ export default { "sys-style-type": "display" }, "type": "asset", - "asset-link": "***REMOVED***200/300", + "asset-link": "https://picsum.photos/200/300", "asset-uid": "blt9fedd0336c2f7f0d", "display-type": "display", "asset-name": "crop_area.jpeg", @@ -1697,10 +1697,10 @@ export default { "anchor-reference-width-position-caption": { "html": `

-
+
Landscape
`, - "json": {"type":"doc","attrs":{},"children":[{"type":"p","attrs":{},"children":[{"text":""}]},{"type":"img","attrs":{"style":{"text-align":"center"},"redactor-attributes":{"src":"***REMOVED***200/300","position":"center","captionAttrs":{"style":"text-align: center;"},"caption":"Landscape","width":204},"url":"***REMOVED***200/300","anchorLink":"https://app.contentstack.com/","width":204,"caption":"Landscape"},"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.

', @@ -1910,7 +1910,7 @@ export default { } }, "RT-154": { - "html": "

", + "html": "

", "json": [ { "type": "p", @@ -1962,10 +1962,10 @@ export default { { "type": "embed", "attrs": { - "src": "https://www.***REMOVED***.com/embed/CSvFpBOe8eY", + "src": "https://www.youtube.com/embed/CSvFpBOe8eY", "style": {}, "redactor-attributes": { - "src": "https://www.***REMOVED***.com/embed/CSvFpBOe8eY" + "src": "https://www.youtube.com/embed/CSvFpBOe8eY" } }, "uid": "26067652d613404b8091f6e83d7af301", @@ -1998,7 +1998,7 @@ export default { ] } ], - "htmlUpdated": "

" + "htmlUpdated": "

" } } \ No newline at end of file diff --git a/test/expectedMarkdown.ts b/test/expectedMarkdown.ts index 4baf5cb..49a1576 100644 --- a/test/expectedMarkdown.ts +++ b/test/expectedMarkdown.ts @@ -163,17 +163,17 @@ This is a paragraph with \`inline code\`.` }], "markdown": ` -#Heading 1# +# Heading 1 -##Heading 2## +## Heading 2 -###Heading 3### +### Heading 3 -####Heading 4#### +#### Heading 4 -#####Heading 5##### +##### Heading 5 -######Heading 6######` +###### Heading 6` }, { "title": "Block Quote Conversion", @@ -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": "***REMOVED***200/300" + "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.](***REMOVED***200/300) 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 8f9c92e..f84adb7 100644 --- a/test/fromRedactor.test.ts +++ b/test/fromRedactor.test.ts @@ -287,23 +287,23 @@ describe("Testing html to json conversion", () => { test("should convert asset to reference", () => { const html = `
-
image_(9).png +
image_(9).png
ss

` const json = htmlToJson(html) - expect(json).toStrictEqual({"type":"doc","uid":"uid","attrs":{},"children":[{"type":"reference","attrs":{"style":{"text-align":"right"},"redactor-attributes":{"src":"***REMOVED***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":"***REMOVED***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":""}]}] }) + 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 +
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":"***REMOVED***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":"***REMOVED***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":""}]}] }) + 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
` @@ -311,9 +311,9 @@ describe("Testing html to json conversion", () => { 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 = `` + let html = `` const json = htmlToJson(html) - expect(json).toEqual({ type: "doc", attrs: {}, uid: "uid", children:[{ type: "social-embeds", uid: 'uid', attrs: { src: "https://www.***REMOVED***.com/embed/3V-Sq7_uHXQ" }, children: [{ text: ""}] }]}) + 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: ""}] }]}) }) test("should replace all instances of and proper json marks", () => { diff --git a/test/testingData.ts b/test/testingData.ts index e09e519..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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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": - "***REMOVED***200/300", + "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 e28d9be..2c8a017 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -226,27 +226,27 @@ 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":"***REMOVED***200","width":100},"children":[{"text":""}]}],"_version":3 } + 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", () => { - const json = {"type":"doc","attrs":{},"uid":"6a547ebccbd74c0c9a521ee95acfb223","children":[{"uid":"942be31c040145b6a7541ec4f73754c5","type":"reference","attrs":{"display-type":"display","asset-uid":"bltcbce74d3891aaa9d","content-type-uid":"sys_assets","asset-link":"***REMOVED***200","asset-name":"MATHERAN.jpg","asset-type":"image/jpeg","type":"asset","class-name":"embedded-asset","width":"192","style":{"max-height":"144px","height":"144px","text-align":"right","max-width":"192px","width":"auto"},"redactor-attributes":{"height":"144","position":"right"},"max-height":"144","height":"144","position":"right","max-width":"192"},"children":[{"text":""}]}],"_version":1 } + const json = {"type":"doc","attrs":{},"uid":"6a547ebccbd74c0c9a521ee95acfb223","children":[{"uid":"942be31c040145b6a7541ec4f73754c5","type":"reference","attrs":{"display-type":"display","asset-uid":"bltcbce74d3891aaa9d","content-type-uid":"sys_assets","asset-link":"https://picsum.photos/200","asset-name":"MATHERAN.jpg","asset-type":"image/jpeg","type":"asset","class-name":"embedded-asset","width":"192","style":{"max-height":"144px","height":"144px","text-align":"right","max-width":"192px","width":"auto"},"redactor-attributes":{"height":"144","position":"right"},"max-height":"144","height":"144","position":"right","max-width":"192"},"children":[{"text":""}]}],"_version":1 } const html = toRedactor(json); - expect(html).toBe(`
`); + expect(html).toBe(`
`); }) test("RT-292", () => { - const json = {"type":"doc","uid":"41870a48806348eb866c1944d37d3a5d","attrs":{},"children":[{"type":"img","attrs":{"url":"***REMOVED***536/354","style":{},"redactor-attributes":{"position":"none","caption":"caption","inline":"true","width":"243","dirty":"true","max-width":"243","src":"***REMOVED***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 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
`) + 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.***REMOVED***.com/embed/3V-Sq7_uHXQ","width":560,"height":320},"children":[{"text":""}]}],"_version":1 } + 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(``); + expect(html).toBe(``); }) })