Web Editor - FES i18next integration

[almchung]

Nature of issue?

• Existing feature enhancement

Feature enhancement details:

This issue proposes an integration plan between the web editor and the Friendly Error System (FES).

The current web editor successfully displays FES messages in the default language. It would be even more helpful if the language of FES automatically matches with the detected or selected language in the web editor!

To integrate FES with the web editor, I’m thinking of following these steps:

1. p5js: Expose the language switching function
   This mainly means to extend setTranslatorLanguage() from our i18n module [LINK]. p5._setTranslatorLanguage() can be a way to do this [LINK]. (Not sure whether this is the best place for it.)

2. Web editor: Identify where the language option needs to be updated
   (a) We’ll need to add the language option to where the sketch (in iframe) begins to run, such as the startSketch() payload in modules/IDE/actions/ide.js. Here we'll pass the locale detected by the Web Editor app.
   (b) The Web Editor react app’s language state is updated when language selection event happens (e.g. the dropdown menu UI), as seen in components/Nav.jsx/handleLangSelection(). I’m not sure whether we'll need to reload the sketch iframe/update language here.
   (c) I wonder if I’m missing any other cases?

3. Web editor: Handle messages with the language option
   We’ll need to edit modules/Preview/previewIndex.jsx to handle the posted request and relay the language option to EmbedFrame.

4. Web editor: Change language within the Sketch iFrame
   When EmbedFrame finally receives the language option, I have a hacky plan to add a script p5._setTranslatorLanguage ({{langugage code}}); to the iframe HTML. Maybe we can dynamically generate defaultHTML based on the language option? If you know a more elegant way, I'd love to learn it!

@catarak and @outofambit, please feel free to comment if you have feedback on any of these steps.

Thank you! :)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

This plan looks great! Some comments:

2. (b) The Web Editor react app’s language state is updated when language selection event happens (e.g. the dropdown menu UI), as seen in components/Nav.jsx/handleLangSelection(). I’m not sure whether we'll need to reload the sketch iframe/update language here.

You will need to! The easiest way may be to reload the entire sketch, which is probably okay because users are likely not changing the language often.

4. Web editor: Change language within the Sketch iFrame
   When EmbedFrame finally receives the language option, I have a hacky plan to add a script p5._setTranslatorLanguage ({{langugage code}}); to the iframe HTML. Maybe we can dynamically generate defaultHTML based on the language option? If you know a more elegant way, I'd love to learn it!

I'm going to have to think about the right way to do this. One easy way would be to pass the language to the sketch (here is a part of EmbedFrame that is passing variables to the sketch). Then, in previewEntry.js, you have access to the p5 instance (example that accesses the global p5 variable).

Some issues with this approach are:

1. It's hidden from the user that the language has changed
2. If a user downloads a sketch, the selected language is not embedded in the sketch.

Another option I've thought about is the editor creating a "config.js" file that would add this option automatically (and in the future, would also support configuring accessibility outputs as well), but it's unclear how to present this file to the user (can they edit it? how do you prevent them from editing it?)

[outofambit]

Thanks for writing this up @almchung! Looks good from my side. :)

1. p5js: Expose the language switching function
   This mainly means to extend setTranslatorLanguage() from our i18n module [LINK]. p5._setTranslatorLanguage() can be a way to do this [LINK]. (Not sure whether this is the best place for it.)

That sounds right to me! And the place you chose looks good to me too. You might also need a p5._availableTranslatorLanguages to query for the settings page to know which translations are supported in the sketch's version of p5, but maybe we could just keep the most recent release's supported languages list in the editor? i think i18next will just fallback to english if the translation language asked for doesn't exist in the sketch's loaded translations and that's behavior we can customize. (this is kind of getting into point 2b).

[almchung]

These are all great suggestions! Thank you, @catarak and @outofambit!!
To get things moving, I'll add a checklist here shortly.

Also @outofambit, I'll open a new issue on the p5.js repo with a summary of this issue and the checklist.

[almchung]

Checklist

• p5.js: Add p5._availableTranslatorLanguages
• Web editor: Add Korean translation file (partial) and update dropdown UI
• Web editor: Add the language option to the startSketch() payload
• Web editor: Update components/Nav.jsx/handleLangSelection() to reload the sketch iframe
• Web editor: Update modules/Preview/previewIndex.jsx to handle the language option
• Test passing language option from the web editor to p5.js (try all suggested ideas for calling p5._setLanguage() method at EmbedFrame)
• Web editor: Decide on calling p5._setLanguage() method and implement the final version
• Update Korean translation with full version
• Link p5.js-p5.jswebeditor translation guide? (or establish shared glossary)

[almchung]

This project will be on hold until early this summer when the development direction for the FES becomes clearer. Thank you!