React: Disable BLOCKS.PARAGRAPH styling when having styling setup up for MARKS.CODE
See original GitHub issueHey 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!
Issue Analytics
- State:
- Created 4 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
gatsby - How to format code snippets with <pre> tags using ...
I solved this by catching the paragraph block in the renderer-options and render the block as <pre> if it is the only content...
Read more >How To Style React Components | DigitalOcean
In this tutorial, you'll learn three different ways to style React components: plain Cascading Style Sheets (CSS), inline styles with ...
Read more >Styling in React: 5 ways to style React apps - LogRocket Blog
Learn about styling React components with inline styling, styled-components, CSS modules, Tailwind CSS, and Sass and CSS style sheets.
Read more >Portable Text to React - Sanity.io
An object of React components that renders portable text blocks with different style properties. The object has the shape {styleName: ReactComponent} , where ......
Read more >Styling links - Learn web development | MDN
Default styles. The following example illustrates what a link will behave like by default (the CSS is enlarging and centering the text to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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>
.Edit: You don’t even need the fragment as
children
is always a valid React node.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.