Merge branch 'develop' into refactor/modal

Author: lindapaiste

.github/ISSUE_TEMPLATE/feature-request.md renamed to .github/ISSUE_TEMPLATE/🌱-new-feature-request.md

@@ -1,16 +1,16 @@
 ---
-name: New Feature Request
+name: "\U0001F331 New Feature Request"
 about: This template is for requesting a new feature be added.
 title: ''
-labels: feature request
+labels: ''
 assignees: ''
 
 ---
 
 <!--
 Hi there!
 
-Thank you for contributing to the p5.js Editor project
+Thank you for contributing to the p5.js Editor project. 
 
 Until further notice, we will only add new features that increase access.
 

.github/ISSUE_TEMPLATE/found-a-bug.md renamed to .github/ISSUE_TEMPLATE/🐛-found-a-bug.md

@@ -1,6 +1,8 @@
 ---
-name: Found a Bug
-about: This template is for reporting bugs (broken or incorrect behavior). If you have questions about your own code, please visit our forum discourse.processing.org instead.
+name: "\U0001F41B Found a Bug"
+about: This template is for reporting bugs (broken or incorrect behavior). If you
+  have questions about your own code, please visit our forum discourse.processing.org
+  instead.
 title: ''
 labels: bug
 assignees: ''

.github/ISSUE_TEMPLATE/existing-feature-enhancement.md renamed to .github/ISSUE_TEMPLATE/💡-existing-feature-enhancement.md

@@ -1,8 +1,8 @@
 ---
-name: Existing Feature Enhancement
+name: "\U0001F4A1 Existing Feature Enhancement"
 about: This template is for suggesting an improvement for an existing feature.
 title: ''
-labels: enhancement
+labels: ''
 assignees: ''
 
 ---

README.md

@@ -1,10 +1,5 @@
 # [p5.js Editor](https://editor.p5js.org)
 
-
-Documentation is also available in the following languages:
-
-[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
-
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
 The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything. It is designed with beginners in mind, limiting features and frills. The editor is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

client/common/icons.jsx

@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
-  const Icon = (props) => {
-    const StyledIcon = styled(SvgComponent)`
-      &&& {
-        color: ${prop('Icon.default')};
+  const StyledIcon = styled(SvgComponent)`
+    &&& {
+      color: ${prop('Icon.default')};
+      & g,
+      & path,
+      & polygon {
+        opacity: 1;
+        fill: ${prop('Icon.default')};
+      }
+      &:hover {
+        color: ${prop('Icon.hover')};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.default')};
-        }
-        &:hover {
-          color: ${prop('Icon.hover')};
-          & g,
-          & path,
-          & polygon {
-            opacity: 1;
-            fill: ${prop('Icon.hover')};
-          }
+          fill: ${prop('Icon.hover')};
         }
       }
-    `;
+    }
+  `;
 
+  const Icon = (props) => {
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
       return (

client/components/Nav.jsx

@@ -667,6 +667,26 @@ class Nav extends React.PureComponent {
                 हिन्दी
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="ko"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                한국어
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="it"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Italiano
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}

client/i18n.js

@@ -1,11 +1,14 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
+
 import {
   enUS,
   es,
   ja,
   hi,
+  it,
+  ko,
   ptBR,
   de,
   frCA,
@@ -22,7 +25,9 @@ const availableLanguages = [
   'es-419',
   'fr-CA',
   'hi',
+  'it',
   'ja',
+  'ko',
   'pt-BR',
   'sv',
   'uk-UA',
@@ -37,7 +42,9 @@ export function languageKeyToLabel(lang) {
     'es-419': 'Español',
     'fr-CA': 'Français',
     hi: 'हिन्दी',
+    it: 'Italiano',
     ja: '日本語',
+    ko: '한국어',
     'pt-BR': 'Português',
     sv: 'Svenska',
     'uk-UA': 'Українська',
@@ -54,7 +61,9 @@ export function languageKeyToDateLocale(lang) {
     'es-419': es,
     'fr-CA': frCA,
     hi,
+    it,
     ja,
+    ko,
     'pt-BR': ptBR,
     sv,
     'uk-UA': uk,

client/modules/IDE/components/About.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
+import packageData from '../../../../package.json';
 
 function About(props) {
   const { t } = useTranslation();
+  const p5version = useSelector((state) => {
+    const index = state.files.find((file) => file.name === 'index.html');
+    return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+  });
   return (
     <div className="about__content">
       <Helmet>
@@ -20,6 +26,14 @@ function About(props) {
           aria-label={t('Common.p5logoARIA')}
           focusable="false"
         />
+        <div className="about__content-column">
+          <p className="about__version-info">
+            Web Editor: <span>v{packageData?.version}</span>
+          </p>
+          <p className="about__version-info">
+            p5.js: <span>v{p5version}</span>
+          </p>
+        </div>
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>

client/modules/IDE/components/PreviewFrame.jsx

@@ -24,7 +24,7 @@ function PreviewFrame({ fullView }) {
   const frameUrl = previewUrl;
   const sandboxAttributes = `allow-forms allow-modals allow-pointer-lock allow-popups 
     allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads`;
-  const allow = `accelerometer; ambient-light-sensor; autoplay; camera; encrypted-media; geolocation; gyroscope; \
+  const allow = `accelerometer; ambient-light-sensor; autoplay; bluetooth; camera; encrypted-media; geolocation; gyroscope; \
     hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
 
   return (

client/modules/IDE/reducers/files.js

@@ -12,8 +12,8 @@ function draw() {
 const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 

client/modules/Preview/EmbedFrame.jsx

@@ -227,7 +227,7 @@ function injectLocalFiles(files, htmlFile, options) {
   const accessiblelib = sketchDoc.createElement('script');
   accessiblelib.setAttribute(
     'src',
-    'https://cdn.jsdelivr.net/gh/processing/p5.accessibility@v0.1.1/dist/p5.accessibility.js'
+    'https://cdn.jsdelivr.net/gh/processing/p5.accessibility@0.1.1/dist/p5-accessibility.js'
   );
   const accessibleOutputs = sketchDoc.createElement('section');
   accessibleOutputs.setAttribute('id', 'accessible-outputs');

client/styles/components/_about.scss

@@ -74,6 +74,24 @@
   }
 }
 
+.about__version-info {
+  @include themify() {
+    padding-top: #{8 / $base-font-size}rem;
+    font-size: #{16 / $base-font-size}rem;
+    span {
+      color: getThemifyVariable('logo-color');
+    }
+    &:first-child {
+      padding-top: #{30 /$base-font-size}rem;
+    }
+  }
+  // span {
+  //   @include themify() {
+  //     fill: getThemifyVariable('logo-color');
+  //   }
+  // }
+}
+
 .about__footer {
   display: flex;
   justify-content: space-between;

client/styles/components/_preferences.scss

@@ -237,6 +237,7 @@ input[type="number"]::-webkit-outer-spin-button {
   @include themify() {
     //for some reason this won't work for getThemifyVariable
     color: map-get($theme-map, "heavy-text-color");
+    font-weight: bold;
   }
 }
 

client/styles/components/_sidebar.scss

@@ -115,6 +115,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   min-width: #{7 / $base-font-size}rem;
+  white-space: pre;
 }
 
 .sidebar__file-item-name-text {

client/testData/testReduxStore.js

@@ -68,7 +68,7 @@ const initialTestState = {
     },
     {
       name: 'index.html',
-      content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
+      content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
       id: '606fc1c46045e19ca2ee2646',
       _id: '606fc1c46045e19ca2ee2646',
       fileType: 'file',

contributor_docs/README.md

@@ -12,6 +12,6 @@ This folder contains documents intended for developers of the p5.js Web Editor.
 * [Release](./release.md) - A guide to creating a production release.
 
 ## Documents to Create
-* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/develop/contributor_docs/design_principles.md)
-* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/develop/contributor_docs/issue_labels.md)
+* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/blob/main/contributor_docs/design_principles.md)
+* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)
 * File Structure - An explanation of the file structure of this application.

contributor_docs/accessibility.md

@@ -1,14 +1,14 @@
 ## Accessibility Guidelines
 
-Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
+Here is a guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
 
 The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues.
 
 **Code Structure**
 
-* Screen Readers are an assistive technology for vision loss which helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
+* Screen Readers are an assistive technology for vision loss that helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader-friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
 * All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.)
-* In cases where tags are not screen reader friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
+* In cases where tags are not screen reader-friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
 * When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/NewFileForm.jsx#L16)
 
 **Labeling**

contributor_docs/deployment.md

@@ -17,7 +17,7 @@ WIP.
 
 These are the steps that happen when you deploy the application.
 
-1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
+1. Push to the `develop` branch, or merge in a pull request to the `develop` branch.
 2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
 3. Travis CI builds a (development) Docker image of the whole application.
 4. Travis CI runs some tests, which in this case, is just `npm run lint`. This could be updated in the future to include more extensive tests. If the tests fail, the build stops here.
@@ -47,7 +47,7 @@ If you are interested in hosting and deploying your own p5.js Web Editor instanc
 
 1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
 2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/develop)
-3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
+3. Enter a unique *App name*, this will become part of the URL (i.e. https://app-name.herokuapp.com/)
 4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
 5. Click on the "Deploy app" button
 6. When complete, click on the "View app" button

contributor_docs/development.md

@@ -22,7 +22,7 @@ Follow the [installation guide](./installation.md).
 As a person contributing code but not creating production releases (this is most people!), here's what you need to know:
 * The default branch is `develop`. All pull requests should be made to this branch. It should be stable, and all commits are visible at a staging server.
 * When working on a bug or feature, you should branch from the `develop` branch. When you're done, you should open a pull request from your feature branch to `develop`.
-* The `release` branch is the live production branch, and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully, and will be done using git tags. 
+* The `release` branch is the live production branch and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully and will be done using git tags. 
 * Emergency hotfix changes should be branched from `release` and merged via a pull request to `release`. After a PR is merged, then the commits can be merged to `develop`.
 
 See the [release guide](./release.md) for information about creating a release.
@@ -68,7 +68,7 @@ Structure your commit message like this:
 * Write the summary line and description of what you have done in the imperative mode, that is as if you were commanding someone. Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed".
 * Link the GitHub issue you are working on in the summary line in brackets, e.g. [#123]
 * Always leave the second line blank.
-* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
+* Be as descriptive as possible in the description. It helps to reason about the intention of commits and gives more context about why changes happened.
 * If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.
 * Note that you can connect multiple issues to a commit, if necessary: `[#123][#456] Add Button component`