Support for citation chips

[xindixu]

First of all, thank you for this amazing library! ❤️

Is your feature request related to a problem? Please describe.
Partially. I'm switching from react-native-markdown-display so that we can have native text selection support on mobile. I'm slightly frustrated that this library doesn't support custom renderers, esp for inline elements (link, mention, etc)

Describe the solution you'd like

Would be great if this library to support citation chips. Something like this:

1. Show a superscript of the source number
2. On hover, show a tooltip with any content
3. On click, it opens the link to the cited site
4. A way to distinguish different links and their rendering logic. Examples:
   • [some library](https://google.com) → normal link
   • {@}[Casper](de047f59-b2e4-43d7-bf85-786087c98a72) → mentioning users
   • {+}[table.csv](Generated/table.csv) → mentioning files
   • [people.com](https://people.com?citation=1) → citation chips

Nice to have:

1. Allow users define:
   • how to render the display text
   • how to render the tooltip
   • how to distinguish different links (regex-based)
2. Users can highlight text around citation chips and mention (i.e. they won't cut the paragraph flow)

Describe alternatives you've considered
I've been manually constructing the citation chips and mention link. I was able to achieve this by:

1. Manually parsing the markdown content
2. If the markdown contains citation chips or mentions, I'll use custom rendering logic to compose the block instead of using this library. (ex: mention chip, bolded text, normal text, code, citation)

FYI, I've been applying similar logic to block content like code blocks, tables, latex math. Block content is much easier to deal with, so custom rendering logic works nicely over there.

Example screenshots

[hryhoriiK97]

Hi @xindixu , thank you for creating this request!

As discussed in #54, inline custom renderers are very challenging in our current architecture - everything is rendered natively via AttributedStrings (iOS) and Spannables (Android), so injecting custom renderers from the JS side would introduce significant complexity, maintenance overhead, and would be prone to bugs.

That said, several of the specific features you mention are on our radar:

• Mentions — tracked in Support custom link styles based on URL patterns (for mentions, internal links, etc.) #49. We're actively considering the best approach for this.
• Superscripts — tracked in Feature request: Support subscript and superscript #214. Adding tooltip/click behavior on top would require additional design work.

We want to find an approach that keeps the API clean and the implementation maintainable, rather than rushing something that becomes hard to evolve.

Your workaround of manually parsing and composing blocks with custom rendering logic is a good approach for now.

We'll keep this issue in mind as we design the mentions and superscript features. Thanks again for the detailed write-up!

[hryhoriiK97]

FYI, I've been applying similar logic to block content like code blocks, tables, latex math.

@xindixu one question - what limitations are you running into with tables and LaTeX in enriched-markdown?

[xindixu]

Thank you for the response!

FYI, I've been applying similar logic to block content like code blocks, tables, latex math.

@xindixu one question - what limitations are you running into with tables and LaTeX in enriched-markdown?

Tables - I simply want to wrap the tables with toolbars so I first split them out and then render with another instance of enriched-markdown

LaTeX Math - I found that some commands are not supported properly in ios. I'm using the react-native-mathjax-html-to-svg library instead:

Corresponding version in web:

[xindixu]

Btw, do you have any tips on how to properly render inline text so that it matches the rest of the markdown component? Would it be possible to expose a similar component as <EnrichedMarkdownText /> but intrenders component inline, instead of block (like display: inline-block instead of display: block in css)

[xindixu]

Hey team! I took a stub and opened a PR here: #249 - I added support for both mention and citation to <EnrichedMarkdownText />

[xindixu]

Adding tooltip/click behavior on top would require additional design work.

@hryhoriiK97 I've been thinking about how to add tooltips / hover cards on top of citations / mentions / regular links (mostly for web). I wonder if the library could simply expose relevant coordinates in event handlers (onHoverMention, onPressLinks, etc). It'd be the caller's responsibility to render the tooltip next to the target elements. That way, this library doesn't have to add any dependency on tooltip libraries. Wdyt? I'm happy to give it a try 😄

[hryhoriiK97]

@xindixu sounds like a good idea! Let me think through the edge cases and I'll jump back in here 👍