How do you parse a footnote component using gfm, react-footnotes, or other?

[nick-inkeep]

I'm having issues being able to customize/parse the footnote component [^1^]. I'm already using gfm plugin but not sure how to create a custom parser for this..

Tried guidance here but same thing, footnoteReference component render function doesn't seem to be called at all.

[wooorm]

“Parsing” is a thing that compilers do. So, to parse footnotes, use remark-gfm, that does the parsing, which you already have.

I'm having issues

And what are those issues? I have no clue what you want to do.

[wooorm]

Thing is, h1 and p are elements. From HTML.
footnoteReference is not an element.
sup is an element. And a is an element.
So you can use sup and a in components to overwrite them.

// console.log('DO SOMETHIGN CUSTOM HERE');

And what do you want to do there?

[nick-inkeep]

There's a few things I want to do. This is a Bing/ChatGPT like experience where the markdown is getting streamed. Right now, [^1^]
doesn't render as sup for some reason until the footnote definitions get put into the response body towards the end of the message. So I'm pre-emptively fetching the sources that the streamed response might be using inline via the [^{int}^], and want to map [^{int}^] pre-emptively to the right URL as it gets streamed, before the full footnote definitions are streamed back.

Anyway, it's complicated, tl;dr is I desperately need to be able to hook in to when a [^1^] is in the markdown content so I can control the rendering of it, but right now I have no idea how. Any ideas? I was trying to follow this example.

[wooorm]

That’s not going to work. As you notice here on GH, footnote references without a definition aren’t a footnote reference. They’re just characters. So you can’t “hijack” it.

Also, the ^ at the end of your “footnote references” doesn’t do anything. For more on the syntax of footnotes see: https://github.com/micromark/micromark-extension-gfm-footnote#syntax.

This is a Bing/ChatGPT like experience where the markdown is getting streamed

Markdown doesn’t support streaming. Definitions can come after references.
I don’t understand why you need streaming?

[nick-inkeep]

Ignore the streaming bit, it's just nature of ChatGPT APIs (they don't respond all at once, response content gets streamed). I can get around that, what I really need is just to customize the rendering of footnote definitions/inline-references, assume I have both in fully compliant markdown. How do I go about customizing both the rendering of the references and definitions?

[wooorm]

ChatGPT the site is also built on unified, so that should be quite possible.

customize the rendering

See my previous comment: https://github.com/orgs/remarkjs/discussions/1136#discussioncomment-5358134
Note that references and definitions don’t exist when rendering. Links exist when rendering.

References and definitions exist in markdown (remark, mdast). Links and lists and such exist in HTML (rehype, hast). If you want to change things you can also operate there.