question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
mgmolisanicommented, Apr 17, 2019

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.

1reaction
mgmolisanicommented, Apr 17, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found