Merge pull request #53 from storyblok/feature/anchor-links

Feature/anchor links

Author: onefriendaday

source/schema.js

@@ -115,6 +115,11 @@ module.exports = {
         attrs.href = `mailto:${attrs.href}`
       }
 
+      if (attrs.anchor) {
+        attrs.href = `${attrs.href}#${attrs.anchor}`
+        delete attrs.anchor
+      }
+
       return {
         tag: [{
           tag: 'a',

tests/richTextResolver.test.js

@@ -175,3 +175,174 @@ test('escape html marks from text', () => {
 
   expect(resolver.render(doc)).toBe('<p>&ltp&gtFooter data&lt/p&gt</p><p><b>Another footer data</b></p>')
 })
+
+test('link to generate a tag with achor', () => {
+  const doc = {
+    type: 'doc',
+    content: [
+      {
+        text: 'link text',
+        type: 'text',
+        marks: [
+          {
+            type: 'link',
+            attrs: {
+              href: '/link',
+              target: '_blank',
+              uuid: '300aeadc-c82d-4529-9484-f3f8f09cf9f5',
+              anchor: 'anchor-text'
+            }
+          }
+        ]
+      }
+    ]
+  }
+
+  const result = resolver.render(doc)
+  const expected = '<a href="/link#anchor-text" target="_blank" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5">link text</a>'
+
+  expect(result).toBe(expected)
+})
+
+test('Complex and immutability test', () => {
+  const doc = {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content: [
+          {
+            text: "Lorem",
+            type: "text",
+            marks: [
+              {
+                type: "bold"
+              }
+            ]
+          },
+          {
+            text: " ipsum, ",
+            type: "text"
+          },
+          {
+            text: "dolor",
+            type: "text",
+            marks: [
+              {
+                type: "strike"
+              }
+            ]
+          },
+          {
+            text: " sit amet ",
+            type: "text"
+          },
+          {
+            text: "consectetur",
+            type: "text",
+            marks: [
+              {
+                type: "underline"
+              }
+            ]
+          },
+          {
+            text: " adipisicing elit. ",
+            type: "text"
+          },
+          {
+            text: "Eos architecto",
+            type: "text",
+            marks: [
+              {
+                "type": "code"
+              }
+            ]
+          },
+          {
+            text: " asperiores temporibus ",
+            type: "text"
+          },
+          {
+            text: "suscipit harum ",
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: {
+                  href: "/test/our-service",
+                  uuid: "931e04b7-f701-4fe4-8ec0-78be0bee8809",
+                  anchor: "anchor-text",
+                  target: "_blank",
+                  linktype: "story"
+                }
+              }
+            ]
+          },
+          {
+            text: "ut, fugit, cumque ",
+            type: "text"
+          },
+          {
+            text: "molestiae ",
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: {
+                  href: "asdfsdfasf",
+                  uuid: null,
+                  anchor: null,
+                  target: "_blank",
+                  linktype: "url"
+                }
+              }
+            ]
+          },
+          {
+            text: "ratione non adipisci, ",
+            type: "text"
+          },
+          {
+            text: "facilis",
+            type: "text",
+            marks: [
+              {
+                "type": "italic"
+              }
+            ]
+          },
+          {
+            text: " inventore optio dolores. Rem, perspiciatis ",
+            type: "text"
+          },
+          {
+            text: "deserunt!",
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: {
+                  href: "/home",
+                  uuid: "fc6a453f-9aa6-4a00-a22d-49c5878f7983",
+                  anchor: null,
+                  target: "_self",
+                  linktype: "story"
+                }
+              }
+            ]
+          },
+          {
+            text: " Esse, maiores!",
+            type: "text"
+          }
+        ]
+      }
+    ]
+  }
+
+  const result = resolver.render(doc)
+  const expected = `<p><b>Lorem</b> ipsum, <strike>dolor</strike> sit amet <u>consectetur</u> adipisicing elit. <code>Eos architecto</code> asperiores temporibus <a href="/test/our-service#anchor-text" uuid="931e04b7-f701-4fe4-8ec0-78be0bee8809" target="_blank" linktype="story">suscipit harum </a>ut, fugit, cumque <a href="asdfsdfasf" target="_blank" linktype="url">molestiae </a>ratione non adipisci, <i>facilis</i> inventore optio dolores. Rem, perspiciatis <a href="/home" uuid="fc6a453f-9aa6-4a00-a22d-49c5878f7983" target="_self" linktype="story">deserunt!</a> Esse, maiores!</p>`
+
+  expect(result).toBe(expected)
+})