Feature Request: Show default language text on editor

[delucca]

Hi everyone!

Great tool :) My team and I are using it a lot! It is solving most of our issues with internationalization!

I've recently created the #42 issue, regarding FormatJS importing of tokens. The new feature worked like a charm! But now, our translators are facing a new (minor) issue with the tool.

Since I've explained in my previous issue, we're using the FormatJS pattern, which has a standardized pattern. The FormatJS team suggests the following translation flow:

1. The developer creates the new token directly in the code (or update that token defaultValue)
2. The ESLint plugin assigns a hash for that token, based on the defaultValue value (so, if you change the value it will be updated too)
3. An automated script extracts all tokens and creates a raw lang file (that I can now update directly in Texterify 🎉)

After generating that new lang file, our translation workflow is the following:

1. We import the updated token file into Texterify (working like a charm)
2. Our translator open the Editor and updates the new tokens for other languages

We're facing an issue with the second step of that workflow. Currently, Texterify displays only the Key column inside the Editor. So, our editor is like this:

As you can see, our Key column doesn't mean much. Since it is an auto-generated ID :/

Is there a way to display the key, alongside the default language token value, there?

IMPORTANT: We're using token-based internationalization for a while, so we've already tested other formats. The most common approach is to set the id (key) to a human-readable format, but we've already tried that and we're not willing to take that path again for the following reasons:

• Developers simply forgot to update the key ID, leaving bizarre scenarios where the key and the token value are completely unrelated
• With arbitrary token keys, we can't easily modularize our tokens. For example:

  With arbitrary keys:

  {
   "some.arbitrary.key": "Hooray!",
   "some.other.arbitrary.key": "Hooray!"
  }

  With auto-generated keys:

  {
    "\3923d": "Hooray!"
  }

• I know I can fix the previous point by creating a script that would post-process the generated lang, but that is a completely unnecessary step since we could simply let react-intl handle that for us (like we're doing)
• Some developer argue that using arbitrary keys makes more "context-aware" tokens. I disagree with that. In our opinion tokens should be agnostic from our platform structure. We should be able to add/remove tokens as we please

Thanks in advance :)

[chrztoph]

Hi!

Thank you again for this issue and the description of your current workflow. That helps a lot understanding your situation!

To answer your question Is there a way to display the key, alongside the default language token value, there?: Currently not in the translation editor, but displaying a preview of the text in the default language makes totally sense there. We will add this in a future version. 👍🏻

For now you can also translate the keys in the keys view where you can directly see the translations for the keys. See here for more information. I hope this helps until then.

[delucca]

Hi!

Thank you again for this issue and the description of your current workflow. That helps a lot understanding your situation!

To answer your question Is there a way to display the key, alongside the default language token value, there?: Currently not in the translation editor, but displaying a preview of the text in the default language makes totally sense there. We will add this in a future version. 👍🏻

For now you can also translate the keys in the keys view where you can directly see the translations for the keys. See here for more information. I hope this helps until then.

Great!

Thanks for the quick reply! Looking forward for that feature 😄

[chrztoph]

A preview of the text is now shown in the translation editor for your default language. Hope this works for you. 🙂

Thank you for your feedback!