KPC
Kevin Powell - Community•7d ago
vinter.

Inline JSX components aren't preserving the whitespace in MDX

Hi, I have a static website that uses JSX components for inline elements. This is the HTML I'm returning: 
export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)
export default function Component({text}) {
return (
  <a href="#" className="inline-block decoration-2 mb-1 nowrap">
    {icon}
    <span className="text-wrap break-words align-middle">{text}</span>
  </a>
)
The idea is to then use this component in an MDX file like so: 
You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]
You can use <Component text="Ursol's Vortex"/> to prevent [...]
Don't focus the <Component text="Workshop Defender"/>s [...]
The issue here is that I can't seem to find a way to get a satisfactory spacing in both cases. The current code seems to remove any space following the inline component, which works fine for when the <Component> is followed by a punctuation mark or by a plural 's', but it makes the text unreadable when its followed by actual words. I tried adding a margin-right, or a non-breaking space, but doing that breaks the other way around (the text becomes "Don't focus the Workshop Defender s") Does anyone have any idea on how to solve it?
No description
1 Reply
vinter.
vinter.OP•7d ago
It was an issue with rehype-minify
GitHub
GitHub - rehypejs/rehype-minify: plugins to minify HTML
plugins to minify HTML. Contribute to rehypejs/rehype-minify development by creating an account on GitHub.

Did you find this page helpful?