React in footnotes?

[mosnicholas]

I've written a custom plugin that converts uuids found in my app with a react button. The goal is pretty simple: it should extract UUIDs and replace them with a button that can visually render those DB references. See the screenshot.

The plugin is defined like so:

import reactStringReplace from 'react-string-replace';
import { visit } from 'unist-util-visit';

import InlineSourcesButton from 'components/chatbot/ChatThread/InlineSourcesButton';

const uuidRegex =
  /(\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b,?\s*)+/gi;

const remarkCitationPlugin = () => {
  return (tree) => {
    visit(tree, 'text', (node) => {
      const matches = node.value.match(uuidRegex);
      if (matches) {
        let mIndex = 0;
        node.type = 'jsx';
        node.value = reactStringReplace(node.value, uuidRegex, (_, i) => {
          const uuids = matches[mIndex]
            .split(/,\s*/)
            ?.filter(Boolean)
            ?.map((uuid: string) => uuid.trim());

          mIndex++;
          return <InlineSourcesButton key={i} uuids={uuids} />;
        });
      }
    });
  };
};

The issue I'm having is that using remark-gfm results in the following footnote structure. I'm guessing this has something to do with the order in which plugins are applied and how remark-gfm renders footnotes (as HTML vs as JSX elements).

Is there a way to control how the output is rendered in remark-gfm footnotes? My wrapper on ReactMarkdown is super simple:

<ReactMarkdown remarkPlugins={[remarkCitationPlugin, remarkGfm]}>{text}</ReactMarkdown

Thank you!

[ChristianMurphy]

Welcome @mosnicholas!
Sorry you ran into a spot of trouble.

The issue is a misunderstanding of what mdast and remarkPlugins are.
Start by reviewing https://github.com/remarkjs/react-markdown#architecture and https://unifiedjs.com/learn/
Note that, remark plugins and mdast do not contain react components (which is why you are seeing [object Object]).

Your end goal is to add a new content type which doesn't currently exist in mdast a source button, there are some pointers on how to do this in https://github.com/orgs/remarkjs/discussions/867

[mosnicholas]

Thank you so much for your help @ChristianMurphy !! 🙏

[mosnicholas]

Last question - is there a way to replace the components inline vs. on new lines? taking a look at remark-gfm to see how it's being done there, but curious if there's a simple way to accomplish that?

[mosnicholas]

Oh I just found the mdast-util-find-and-replace function. This simplifies the code a substantial bit, and fixes the issue ^

[JanRuettinger]

@mosnicholas Could you post a short snippet on how you solved your issue with mdast-util-find-and-replace?

[mosnicholas]

@JanRuettinger - much simpler.

const remarkCitationPlugin = () => {
  return (tree: Nodes) => {
    const newTree = findAndReplace(tree, [
      uuidRegex,
      (match: string) => {
        const uuids = match
          .split(',')
          .map((uuid) => uuid.trim())
          .join(',');

        return {
          value: uuids,
          type: 'text',
          data: {
            hName: NODE_TYPE,
            hProperties: {
              uuids,
            },
          },
        };
      },
    ]);
    return newTree;
  };
};