Transclusion of _inline_ markdown?

[kylegach]

Hi. Markdown file transclusion (MFT) is super cool, but I cannot find a way to do the equivalent when all of the markdown is defined in the same file. Something like:

// page.mdx
import FancyLayout from '../components/FancyLayout

# Title

[1] Parsed _markdown_ content

<FancyLayout>
  [2] More parsed _markdown_ content, in a fancy layout
</FancyLayout>

I would like [2] to be parsed as markdown, but not sure how, beyond defining it in a separate file and using MFT. I'd like to keep it all in one file, though, for the sake of non-technical authors. Do I need to somehow make FancyLayout an MDX-savvy component?

If it's relevant, I'm using gatsby-mdx on a brand-new gatsby-starter-default.

Thanks!

[silvenon]

I’d also really love if this worked. However, sometimes you might not want that, so we need a way to opt in or out of that behavior.

If you have ideas for an API, shoot. :)

[kylegach]

What if mdx exported a function that took in mdx-friendly syntax (as a string, I assume) and output parsed content. Then a consumer could make a component using that function and include it:

// page.mdx
import FancyLayout from '../components/FancyLayout

# Title

[1] Parsed _markdown_ content

<FancyLayout>
  <MDXParser>
    [2] More parsed _markdown_ content, in a fancy layout
  </MDXParser>
</FancyLayout>

Of course, that MDXParser (name tbd) could then be integrated within FancyLayout, for a better authoring experience.

For simplicity, you could also restrict MDXParser from allowing imports/exports (at least for my use case).

[silvenon]

Interesting idea! I'll give it some thought and see what's possible and what isn't.

[kylegach]

Thanks for taking the time to give it some thought, Matija.

In the meantime, I've discovered that the runtime offers what I was asking for (with the perf/bundle size caveat):

// page.mdx
import MDX from '@mdx-js/runtime'
import FancyLayout from '../components/FancyLayout'

# Title

[1] Parsed _markdown_ content

<FancyLayout>
  <MDX>
    [2] More parsed _markdown_ content, in a fancy layout
  </MDX>
</FancyLayout>

That'll work for me for the time being. I'm not going to release this project until ~6 weeks from now anyway.

Edit: Custom components work for [1], but not [2]. I suspect I need something like withMDXComponents, but that's not public (probably for good reason).

[ChristopherBiscardi]

@kylegach fwiw, we use withMDXComponent in gatsby-mdx because we need to pass the context through to the runtime scope already.

iirc the markdown inside of a JSX block is actually an html block when existing as mdast right now, so when we do #195 (which I need to file an issue or a PR to handle for a use-case in gatsby-mdx actually) we should be able to recurse down the tree and parse children of the jsx nodes as mdx? I haven't thought this through all the way, but could try to dive into it when working on the JSX block parsing.

Using the runtime again as a component is an interesting approach. In gatsby-mdx we do that processing on the graphql side of things and ship a much lighter runtime. Perhaps we could implement that logic downstream for you and then push it back upstream to mdx-js/mdx after we get it working.

[kylegach]

@ChristopherBiscardi — Sounds great! It's a bit over my head to contribute code, but I'm happy to help test pre-releases, write docs, etc...

[craigmcginley]

@silvenon Just curious if this is planned for development or if there is any timeframe formulated for this feature.

[silvenon]

At the moment there hasn't been any further progress beyond what we've written here. It's not a trivial feature and I'm not even sure whether we should have it at all.

But it will be useful if you shared your particular use cases if this feature existed.

[craigmcginley]

Absolutely. My use case for this is pretty simple. I'm already using MDX for components with no Markdown children. But I'd also like to use React components to substitute for some basic Markup to wrap Markdown. For instance, since you can't currently do this:

<div class="background-color">
<div class="max-width">

# Section with background color
...

</div>
</div>

Perhaps MDX could allow for something like this:

<BackgroundColor>
<MaxWidth>

## Section with background color
...

</MaxWidth>
</BackgroundColor>

<MaxWidth>

## New section with no background color
...

</MaxWIdth>

I know GitHub Flavored Markdown supports wrapping Markdown content with certain HTML tags. I'm basically hoping for something similar with MDX, but making simple React components that just render the HTML would work as well, even if a bit overkill..

[eckdanny-osi]

I am evaluating both @mdx-js and mdxc atm...

We're talking about child blocks (in mdxc) rt? May be worth a glance.

The most typical use case for me sounds similar to @craigmcginley's. Something like:

import React from 'react';
export default ({ children }) => <div className="card">{children}</div>;

import Card from './Card.js';

<Card>

### Famous Quotes

> Goodbye cruel world!

</Card>

to become

<div class="card>
   <h3>Famous Quotes</h3>
   <blockquote>Goodbye cruel world!</blockquote>
</div>

[silvenon]

It appears that all of us forgot to check if that syntax actually works in MDX 🤣

It appears that it does, please confirm if this is what you wanted.

[ChristopherBiscardi]

@silvenon oh, I don't think it works without the line spaces though, like:

<div>
> Nested **MDX**!
</div>

[silvenon]

Yeah, it doesn't, but the extra newline is a way to tell mdx to parse the children as well. You still want to be able to write plain text. The extra newline seems like a small compromise for a use case that is not very common.