Skip to content

Commit 740128d

Browse files
uttamukkojiuttamukkoji
committed
docs: 📝 Readme file update
Json to html function documentation added
1 parent 70d7e5c commit 740128d

File tree

2 files changed

+96
-27
lines changed

2 files changed

+96
-27
lines changed

‎README.md‎

Lines changed: 94 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,38 +25,49 @@ npm i @contentstack/utils
2525
Let’s learn how you can use Utils SDK to render embedded items.
2626

2727
### Create Render Option
28-
To render embedded items on the front-end, use the renderOptions function, and define the UI elements you want to show in the front-end of your website, as shown in the example below:
28+
To render embedded items on the front-end, use the renderOptions function, and define the UI elements you want to show in the front-end of your website, as shown in the example below:
2929
```js
3030
const renderOptions = {
31-
//to render block-type embedded items
31+
// to render Supercharged RTE NodeType content like paragraph, link, table, order list, un-order list and more.
32+
p: (node, next) => {
33+
`<p class='class-id'>${next(node.children)}</p>` // you will need to call next function with node children contents
34+
}
35+
h1: (node, next) => {
36+
`<h1 class='class-id'>${next(node.children)}</h1>` // you will need to call next function with node children contents
37+
}
38+
// to render Supercharged RTE MarkType content like bold, italic, underline, strickthrough, inlineCode, subscript, and superscript
39+
bold: (text) => {
40+
`<b>${next(node.children)}</b>`
41+
}
42+
// to render block-type embedded items
3243
block: {
33-
'product': (entry, metadata) => {
34-
`<div>
35-
<h2 >${entry.title}</h2>
36-
<img src=${entry.product_image.url} alt=${entry.product_image.title}/>
37-
<p>${entry.price}</p>
38-
</div>`
44+
'product': (item, metadata) => {
45+
`<div>
46+
<h2 >${item.title}</h2>
47+
<img src=${item.product_image.url} alt=${item.product_image.title}/>
48+
<p>${item.price}</p>
49+
</div>`
3950
},
40-
//to render the default
41-
'$default': (entry, metadata) => {
42-
`<div>
43-
<h2>${entry.title}</h2>
44-
<p>${ntry.description}</p>
45-
</div>`
51+
// to render the default
52+
'$default': (item, metadata) => {
53+
`<div>
54+
<h2>${item.title}</h2>
55+
<p>${item.description}</p>
56+
</div>`
4657
}
4758
},
48-
//to display inline embedded items
59+
// to display inline embedded items
4960
inline: {
50-
'$default': (entry) => {
51-
`<span><b>${entry.title}</b> - ${entry.description}</span>`
52-
}
61+
'$default': (item, metadata) => {
62+
`<span><b>${item.title}</b> - ${item.description}</span>`
63+
}
5364
},
54-
//to display embedded items inserted via link
55-
link: (entry, metadata) => {
65+
// to display embedded items inserted via link
66+
link: (item, metadata) => {
5667
`<a href="${metadata.attributes.href}">${metadata.text}</a>`
5768
},
5869
// to display assets
59-
display: (asset, metadata) => {
70+
display: (item, metadata) => {
6071
`<img src=${metadata.attributes.src} alt=${metadata.alt} />`
6172
}
6273
}
@@ -66,7 +77,8 @@ const renderOptions = {
6677
Contentstack Utils SDK lets you interact with the Content Delivery APIs and retrieve embedded items from the RTE field of an entry.
6778

6879
### Fetch Embedded Item(s) from a Single Entry
69-
To get an embedded item of a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use the includeEmbeddedItems and Contentstack.Utils.render functions as shown below:
80+
#### Render HTML RTE Embedded object
81+
To get an embedded item of a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use the `includeEmbeddedItems` and `Contentstack.Utils.render` functions as shown below:
7082
```js
7183
import * as Contentstack from 'contentstack'
7284
const stack = Contentstack.Stack({
@@ -88,9 +100,35 @@ If you have multiple RTE fields in an entry and want to fetch the embedded items
88100
Refer to the example code below:
89101
```js
90102
//code to render embedded item from an RTE field and from another RTE field nested within a group field
91-
Contentstack.Utils.render({ entry, path: ["rte_fieldUid", "group.rtefieldUID"], renderOption })
103+
Contentstack.Utils.render({ entry, path: ["rte_fieldUid", "group.rteFieldUID"], renderOption })
92104
```
105+
106+
#### Render Supercharged RTE contents
107+
To get a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHtml` function as shown below:
108+
```js
109+
import * as Contentstack from 'contentstack'
110+
const stack = Contentstack.Stack({
111+
api_key: '<API_KEY>',
112+
delivery_token: '<ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>',
113+
environment: '<ENVIRONMENT>'})
114+
115+
stack.ContentType('<CONTENT_TYPE_UID>')
116+
.Entry('<ENTRY_UID>')
117+
.toJSON()
118+
.fetch()
119+
.then(entry => {
120+
Contentstack.Utils.jsonToHtml({
121+
entry,
122+
path: ["rte_fieldUid", "group.rteFieldUID"],
123+
renderOption
124+
})
125+
})
126+
```
127+
> Node: Supercharged RTE also supports Embedded items to get all embedded items while fetching entry use `includeEmbeddedItems` function.
128+
93129
### Fetch Embedded Item(s) from Multiple Entries
130+
#### Render HTML RTE Embedded object
131+
94132
To get embedded items from multiple entries, you need to provide the content type UID. You can also use the path variable in case the entries have multiple RTE fields.
95133
```js
96134
import Contentstack from 'contentstack'
@@ -107,7 +145,38 @@ stack.ContentType('<CONTENT_TYPE_UID>')
107145
.find()
108146
.then(result => {
109147
result.forEach(entry => {
110-
Contentstack.Utils.render({ entry, path: ['rte', 'group.rtefieldUID'], renderOption })
148+
Contentstack.Utils.render({
149+
entry,
150+
path: ['rte', 'group.rteFieldUID'],
151+
renderOption
152+
})
111153
})
112154
})
113-
```
155+
```
156+
157+
#### Render Supercharged RTE contents
158+
To get a multiple entries, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHtml` function as shown below:
159+
```js
160+
import * as Contentstack from 'contentstack'
161+
const stack = Contentstack.Stack({
162+
api_key: '<API_KEY>',
163+
delivery_token: '<ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>',
164+
environment: '<ENVIRONMENT>'})
165+
166+
stack.ContentType('<CONTENT_TYPE_UID>')
167+
.Query()
168+
.toJSON()
169+
.where('title', '<entry_title_to_search>')
170+
.find()
171+
.then(result => {
172+
result.forEach(entry => {
173+
Contentstack.Utils.jsonToHtml({
174+
entry,
175+
path: ["rte_fieldUid", "group.rteFieldUID"],
176+
renderOption
177+
})
178+
})
179+
})
180+
```
181+
182+
> Node: Supercharged RTE also supports Embedded items to get all embedded items while fetching entry use `includeEmbeddedItems` function.

‎src/nodes/node.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { AnyNode } from "../json-to-html"
12
import { Attributes } from "../Models/metadata-model"
23
import NodeType from "./node-type"
3-
import TextNode from "./text"
44

55
export default class Node {
66
type: NodeType
77
attrs: Attributes
8-
children: Node[] | TextNode[]
8+
children: AnyNode[]
99
}

0 commit comments

Comments
 (0)