Distinguish between block-level and inline hyperlinks

SDKs JavaScript SDK
1

I’m using @contentful/rich-text-react-renderer to render rich text on my website. I essentially want to be able to display block-level hyperlinks (i.e, hyperlinks that take up a whole line) as a button, and to display inline hyperlinks as normal links.

This is what the rich-text looks like with both types of hyperlinks:

image
image1213×613 64.7 KB

So is there any way I can distinguish between the two?

2

A hyperlink is always an inline element. Placing one within its own paragraph is really the only way to accomplish this, as you’ve identified.

See Inline elements - HTML: HyperText Markup Language | MDN for more context around this distinction – Contentful’s rich text editor is essentially following the same guidelines as written in the HTML spec