Merge branch 'release-2.16.6' into release

Author: raclim

.github/CONTRIBUTING.md

@@ -53,7 +53,7 @@ Issues with these labels are a great place to start!
 - [Need Steps to Reproduce](https://github.com/processing/p5.js-web-editor/labels/Needs%20Steps%20to%20Reproduce)
 - [Ready for Work](https://github.com/processing/p5.js-web-editor/labels/Ready%20for%20Work)
 
-A breakdown of what each label means can be found in the [Preparing an Issue Guide](#preparing-an-issue). 
+A breakdown of what each label means can be found in the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md). 
 
 When approaching these issues, know that it's okay to not know how to fix an issue! Feel free to ask questions about to approach the problem. We are all here to learn and make something awesome. Someone from the community will help you out, and asking questions is a great way to learn about the p5.js editor, its file structure, and development process.
 
@@ -83,7 +83,7 @@ Before submitting a pull request, make sure that:
 ---
 
 ## Ideas for Getting Started
-* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](#preparing-an-issue) and open an issue.
+* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md) and open an issue.
 * Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
 * Try getting the project running locally on your computer by following the [installation steps](./../contributor_docs/installation.md).
 * Look through the documentation in the [developer docs](../contributor_docs/) and the [development guide](./../contributor_docs/development.md). Is there anything that could be expanded? Is there anything missing?

client/i18n.js

@@ -21,6 +21,8 @@ import {
   enIN
 } from 'date-fns/locale';
 
+import getPreferredLanguage from './utils/language-utils';
+
 const fallbackLng = ['en-US'];
 
 export const availableLanguages = [
@@ -42,6 +44,21 @@ export const availableLanguages = [
   'ur'
 ];
 
+const detectedLanguage = getPreferredLanguage(
+  availableLanguages,
+  fallbackLng[0]
+);
+
+let initialLanguage = detectedLanguage;
+
+// if user has a saved preference (e.g., from redux or window.__INITIAL_STATE__), use that
+if (
+  window.__INITIAL_STATE__?.preferences?.language &&
+  availableLanguages.includes(window.__INITIAL_STATE__.preferences.language)
+) {
+  initialLanguage = window.__INITIAL_STATE__.preferences.language;
+}
+
 export function languageKeyToLabel(lang) {
   const languageMap = {
     be: 'বাংলা',
@@ -104,7 +121,7 @@ i18n
   // .use(LanguageDetector)// to detect the language from currentBrowser
   .use(Backend) // to fetch the data from server
   .init({
-    lng: 'en-US',
+    lng: initialLanguage,
     fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
     debug: false,
     backend: options,

client/modules/IDE/components/Header/Nav.jsx

@@ -378,7 +378,7 @@ const AuthenticatedUserMenu = () => {
           {t('Nav.Auth.MyAssets')}
         </MenubarItem>
         <MenubarItem id="account-settings" href="/account">
-          {t('Preferences.Settings')}
+          {t('Nav.Auth.MyAccount')}
         </MenubarItem>
         <MenubarItem id="account-logout" onClick={() => dispatch(logoutUser())}>
           {t('Nav.Auth.LogOut')}

client/modules/IDE/hooks/useP5Version.jsx

@@ -12,6 +12,7 @@ export const p5Versions = [
   '2.0.2',
   '2.0.1',
   '2.0.0',
+  '1.11.8',
   '1.11.7',
   '1.11.6',
   '1.11.5',

client/modules/IDE/reducers/preferences.js

@@ -1,4 +1,5 @@
 import * as ActionTypes from '../../../constants';
+import i18n from '../../../i18n';
 
 export const initialState = {
   tabIndex: 0,
@@ -11,7 +12,7 @@ export const initialState = {
   gridOutput: false,
   theme: 'light',
   autorefresh: false,
-  language: 'en-US',
+  language: i18n.language,
   autocloseBracketsQuotes: true,
   autocompleteHinter: false
 };

client/modules/User/components/AccountForm.jsx

@@ -176,7 +176,7 @@ function AccountForm() {
             </Field>
           )}
           <Button type="submit" disabled={submitting || invalid}>
-            {t('AccountForm.SubmitSaveAllSettings')}
+            {t('AccountForm.SaveAccountDetails')}
           </Button>
         </form>
       )}

client/modules/User/components/AccountForm.unit.test.jsx

@@ -61,8 +61,8 @@ describe('<AccountForm />', () => {
   it('handles form submission and calls updateSettings', async () => {
     subject();
 
-    const saveAllSettingsButton = screen.getByRole('button', {
-      name: /save all settings/i
+    const saveAccountDetailsButton = screen.getByRole('button', {
+      name: /save account details/i
     });
 
     const currentPasswordElement = screen.getByLabelText(/current password/i);
@@ -81,7 +81,7 @@ describe('<AccountForm />', () => {
     });
 
     await act(async () => {
-      fireEvent.click(saveAllSettingsButton);
+      fireEvent.click(saveAccountDetailsButton);
     });
 
     await waitFor(() => {
@@ -92,8 +92,8 @@ describe('<AccountForm />', () => {
   it('Save all setting button should get disabled while submitting and enable when not submitting', async () => {
     subject();
 
-    const saveAllSettingsButton = screen.getByRole('button', {
-      name: /save all settings/i
+    const saveAccountDetailsButton = screen.getByRole('button', {
+      name: /save account details/i
     });
 
     const currentPasswordElement = screen.getByLabelText(/current password/i);
@@ -110,12 +110,12 @@ describe('<AccountForm />', () => {
         value: 'newPassword'
       }
     });
-    expect(saveAllSettingsButton).not.toHaveAttribute('disabled');
+    expect(saveAccountDetailsButton).not.toHaveAttribute('disabled');
 
     await act(async () => {
-      fireEvent.click(saveAllSettingsButton);
+      fireEvent.click(saveAccountDetailsButton);
       await waitFor(() => {
-        expect(saveAllSettingsButton).toHaveAttribute('disabled');
+        expect(saveAccountDetailsButton).toHaveAttribute('disabled');
       });
     });
   });

client/utils/language-utils.js

@@ -0,0 +1,80 @@
+/**
+ * Utility functions for language detection and handling
+ */
+
+function getPreferredLanguage(supportedLanguages = [], defaultLanguage = 'en') {
+  if (typeof navigator === 'undefined') {
+    return defaultLanguage;
+  }
+
+  const normalizeLanguage = (langCode) => langCode.toLowerCase().trim();
+
+  const normalizedSupported = supportedLanguages.map(normalizeLanguage);
+
+  if (navigator.languages && navigator.languages.length) {
+    const matchedLang = navigator.languages.find((browserLang) => {
+      const normalizedBrowserLang = normalizeLanguage(browserLang);
+
+      const hasExactMatch =
+        normalizedSupported.findIndex(
+          (lang) => lang === normalizedBrowserLang
+        ) !== -1;
+
+      if (hasExactMatch) {
+        return true;
+      }
+
+      const languageOnly = normalizedBrowserLang.split('-')[0];
+      const hasLanguageOnlyMatch =
+        normalizedSupported.findIndex(
+          (lang) => lang === languageOnly || lang.startsWith(`${languageOnly}-`)
+        ) !== -1;
+
+      return hasLanguageOnlyMatch;
+    });
+
+    if (matchedLang) {
+      const normalizedMatchedLang = normalizeLanguage(matchedLang);
+      const exactMatchIndex = normalizedSupported.findIndex(
+        (lang) => lang === normalizedMatchedLang
+      );
+
+      if (exactMatchIndex !== -1) {
+        return supportedLanguages[exactMatchIndex];
+      }
+
+      const languageOnly = normalizedMatchedLang.split('-')[0];
+      const languageOnlyMatchIndex = normalizedSupported.findIndex(
+        (lang) => lang === languageOnly || lang.startsWith(`${languageOnly}-`)
+      );
+
+      if (languageOnlyMatchIndex !== -1) {
+        return supportedLanguages[languageOnlyMatchIndex];
+      }
+    }
+  }
+
+  if (navigator.language) {
+    const normalizedNavLang = normalizeLanguage(navigator.language);
+    const exactMatchIndex = normalizedSupported.findIndex(
+      (lang) => lang === normalizedNavLang
+    );
+
+    if (exactMatchIndex !== -1) {
+      return supportedLanguages[exactMatchIndex];
+    }
+
+    const languageOnly = normalizedNavLang.split('-')[0];
+    const languageOnlyMatchIndex = normalizedSupported.findIndex(
+      (lang) => lang === languageOnly || lang.startsWith(`${languageOnly}-`)
+    );
+
+    if (languageOnlyMatchIndex !== -1) {
+      return supportedLanguages[languageOnlyMatchIndex];
+    }
+  }
+
+  return defaultLanguage;
+}
+
+export default getPreferredLanguage;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.16.5",
+  "version": "2.16.6",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

@@ -367,13 +367,13 @@
     "CurrentPasswordARIA": "Current Password",
     "NewPassword": "New Password",
     "NewPasswordARIA": "New Password",
-    "SubmitSaveAllSettings": "Save All Settings"
+    "SaveAccountDetails": "Save Account Details"
   },
   "AccountView": {
     "SocialLogin": "Social Login",
     "SocialLoginDescription": "Use your GitHub or Google account to log into the p5.js Web Editor.",
     "Title": "p5.js Web Editor | Account Settings",
-    "Settings": "Account Settings",
+    "Settings": "My Account",
     "AccountTab": "Account",
     "AccessTokensTab": "Access Tokens"
   },