Skip to content

Commit 3d1a9b7

Browse files
harshithad0703harshithad0703
committed
fix: added id in attrs according to current json_rte format
1 parent 6a59cbc commit 3d1a9b7

File tree

7 files changed

+205
-35
lines changed

7 files changed

+205
-35
lines changed

‎__test__/json-to-html.test.ts‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ import {
2222
tableJson,
2323
unorderListJson,
2424
entryJsonRteWithClass,
25-
entryJsonRteWithId} from './mock/json-element-mock'
25+
entryJsonRteWithId,
26+
entryJsonRteWithIdinAttrs,
27+
jsonRteClassAndIdAttrs } from './mock/json-element-mock'
2628
import {
2729
blockquoteHtml,
2830
codeHtml,
@@ -42,7 +44,9 @@ import {
4244
tableHtml,
4345
unorderListHtml,
4446
plainTextHtmlWithClass,
45-
plainTextHtmlWithId } from './mock/json-element-mock-result'
47+
plainTextHtmlWithId,
48+
htmlTextIdInAttrs,
49+
classAndIdAttrsHtml } from './mock/json-element-mock-result'
4650
describe('Node parser paragraph content', () => {
4751
it('Should accept proper values', done => {
4852
const entry = { uid: 'uid'}
@@ -531,3 +535,34 @@ describe('Node parse style attribute', () => {
531535
done()
532536
})
533537
})
538+
539+
describe('Node parse json_rte Content', () => {
540+
it('Should return html text with classname', done => {
541+
const entry = entryJsonRteWithClass
542+
const paths = ['json_rte']
543+
jsonToHTML({ entry: entry, paths })
544+
expect(entry.json_rte).toEqual(plainTextHtmlWithClass)
545+
done()
546+
})
547+
it('Should return html text with id', done => {
548+
const entry = entryJsonRteWithId
549+
const paths = ['json_rte']
550+
jsonToHTML({ entry: entry, paths })
551+
expect(entry.json_rte).toEqual(plainTextHtmlWithId)
552+
done()
553+
})
554+
it('Should return html text with id in parent tag', done => {
555+
const entry = entryJsonRteWithIdinAttrs
556+
const paths = ['json_rte']
557+
jsonToHTML({ entry: entry, paths })
558+
expect(entry.json_rte).toEqual(htmlTextIdInAttrs)
559+
done()
560+
})
561+
it('Should return html text with class and id in parent tag', done => {
562+
const entry = jsonRteClassAndIdAttrs
563+
const paths = ['json_rte']
564+
jsonToHTML({ entry: entry, paths })
565+
expect(entry.json_rte).toEqual(classAndIdAttrsHtml)
566+
done()
567+
})
568+
})

‎__test__/mock/json-element-mock-result.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ const codeHtml = "<code>Code template.</code>"
1515
const linkInPHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\">LINK</a>"
1616
const linkInPURLHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\" target=\"_blank\">LINK</a>"
1717
const styleinPHtml = "<p style=\"text-align:right;\">This is <span>second</span> <u>JSON</u> entry</p><p style=\"text-align:left;\"><a href=\"example.com\" target=\"_blank\">Example</a></p>"
18-
const plainTextHtmlWithClass = "<p class=\"class_p\"><span class=\"yellow\">abc</span><span class=\"blue\"><u>ghi</u></span><span class=\"orange\" id=\"blue\"><strong><em><u>Basic</u></em></strong></span><h1><span class=\"purple\">abc</span></h1></p>"
19-
const plainTextHtmlWithId = "<p class=\"class_p\"><span id=\"blue\"><em><u>data</u></em></span></p>"
20-
18+
const plainTextHtmlWithClass = "<p class=\"class_p\"><span class=\"yellow\">abc</span><u><span class=\"blue\">ghi</span></u><strong><em><u><span class=\"orange\" id=\"blue\">Basic</span></u></em></strong><h1><span class=\"purple\">abc</span></h1></p>"
19+
const plainTextHtmlWithId = "<p class=\"class_p\"><em><u><span id=\"blue\">data</span></u></em></p>"
20+
const htmlTextIdInAttrs = "<p id=\"id_p\"><em><u>data</u></em></p>"
21+
const classAndIdAttrsHtml = "<a class=\"class_a\" id=\"id_p\" href=\"LINK.com\">link</a><img class=\"class_img\" id=\"id_img\" src=\"https://dummyImage.url/Donald.jog.png\" /><h1 class=\"class_h1\" id=\"id_h1\">heading1</h1><h2 class=\"class_h2\" id=\"id_h2\">heading2</h2><h3 class=\"class_h3\" id=\"id_h3\">heading3</h3><h4 class=\"class_h4\" id=\"id_h4\">heading4</h4><h5 class=\"class_h5\" id=\"id_h5\">heading5</h5><h6 class=\"class_h6\" id=\"id_h6\">heading6</h6>"
2122
export {
2223
h1Html,
2324
h2Html,
@@ -37,5 +38,7 @@ export {
3738
unorderListHtml,
3839
styleinPHtml,
3940
plainTextHtmlWithClass,
40-
plainTextHtmlWithId
41+
plainTextHtmlWithId,
42+
htmlTextIdInAttrs,
43+
classAndIdAttrsHtml
4144
}

‎__test__/mock/json-element-mock.ts‎

Lines changed: 132 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1141,6 +1141,135 @@ const entryJsonRteWithId = {
11411141
}
11421142
}
11431143

1144+
const entryJsonRteWithIdinAttrs = {
1145+
"uid": "",
1146+
"_version": 3,
1147+
"locale": "en-us",
1148+
"json_rte": {
1149+
"type": "doc",
1150+
"attrs": {},
1151+
"uid": "",
1152+
"children": [
1153+
{
1154+
"type": "p",
1155+
"attrs": {id: "id_p"},
1156+
"uid": "",
1157+
"children": [
1158+
{
1159+
"text": "data",
1160+
"bold": false,
1161+
"underline": true,
1162+
"italic": true
1163+
}
1164+
]
1165+
}
1166+
],
1167+
"_version": 3
1168+
}
1169+
}
1170+
1171+
const jsonRteClassAndIdAttrs = {
1172+
"uid": "",
1173+
"_version": 3,
1174+
"locale": "en-us",
1175+
"json_rte": {
1176+
"type": "doc",
1177+
"attrs": {},
1178+
"uid": "",
1179+
"children": [
1180+
{
1181+
"type": "a",
1182+
"attrs": {"href": "LINK.com", class: "class_a", id: "id_p"},
1183+
"uid": "",
1184+
"children": [
1185+
{
1186+
"text": "link",
1187+
}
1188+
]
1189+
},
1190+
{
1191+
"type": "img",
1192+
"attrs": {
1193+
class: "class_img",
1194+
id: "id_img",
1195+
"src": "https://dummyImage.url/Donald.jog.png",
1196+
"width": 33.69418132611637,
1197+
"height": "auto",
1198+
"redactor-attributes": {
1199+
"asset_uid": "47f1aa5ae422cd1"
1200+
}},
1201+
"uid": "",
1202+
"children": [
1203+
{
1204+
"text": "",
1205+
}
1206+
]
1207+
},
1208+
{
1209+
"type": "h1",
1210+
"attrs": {class: "class_h1", id: "id_h1"},
1211+
"uid": "",
1212+
"children": [
1213+
{
1214+
"text": "heading1",
1215+
}
1216+
]
1217+
},
1218+
{
1219+
"type": "h2",
1220+
"attrs": {class: "class_h2", id: "id_h2"},
1221+
"uid": "",
1222+
"children": [
1223+
{
1224+
"text": "heading2",
1225+
}
1226+
]
1227+
},
1228+
{
1229+
"type": "h3",
1230+
"attrs": {class: "class_h3", id: "id_h3"},
1231+
"uid": "",
1232+
"children": [
1233+
{
1234+
"text": "heading3",
1235+
}
1236+
]
1237+
},
1238+
{
1239+
"type": "h4",
1240+
"attrs": {class: "class_h4", id: "id_h4"},
1241+
"uid": "",
1242+
"children": [
1243+
{
1244+
"text": "heading4",
1245+
}
1246+
]
1247+
},
1248+
{
1249+
"type": "h5",
1250+
"attrs": {class: "class_h5", id: "id_h5"},
1251+
"uid": "",
1252+
"children": [
1253+
{
1254+
"text": "heading5",
1255+
}
1256+
]
1257+
},
1258+
{
1259+
"type": "h6",
1260+
"attrs": {class: "class_h6", id: "id_h6"},
1261+
"uid": "",
1262+
"children": [
1263+
{
1264+
"text": "heading6",
1265+
}
1266+
]
1267+
}
1268+
],
1269+
"_version": 3
1270+
}
1271+
}
1272+
11441273
export {
11451274
h1Json,
11461275
h2Json,
@@ -1169,5 +1298,7 @@ export {
11691298
entryReferenceBlockJson,
11701299
entryReferenceInlineJson,
11711300
entryJsonRteWithClass,
1172-
entryJsonRteWithId
1301+
entryJsonRteWithId,
1302+
entryJsonRteWithIdinAttrs,
1303+
jsonRteClassAndIdAttrs
11731304
}

‎__test__/reference-to-html.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ describe('Reference Node To HTML', () => {
157157
const node = assetReferenceJson.children[0] as unknown as Node
158158

159159
const resultHTML = referenceToHTML(node, defaultNodeOption)
160-
expect(resultHTML).toEqual('<img src="https://image.url/11.jpg" />')
160+
expect(resultHTML).toEqual('<img id=\"sdf\" src="https://image.url/11.jpg" />')
161161
done()
162162
})
163163

‎src/Models/metadata-model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface Metadata {
1313
export interface Attributes {
1414
type?: 'entry' | 'asset',
1515
class?: string,
16+
id?: string,
1617
[key: string]: any,
1718
'sys-style-type'?: string,
1819
}

‎src/helper/enumerate-entries.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ export function enumerateContents(
4343

4444
export function textNodeToHTML(node: TextNode, renderOption: RenderOption): string {
4545
let text = node.text
46+
if (node.classname || node.id) {
47+
text = (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id)
48+
}
4649
if (node.break) {
4750
text = (renderOption[MarkType.BREAK] as RenderMark)(text)
4851
}
@@ -67,9 +70,6 @@ export function textNodeToHTML(node: TextNode, renderOption: RenderOption): stri
6770
if (node.bold) {
6871
text = (renderOption[MarkType.BOLD] as RenderMark)(text)
6972
}
70-
if (node.classname || node.id) {
71-
text = (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id)
72-
}
7373
return text
7474
}
7575
export function referenceToHTML(node: Node,

‎src/options/default-node-options.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,81 +8,81 @@ export const defaultNodeOption: RenderOption = {
88
return ``
99
},
1010
[NodeType.PARAGRAPH]:(node: Node, next: Next) => {
11-
return `<p${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</p>`
11+
return `<p${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</p>`
1212
},
1313
[NodeType.LINK]:(node: Node, next: Next) => {
1414
if (node.attrs.target) {
15-
return `<a${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``} href="${node.attrs.href || node.attrs.url}" target="${node.attrs.target}">${next(node.children)}</a>`
15+
return `<a${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${node.attrs.href || node.attrs.url}" target="${node.attrs.target}">${next(node.children)}</a>`
1616
}
17-
return `<a${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``} href="${node.attrs.href || node.attrs.url}">${next(node.children)}</a>`
17+
return `<a${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${node.attrs.href || node.attrs.url}">${next(node.children)}</a>`
1818
},
1919
[NodeType.IMAGE]:(node: Node, next: Next) => {
20-
return `<img${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``} src="${node.attrs.src || node.attrs.url}" />${next(node.children)}`
20+
return `<img${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${node.attrs.src || node.attrs.url}" />${next(node.children)}`
2121
},
2222
[NodeType.EMBED]:(node: Node, next: Next) => {
23-
return `<iframe${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``} src="${node.attrs.src || node.attrs.url}">${next(node.children)}</iframe>`
23+
return `<iframe${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${node.attrs.src || node.attrs.url}">${next(node.children)}</iframe>`
2424
},
2525
[NodeType.HEADING_1]:(node: Node, next: Next) => {
26-
return `<h1${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h1>`
26+
return `<h1${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h1>`
2727
},
2828
[NodeType.HEADING_2]:(node: Node, next: Next) => {
29-
return `<h2${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h2>`
29+
return `<h2${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h2>`
3030
},
3131
[NodeType.HEADING_3]:(node: Node, next: Next) => {
32-
return `<h3${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h3>`
32+
return `<h3${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h3>`
3333
},
3434
[NodeType.HEADING_4]:(node: Node, next: Next) => {
35-
return `<h4${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h4>`
35+
return `<h4${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h4>`
3636
},
3737
[NodeType.HEADING_5]:(node: Node, next: Next) => {
38-
return `<h5${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h5>`
38+
return `<h5${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h5>`
3939
},
4040
[NodeType.HEADING_6]:(node: Node, next: Next) => {
41-
return `<h6${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</h6>`
41+
return `<h6${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</h6>`
4242
},
4343
[NodeType.ORDER_LIST]:(node: Node, next: Next) => {
44-
return `<ol${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</ol>`
44+
return `<ol${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</ol>`
4545
},
4646
[NodeType.UNORDER_LIST]:(node: Node, next: Next) => {
47-
return `<ul${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</ul>`
47+
return `<ul${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</ul>`
4848
},
4949
[NodeType.LIST_ITEM]:(node: Node, next: Next) => {
50-
return `<li${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</li>`
50+
return `<li${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</li>`
5151
},
5252
[NodeType.HR]:(node: Node, next: Next) => {
5353
return `<hr>`
5454
},
5555
[NodeType.TABLE]:(node: Node, next: Next) => {
56-
return `<table${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</table>`
56+
return `<table${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</table>`
5757
},
5858
[NodeType.TABLE_HEADER]:(node: Node, next: Next) => {
59-
return `<thead${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</thead>`
59+
return `<thead${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</thead>`
6060
},
6161
[NodeType.TABLE_BODY]:(node: Node, next: Next) => {
62-
return `<tbody${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</tbody>`
62+
return `<tbody${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</tbody>`
6363
},
6464
[NodeType.TABLE_FOOTER]:(node: Node, next: Next) => {
65-
return `<tfoot${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</tfoot>`
65+
return `<tfoot${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</tfoot>`
6666
},
6767
[NodeType.TABLE_ROW]:(node: Node, next: Next) => {
68-
return `<tr${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</tr>`
68+
return `<tr${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</tr>`
6969
},
7070
[NodeType.TABLE_HEAD]:(node: Node, next: Next) => {
71-
return `<th${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</th>`
71+
return `<th${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</th>`
7272
},
7373
[NodeType.TABLE_DATA]:(node: Node, next: Next) => {
74-
return `<td${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</td>`
74+
return `<td${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</td>`
7575
},
7676
[NodeType.BLOCK_QUOTE]:(node: Node, next: Next) => {
77-
return `<blockquote${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</blockquote>`
77+
return `<blockquote${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</blockquote>`
7878
},
7979
[NodeType.CODE]:(node: Node, next: Next) => {
80-
return `<code${node.attrs.class ? ` class="${node.attrs.class}"` : ``}>${next(node.children)}</code>`
80+
return `<code${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</code>`
8181
},
8282

8383
['reference']:(node: Node, next: Next) => {
8484
if (node.attrs.type === 'asset') {
85-
return `<img${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``} src="${node.attrs['asset-link']}" />`
85+
return `<img${addStyleAttrs(node.attrs.style)}${node.attrs.class ? ` class="${node.attrs.class}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${node.attrs['asset-link']}" />`
8686
}
8787
return ``
8888
},

0 commit comments

Comments
 (0)