Question re interleaving

[omidantilong]

Hello (again) 🙂 I have another question about interleaving. Specifically about content being wrapped in <p> tags.

https://mdxjs.com/docs/what-is-mdx/#interleaving

As I understand it, those docs say are saying that the determination on whether to wrap in <p> tags is based on whether or not the content is on the same line?

Unfortunately most editors will automatically wrap long lines inside block level elements so this is not really practical. I had always thought markdown (and commonmark, so by extension MDX) did not do anything to content inside block elements embedded in markdown.

The only way I have found to get around this is to wrap the entire p tag in curly braces but as the whole purpose of MD is make editing easier, that's not really suitable either. I understand this probably isn't a bug as it's stated in the docs that this is what happens, but the rule of "is it on the same line" seems a little too inflexible given the nature of modern IDEs.

I have looked through remark/rehype plugins for something that might allow me to do this, with no luck so far. Maybe a nice solution would be something in the MDX global options to disable parsing inside embedded HTML? This would also stop the hydration error when using Next.JS as you can end up with multiple nested <p> tags if you need to write the tag out manually - which is perfectly valid such as when class names are required.

Thanks again! :)

[wooorm]

Hi!

You need to use `backticks` in markdown on GitHub around HTML. Otherwise they’re treated as actual HTML.

Your understanding of those docs is correct. Your understanding of markdown and HTML blocks is also correct. MDX, as explained in the docs, deviates from that. Our users wanted interleaving.

In your example, you are not using interleaving, and I believe that this fact, not using interleaving, makes the interleaving awkward.

<div>
  This is already a paragraph. You must not wrap it in `<p>`s.
</div>

You can style that div whatever way you want.
I understand the theoretical need to style <p>s, but believe that in most cases you can instead style a <div> around it, which is perhaps better, because the content is not touched, only wrapping components without meaning, receive style.

There are several similar discussions. See also: #1798 and #1946.

You can also configure your editor to not automatically wrap MDX.

[ChristianMurphy]

You may find the the explanation of the design choice in https://github.com/orgs/mdx-js/discussions/1603 of interest, and in particular the ideas on how unwrapping could be done in https://github.com/orgs/mdx-js/discussions/1603#discussioncomment-1091977.

[omidantilong]

@ChristianMurphy thanks for those links, that discussion is interesting. I know some markdown implementations support a markdown=0 attribute on a wrapping element - I wonder if that's something MDX could consider for these situations?

Cheers for pointing on the right path for the plugin stuff :)

[omidantilong]

I have a working plugin for this now. I don't know if this is the most efficient way but it does exactly what I want.

export default function remarkUnwrapTags() {
 return (tree) => {
   visit(tree, 'paragraph', (node, index, parent) => {
     if(node.children) {
       node.children.forEach((child) => {
         if(child.value) {
           child.value = child.value.replaceAll("\n", '').replaceAll("\r"," ").toString()
         }
       })
     }

     if(parent.type==='mdxJsxFlowElement') {
       parent.children = node.children
     }
    
   })
 }
}

[ChristianMurphy]

I know some markdown implementations support a markdown=0 attribute on a wrapping element

Oh? Which implementation is that?
None of the one's in Babelmark appear to support it: https://babelmark.github.io/?text=%3Cp+markdown%3D0%3E%0A%0A%23+heading%0A%0A%3C%2Fp%3E%0A%0A%3Cp%3E%0A%0A%23+heading%0A%0A%3C%2Fp%3E

I wonder if that's something MDX could consider for these situations?

It could be added via plugin.
I don't see this functionality as something which would be added directly to core.

I have a working plugin for this now. I don't know if this is the most efficient way but it does exactly what I want.

I'm not quite sure I follow the part where all of the newlines need to be replaced.
But if it work, it works 🙂

[omidantilong]

Oh? Which implementation is that?

There is some discussion on this very topic over on commonmark's talk page: https://talk.commonmark.org/t/is-markdown-0-only-used-by-kramdown/1995 - it does appear to be a limited set, and in the babelmark test you linked to the kramdown output is mangled! 😵‍💫

I don't see this functionality as something which would be added directly to core.

I understand. Given how it easy it was to write that dumb unwrapping plugin, that's fair enough.

I'm not quite sure I follow the part where all of the newlines need to be replaced.

Me neither 😂