CODEWITHSUNDEEP
reactjsnext.jscontent-management-systemcontentfulrichtext
FamousLastWords
FamousLastWords

Reputation: 59

Contentful Richtext Editor not showing on Next.js

I'm currently creating a blog with Next.js and Contentful. All was going fine until I came across issues with the Richtext editor.

The content is showing, however, there's no spacing between the lines?

Not sure how I can get it to look like what I've created on Contentful.

const client = createClient({
  space: process.env.NEXT_CONTENTFUL_SPACE_ID,
  accessToken: process.env.NEXT_CONTENTFUL_ACCESS_TOKEN,
});

export async function getStaticPaths() {
  const res = await client.getEntries({
    content_type: "joshBlog",
  });

  return {
    paths: res.items.map((item) => ({
      params: { slug: item.fields.slug },
    })),
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const res = await client.getEntries({
    content_type: "joshBlog",
    "fields.slug": params.slug,
  });

  return {
    props: {
      joshBlog: res.items[0],
    },
    revalidate: 30,
  };
}

export default function Article({ joshBlog }) {
    return (
        <div>
          <Head>
            <title>{joshBlog.fields.title}</title>
            <meta name="description" content={joshBlog.fields.description} />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <main className="mx-8 max-h-full md:px-40 px-4 pt-16 md:mx-24">
            <h1 className="text-2xl font-black pb-2 leading-9 mb-2 md:leading-relaxed md:text-4xl md:mb-4">
              {joshBlog.fields.title}
            </h1>
            <p className="mb-4 text-xs text-gray-600 font-light md:mb-10">
              {" "}
              Published: {joshBlog.fields.date}
            </p>
    
            <p className="font-light leading-6 text-xs mt-8 pb-2 text-justify text-gray-800 mb-2 md:font-normal md:text-base md:leading-loose">
              {joshBlog.fields.description}
            </p>
            <hr className="mt-4"></hr>
    
            <div className="">
              {documentToReactComponents(joshBlog.fields.content)}
            </div>
          </main>
        </div>
      );
    }

Rich text rendered

Upvotes: 0

Views: 1512

Answers (2)

stefan judis
stefan judis

Reputation: 3879

Because Richtext has to stay platform agnostic, Richtext includes line breaks as \n. These don't render as line breaks in React.

What you can do is to define a renderOptions object, tweak the renderText method and pass the options to documentToReactComponents.

const renderOptions = {
  renderText: text => {
    // break the string apart and inject <br> elements
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};

// pass in render options and split text nodes on line breaks with a `<br>`.
documentToReactComponents(joshBlog.fields.content, renderOptions)

You can find more Richtext tips in this article.

Upvotes: 2

FamousLastWords
FamousLastWords

Reputation: 59

So the reason why this was happening was due to Tailwind overriding the styles from Contentful.

In order to solve this issue:

Install: Tailwind Typography

Here is a link to the solution from tailwind

Upvotes: 3

Related Questions