Web Editor - FES i18next integration

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! :)