Needs a mechanism for replacing elements

[ticky]

Should be possible to replace <a>s with <Link> components

[ticky]

#8 includes the mechanism by which this would be possible, but I think it’s a thing to look at once the features currently in it have landed!

[wyattanderson]

I accomplished this with markdown-it-modify-token. I have a set of typography components I built with styled-components that I import in each .mdx file as such:

---
imports:
    '{P, H1, H2, H3, H4}': ../Layout
---

Then, I remap any instance of these tags so that the generated JSX uses my tags instead. I think this should also work for a => Link.

const remappedTags = {
  p: 'P',
  h1: 'H1',
  h2: 'H2',
  h3: 'H3',
  h4: 'H4',
};

loader: 'markdown-component-loader',
options: {
  markdownItPlugins: [
    (md) => {
      md.options.modifyToken = (token, env) => {
        if (typeof remappedTags[token.tag] !== 'undefined') {
          token.tag = remappedTags[token.tag];
        }
      };
    },
    require('markdown-it-modify-token'),
  ],
},

What would make this super easy is having a way to inject imports for every file processed by the loader so one wouldn't have to have an import block in each .mdx file.

[ticky]

That’s clever! I had been considering removing the “implicitly import React” option and replacing it instead with a method for defining imports which apply to all files which are processed. This would (hopefully!) allow for using this with Preact.

The other thing of course is that it’s likely that Markdown Component Loader would need to be able to resolve paths to match where processed files are. I hope that’s not too difficult a job!

I may have to investigate markdown-it-modify-token further as it looks like it could help me accomplish more of what’s going on internally in a simpler manner!

[MathiasSM]

This would be a great enhancement!