0.1.2 • Published 3 years ago
@emagining/sveltekit-portable-text v0.1.2
Portable Text for Svelte & SvelteKit
Provides a way to render Portable Text in Svelte applications.
Based on @arzidava/svelte-portable-text but removes the wrapping <div>
around blocks (paragraphs)
=> "Normal" text will be wrapped in <p> {paragraph} </p>
instead of <div><span> {paragraph} </span></div>
Install
npm add --save-dev @emagining/sveltekit-portable-text
Usage
<script>
import BlockContent from '@emagining/sveltekit-portable-text'
import Image from '$lib/Image.svelte'
import Link from '$lib/Link.svelte'
export let content;
export const customSerializers = {
types: {
image: props => {
return {
component: Image,
props: {
url: props.node.url,
},
};
},
},
marks: {
link: props => {
return {
component: Link,
props: props.mark,
};
},
},
};
</script>
<BlockContent blocks="{content}" serializers="{customSerializers}" />
Work in Progress
This package was created to serve my own needs. If you want to contribute I suggest you have a look at:
or open an issue or make a pull req.