Render text as paragraph elements

[movationdesign]

Hi, we’re very happy with using your Slate editor version — huge help!

Unfortunately, I can’t find out where or why text elements are rendered as <span> elements by default, instead of paragraphs <p>.

I’ve read through this https://docs.slatejs.org/walkthroughs/saving-and-loading-html-content — and read all the issues on this repo before I wrote this issue.

I can’t find any cues as to where text in this Slate Editor text is defined as span elements by default, can someone point me in the right direction? I bet it’s right there, I just can’t find it! :)

Why is this important?
Text/paragraphs should render as paragraph elements in most use cases, for several reason. It’s semantically more correct to use <p> tags for paragraphs. Using span elements instead of paragraphs can possibly affect SEO negatively as well.

It’s also more practical to style paragraph text with CSS, when they’re rendered as <p> elements because they are block level elements, while span elements are inline level elements so you can’t use the same props on them (e.g. can’t use margins on inline elements).

Block vs Inline level:
https://www.tutorialspoint.com/html/html_blocks.htm

Right now my workaround is to overwrite the span elements default CSS properties to make them behave like paragraphs, which is doable, but inconvenient, for the reasons listed above.

Any help appreciated, and I’ll be sure to update this issue if I find the solution myself :-)

[aguilarm]

@movationdesign Also noticed this.
I can force paragraph tags by handling it in the renderNode prop of the Editor component, for example adding another handler to this bit of the rich text example.
Specifically adding:

case 'paragraph':
  return <p {...attributes}>{children}</p>;

Assumedly the default handler wraps things in spans.