Render custom tag at the end

[bfirems]

I'm able to render my html at the end of say a p or li tag, however the issue arises when it generates more than one tag, it will render twice. Wondering if there is a way to render my html at the end, only once no matter what. I can't do it right after because it's a citation link that needs to be inside of the li (if it's the last thing rendered) to display properly.

[ChristianMurphy]

@bfirems I don't really understand your question.

1. Which remark library or libraries are you using?
2. What is "it" that renders twice? (The element, the whole page, something else)
3. Why does it matter if it renders twice?
4. Could you share a reproduction using https://stackblitz.com so others can see what you see?

[bfirems]

Thanks for your response!

1. react-markdown
2. "it" is "my html". What I want rendered after the markdown
3. It's a citation link, it looks weird and confusing if duplicated
4. https://stackblitz.com/edit/vitejs-vite-kgny55?file=src%2FApp.tsx

[ChristianMurphy]

https://stackblitz.com/edit/vitejs-vite-kgny55?file=src%2FApp.tsx

I don't understand what you're showing me.
The item only renders once to HTML.
and the component is only called once for that render.
You can see this by adding a console log, and seeing the log get called once, as shown in the link below.
https://stackblitz.com/edit/vitejs-vite-okepw1?file=src%2FApp.tsx

It's a citation link, it looks weird and confusing if duplicated

What do you mean by duplicated?
In your example you manually entered the citation twice.
Are you looking to create a plugin which looks for similar text and deduplicates it?
Or could you explain what you're issue is more clearly?

[bfirems]

Yes it only renders once to html, but it renders 2 li tags, one for ol because of the 1. and then another for the -, which renders an li under a ul. Since I'm overriding ul this isn't going to work. If you notice in my example it render two &nbspC which is just me simulating a citation.

What we are doing is rendering citation links as they pop up in the text, which could be anywhere in the markdown essentially. The 2 options I've found are either using remarkGfm and rendering citation tags (i.e. [^1]). So basically we would take our text and replace [789, 999, etc] with [^1][^2]. The problem with this solution is that if you don't have the footnote section it doesn't render. Our footnote section is a drawer than opens up once you click a citation. The other solution is just creating our own custom plugin. I haven't found good documentation on how to do that yet. Unless you have any other suggestions.

[bfirems]

And no, like I said we can't control what the LLM prompt is, we have to deal with the response as is, that's just how they coded it.

[bfirems]

It is citations not a directive. Have you used Copilot or ChatGPT before? You know how they respond and give you citations to click on, where they are deriving that information from?

[ChristianMurphy]

The point is to take some regex in between [] and turn it into a custom react component with an onlick handler. Everything outside the brackets will be markdown and needs to be turned into html

It is kinda the point.
If the model has an imprecise format, that regular expression will need a lot of error and edge case handling.
Tool usage

And no, like I said we can't control what the LLM prompt is, we have to deal with the response as is, that's just how they coded it.

This feels like the root of the problem.
If you need to build a product off an LLM, you should either have some say over the prompt or a pre-built rendering library for it.

I understand this may not be the case for you right now.
But you're going down a rabbit hole of trying solving an organization coordination problem with code.

It is citations not a directive. Have you used Copilot or ChatGPT before? You know how they respond and give you citations to click on, where they are deriving that information from?

I am very familiar with them.
What you are describing isn't ChatGPT's, Claude's, Mistral's, or Llama's citation format, it looks like something hand rolled.
All of the above are a lot stronger at generating XML or JSON than at generating custom markdown.

---

Again it is possible to parse custom markdown, regex alone may not be enough.
The syntax seems to overlap a bit with reference links in markdown.
You may need a parser extension in micromark https://github.com/micromark/micromark?tab=readme-ov-file#creating-a-micromark-extension (the parser remark builds on).

But it feels like trying to fight an organizational problem and dealing with output the LLMs are weaker at generating. With custom code, instead of fixing the output 🤷‍♂️

[bfirems]

It's not imprecise. We always get markdown, and for citations we always get brackets with the citations inside. Whether it's coming from an LLM or not is irrelevant. Forget I even said the word LLM, because it doesn't matter. We need to turn those brackets into a component with an onclick, and the rest needs to display as html like the control normally does. Whether that's how it should be returned to us or not is also irrelevant, because it's outside my control.

[ChristianMurphy]

Whether that's how it should be returned to us or not is also irrelevant, because it's outside my control.

Fair enough.
I just wanted to be clear, there's an easy way, generate plain valid markdown.
And a hard way, creating a custom flavor of markdown.

You've chosen the hard way. 🤷‍♂️ 🙂

Still doable, you'll need a parser https://github.com/micromark/micromark?tab=readme-ov-file#creating-a-micromark-extension
A way to take those tokens and convert them into an AST.

Add instructions of how to convert your custom node type back into HTML/React https://github.com/syntax-tree/mdast-util-to-hast?tab=readme-ov-file#fields-on-nodes

And some pretty thorough testing to make that production ready.

---

Making your own markdown flavor is pretty involved, but doable, feel free to as questions as you embark on the journey.
Good luck! 🍀