Merge pull request #490 from storyblok/task/int-841

feat(int 841): Adding support for anchor in the richtext resolver
storyblok · Mar 16, 2023 · 93a94a9 · 93a94a9
2 parents 4756f33 + d2e9efe
commit 93a94a9
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 1 deletion.
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -199,6 +199,7 @@ export interface ISbError {
 }
 
 export interface ISbNode extends Element {
+	content: object[]
 	attrs: {
 		anchor?: string
 		body: Array<ISbComponentType<any>>

diff --git a/src/schema.ts b/src/schema.ts
@@ -55,6 +55,7 @@ const heading: NodeSchema = (node: ISbNode) => {
 		tag: `h${node.attrs.level}`,
 	}
 }
+
 const image: NodeSchema = (node: ISbNode) => {
 	return {
 		singleTag: [
@@ -157,6 +158,7 @@ const link: MarkSchema = (node: ISbNode) => {
 		],
 	}
 }
+
 const styled: MarkSchema = (node: ISbNode) => {
 	return {
 		tag: [
@@ -180,6 +182,17 @@ const superscript: MarkSchema = () => {
 	}
 }
 
+const anchor: MarkSchema = (node: ISbNode) => {
+	return {
+		tag: [
+			{
+				tag: 'span',
+				attrs: node.attrs,
+			},
+		],
+	}
+}
+
 const highlight: MarkSchema = (node: ISbNode) => {
 	const attrs = {
 		['style']: `background-color:${node.attrs.color};`,
@@ -233,6 +246,7 @@ export default {
 		styled,
 		subscript,
 		superscript,
+		anchor,
 		highlight,
 		textStyle,
 	},

diff --git a/tests/constants/richTextResolver.js b/tests/constants/richTextResolver.js
@@ -352,6 +352,60 @@ export const LONG_TEXT_WITH_LINKS_SUB_SUP_SCRIPTS = {
   ]
 }
 
+export const PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE = {
+  "type": "doc",
+  "content": [
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "a long text with a super nice ",
+          "type": "text"
+        },
+        {
+          "text": "anchor here",
+          "type": "text",
+          "marks": [
+            {
+              "type": "anchor",
+              "attrs": {
+                "id": "test2"
+              }
+            }
+          ]
+        },
+        {
+          "text": ", and at the end of the text is a normal tag",
+          "type": "text"
+        }
+      ]
+    }
+  ]
+}
+
+export const PARAGRAPH_WITH_ANCHOR = {
+  "type": "doc",
+  "content": [
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "Paragraph with anchor in the midle",
+          "type": "text",
+          "marks": [
+            {
+              "type": "anchor",
+              "attrs": {
+                "id": "test"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
 export const TEXT_COLOR_DATA = {
   type: 'doc',
   content: [

diff --git a/tests/richTextResolver.test.js b/tests/richTextResolver.test.js
@@ -11,6 +11,8 @@ import {
 	CUSTOM_ATTRIBUTE_DATA,
 	LONG_TEXT_WITH_LINKS_SUB_SUP_SCRIPTS,
 	LINK_WITH_ANCHOR_FOR_CUSTOM_SCHEMA,
+	PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE,
+	PARAGRAPH_WITH_ANCHOR,
 	TEXT_COLOR_DATA,
 	HIGLIGHT_COLOR_DATA,
 	BOLD_TEXT,
@@ -325,13 +327,60 @@ test('should render a text with links, subscripts and superscripts', () => {
 	expect(result).toBe(expected)
 })
 
+test('should render a h1 title with a anchor in the middle of the text', () => {
+	const sentenceWithAnchor = {
+		type: 'doc',
+		content: [
+			{
+				type: 'heading',
+				attrs: {
+					level: '1'
+				},
+				content: [
+					{
+						text: 'Title with ',
+						type: 'text'
+					},
+					{
+						text: 'Anchor',
+						type: 'text',
+						marks: [
+							{
+								type: 'anchor',
+								attrs: {
+									id: 'test1'
+								}
+							}
+						]
+					},
+					{
+						text: ' in the midle',
+						type: 'text'
+					}
+				]
+			}
+		]
+	}
+
+	const result = resolver.render(sentenceWithAnchor)
+	const expected = '<h1>Title with <span id="test1">Anchor</span> in the midle</h1>'
+	expect(result).toBe(expected)
+})
+
 test('should render a text with text color', () => {
 	const result = resolver.render(TEXT_COLOR_DATA)
 	const expected = '<span style="background-color:#E72929">Colored text</span>'
 
 	expect(result).toBe(expected)
 })
 
+test('should render a anchor in the text', () => {
+	const result = resolver.render(PARAGRAPH_WITH_ANCHOR)
+	const expected = '<p><span id="test">Paragraph with anchor in the midle</span></p>'
+
+	expect(result).toBe(expected)
+})
+
 test('should render a text with highlight color', () => {
 	const result = resolver.render(HIGLIGHT_COLOR_DATA)
 	const expected =
@@ -340,9 +389,16 @@ test('should render a text with highlight color', () => {
 	expect(result).toBe(expected)
 })
 
+test('should render a anchor in the middle of a text', () => {
+	const result = resolver.render(PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE)
+	const expected = '<p>a long text with a super nice <span id="test2">anchor here</span>, and at the end of the text is a normal tag</p>'
+
+	expect(result).toBe(expected)
+})
+
 test('should render a text with bold', () => {
 	const result = resolver.render(BOLD_TEXT)
 	const expected = '<b>Lorem Ipsum</b>'
 
 	expect(result).toBe(expected)
-})
+})