Custom Rich Text Serializer not able to get spans to work

Developing with Prismic
,
2

I found a solution that worked for me, so I wanted to post my solution in case anyone else was having an issue. I didn't think the instructions were clear at first, and the examples I saw were for Vue and React, not Svelte.

I ended up making svelte components for the different elements, e.g. heading3, list, hyperlink, etc. My richTextComponents.js file is used to export richTextComponents (key is the prismic name for the type and the value is my svelte component. Finally, in the BasicGrid slice I created, I removed {@html asHTML(slice.primary.grid_content)}, which was in the video explaining how to create a serializer, and used PrismicRichText with the components prop equaling my richTextComponents.

lib/components/richtext/Hyperlink.svelte

<script lang="ts">
	export let node: any;
	const linkResolver = (doc: any) => '/' + doc.uid;
	const url = linkResolver(node.data);
</script>

<a href="{node.data.url}" target="{node.data.target}">
	<slot />
</a>

lib/richTextComponents.js

import Heading3 from '$lib/components/richtext/Heading3.svelte';
import Hyperlink from '$lib/components/richtext/Hyperlink.svelte';
import List from '$lib/components/richtext/List.svelte';

export const richTextComponents = {
	heading3: Heading3,
	hyperlink: Hyperlink,
	list: List,
};

lib/slices/BasicGrid/index.svelte

<script>
	import { PrismicImage, PrismicRichText } from '@prismicio/svelte';
	import { richTextComponents } from '$lib/richTextComponents.js';

	/** @type {import("@prismicio/client").Content.BasicGridSlice} */
	export let slice;
</script>

<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}
				 class="section--description heal-process container mx-auto px-3 py-16 sm:px-0 relative bg-white">
	<div class="container mx-auto">
		<h2 class="mb-4 font-bold text-regal-blue text-4xl">{slice.primary.grid_title}</h2>
		<div class="grid grid-cols-2 place-content-evenly">
			<div id="description" class="pe-4">
				<!-- removed {@html asHTML(slice.primary.grid_content)} -->
				<PrismicRichText field={slice.primary.grid_content} components={richTextComponents} />.
			</div>
			<PrismicImage field={slice.primary.grid_image} class="block mx-auto" />
		</div>
	</div>
</section>
1 Like