Merge branch 'master' into feature/use-module-bundler

storyblok · Sep 3, 2020 · fd61a81 · fd61a81
2 parents 1fb2aaf + f662676
commit fd61a81
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 22 deletions.
diff --git 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 `<p>Normal headline</p><h3><span class="margin-bottom-fdsafdsada">Styled headline</span></h3>` it will render `<p>Normal headline</p><h3 class="margin-bottom-fdsafdsada">Styled headline</h3>`.
+
+~~~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
@@ -2,11 +2,11 @@ import defaultHtmlSerializer from './schema'
 
 const escapeHTML = function(string) {
   const htmlEscapes = {
-    '&': '&amp',
-    '<': '&lt',
-    '>': '&gt',
-    '"': '&quot',
-    "'": '&#39'
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
   }
 
   const reUnescapedHtml = /[&<>"']/g

diff --git 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: '<p>Footer data</p>',
-          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": "<p>Just a tag</p>",
+                    "type": "text"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "list_item",
+            "content": [
+              {
+                "type": "paragraph",
+                "content": [
+                  {
+                    "text": "<p>Dummy & test</p>",
+                    "type": "text"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
       }
     ]
   }
 
-  expect(resolver.render(doc)).toBe('<p>&ltp&gtFooter data&lt/p&gt</p><p><b>Another footer data</b></p>')
+  expect(resolver.render(doc)).toBe('<p>Simple phrases to test escapes:</p><ul><li><p>A dummy apostrophe&#39;s test</p></li><li><p>&lt;p&gt;Just a tag&lt;/p&gt;</p></li><li><p>&lt;p&gt;Dummy &amp; test&lt;/p&gt;</p></li></ul>')
 })
 
 test('link to generate a tag with achor', () => {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -21,6 +21,7 @@ declare global {
       callback: (payload?: StoryblokEventPayload) => void
     ) => void
     addComments: (tree: StoryblokComponent<string>, storyId: string) => StoryblokComponent<string>
+    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
+export default Storyblok