React: Disable BLOCKS.PARAGRAPH styling when having styling setup up for MARKS.CODE

Hey guys,

I can’t imagine that this hasen’t been covered yet but I didn’t find anything in the docs so my questions is: if you have a styling set up for the BLOCKS.PARAGRAPH how can you disable that if you have something set up for MARKS.CODE as well?

Any workaround for that? We are talking about documentToReactComponents. Thanks a lot!

[mgmolisani]

Try this in place of your current renderer for paragraphs. This is what I was suggesting before. I did not test this but the idea is if the current paragraph node has any child (should only be one child anyway) that is a text node and if that text node has a code mark, render just children, otherwise, a <div>.

[BLOCKS.PARAGRAPH]: (node, children) => node.content.some(childNode => childNode.nodeType === `text` && childNode.marks.some(mark => mark.type === MARKS.CODE)) ? children : <div className="blogpost-text">{children}</div>

Edit: You don’t even need the fragment as children is always a valid React node.

[mgmolisani]

If I remember the types correctly though, blockquote should be a top level block so you might want to check your actual content for why a paragraph is getting created on the inner node. Might be how the content was entered in the editor.

Edit : I misunderstood what you were trying to do. To change the children that render in a block, I would recommend using the React.Children helpers to alter your children and remove the paragraph wrappers. You can also go with the other approach of altering the tree before passing it.

Second edit: Blockquote content is always a paragraph array per the type.