richtext not rendering with defaultConverters

joelcoreylast year

6

// import { cn } from '@/utilities/ui'
import React from 'react'
import RichText from '@/components/RichText'

import type { ContentBlock as ContentBlockProps } from '@/payload-types'

// import { CMSLink } from '../../components/Link'

const Content: React.FC<ContentBlockProps> = (props) => {
  const { columns } = props

  const colsSpanClasses = {
    full: '12',
    half: '6',
    oneThird: '4',
    twoThirds: '8',
  }

  return (
    <div className="container my-16">
      <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
        {columns &&
          columns.length > 0 &&
          columns.map((col, index) => {
            const { enableLink, link, richText, size } = col

            return (
              <div
                className={``}
                key={index}
              >
                {richText && <RichText data={richText} enableGutter={false} />}

                {/* {enableLink && <CMSLink {...link} />} */}
              </div>
            )
          })}
      </div>
    </div>
  )
}

export default Content

• 

  flohhhlast year

  Using tailwind typography & prose on the container is one option

  
  https://github.com/tailwindlabs/tailwindcss-typography
  
  

  Example

  
  

      <article className="prose">
        <h1>{post.title}</h1>
        <RichText data={post.content} />
      </article>

• 

  joelcoreylast year

  It occurs to me that even after reading the documentation quite a few times, I really just don't get how it is supposed to work.

  
  
  

  ^ And that's on me. Not a complaint.

• 

  flohhhlast year

  it's just rendering plain content like:

  
  
  

  <h1>H1</h1>

  
  

  <ul>

  
  

  <li>this</li>

  
  

  <li>is</li>

  
  

  </ul>

  
  
  

  there's no styling on it

  
  
  

  tailwind typography

  prose

  class automatically applies opinionated styles to any child markdown elements

  
  
  

  i'm not sure what the alternative is to using tailwind's typography solution, i guess you would have to make a class yourself in css and style each type of element yourself (the tailwind solution is pretty nice looking and customizable)

• 

  joelcoreylast year

  That's interesting. I do use and enjoy Tailwind. But I could also pass custom blocks I guess? It seems like a lot of work for "richtext" that is not very rich.

• 

  flohhhlast year

  yes custom blocks have their own renderers i think, i'm not sure on the specifics of inline blocks yet

  
  
  

  its really not a lot of work, this would be the solution with the least "work"

  
  
  

  install tailwind typography plugin

  
  
  

  put

  className="prose"

  on the parent div of the post content

  
  
  

  this is example result
• 

  joelcoreylast year

  Nice. Okay, I will try this later after dropping kiddos off. Thank you!

  
  
  

  Yep. Confirmed this fixed my issue.