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