How to render a phone number with React-Markdown v9?

[chulinguy]

I cannot figure out how to render a phone number markdown such as [Phone](tel:123) into HTML <a href="tel:123">Phone</a> in version 9. I believe this worked in v6 (maybe with plugins?)

[ChristianMurphy]

Welcome @chulinguy!

I assume you are referring to react-markdown version 9?
If so you can custom the url transform to your liking https://github.com/remarkjs/react-markdown
The tel protocol sanitized by default.

[ChristianMurphy]

@msmeraglia read before commenting, the answer is in the comments right above yours

[msmeraglia]

... did you miss the part where i said that didnt work?

[ChristianMurphy]

I did, you're talking about rehype schemas, which are not part of this conversation and wouldn't fix the issue.
Try the fix suggested in this issue.

If you're still running into the issue after that, share a runnable example using https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite
"it doesn't work" isn't useful information.

[msmeraglia]

SO for context I am using the ReactMarkdown component I have a remark plugin that produces correct phone number a href elements, but those never make it to the urlTransform. The only way i could get them to kind of work, which i dont love, is to set the node.type = 'html' in the plugin and use rehype to render the link. This all feels off, so i'm asking if A. there is a better way to approach this or B. a way to get the urlTransform to see the produced output from a plugin or C. simply modify the sanitizer in some other way? (FYI im new to using this and not some junior dev, so a little less attitude would be appreciated, i'm trying to learn not pester)

[wooorm]

Post a new discussion and provide all that code and context and more. You say you are senior. Then you should be able to provide all the needed context to get help.