Chore: wysiwyg i18n setup

[Adammatthiesen]

Once #876 merges, the WYSIWYG plugin will need to be configured to add supported languages into its config and set it up to be able to listen to our i18n update events.

For docs related to grapesjs i18n see:

• https://grapesjs.com/docs/modules/I18n.html#configuration
• https://grapesjs.com/docs/api/i18n.html

[yashseth391]

Hi , can you explain this a little more. I have worked previously on i18n . I would like to contribute on this. @Adammatthiesen

[Adammatthiesen]

Hi , can you explain this a little more. I have worked previously on i18n . I would like to contribute on this. @Adammatthiesen

Hi @yashseth391

This task is to integrate the current WYSIWYG editor (comp) with our dashboard i18n locale nanostore system to listen to language changes (an example can be found here of how to setup subscriptions to the current lang, which will in turn if the WYSIWYG language is available cause the editor to also switch (see grapesjs docs for how to setup the editor side of things).

The general idea will be to setup in the script of the editor the locale subscription, setup grapes i18n support according to their docs and then use the subscription to set the language on change if its a supported language (StudioCMS current supported language translations can be viewed on crowdin)

[yashseth391]

Hi , can you explain this a little more. I have worked previously on i18n . I would like to contribute on this. @Adammatthiesen

Hi @yashseth391

This task is to integrate the current WYSIWYG editor (comp) with our dashboard i18n locale nanostore system to listen to language changes (an example can be found here of how to setup subscriptions to the current lang, which will in turn if the WYSIWYG language is available cause the editor to also switch (see grapesjs docs for how to setup the editor side of things).

The general idea will be to setup in the script of the editor the locale subscription, setup grapes i18n support according to their docs and then use the subscription to set the language on change if its a supported language (StudioCMS current supported language translations can be viewed on crowdin)

I would like to contribute to this @Adammatthiesen .

[Adammatthiesen]

@yashseth391

Feel free to open a PR and in the description mention this issue number where it says closes..., we mainly use the assign functionality for delegating tasks/issues to maintainers of our org.

Simply making your comment is enough for us to leave the issue for a few days for you to figure things out.

Hacktoberfest credit comes from the PR not the issue so you will get credit once the PR is accepted.

---

⚠️ Please note: StudioCMS codebase is far to complex to have AI running around trying to understand our code. Even our Review AI Coderabbit has issues sometimes as we are still training it to understand our codebase. So we ask everyone to keep AI in "Ask" or "Assist" mode and not in "Agent" mode.

Also please make sure to setup a local playground using our instructions on the main project readme, so that you will be able to verify that its working on your end as the WYSIWYG editor testing is a bit limited due to how it works.

[yashseth391]

Thanks @Adammatthiesen! I’ll ping you if I need help.

[Adammatthiesen]

Thanks @Adammatthiesen! I’ll ping you if I need help.

Sounds good! also feel free to join our discord https://chat.studiocms.dev and ask questions there as well! (tend to see that before GitHub due to GitHub's horrible notification system)

[aliozinan]

I've been working on this and had some progress by;

• importing the localization files from GrapesJS by using uiTranslationsAvailable array in Editor.astro, to merge with the StudioCMS translation files later on
• subscribing to the $localeSettings to update the language of the GrapesJS editor instance.

However, I came across a critical issue with the GrapesJS library itself. The editor.I18n.setLocale() function has a weird bug : although the language update can be observed in the editor instance in the browser console, it's not being reflected to the UI upon calling it.

I found out that the issue was reported quite a long time ago in the GrapesJS repo here : GrapesJS/grapesjs#3622 and was closed by the repo owners for no clear reason without a solution. So I left a comment, hoping that it will be re-opened and addressed. I'll also try to resolve it myself and create a PR there if I can.