Adding space between contents in rich text editor not working

Questions and Answers Frontend-React
1

Currently I have content in my rich text in strapi that is spaced out the way I want it in my markdown version, but as soon as I switch to preview, or view the content in my browser, the spaces go away. I have tried adding <br/> tags, but there was still no line breaks.

This is the content in my strapi markdown:

image
image1064×422 50.5 KB

But this is the output on my webpage:

1619×302 55.4 KB

This is my current code:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
export default function name({ posts }) {
  return (
    <>
        <div>
          {posts.Title}
        </div>
      <div>
        <ReactMarkdown children={posts.Content} rehypePlugins={[rehypeRaw]} />
      </div>
    </>
  );
}
2

Will refer to this how to line break ? · Issue #273 · remarkjs/react-markdown · GitHub I think it has to do with the way it’s been rendered.

3

Yes adding a &nbsp; worked, but is there no way to space it other than manually specifying &nbsp; everywhere I want a line break?

4

I think the overflow shows a way to use regex to replace it for you. So you can take in the source. replace all the spaces or what it is using, with &nbsp; I’m guessing there is also an API or config you can use with the package for it.

1 Like