CODEWITHSUNDEEP
javascriptreactjscontent-management-systemgatsby
R.Dixon
R.Dixon

Reputation: 107

How do I render DatoCms markdown text using WYSIWYG?

I have a DatoCms site using GatsbyJS, which includes a markdown editor field using a markdown editor.

This is formatted as bullet points on the back end. enter image description here However, on screen it renders as this

enter image description here

How do I make the text render correctly as bullet points?

Here is the code:

import React from 'react'
import { Link, graphql } from 'gatsby'
import Masonry from 'react-masonry-component'
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from '../components/SEO'

const SkillsPage = ({ data : { skillsPage }}) => (
  <Layout>
  <SEO/>
    <div className="showcase">
        <h1 className="sheet__title">{skillsPage.title}</h1>   
        <div>
          {skillsPage.skills}
        </div> 
    </div>
  </Layout>
)

export default SkillsPage

export const query = graphql`
  query SkillsPageQuery {
    skillsPage: datoCmsSkillPage {
        title
        skills
    }
  }
`

And the HTML output:

enter image description here

Upvotes: 1

Views: 1350

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29315

It seems related to styles issue. You can try to display them as a block or within a flex container.

One thing I've faced recently using DatoCMS and its WYSIWYG is that paragraphs are not displayed properly, not inheriting the line breaks. It can be easily fixed by using the CSS property white-space: pre-line to them to fix it. Maybe it fixes this issue too.

More information about white-space property can be found in MDN documentation.

With the new information provided, your issue is the way you render the content. You should use dangerouslySetInnerHTML to print automatically what's inside the WYSIWYG (markdown or rich text)

<div dangerouslySetInnerHTML={{ __html: skillsPage.skills }} />

After this, if you have display or layout issues, you can check for the CSS properties that I've explained.

If you had an object/array to loop (array of skills) you should print them by:

{skillsPage.skills.map(skill => <li key={skill}>{skill}</li)}

More information about dangerouslySetInnerHTML from the official React documentation.

Upvotes: 1

Related Questions