Custom components for the <a> link does not work as expected during streaming.

[tktk0430]

Reproduction process

https://codesandbox.io/p/sandbox/react-markdown-forked-h8w483

1. open the above codesandbox
2. Press the streaming start button.
3. The string will be streamed. Then you will see [hello](hello) change to button.
4. you can expect to see the href text (hello in this case) when you click on the button as the code indicates.
5. but if you press button while streaming, onClick will not work!
6. if you press button after the streaming is finished, it will work. (you can see 'hello' on console)

---

How can I get onClick to work while streaming?

[remcohaszing]

Hi

A general tip: share code in code blocks, not screenshots.

I see a couple of problems.

Markdown cannot be streamed. The full document needs to be parsed before it can be rendered. If you render partial markdown documents, you may get unexpected results.

Don’t define React components during render. This will make it impossible for React to diff the virtual dom and cause many redundant rerenders. You should move your a component outside of the App component.

Don’t use a <button> element to render links. This causes accessibility issues. Always use an <a> element.

[tktk0430]

Thank you for your response.

Is there an alternative to ReactMarkdown that allows real-time convert from a-tag to button while streaming (please understand that this is what I need for my project), that can be done quickly with the remark library?
I would appreciate it if it could be done quickly with the remarkjs library.

If this is not an appropriate question for this forum, I will close it.

[JounQin]

As @remcohaszing said, just move components outside, it will just works as as you expected.

https://codesandbox.io/p/sandbox/react-markdown-forked-5rs49w

[remcohaszing]

Another library won’t fix your issues.

You can represent a link using a <button> element. You just shouldn’t.

Markdown as a format can’t be streamed by definition. The last byte in a document may affect the meaning of earlier bytes.

[ChristianMurphy]

You can represent a link using a element. You just shouldn’t.

I'd second this, most countries have accessibility requirements, including Japan https://www.boia.org/blog/japans-digital-accessibility-laws-an-overview and the United States https://www.ada.gov/resources/2024-03-08-web-rule/
The accessibility standard most of these are based off of WCAG https://www.w3.org/WAI/standards-guidelines/wcag/
WCAG has rules around links working in a predictable way, making a link a label with run afoul of accessibility https://stackoverflow.com/a/59908341

I'd recommend using the <a> tag still, as it has the correct aria attributes and roles out of the box, and still make it visually clear clicking on the component will navigate the user elsewhere.

If you truly want some kind of custom button or interactive, consider using a directive, through remark-directive to add your custom interactives without overloading the concept of a link. (directive syntax https://github.com/micromark/micromark-extension-directive?tab=readme-ov-file#syntax)

[tktk0430]

Thank you all.
For now @remcohaszing's idea and @JounQin's implementation is a direct solution to my issue, so I will mark this as an answer.

I understand that markdown by definition requires all sentences. However, the LLMs used in my product use simple markdown such as “#” or “(xxx)[yyyy]” and there is no major UX issue if the bytes before the bytes after are changed by the bytes after.

I also understand that there are accessibility concerns.
However, some kind of conversion is needed to turn a mere string generated by LLM into a button that executes a function in the code onClick

LLM will says,

plz click this button to show text -> [MyButton](settext?/text=HiTom)
or
plz click this button to show text -> **MyButton|---delimiter---|HiTom**
or
plz click this button to show text -> <font color="Red">MyButton|---delimiter---|HiTom</font>

From above, I'd like to show DOMs like,

<p>plz click this button to show text <Button onClick={()=>setText('HiTom')}>MyButton</Button><p>

This is all I want to do: since I can't have the LLM text generate a button that includes onClick={()=>setText('HiTom')}, I need to get a Markdown element that uniquely determines where the children are and where the setText argument is.
It can be an A tag, BOLD, red text, whatever.

I think the remark-directive mentioned by @ChristianMurphy might be a good idea, as I am aware that it can describe a component that is closer to a button than an a tag.

[ChristianMurphy]

@tktk0430 if you want full support for components, MDX is also an option, it builds off remark and is maintained by the same team https://mdxjs.com
It does have broader security considerations than directives though, as it can run full JSX and JS https://mdxjs.com/docs/getting-started/#security