Structured Text line breaks missing from data received from Dato

[jude]

I have taken a look at this post but I’m still seeing a span received with an empty string as the value rather than line breaks.

So if there are 3 line breaks added in the dato editor by pressing on enter 3 times, when the data is received from the grapQL query, we are still seeing 3 span object with the value as an empty string.

For now what we have ended up doing is looking for spans with an empty string and assuming that those are line breaks but I just wanted to confirm if this was a bug or intended behaviour in terms of data received.

[roger]

Hey @jude,

Did you see Stefano’s response about using shift-enter to insert a line break? To the editor/parser, they are different things:

Semantically they are different, but if on the frontend you want empty paragraphs to still be displayed as newlines, you can either do what you did (replace them manually) or use a CSS rule like:

p > span:empty:before {
  content: ' ';
  white-space: pre;
}

To render them as newlines, as in this example: https://codepen.io/roger-datocms/pen/JjzjqdB

[jude]

Hey @roger thanks for that detailed breakdown. I did indeed try that method and that definitely works.

The problem that I’m running into is while copying over data from another place. The editor formats it perfectly but there isn’t enough information passed to render the same in code.

Here’s an example

1. I generated a set of lorem ipsum paragraphs and copied over the first 2 paras to the editor in dato.
2. In dato, this renders correctly as 2 paragraphs with ample space between them.
3. In the CDA playground, there is no infirmation about a line break passed or an empty span so the above CSS fix doesn’t apply and neither does my patch which is where I’m stumped and it ends up rendering the 2 paras together without the break betwen them.

So is there something that the dato editor applies in order to apply that line break and is there a way to apply the same in code as well?

[roger]

Hey @jude,

That’s a different situation. It’s one thing to force it to render empty paragraphs as line breaks, but in the second case, it looks like it’s not rendering breaks between paragraphs with content either.

What are you using to render it on the frontend? If you start with something like your example, the GraphQL should show two paragraphs (as it did for you):

But that JSON is in a special “DAST” format that’s not easy to parse on your own. For example, if you’re using React, we provide a <StructuredText/> component that handles the rendering for you:

<StructuredText
  data={data.post.content}
/>

Becomes:

Or you can render it to an HTML string using datocms-structured-text-to-html-string, which will also give you <p> tags for each paragraph.

Does that help? If you can provide more info about what that page looks like on your frontend (especially any sample code), we can help you troubleshoot it a bit more.

---

Alternatively, if you don’t need all of structured text’s power (like inline records, blocks, etc.), you might also consider a multi-text field instead and changing its presentation mode to Markdown or HTML? That might be easier to render on the frontend, depending on your framework.

[jude]

Hey @roger thank you for the detailed breakdown and all the support. I was indeed using the Structured Text component to render the content. After a bunch of debugging, I found that the issue was with the Tailwind styling on the website that was overriding the styles and breaking the styling for this component.

Fixing that resolved the issue but thank you for the support!