Skip to content
Get help on Slack

Troubleshooting serializer for text and headings in PortableText component

13 replies
Last updated: May 4, 2022
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.


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} />;
};
};
Any suggestions?
May 4, 2022, 9:21 PM
You’re checking against 
node.style
in your switch so I think you want 
normal
instead of 
span
.
May 4, 2022, 9:35 PM
is checking against node.style the preffered method? Also having some issues with headings
May 4, 2022, 9:38 PM
Tried my hand at
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>;
      }
    },
  }
With no success
May 4, 2022, 9:39 PM
That’s how it’s done in the package docs , at least.
May 4, 2022, 9:39 PM
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
Only my figure component is working, nothing else (nothing else includes the headings)
May 4, 2022, 9:43 PM
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
the only docs on how to serializer normal text and headings were for the "old" ways I guess.
May 4, 2022, 9:52 PM
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
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

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.

Get started for freeExplore the demo

Was this answer helpful?