diff --git a/README.md b/README.md
index 5f6eb7c9..b24042ee 100755
--- a/README.md
+++ b/README.md
@@ -418,6 +418,74 @@ let client = new StoryblokClient({
client.richTextResolver.render(data)
~~~
+If you just want to change the way a specific tag is rendered you can import the default schema and extend it. Following an example that will render headlines with classes:
+
+Instead of `
Normal headline
Styled headline
` it will render `Normal headline
Styled headline
`.
+
+~~~javascript
+
+const RichTextResolver = require('storyblok-js-client/dist/richTextResolver')
+const MySchema = require('storyblok-js-client/dist/schema')
+
+MySchema.nodes.heading = function(node) {
+ let attrs = {}
+
+ if (node.content &&
+ node.content.length === 1 &&
+ node.content[0].marks &&
+ node.content[0].marks.length === 1 &&
+ node.content[0].marks[0].type === 'styled') {
+ attrs = node.content[0].marks[0].attrs
+ delete node.content[0].marks
+ }
+
+ return {
+ tag: [{
+ tag: `h${node.attrs.level}`,
+ attrs: attrs
+ }]
+ }
+}
+
+let rteResolver = new RichTextResolver(MySchema)
+let rendered = rteResolver.render({
+ "content": [
+ {
+ "content": [
+ {
+ "text": "Normal headline",
+ "type": "text"
+ }
+ ],
+ "type": "paragraph"
+ },
+ {
+ "attrs": {
+ "level": 3
+ },
+ "content": [
+ {
+ "marks": [
+ {
+ "attrs": {
+ "class": "margin-bottom-fdsafdsada"
+ },
+ "type": "styled"
+ }
+ ],
+ "text": "Styled headline",
+ "type": "text"
+ }
+ ],
+ "type": "heading"
+ }
+ ],
+ "type": "doc"
+})
+
+console.log(rendered)
+~~~
+
## Contribution
Fork me on [Github](https://github.com/storyblok/storyblok-js-client).
diff --git a/source/richTextResolver.js b/source/richTextResolver.js
index fcb52f0a..b98ebd39 100644
--- a/source/richTextResolver.js
+++ b/source/richTextResolver.js
@@ -2,11 +2,11 @@ import defaultHtmlSerializer from './schema'
const escapeHTML = function(string) {
const htmlEscapes = {
- '&': '&',
- '<': '<',
- '>': '>',
- '"': '"',
- "'": '''
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
}
const reUnescapedHtml = /[&<>"']/g
diff --git a/tests/richTextResolver.test.js b/tests/richTextResolver.test.js
index 851aefa1..663a8cd5 100644
--- a/tests/richTextResolver.test.js
+++ b/tests/richTextResolver.test.js
@@ -161,28 +161,68 @@ test('code_block to generate a pre and code tag', () => {
test('escape html marks from text', () => {
const doc = {
- type: 'doc',
- content: [{
- type: 'paragraph',
- content: [{
- text: 'Footer data
',
- type: 'text'
- }]
+ "type": "doc",
+ "content": [
+ {
+ "type": "paragraph",
+ "content": [
+ {
+ "text": "Simple phrases to test escapes:",
+ "type": "text"
+ }
+ ]
},
{
- type: 'paragraph',
- content: [{
- text: 'Another footer data',
- type: 'text',
- marks: [{
- type: 'bold'
- }]
- }]
+ "type": "bullet_list",
+ "content": [
+ {
+ "type": "list_item",
+ "content": [
+ {
+ "type": "paragraph",
+ "content": [
+ {
+ "text": "A dummy apostrophe's test",
+ "type": "text"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "list_item",
+ "content": [
+ {
+ "type": "paragraph",
+ "content": [
+ {
+ "text": "Just a tag
",
+ "type": "text"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "list_item",
+ "content": [
+ {
+ "type": "paragraph",
+ "content": [
+ {
+ "text": "Dummy & test
",
+ "type": "text"
+ }
+ ]
+ }
+ ]
+ }
+ ]
}
]
}
- expect(resolver.render(doc)).toBe('<p>Footer data</p>
Another footer data
')
+ expect(resolver.render(doc)).toBe('Simple phrases to test escapes:
')
})
test('link to generate a tag with achor', () => {
diff --git a/types/index.d.ts b/types/index.d.ts
index 4ac465e5..13717f35 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -21,6 +21,7 @@ declare global {
callback: (payload?: StoryblokEventPayload) => void
) => void
addComments: (tree: StoryblokComponent, storyId: string) => StoryblokComponent
+ resolveRelations: (story: any, resolve: string[], callback: (storyContent: any) => void) => void
}
interface Window {
storyblok: StoryblokBridge
@@ -193,4 +194,4 @@ declare class Storyblok {
setComponentResolver(renderFunction: (component: string, data: any) => void): void
}
-export default Storyblok
\ No newline at end of file
+export default Storyblok