remarkjs / react-markdown

Markdown component for React
https://remarkjs.github.io/react-markdown/
MIT License
13.26k stars 876 forks source link

sup element rendering with remark-gfm plugin is painfully slow. #827

Closed tgram-3D closed 6 months ago

tgram-3D commented 6 months ago

Initial checklist

Affected packages and versions

react-markdown 9.0.1, remark-gfm 4.0.0

Link to runnable example

No response

Steps to reproduce

I'm using ReactMarkdown to render streaming LLM tokens, which seems to be a common use-case, and I'm trying to get it to render footnotes correctly. It works, but basically the entire paragraph renders fine in markdown but the [^1], [^2] formatted footnotes just sit there basically and don't get rendered as sup until the entire p element is complete.

<ReactMarkdown
                        remarkPlugins={[remarkGfm, remarkMath]}
                        rehypePlugins={[
                            rehypeKatex,
                            [
                                //@ts-expect-error version 6.0.0
                                rehypeHighlight,
                                {
                                    detect: true,
                                    ignoreMissing: true,
                                    subset: codeLanguageSubset
                                }
                            ]
                        ]}
                        components={components}
                    >
                        {content}
                    </ReactMarkdown>

I tried a custom component for sup and same deal. Is there a better way to do this sort of thing? I'm thinking I just get rid of remarkGfm and target superscript formatting in my custom p component directly, but it seems like there should be a better solution.

One thing that's kind of interesting is the back-ref a tags in the footnotes section render just fine, but not the actual sup elements.

Using node 20.12.0 and npm 10.5.0

Expected behavior

Footnotes rendered on streaming.

Actual behavior

Footnote rendering lags significantly and doesn't work until entire paragraph element is rendered.

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

Windows

Build and bundle tools

Vite

wooorm commented 6 months ago

It is unclear what you see because you have not shared what you see.

github-actions[bot] commented 6 months ago

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing a reproduction: It’s not yet clear whether this is a problem. Here are a couple tips:

Thanks, — bb

remcohaszing commented 6 months ago

Markdown can’t be streamed. Footnotes and definitions can appear at the end of a document, meaning the entire markdown document needs to be parsed in order to know whether or not something that looks like a footnote reference of link reference is actually a reference or just plain text.

This doesn’t stop people from streaming markdown anyway.


This paragraph has only one footnote[^1][^2].

[^1]: Footnote

This paragraph has only one footnote[^1][^2].

wooorm commented 6 months ago

This is what I am assuming too.

Nothing is “painful” here. You’re just streaming things and observe that things are streamed.

tgram-3D commented 6 months ago

Markdown can’t be streamed. Footnotes and definitions can appear at the end of a document, meaning the entire markdown document needs to be parsed in order to know whether or not something that looks like a footnote reference of link reference is actually a reference or just plain text.

This doesn’t stop people from streaming markdown anyway.

This paragraph has only one footnote[^1][^2].

[^1]: Footnote

This paragraph has only one footnote1[^2].

Footnotes

  1. Footnote

Ah, duh. That makes sense. I guess I don't understand how it's actually inferring the href for the a tags in the footnotes, cause I'm seeing the same behavior with totally fake content. I'll mark this as closed and figure something else out. Thanks for the replies.

github-actions[bot] commented 6 months ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

github-actions[bot] commented 6 months ago

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks, — bb