Lexicals RichText Converter not rendering Headings

nurwaldbeerelast year

7

"use client";
import React, { useEffect, useState } from "react";
import Header from "../customcomponents/Header";
import { RichText } from '@payloadcms/richtext-lexical/react';
import Footer from "../customcomponents/Footer";
import { fetchGlobal } from "../actions";

export default function Impressum() {
  const [impressum, setImpressum] = useState({
    content : null,
  });

  useEffect(() => {
    const fetchImpressum = async () => {
      try{
        const data = await fetchGlobal("imprint");
        setImpressum(data);
      } catch {
        console.log("Error fetching impressum");
      }
    };
    fetchImpressum();
  }, []);
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow pt-32 px-8 md:px-20 max-w-6xl mx-auto w-full">
        <div className="prose prose-lg max-w-none text-gray-600 font-sans">
          <RichText data={impressum.content}/>
        </div>
      </main>
      <Footer />
    </div>
  );
}

• 

  jannikzedlast year

  @1056700164066250863

  can you check, if it is rendered as H1 HTML element? And maybe just the style is missing / broken?

• 

  zed0547last year

  The bold shows up I think because they're wrapped in <b> elements by default, which is style agnostic in a way, but it's possible that you are getting headings rendered but just unstyled

• 

  nurwaldbeerelast year

  Good tip, thanks, the HTML rendering is correct. But how can I fix the formatting? Its not wrapped in any tailwind tags that would overwrite the text size
• 

  jannikzedlast year

  use overrideStyle - you most likely need to build your own richtext component. I'm not really aware of the richtext react rendered that is coming directly from payload. We started with the payload default template and improved their implementation:

  
  
  

  <RichText publicContext={publicContext}
              content={headline}
              withWrapper={false}
              overrideStyle={{
                h1: 'text-5xl font-semibold',
                h2: 'text-3xl font-semibold',
                h3: 'text-2xl font-semibold',
                p: 'text-xl font-medium text-muted-foreground',
              }}

  
  
  

  you could set defaults in a custom component from you, that fits your page standards

• 

  nurwaldbeerelast year

  Thank you both for the help. I fixed it by adding Tailwinds Typography plugin and defining default values:

  
  

  typography: {
          DEFAULT: {
            css: {
              h1: {
                color: 'rgb(0 0 0)',
                fontWeight: '700',
                fontSize: '2.25rem',
                lineHeight: '2.5rem',
                marginBottom: '1.5rem'
              },
              h2: {
                color: 'rgb(0 0 0)',
                fontWeight: '600',
                fontSize: '1.875rem',
                lineHeight: '2.25rem',
                marginBottom: '1.25rem'
              },
              h3: {
                color: 'rgb(0 0 0)',
                fontWeight: '600',
                fontSize: '1.5rem',
                lineHeight: '2rem',
                marginBottom: '1rem'
              }
            }
          }
        }
        }

• 

  alessiogr

  last year

  Personally, I think it's best to use CSS, or CSS + @apply (

  https://tailwindcss.com/docs/functions-and-directives#apply-directive

  ) here. Or the Tailwind typography plugin is a good solution too, if you want this to apply to your entire app.

  
  
  

  Those default primitive richtext elements are extremely easy to style. Adding tailwind classes to every single one of them is more complex and will bloat the HTML size given how repetitive they are

  
  
  

  I do like that

  overrideStyle

  API though - could add it to our default converter

• 

  zed0547last year

  I was never a fan of

  @apply

  since now we have to worry about tw classes in our jsx

  and

  tw classes directly in css, but purely using CSS is good. I also like the overrideStyle way too +1 from me