Merge branch 'develop' into fix/stringify

Author: raclim

.github/CONTRIBUTING.md

@@ -75,6 +75,7 @@ The best way to verify if an issue is ready to be worked on is checking if it ha
 
 ### Before Submitting a Pull Request
 Before submitting a pull request, make sure that: 
+- Your work is related to an issue. **Pull requests that do not have an associated issue will not be accepted.** 
 - Your work adheres to the style guidelines and fits in with the rest of the codebase. 
 - You ran the project locally and tested your changes. Pay special attention to any specific areas of the p5.js editor that may be affected by your changes. Does everything still work as before? Great!
 - You reference the [Preparing a Pull Request Guide](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/preparing_a_pull_request.md) for more details!

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -442,45 +442,43 @@ describe('<Preferences />', () => {
         );
       });
     });
+    describe('start wordwrap at false', () => {
+      it('wordwrap toggle, starting at false', () => {
+        // render the component with wordwrap prop set to false
+        subject({ wordwrap: false });
 
-    describe('start linewrap at false', () => {
-      it('linewrap toggle, starting at false', () => {
-        // render the component with linewrap prop set to false
-        subject({ linewrap: false });
-
-        // get ahold of the radio buttons for toggling linewrap
-        const linewrapRadioFalse = screen.getByRole('radio', {
-          name: /linewrap off/i
+        // get ahold of the radio buttons for toggling wordwrap
+        const wordwrapRadioFalse = screen.getByRole('radio', {
+          name: /wordwrap off/i
         });
-        const linewrapRadioTrue = screen.getByRole('radio', {
-          name: /linewrap on/i
+        const wordwrapRadioTrue = screen.getByRole('radio', {
+          name: /wordwrap on/i
         });
 
         testToggle(
-          linewrapRadioFalse,
-          linewrapRadioTrue,
+          wordwrapRadioFalse,
+          wordwrapRadioTrue,
           props.setLinewrap,
           true
         );
       });
     });
+    describe('start wordwrap at true', () => {
+      it('wordwrap toggle, starting at true', () => {
+        // render the component with wordwrap prop set to true
+        subject({ wordwrap: true });
 
-    describe('start linewrap at true', () => {
-      it('linewrap toggle, starting at true', () => {
-        // render the component with linewrap prop set to false
-        subject({ linewrap: true });
-
-        // get ahold of the radio buttons for toggling linewrap
-        const linewrapRadioFalse = screen.getByRole('radio', {
-          name: /linewrap off/i
+        // get ahold of the radio buttons for toggling wordwrap
+        const wordwrapRadioFalse = screen.getByRole('radio', {
+          name: /wordwrap off/i
         });
-        const linewrapRadioTrue = screen.getByRole('radio', {
-          name: /linewrap on/i
+        const wordwrapRadioTrue = screen.getByRole('radio', {
+          name: /wordwrap on/i
         });
 
         testToggle(
-          linewrapRadioTrue,
-          linewrapRadioFalse,
+          wordwrapRadioTrue,
+          wordwrapRadioFalse,
           props.setLinewrap,
           false
         );
@@ -513,7 +511,7 @@ describe('<Preferences />', () => {
       });
 
       const generalElement1 = screen.getByRole('radio', {
-        name: /linewrap on/i
+        name: /wordwrap on/i
       });
       expect(generalElement1).toBeInTheDocument();
     });

client/modules/IDE/components/Preferences/index.jsx

@@ -38,7 +38,7 @@ export default function Preferences() {
     tabIndex,
     fontSize,
     autosave,
-    linewrap,
+    wordwrap,
     lineNumbers,
     lintWarning,
     textOutput,
@@ -386,27 +386,27 @@ export default function Preferences() {
               <input
                 type="radio"
                 onChange={() => dispatch(setLinewrap(true))}
-                aria-label={t('Preferences.LineWrapOnARIA')}
-                name="linewrap"
-                id="linewrap-on"
+                aria-label={t('Preferences.WordWrapOnARIA')}
+                name="wordwrap"
+                id="wordwrap-on"
                 className="preference__radio-button"
                 value="On"
-                checked={linewrap}
+                checked={wordwrap}
               />
-              <label htmlFor="linewrap-on" className="preference__option">
+              <label htmlFor="wordwrap-on" className="preference__option">
                 {t('Preferences.On')}
               </label>
               <input
                 type="radio"
                 onChange={() => dispatch(setLinewrap(false))}
-                aria-label={t('Preferences.LineWrapOffARIA')}
-                name="linewrap"
-                id="linewrap-off"
+                aria-label={t('Preferences.WordWrapOffARIA')}
+                name="wordwrap"
+                id="wordwrap-off"
                 className="preference__radio-button"
                 value="Off"
-                checked={!linewrap}
+                checked={!wordwrap}
               />
-              <label htmlFor="linewrap-off" className="preference__option">
+              <label htmlFor="wordwrap-off" className="preference__option">
                 {t('Preferences.Off')}
               </label>
             </fieldset>

client/modules/IDE/hooks/useP5Version.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 // JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
+  '2.0.2',
   '2.0.1',
   '2.0.0',
   '1.11.5',

client/styles/components/_preferences.scss

@@ -2,7 +2,7 @@
 
 .preferences {
   width: 100%;
-  width: #{math.div(640, $base-font-size)}rem;
+  width: #{math.div(720, $base-font-size)}rem;
   max-width: 100%;
   max-height: 100%;
   z-index: 9999;
@@ -21,7 +21,7 @@
   }
 
   @media (min-width: 770px) {
-    max-height: #{math.div(460, $base-font-size)}rem;
+    max-height: #{math.div(520, $base-font-size)}rem;
   }
 }
 
@@ -204,6 +204,12 @@ input[type="number"]::-webkit-outer-spin-button {
     font-weight: bold;
   }
 }
+.preference__radio-button:focus + .preference__option,
+.preference__radio-button:focus-visible + .preference__option {
+  outline: 2px solid $dodgerblue; 
+  outline-offset: 2px;
+  border-radius: 4px;
+}
 
 .preference--hidden {
   @extend %hidden-element;

contributor_docs/README.md

@@ -9,7 +9,8 @@ These guides aren't exhaustive, and do not cover all the possible ways you can c
 * [Installation](installation.md) - A guide for setting up your development environment.
 * [Development](development.md) - A guide for contributing code to the codebase.
 * [Testing](./testing.md) - A guide for writing and running tests in the codebase. 
-* [Preparing a pull-request](preparing_a_pull_request.md) - Instructions for making a pull-request.
+* [Preparing an Issue](preparing_an_issue.md) - Instructions for creating and navigating issues.
+* [Preparing a Pull Request](preparing_a_pull_request.md) - Instructions for making a pull-request.
 * [Accessibility Guidelines](accessibility.md) - Guidelines for writing code to create an accessible application. 
 * [Translations Guidelines](translations.md) - Guidelines for translating the p5.js editor. 
 * [Deployment](deployment.md) - A guide to production deployment, and all platforms that are being used.
@@ -18,5 +19,4 @@ These guides aren't exhaustive, and do not cover all the possible ways you can c
 
 ## Documents to Create
 * Software Design Principles - reference [p5.js software design principles](https://github.com/processing/p5.js/blob/eb61f7a260531d17930de3c987949558ce242d35/contributor_docs/contributor_guidelines.md#software-design-principles)
-* Issue Templates - reference [p5.js issue templates](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#issue-templates)
 * File Structure - An explanation of the file structure of this application.

contributor_docs/preparing_a_pull_request.md

@@ -1,8 +1,17 @@
-# Preparing a pull request
+# Preparing a Pull Request
 
 Copied and updated from the [p5.js repository](https://github.com/processing/p5.js).
 
-Pull-requests are easier when your code is up to date! You can use git rebase to update your code to incorporate changes from other contributors. Here's how.
+Pull-requests are easier when your code is up to date! 
+
+## Before Submitting a Pull Request
+Before submitting a pull request, make sure that:
+
+- Your work is related to an issue. **Pull requests that do not have an associated issue will not be accepted.** 
+- Your work adheres to the style guidelines and fits in with the rest of the codebase.
+- You ran the project locally and tested your changes. Pay special attention to any specific areas of the p5.js editor that may be affected by your changes. Does everything still work as before? Great!
+
+Once that's done, you can use git rebase to update your code to incorporate changes from other contributors. Here's how.
 
 ## Save and Update
 
@@ -40,6 +49,9 @@ Then ask git about the latest changes.
 ### Verifies what git will be committing  
     git status       
 
+## Pull Request Templates
+Once you've opened your pull request, please ensure that you follow the guidelines and 
+
 ## CONFLICTS
 You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream `develop` branch causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.
 

contributor_docs/preparing_an_issue.md

@@ -0,0 +1,53 @@
+# Preparing an Issue 
+
+Most activity on the p5.js Editor’s GitHub happens in issues. Issues are GitHub posts which can contain bug reports, feature requests, or broader discussions about the development of the p5.js Editor. It’s a great place to begin contributing.
+
+## Filing a New Issue
+
+To file a new issue: 
+
+1. Visit the [Issues](https://github.com/processing/p5.js-web-editor/issues) tab on the repository. 
+
+2. Click the green 'New Issue' button on the right.
+
+3. A modal should appear with several templates for the type of issue you would like to open. Choose the one that best matches what you're looking for (i.e Bug Report, Feature Request). 
+
+4. Fill out the form as in-depth as you can. It helps to be as clear and specific as you can in your language and supporting information. Some ways to achieve that is by including screenshots, code snippets, or steps to exactly reproduce a scenario! Doing this helps maintainers and other contributors understand and respond to your issue more quickly and accurately.
+
+More in-depth information about filing an issue can be found within the [p5.js Library Documentation for Issue Templates](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#issue-templates).
+
+## Navigating Existing Issues
+
+### Project Board
+Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/) board. 
+
+### Searching and Filtering
+If you're looking for issues to work on, a good place to start is with tickets labeled [high priority](https://github.com/processing/p5.js-web-editor/labels/priority%3Ahigh). You can also look for tickets that are [feature enhancements](https://github.com/processing/p5.js-web-editor/labels/type%3Afeature), [bug fixes](https://github.com/processing/p5.js-web-editor/labels/type%3Abug), and a few other tags. 
+
+If you feel like an issue is tagged incorrectly (e.g. it's low priority and you think it should be high), please update the issue!
+
+---
+
+## Understanding Issue Labels
+
+Labels help categorize issues and makes them easier to find and sort. You can browse the full list in our [Issue Labels](https://github.com/processing/p5.js-web-editor/labels), but here are a few helpful ones to understand early on:
+
+### Good First Issues
+For first-time contributors or those who want to start with a small task, [check out the list of good first issues](https://github.com/processing/p5.js-web-editor/labels/good%20first%20issue), or [issues that need documentation of steps to reproduce](https://github.com/processing/p5.js-web-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22needs+steps+to+reproduce%22). It's okay to not know how to fix an issue—feel free to ask questions about to approach the problem! 
+
+### Good Medium Issues
+If you're looking for a bigger project to take on, look through the issues tagged [good medium issue](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issue). These issues are self-contained projects that may take longer to work on, but are great if you're looking to get more deeply involved in contributing!
+
+### Awaiting Maintainer Approval 
+All new issues opened on the p5.js editor repository will automatically have the 'Awaiting Maintainer Approval' label. This means that the issue needs review or confirmation from a maintainer before moving forward. 
+
+If you see an issue with this label, it's best to hold off on development until it's been approved and has the 'Ready for Work' label. 
+
+### Ready for Work 
+This label means the issue has been reviewed and is ready to be picked up! If it's not assigned to anyone yet, you can leave a comment expressing your interest and asked to be assigned. 
+
+If you see an issue that does not have this label but you feel that it might be ready for development, feel free to comment on it!
+
+### Help Wanted
+
+These issues need additional input, ideas, or code contributions from the community. If you're looking to get involved, this is also a great place to start. 

contributor_docs/translations.md

@@ -1,13 +1,16 @@
 # Translations Guidelines
 
+Translations are a great way to get started with contributing, and plays a big role in making the p5.js editor and its documentation more accessible. 
 
-*How to contribute with Translations for p5 web editor*
- 
-## General rules of thumb for translations
+Below are some general rules of thumb to keep in mind when contributing translations: 
 
-In order to simplify the translations process the following rules of thumb were used:
+## What Can I Translate? 
+If you're interested in translations, here's how to get started: 
+- Please only translate languages **you speak fluently or natively**.
+- At this time, we do not accept machine-generated translations (i.e from Google Translate), as they often lack context or accuracy.
+- You can also start with reviewing or improving existing translations in languages you're familiar with as well!
 
-## Technical Part
+## How Can I Add Translations in the Codebase? 
 
 * There is only one file to translate all the texts in any specific language, which is located under the directory, in the respective locale [subdirectory](https://github.com/processing/p5.js-web-editor/tree/develop/translations/locales)
 * The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/i18n.js#L22)
@@ -55,7 +58,7 @@ export function languageKeyToLabel(lang) {
 }
 ```
 
-## Translations
+## Handling Translations Files
 
 * Every component should introduce its own subset of keys inside a dictionary named after the component. 
    For instance: If you want to translate AssetList.jsx you need to introduce the following namespace in translations.json :
@@ -92,5 +95,5 @@ Did you want to know the context?
 
 Thanks! 
 
-P5.js Web Editor Community
+p5.js Editor Community
 

translations/locales/be/translations.json

@@ -168,8 +168,8 @@
     "AutocompleteHinterOnARIA": "অটোকমপ্লিট হিন্টার চালু",
     "AutocompleteHinterOffARIA": "অটোকম",
     "WordWrap": "শব্দ বিন্যাস",
-    "LineWrapOnARIA": "লাইন বিন্যাস অন",
-    "LineWrapOffARIA": "লাইন বিন্যাস অফ",
+    "WordWrapOnARIA": "লাইন বিন্যাস অন",
+    "WordWrapOffARIA": "লাইন বিন্যাস অফ",
     "LineNumbers": "লাইন সংখ্যা",
     "LineNumbersOnARIA": "লাইন সংখ্যা অন",
     "LineNumbersOffARIA": "লাইন সংখ্যা অফ",

translations/locales/de/translations.json

@@ -159,8 +159,8 @@
     "AutocloseBracketsQuotesOnARIA": "Klammern und Anführungszeichen automatisch schließen an",
     "AutocloseBracketsQuotesOffARIA": "Klammern und Anführungszeichen automatisch schließen aus",
     "WordWrap": "Wortumbruch",
-    "LineWrapOnARIA": "zeilenumbruch an",
-    "LineWrapOffARIA": "zeilenumbruch aus",
+    "WordWrapOnARIA": "zeilenumbruch an",
+    "WordWrapOffARIA": "zeilenumbruch aus",
     "LineNumbers": "Zeilennummerierung",
     "LineNumbersOnARIA": "Zeilennummerierung an",
     "LineNumbersOffARIA": "Zeilennummerierung aus",

translations/locales/en-US/translations.json

@@ -201,8 +201,8 @@
     "AutocompleteHinterOnARIA": "autocomplete hinter on",
     "AutocompleteHinterOffARIA": "autocomplete hinter off",
     "WordWrap": "Word Wrap",
-    "LineWrapOnARIA": "linewrap on",
-    "LineWrapOffARIA": "linewrap off",
+    "WordWrapOnARIA": "wordwrap on",
+    "WordWrapOffARIA": "wordwrap off",
     "LineNumbers": "Line numbers",
     "LineNumbersOnARIA": "line numbers on",
     "LineNumbersOffARIA": "line numbers off",

translations/locales/es-419/translations.json

@@ -138,6 +138,7 @@
     "Settings": "Configuración",
     "GeneralSettings": "Configuración general",
     "Accessibility": "Accesibilidad",
+    "LibraryManagement": "Gestión de biblioteca",
     "Theme": "Modo de visualización",
     "LightTheme": "Claro",
     "LightThemeARIA": "Modo de visualización claro activado",
@@ -159,8 +160,8 @@
     "Off": "Desactivar",
     "AutosaveOffARIA": "Grabado automático desactivado",
     "WordWrap": "Ajuste automático de línea",
-    "LineWrapOnARIA": "Ajuste automático de línea activado",
-    "LineWrapOffARIA": "Ajuste automático de línea desactivado",
+    "WordWrapOnARIA": "Ajuste automático de línea activado",
+    "WordWrapOffARIA": "Ajuste automático de línea desactivado",
     "LineNumbers": "Número de línea",
     "LineNumbersOnARIA": "Número de línea activado",
     "LineNumbersOffARIA": "Número de línea desactivado",
@@ -174,7 +175,13 @@
     "PlainText": "Texto sin formato",
     "TextOutputARIA": "Salida de texto activado",
     "TableText": "Tablero de texto",
-    "TableOutputARIA": "Salida de tablero activado"
+    "TableOutputARIA": "Salida de tablero activado",
+    "LibraryVersion": "p5.js Versión",
+    "LibraryVersionInfo": "Aquí hay una [nueva versión 2.0](https://github.com/processing/p5.js/releases/) ¡Ya está disponible la versión p5.js! Se convertirá en la predeterminada en agosto de 2026, así que aprovecha este tiempo para probarla y reportar errores. ¿Te interesa migrar tus bocetos de la versión 1.x a la 2.0? Mira el [recursos de compatibilidad y transición.](https://github.com/processing/p5.js-compatibility)",
+    "SoundAddon": "p5.sound.js Add-on Biblioteca",
+    "PreloadAddon": "p5.js 1.x Compatibility Add-on Biblioteca — Precarga",
+    "ShapesAddon": "p5.js 1.x Compatibility Add-on Biblioteca — formas",
+    "DataAddon": "p5.js 1.x Compatibility Add-on Biblioteca — Estructuras de datos"
   },
   "KeyboardShortcuts": {
     "Title": " Atajos de teclado",

translations/locales/fr-CA/translations.json

@@ -160,8 +160,8 @@
       "AutocloseBracketsQuotesOnARIA": "fermeture automatique des crochets et des guillemets activée",
       "AutocloseBracketsQuotesOffARIA": "fermeture automatique des crochets et des guillemets désactivée",
       "WordWrap": "Retour à la ligne automatique",
-      "LineWrapOnARIA": "retour à la ligne automatique activé",
-      "LineWrapOffARIA": "retour à la ligne automatique désactivé",
+      "WordWrapOnARIA": "retour à la ligne automatique activé",
+      "WordWrapOffARIA": "retour à la ligne automatique désactivé",
       "LineNumbers": "Numéros de lignes",
       "LineNumbersOnARIA": "numéros de lignes activés",
       "LineNumbersOffARIA": "numéros de lignes désactivés",