Merge branch 'develop' into syntax-highlighting-instance-backup

Author: raclim

.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/AddRemoveButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick, t }) => {
+const AddRemoveButton = ({ type, onClick }) => {
+  const { t } = useTranslation();
   const alt =
     type === 'add'
       ? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
 
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
-  onClick: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 };
 
-export default withTranslation()(AddRemoveButton);
+export default AddRemoveButton;

client/components/Nav.jsx

@@ -677,6 +677,16 @@ class Nav extends React.PureComponent {
                 한국어
               </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/components/PreviewNav.jsx

@@ -1,47 +1,50 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project, t }) => (
-  <nav className="nav preview-nav">
-    <div className="nav__items-left">
-      <div className="nav__item-logo">
-        <LogoIcon
-          role="img"
-          aria-label={t('Common.p5logoARIA')}
-          focusable="false"
-          className="svg__logo"
-        />
+const PreviewNav = ({ owner, project }) => {
+  const { t } = useTranslation();
+  return (
+    <nav className="nav preview-nav">
+      <div className="nav__items-left">
+        <div className="nav__item-logo">
+          <LogoIcon
+            role="img"
+            aria-label={t('Common.p5logoARIA')}
+            focusable="false"
+            className="svg__logo"
+          />
+        </div>
+        <Link
+          className="nav__item"
+          to={`/${owner.username}/sketches/${project.id}`}
+        >
+          {project.name}
+        </Link>
+        <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
+        <Link className="nav__item" to={`/${owner.username}/sketches/`}>
+          {owner.username}
+        </Link>
       </div>
-      <Link
-        className="nav__item"
-        to={`/${owner.username}/sketches/${project.id}`}
-      >
-        {project.name}
-      </Link>
-      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
-      <Link className="nav__item" to={`/${owner.username}/sketches/`}>
-        {owner.username}
-      </Link>
-    </div>
-    <div className="nav__items-right">
-      <Link
-        to={`/${owner.username}/sketches/${project.id}`}
-        aria-label={t('PreviewNav.EditSketchARIA')}
-      >
-        <CodeIcon
-          className="preview-nav__editor-svg"
-          focusable="false"
-          aria-hidden="true"
-        />
-      </Link>
-    </div>
-  </nav>
-);
+      <div className="nav__items-right">
+        <Link
+          to={`/${owner.username}/sketches/${project.id}`}
+          aria-label={t('PreviewNav.EditSketchARIA')}
+        >
+          <CodeIcon
+            className="preview-nav__editor-svg"
+            focusable="false"
+            aria-hidden="true"
+          />
+        </Link>
+      </div>
+    </nav>
+  );
+};
 
 PreviewNav.propTypes = {
   owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
+  }).isRequired
 };
 
-export default withTranslation()(PreviewNav);
+export default PreviewNav;

client/i18n.js

@@ -7,6 +7,7 @@ import {
   es,
   ja,
   hi,
+  it,
   ko,
   ptBR,
   de,
@@ -24,6 +25,7 @@ const availableLanguages = [
   'es-419',
   'fr-CA',
   'hi',
+  'it',
   'ja',
   'ko',
   'pt-BR',
@@ -40,6 +42,7 @@ export function languageKeyToLabel(lang) {
     'es-419': 'Español',
     'fr-CA': 'Français',
     hi: 'हिन्दी',
+    it: 'Italiano',
     ja: '日本語',
     ko: '한국어',
     'pt-BR': 'Português',
@@ -58,6 +61,7 @@ export function languageKeyToDateLocale(lang) {
     'es-419': es,
     'fr-CA': frCA,
     hi,
+    it,
     ja,
     ko,
     'pt-BR': ptBR,

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>