Troubleshooting serializer for text and headings in PortableText component
13 replies
Last updated: May 4, 2022
A
Hi again, trying to write a serializer and can't figure out how to handle pure text.It looks like pure text is of type "span" from my console.logging, but I can't get my serialier to actually do anything with span.
Any suggestions?
const serializer = {
types: {
figure: ({ value }) => <Image data={value} />,
span: ({ value }) => <Text fontSize="8em">..</Text>,
// Headings are also not working ):
block(props) {
switch (props.node.style) {
case "h1":
return <Text fontSize="8em">..</Text>;
case "h2":
return <Text fontSize="8em">..</Text>;
case "span":
return (
<Text fontSize="12em">
Should span be here instead? Still not working though
</Text>
);
}
},
},
const Content = (props) => {
return <PortableText value={props.value} components={serializer} />;
};
};May 4, 2022, 9:21 PM
You’re checking against
node.stylein your switch so I think you want
normalinstead of
span.
May 4, 2022, 9:35 PM
A
is checking against node.style the preffered method? Also having some issues with headings
May 4, 2022, 9:38 PM
A
Tried my hand at
With no success
const serializer = {
types: {
figure: ({ value }) => <Image data={value} />,
// Headings are also not working ):
block(props) {
switch (props.node.style) {
case "h1":
return <Text fontSize="8em">NOT WORKING h1</Text>;
case "h2":
return <Text fontSize="8em">NOT WORKING h2</Text>;
case "normal":
return <Text fontSize="12em">NOT WORKING TEXT </Text>;
}
},
}May 4, 2022, 9:39 PM
That’s how it’s done in the package docs , at least.
May 4, 2022, 9:39 PM
A
If sanity does it it's good enough for me. Now I just need to get it to work
May 4, 2022, 9:41 PM
Are the headings working or are they not either?
May 4, 2022, 9:42 PM
A
Only my figure component is working, nothing else (nothing else includes the headings)
May 4, 2022, 9:43 PM
A
Using @portabletext/react btw
May 4, 2022, 9:47 PM
Oh, sorry. I thought I saw you using serializers and blocks props. I have something to take care of now but will take another look a bit later.
May 4, 2022, 9:50 PM
A
the only docs on how to serializer normal text and headings were for the "old" ways I guess.
May 4, 2022, 9:52 PM
A
Tried updating the code, still got the same issue
import { PortableText } from "@portabletext/react";
import { Text } from "@chakra-ui/react";
import Image from "../components/image";
const components = {
block: {
figure: ({ value }) => <Image data={value} />,
h1: ({children}) => <Text as="h1" fontSize="8em">{children}</Text>,
h2: ({children}) => <Text as="h2" fontSize="12em">{children} test</Text>,
normal: ({children}) => <Text fontSize="1em">{children}</Text>,
},
};
const Content = (props) => {
return <PortableText value={props.value} components={components} />;
};
export default Content;May 4, 2022, 9:55 PM
A
Got it working.IMO the PortableText method is way sexier than the block content method, ty sanity
🙏I just needed to figure it out
For anyone stumbling accross this
🙏I just needed to figure it out
For anyone stumbling accross this
const components = {
types: {
figure: ({ value }) => <Image data={value} />,
},
block: {
h1: ({children}) => <Text as="h1" fontSize="12em">{children}</Text>,
h2: ({children}) => <Text as="h2" fontSize="4em"> TEST{children}</Text>,
normal: ({children}) => <Text>{children}</Text>,
}
};
const Content = (props) => {
return <PortableText value={props.value} components={components} />;
};
export default Content;May 4, 2022, 10:03 PM
Great job, and that’s nice to hear! Thanks Andreas.
May 4, 2022, 11:40 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.