[feat] get message id in textComponent

[IcanDivideBy0]

Hi,
What do you think about sending the messageId to the textComponent given to the provider?

I'm trying to make a in-place translations editor. I think this is totally possible by just droping a custom component in the textComponent provider prop, but this component don't have access to the message id.

By default React.Fragment is used, but we can only pass the message id in case there is such a text copmponent defined (in fact there's already an if aroud this case https://github.com/formatjs/formatjs/blob/main/packages/react-intl/src/components/message.tsx#L61)

Also the text component can be overriden at FormattedMessage level; to avaoid any problem with this maybe we can pass the id as a data prop (ie data-react-intl-message-id="XXXX"), but this would bloat the html, another solution I can see is to have a flag in the provider to configure the Formattedmessage behavior so we can disable it if not needed (prod vs dev mode for example)

If you think that would be interresting I can send a PR pretty quickly.
In any case if you have any idea/suggestion for a drop-in solution to translate string in-place, I'd like to hear about it :)

[longlho]

im not sure i fully understand your use case. Do u have an example/screenshot/running app of some sort?

[IcanDivideBy0]

Well, actually I already have something along those lines that works:

simplescreenrecorder-2021-03-12_09.02.25.mp4

My use case: I have to manage the translations (en/fr) on the website I'm working on. This get pretty tedious, specially with auto-generated messages id. So I built a small UI to edit messages.

Currently, this is working thanks to a hack: I replace react-intl dependency by my own stub (via babel thanks to module-resolver plugin). This way I can use the editor when NODE_ENV is dev, and nothing about the editor exists in prod.
My stub/hack simply concist of rewriting FormattedMessage component to add a button around each and every message.

This whole process have already proven its utility to me (I'm using this since years now, back when react-intl was a yahoo thing). So I think this can be useful to other people too, but I'd rather not publish a tool that encourages people to do such dirty things around deps resolution. That's why I'm searching for a way to "augment" FormattedMessage with more functionalities

[longlho]

Ok this is pretty niche so I think what you're doing is perfectly fine. I typically would consider support if this gets enough traction basically.