add link schemas in Sanity Studio

sanity/schemas/post.js

@@ -1,40 +1,74 @@
 export const postSchema = {
-	name: "blog",
-	title: "Blog",
-	type: "document",
-	fields: [
-		{
-			name: "title",
-			type: "string",
-			title: "Title"
-		},
-		{
-			name: "slug",
-			type: "slug",
-			title: "Slug",
-			options: { source: "title" }
-		},
-		{
-			name: "titleImage",
-			type: "image",
-			title: "Title image"
-		},
-		{
-			name: "smallDescription",
-			type: "text",
-			title: "Small Description"
-		},
-		{
-			name: "content",
-			type: "array",
-			title: "Content",
-			of: [{ type: "block" }]
-		},
-		{
-			name: "tags",
-			type: "array",
-			title: "Tags",
-			of: [{ type: "reference", to: { type: "tags" } }]
-		},
-	],
-}
+  name: 'blog',
+  title: 'Blog',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      type: 'string',
+      title: 'Title',
+    },
+    {
+      name: 'slug',
+      type: 'slug',
+      title: 'Slug',
+      options: {source: 'title'},
+    },
+    {
+      name: 'titleImage',
+      type: 'image',
+      title: 'Title image',
+    },
+    {
+      name: 'smallDescription',
+      type: 'text',
+      title: 'Small Description',
+    },
+    {
+      name: 'content',
+      type: 'array',
+      title: 'Content',
+      of: [
+        {
+          type: 'block',
+          marks: {
+            decorators: [
+              {title: 'Strong', value: 'strong'},
+              {title: 'Emphasis', value: 'em'},
+            ],
+            annotations: [
+              {
+                name: 'link',
+                type: 'object',
+                title: 'External link',
+                fields: [
+                  {
+                    name: 'url',
+                    type: 'url',
+                    title: 'URL',
+                    validation: (Rule) =>
+                      Rule.uri({
+                        allowRelative: true,
+                        scheme: ['http', 'https', 'mailto', 'tel'],
+                      }),
+                  },
+                  {
+                    name: 'newWindow',
+                    type: 'boolean',
+                    title: 'Open in new window?',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: 'tags',
+      type: 'array',
+      title: 'Tags',
+      of: [{type: 'reference', to: {type: 'tags'}}],
+    },
+  ],
+}

src/lib/components/postContent/Link.svelte

@@ -2,10 +2,12 @@
 	export let portableText
 
 	$: ({ value } = portableText)
+	$: finalUrl =
+		value.url.startsWith("http://") || value.url.startsWith("https://") ? value.url : `https://${value.url}`
 </script>
 
 <div>
-	<a href={value.url} class="link" target="_blank">
+	<a href={finalUrl} class="link" target="_blank" rel="noopener noreferrer">
 		<slot />
 	</a>
 </div>
@@ -15,4 +17,8 @@
 		text-decoration: underline solid var(--primary-color-orange) 2px;
 		text-underline-offset: 5px;
 	}
+
+	.link:hover {
+		text-decoration: underline solid var(--primary-color-orange) 3px;
+	}
 </style>

src/routes/posts/[slug]/+page.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import Icon from "@iconify/svelte"
 	import { formatDate } from "$lib/helpers/date"
 	import { urlFor } from "$lib/sanity/image"
@@ -7,7 +7,9 @@
 	import CustomParagraph from "$lib/components/postContent/CustomParagraph.svelte"
 	import Link from "$lib/components/postContent/Link.svelte"
 
-	export const postContent = {
+	export let data
+
+	const postContent = {
 		marks: {
 			link: Link
 		},
@@ -16,8 +18,6 @@
 			h2: CustomHeading
 		}
 	}
-
-	export let data
 </script>
 
 <svelte:head>