Improve documentation around linking to custom React Components

[will-hart]

I'm trying to implement react-katex maths rendering in remark-react and I'm a little bit confused as to how to go about this. #23 seems to discuss the issue of custom components, but I think the discussion got a bit side tracked by sanitize before a solution was proposed. I've also looked at the related documentation in the Readme on configuration.

My basic approach is to use remark-math to process the inlineMath and math node types, then make remark use the react-katex components to render these.

I have the following configuration:

// ...other imports
import math from 'remark-math';
import { InlineMath } from 'react-katex';

const renderer = remark()
  .use(math)
  .use(mathRenamer)
  .use(reactRenderer, {
    createElement: React.createElement,
    sanitize: schema,
    remarkReactComponents: {
      inlineMath: InlineMath
    }
  });

The mathRenamer plugin looks like this:

const transformer = tree => {
  visit(tree, 'inlineMath', node => {
    node.data.hName = 'Component';  // I've also tried `inlineMath`
  });

  console.log('TREE', tree);
};

const attacher = () => transformer;

I'm doing a similar thing for BlockMath which I have omitted. Using this input:

Test $ax^2 + bx + c$ Test

$$
3^2*2+1=19
$$

Test

I can verify that the data.hName property is correctly set from the logging in the transformer. However after calling processSync, the generated DOM looks like this:

If I call console.log(JSON.stringify(renderer.parse(content)) I see something like this (some sections cut out). Note that it has span and div for the hNames

{
    "type": "root",
    "children": [
        {
            "type": "paragraph",
            "children": [
                // ...
                {
                    "type": "inlineMath",
                    "value": "ax^2 + bx + c",
                    "data": {
                        "hName": "span",
                        "hProperties": {
                            "className": "inlineMath"
                        },
                        "hChildren": [
                            {
                                "type": "text",
                                "value": "ax^2 + bx + c"
                            }
                        ]
                    }
                }
                //...
            ]
        },
        {
            "type": "math",
            "value": "3^2*2+1=19",
            "data": {
                "hName": "div",
                "hProperties": {
                    "className": "math"
                },
                "hChildren": [
                    {
                        "type": "text",
                        "value": "3^2*2+1=19"
                    }
                ]
            }
        }
        // ...
    ]
}

Am I doing something silly?

P.S. Sorry this is a bit of an essay... I'm happy to contribute an example for the documentation if we can get this sorted as I feel it could be a fairly common use case.

[davidtheclark]

@will-hart: There are a lot of things that could go wrong in this flow, and much of it could be outside the domain of this repo. I think it would really help to have some reduced cases to see what's going wrong. Do other hast-related plugins work with your renaming?

[will-hart]

@davidtheclark thanks for the reply. To be honest I haven't tried renaming anything else, as pretty much everything else so far fits within the standard elements! 😄

I guess the question is "how do I specify a particular React component for a custom node type". It's clear from the documentation how to do this for default elements but not for custom elements such as those produced by remark-math.

I've tried to cobble the above together from the documentation and trial and error but to be honest I'm a bit lost. I just wonder if there is a "recommended" or built-in way to do this as I would have thought it would be a relatively common requirement? If there is I'd love to draft up some docs - if that's wanted by the team.

[will-hart]

OK, might be making some progress. Looks like sanitize was removing the tagNames. Would you be open to a short PR for the Readme detailing the steps I took?

[davidtheclark]

@will-hart Absolutely.