how to get the text-underline from strapi articles to my gatsby frontend

Question

I'm working on a support site with strapi(backend) and gatsbyjs/react (frontend). I am trying to retrieve from my admin strapi the text I have underlined and display it in my frontend but it is not retrieving the tag correctly and is displaying the tag instead of the underlined text. Is it because of my react-markdown?

here is my webview: when I look at the element inspector I see inverted commas before my tag which is why it doesn't work

and here is my code:

import React from "react";
import { graphql, PageProps } from "gatsby";
import ReactMarkdown from "react-markdown";

import { ArticleT } from "@faq/types";

import Layout from "@faq/components/Layout";

import * as s from "./Article.module.css";
import { toArticle, toCategory } from "@faq/utils/routes";

type ArticlePageProps = {
  strapiArticle: ArticleT;
  file: {
    publicURL: string;
  };
};

const Article: React.FC<PageProps<ArticlePageProps>> = ({
  data: { strapiArticle },
}) => {
  const { title, content, category, slug } = strapiArticle;

  return (
    <Layout
      seo={{ pageTitle: title, pageUrl: toArticle(category.slug, slug) }}
      breadcrumb={[
        { to: toCategory(category.slug), label: category.title },
        { label: title },
      ]}
    >
      <div className={s.wrapper}>
        <h1 className={s.title}>{title}</h1>
        <div className={s.author}>
          <div className={s.texts}>
            <div>
              <span className={s.light}>Écrit par</span> Nicolas
            </div>
          </div>
        </div>
        <ReactMarkdown children={content}
          className={s.content}
          transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} />
      </div>
    </Layout>
  );
};

export default Article;

export const query = graphql`
  query ArticleQuery($id: Int!) {
    strapiArticle(strapiId: { eq: $id }) {
      title
      content
      slug
      category {
        title
        slug
      }
    }
  }
`;

Please share how are you displaying the article (code) – Ferran Buireu Feb 07 '22 at 15:42 — Ferran Buireu, Feb 07 '22 at 15:42
oh yes sry... i updated it ! @FerranBuireu – lucastoni Feb 07 '22 at 15:50 — lucastoni, Feb 07 '22 at 15:50
Please use code blocks instead of images... – Ferran Buireu Feb 07 '22 at 16:01 — Ferran Buireu, Feb 07 '22 at 16:01
sry .. updated it too ! :D thx ferran – lucastoni Feb 07 '22 at 16:06 — lucastoni, Feb 07 '22 at 16:06

Ferran Buireu · Accepted Answer · 2022-05-13T22:04:00.503

2

Have you tried using your own rendering component (components)?

  <ReactMarkdown 
    children={content}
    components={{
      u: ({node, ...props}) => <u style={{textDecoration: 'underline'}} {...props} />
    }}
   className={s.content}
   transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} 
  />

More details about components property: https://github.com/remarkjs/react-markdown#appendix-b-components

You can even use a custom-styled  instead of  if needed. The idea relies on parsing the  tag to add your own underlined component.

Apparently, it is needed to install rehype-raw plugin to allow ReactMarkdown to understand and interpret underlined tags ()

edited May 13 '22 at 22:04

answered Feb 07 '22 at 17:17

Ferran Buireu

28,630
6
39
67

Ok i explored the react-markdown components and I added the components to give the tag the `text-decoration: underline` but in my webview I have no change that appeared and in my inspector before the tag I still have inverted commas. As if the tag is not recognized by react-markdown.... – lucastoni Feb 08 '22 at 09:14
And I also saw that the tag was not listed in the react-markdown component props so I think it is indeed not taken into account – lucastoni Feb 08 '22 at 09:25
Yep I saw it too but I tried to force the parse... Maybe you can switch the library because it's not as weird scenario – Ferran Buireu Feb 08 '22 at 09:35
ok i found i just had to install rehype-raw plugin thx ferran for all ! – lucastoni Feb 08 '22 at 10:19
Nice! I've updated the answer with your resolution for those who might help – Ferran Buireu Feb 08 '22 at 10:25
1

@lucastoni Why is this not the accepted answer? – thexpand May 13 '22 at 20:50

how to get the text-underline from strapi articles to my gatsby frontend

1 Answers1