dev-juju/EditorJS-React-Renderer

Linebreaks are missing

Closed this issue · 2 comments

Hello!

Your tool is super cool, but I have a problem, maybe you could help me

I am using react-editor-js tool to use Editor.js and pass data from it to your tool.
For some reason linebreaks are missing but the output object (from react-editor-js) seems to be correct (like in your example)

image
image

Do you know what can be wrong?

Thank you in advance!

Hi @serg-kan

Please note that for the example block you have there, the parser would return 3 consecutive paragraph elements.
These are not wrapped in any container (we let you decide how you want to place/position these elements on your page).

By default, browsers add a blank line before and after paragraph elements, so each should be on a separate line, with reasonable margins.

Please check the following:

  • Do you have any CSS Reset or predefined styles in your project tree that might affect default paragraph rendering?

  • Is your container/wrapper a flex box? If so you might want to set the flex-direction property to "column".

If none of the above resolves your issue, you can force each paragraph element returned by the parser to occupy the full width of it's parent/wrapper by passing a style object to the render method you use

`
ParagraphOutput(data, { width: '100%' });

Or

Output(data, { paragraph: { width: '100%' }});
`

Please use chrome/firefox devtools to inspect the styles applied to your elements and see if there are any overrides.

Got it, thank you!
The problem was in me