Custom Component's original text

[mrdjohnson]

I'm using react markdown and its been super useful!

I'm trying to see if its possible to get the original text when rendering custom components?

My usecase: When rendering a multilined code block I add a copy button for users to easily copy what the code is (and the language at the top). I recently added latex support and I can no longer do children.toString() to get the code, because its more than just text.

What i'd like is to override elements (like code or math) by getting the props, and the original text so that users can copy the original formatting.

Is this possible?

(yes I've found other questions that were kind of asking about this and saying to make my own rehype function? but i'm already using rehype and remark to find/modify these areas, I just need the text along with it, and it seems like it would be useful for other people as well I think)

[ChristianMurphy]

Welcome @mrdjohnson! 👋
If you haven't read https://github.com/orgs/mdx-js/discussions/1948 I'd highly recommend reading through it there are a lot of approaches.

I can no longer do children.toString() to get the code, because its more than just text.

Right, if you want just the text, use innerText https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

Is this possible?

Yes and you don't need a change to react-markdown or a rehype plugin to do so.

[mrdjohnson]

@ChristianMurphy thanks so much for responding! Its a bit ugly and roundabout but I believe I found a solution!!

I have to use a ref on the rendered object, and get the text content from that. (in my case i have to find the "annotations" field in the rendered content and get the text from that)

Thank you for the link! it was quite a bit to parse through 😵 Appreciate the help!