Merge pull request #1 from liip-forks/main

feat(): Add link attributes from meta field
datocms · Sep 11, 2023 · 523aaf4 · 523aaf4
2 parents 7923c7a + 9654306
commit 523aaf4
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 5 deletions.
diff --git a/src/lib/components/StructuredText/__tests__/StructuredText.svelte.test.ts b/src/lib/components/StructuredText/__tests__/StructuredText.svelte.test.ts
@@ -12,7 +12,11 @@ import {
 
 import { StructuredText } from '../../..';
 
-import { heading, structuredTextWithBlocksAndLinks } from './__fixtures__/structuredText';
+import {
+	heading,
+	paragraphWithLink,
+	structuredTextWithBlocksAndLinks
+} from './__fixtures__/structuredText';
 
 import CustomSpan from './__fixtures__/CustomSpan.svelte';
 import IncreasedLevelHeading from './__fixtures__/IncreasedLevelHeading.svelte';
@@ -69,6 +73,16 @@ describe('StructuredText', () => {
 		});
 	});
 
+	describe('with a dast which has a link inside', () => {
+		describe('with default rules', () => {
+			it('renders the document', () => {
+				const { container } = render(StructuredText, { props: { data: paragraphWithLink } });
+
+				expect(container).toMatchSnapshot();
+			});
+		});
+	});
+
 	describe('with a dast with no links nor blocks', () => {
 		describe('with default rules', () => {
 			it('renders the document', () => {

diff --git a/src/lib/components/StructuredText/__tests__/__fixtures__/structuredText.ts b/src/lib/components/StructuredText/__tests__/__fixtures__/structuredText.ts
@@ -53,6 +53,45 @@ export const heading: StructuredText = {
 	}
 };
 
+export const paragraphWithLink: StructuredText = {
+	value: {
+		schema: 'dast',
+		document: {
+			type: 'root',
+			children: [
+				{
+					type: 'paragraph',
+					children: [
+						{
+							type: 'span',
+							value: 'This is a paragraph with a '
+						},
+						{
+							url: 'https://random.link',
+							type: 'link',
+							meta: [
+								{ id: 'rel', value: 'nofollow' },
+								{ id: 'foo', value: '123' },
+								{ id: 'target', value: '_blank' }
+							],
+							children: [
+								{
+									type: 'span',
+									value: 'very cool link'
+								}
+							]
+						},
+						{
+							type: 'span',
+							value: '. And the link has the target and the rel attributes set.'
+						}
+					]
+				}
+			]
+		}
+	}
+};
+
 export const structuredTextWithBlocksAndLinks: StructuredText<QuoteRecord, DocPageRecord> = {
 	value: {
 		schema: 'dast',

diff --git a/src/lib/components/StructuredText/__tests__/__snapshots__/StructuredText.svelte.test.ts.snap b/src/lib/components/StructuredText/__tests__/__snapshots__/StructuredText.svelte.test.ts.snap
@@ -111,6 +111,74 @@ exports[`StructuredText > with a dast including links and blocks > with missing
 
 exports[`StructuredText > with a dast including links and blocks > with missing links > raises an error 1`] = `"The Structured Text document contains an 'itemLink' node, but cannot find a record with ID 123 inside data.links!"`;
 
+exports[`StructuredText > with a dast which has a link inside > with default rules > renders the document 1`] = `
+<body>
+  <div>
+    <p>
+      This is a paragraph with a 
+       
+      
+      <!--&lt;Lines&gt;-->
+      
+      <!--&lt;Span&gt;-->
+      
+      
+      
+      <!--&lt;Node&gt;-->
+      <a
+        href="https://random.link"
+        rel="nofollow"
+        target="_blank"
+      >
+        very cool link
+         
+        
+        <!--&lt;Lines&gt;-->
+        
+        <!--&lt;Span&gt;-->
+        
+        
+        
+        <!--&lt;Node&gt;-->
+        
+        
+      </a>
+      <!--&lt;Link&gt;-->
+      
+      
+      
+      <!--&lt;Node&gt;-->
+      . And the link has the target and the rel attributes set.
+       
+      
+      <!--&lt;Lines&gt;-->
+      
+      <!--&lt;Span&gt;-->
+      
+      
+      
+      <!--&lt;Node&gt;-->
+      
+      
+    </p>
+    <!--&lt;Paragraph&gt;-->
+    
+    
+    
+    <!--&lt;Node&gt;-->
+    
+    
+    <!--&lt;Root&gt;-->
+    
+    
+    
+    <!--&lt;Node&gt;-->
+    
+    <!--&lt;StructuredText&gt;-->
+  </div>
+</body>
+`;
+
 exports[`StructuredText > with a dast with no links nor blocks > with custom rules > renders the document 1`] = `
 <body>
   <div>

diff --git a/src/lib/components/StructuredText/nodes/Link.svelte b/src/lib/components/StructuredText/nodes/Link.svelte
@@ -3,7 +3,22 @@
 
 	export let node: Link;
 
-	$: ({ url } = node);
+	$: ({ url, meta } = node);
+
+	let target: string | undefined = undefined;
+	$: {
+		const targetMetaEntry =  meta?.find((metaEntry) => metaEntry.id === 'target');
+		if (targetMetaEntry?.value) {
+			target = targetMetaEntry.value;
+		}
+	}
+	let rel: string | undefined = undefined;
+	$: {
+		const relMetaEntry =  meta?.find((metaEntry) => metaEntry.id === 'rel');
+		if (relMetaEntry?.value) {
+			rel = relMetaEntry.value;
+		}
+	}
 </script>
 
-<a href={url}><slot /></a>
+<a href={url} {target} {rel}><slot /></a>
diff --git a/src/routes/structured-text/+page.svelte b/src/routes/structured-text/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { isSpan } from 'datocms-structured-text-utils';
 
-	import { heading, paragraph } from '$lib/components/StructuredText/__tests__/__fixtures__/structuredText';
+	import { heading, paragraph, paragraphWithLink } from '$lib/components/StructuredText/__tests__/__fixtures__/structuredText';
 
 	import { StructuredText } from '$lib';
 	import CustomSpan from '$lib/components/StructuredText/__tests__/__fixtures__/CustomSpan.svelte';
@@ -15,4 +15,8 @@
 
 <hr />
 
-<StructuredText data={paragraph} components={[[isSpan, CustomSpan]]} />
+<StructuredText data={paragraph} components={[[isSpan, CustomSpan]]} />
+
+<hr />
+
+<StructuredText data={paragraphWithLink} />