Merge branch 'develop' into develop

Author: dewanshDT

README.md

@@ -12,15 +12,10 @@ The p5.js Editor is a collaborative project created by many individuals, mostly
 
 Learn more about [our community](https://p5js.org/community/) and read our community statement and [code of conduct](./.github/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support).
 
-## Get Started
+## Getting Started
 
 Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
 
-## Setting Up the Development Environment
-
-- Refer to [this documentation for setting up your environment](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/installation.md)
-
-
 
 ## Issues
 
@@ -31,10 +26,47 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 * p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)
 
+
+### How Do I Know My Issue or Pull Request is Getting Reviewed?
+
+To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/9), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+
+Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
+
+
+### When Will the Next Production Release Be?
+
+We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
+
+MINOR Release for [p5.js version 1.8.0](https://github.com/processing/p5.js/releases/tag/v1.8.0): By October 27, 2023
+
+PATCH Release: By November 2, 2023
+
+MINOR Release: By November 30, 2023
+
+[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
+
+
+## References for Contributing to the p5.js Web Editor
+
+[Code of Conduct](https://editor.p5js.org/code-of-conduct)
+
+[Contribution Guidelines for p5.js](https://p5js.org/contributor-docs/#/)
+
+[Contribution Guidelines for the p5.js Web Editor](https://github.com/processing/p5.js-web-editor/tree/develop/contributor_docs)
+
+[p5.js Community Statement](https://p5js.org/community/)
+
+
 ## Acknowledgements
 
 Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others. 
 
-Hosting and technical support has come from: <br />
-<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a> 
+Hosting and technical support has come from: 
+<br />
+<br />
+<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
+<br />
 <a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
+<br />
+<a href="https://www.fastly.com/" target="_blank"><img width="100" src="https://cdn-assets-us.frontify.com/s3/frontify-enterprise-files-us/eyJwYXRoIjoiZmFzdGx5XC9hY2NvdW50c1wvYzJcLzQwMDEwMjNcL3Byb2plY3RzXC8xMVwvYXNzZXRzXC80ZVwvNzc0XC9lZTZmYzlkOWYzNWE1NjBkNjUzNjFkNGI0NGQ2MTNmZi0xNjIxNTIyODg4LnBuZyJ9:fastly:nVuY3PxyFqQMI6elJsMzxAGLH3IFlmiuMdacHAGRMkE?width=2400" /></a>

client/components/Nav/NavBar.jsx

@@ -71,7 +71,10 @@ function NavBar({ children, className }) {
         onFocus: clearHideTimeout
       }),
       createMenuItemHandlers: (dropdown) => ({
-        onMouseUp: () => {
+        onMouseUp: (e) => {
+          if (e.button === 2) {
+            return;
+          }
           setDropdownOpen('none');
         },
         onBlur: handleBlur,

client/modules/IDE/actions/assets.js

@@ -11,20 +11,18 @@ function setAssets(assets, totalSize) {
 }
 
 export function getAssets() {
-  return (dispatch) => {
+  return async (dispatch) => {
     dispatch(startLoader());
-    apiClient
-      .get('/S3/objects')
-      .then((response) => {
-        dispatch(setAssets(response.data.assets, response.data.totalSize));
-        dispatch(stopLoader());
-      })
-      .catch(() => {
-        dispatch({
-          type: ActionTypes.ERROR
-        });
-        dispatch(stopLoader());
+    try {
+      const response = await apiClient.get('/S3/objects');
+      dispatch(setAssets(response.data.assets, response.data.totalSize));
+      dispatch(stopLoader());
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.ERROR
       });
+      dispatch(stopLoader());
+    }
   };
 }
 
@@ -36,16 +34,14 @@ export function deleteAsset(assetKey) {
 }
 
 export function deleteAssetRequest(assetKey) {
-  return (dispatch) => {
-    apiClient
-      .delete(`/S3/${assetKey}`)
-      .then((response) => {
-        dispatch(deleteAsset(assetKey));
-      })
-      .catch(() => {
-        dispatch({
-          type: ActionTypes.ERROR
-        });
+  return async (dispatch) => {
+    try {
+      await apiClient.delete(`/S3/${assetKey}`);
+      dispatch(deleteAsset(assetKey));
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.ERROR
       });
+    }
   };
 }

client/modules/IDE/pages/IDEView.jsx

@@ -11,7 +11,7 @@ import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import { updateFileContent } from '../actions/files';
-import { stopSketch } from '../actions/ide';
+
 import {
   autosaveProject,
   clearPersistedState,
@@ -80,7 +80,7 @@ const IDEView = () => {
 
   const [consoleSize, setConsoleSize] = useState(150);
   const [sidebarSize, setSidebarSize] = useState(160);
-  const [isOverlayVisible, setIsOverlayVisible] = useState(true);
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
 
   const cmRef = useRef({});
 
@@ -93,8 +93,6 @@ const IDEView = () => {
 
   useEffect(() => {
     dispatch(clearPersistedState());
-
-    dispatch(stopSketch());
   }, [dispatch]);
 
   useEffect(() => {
@@ -160,7 +158,6 @@ const IDEView = () => {
                     setIsOverlayVisible(true);
                   }}
                   onDragFinished={() => {
-                    // overlayRef.current.style.display = 'none';
                     setIsOverlayVisible(false);
                   }}
                   resizerStyle={{

client/modules/Preview/EmbedFrame.jsx

@@ -252,7 +252,7 @@ function injectLocalFiles(files, htmlFile, options) {
     'PREVIEW_SCRIPTS_URL'
   )}`;
   previewScripts.setAttribute('crossorigin', '');
-  sketchDoc.head.appendChild(previewScripts);
+  sketchDoc.body.appendChild(previewScripts);
 
   const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
   scriptOffs = getAllScriptOffsets(sketchDocString);

client/modules/User/components/LoginForm.jsx

@@ -20,13 +20,7 @@ function LoginForm() {
       validate={validateLogin}
       onSubmit={onSubmit}
     >
-      {({
-        handleSubmit,
-        submitError,
-        pristine,
-        submitting,
-        modifiedSinceLastSubmit
-      }) => (
+      {({ handleSubmit, submitError, submitting, modifiedSinceLastSubmit }) => (
         <form className="form" onSubmit={handleSubmit}>
           <Field name="email">
             {(field) => (
@@ -71,7 +65,7 @@ function LoginForm() {
           {submitError && !modifiedSinceLastSubmit && (
             <span className="form-error">{submitError}</span>
           )}
-          <Button type="submit" disabled={submitting || pristine}>
+          <Button type="submit" disabled={submitting}>
             {t('LoginForm.Submit')}
           </Button>
         </form>

client/modules/User/pages/EmailVerificationView.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
@@ -9,57 +9,51 @@ import { verifyEmailConfirmation } from '../actions';
 import RootPage from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
 
-class EmailVerificationView extends React.Component {
-  static defaultProps = {
-    emailVerificationTokenState: null
-  };
-
-  componentWillMount() {
-    const verificationToken = this.verificationToken();
-    if (verificationToken != null) {
-      this.props.verifyEmailConfirmation(verificationToken);
-    }
-  }
+const EmailVerificationView = (props) => {
+  const { emailVerificationTokenState, location, t } = props;
 
-  verificationToken = () => {
-    const { location } = this.props;
+  const verificationTokenFromLocation = () => {
     const searchParams = new URLSearchParams(location.search);
     return searchParams.get('t');
   };
 
-  render() {
-    let status = null;
-    const { emailVerificationTokenState } = this.props;
-
-    if (this.verificationToken() == null) {
-      status = <p>{this.props.t('EmailVerificationView.InvalidTokenNull')}</p>;
-    } else if (emailVerificationTokenState === 'checking') {
-      status = <p>{this.props.t('EmailVerificationView.Checking')}</p>;
-    } else if (emailVerificationTokenState === 'verified') {
-      status = <p>{this.props.t('EmailVerificationView.Verified')}</p>;
-      setTimeout(() => browserHistory.push('/'), 1000);
-    } else if (emailVerificationTokenState === 'invalid') {
-      status = <p>{this.props.t('EmailVerificationView.InvalidState')}</p>;
+  useEffect(() => {
+    const verificationToken = verificationTokenFromLocation();
+    if (verificationToken != null) {
+      props.verifyEmailConfirmation(verificationToken);
     }
+  }, [location, props]);
 
-    return (
-      <RootPage>
-        <Nav layout="dashboard" />
-        <div className="form-container">
-          <Helmet>
-            <title>{this.props.t('EmailVerificationView.Title')}</title>
-          </Helmet>
-          <div className="form-container__content">
-            <h2 className="form-container__title">
-              {this.props.t('EmailVerificationView.Verify')}
-            </h2>
-            {status}
-          </div>
-        </div>
-      </RootPage>
-    );
+  let status = null;
+
+  if (verificationTokenFromLocation() == null) {
+    status = <p>{t('EmailVerificationView.InvalidTokenNull')}</p>;
+  } else if (emailVerificationTokenState === 'checking') {
+    status = <p>{t('EmailVerificationView.Checking')}</p>;
+  } else if (emailVerificationTokenState === 'verified') {
+    status = <p>{t('EmailVerificationView.Verified')}</p>;
+    setTimeout(() => browserHistory.push('/'), 1000);
+  } else if (emailVerificationTokenState === 'invalid') {
+    status = <p>{t('EmailVerificationView.InvalidState')}</p>;
   }
-}
+
+  return (
+    <RootPage>
+      <Nav layout="dashboard" />
+      <div className="form-container">
+        <Helmet>
+          <title>{t('EmailVerificationView.Title')}</title>
+        </Helmet>
+        <div className="form-container__content">
+          <h2 className="form-container__title">
+            {t('EmailVerificationView.Verify')}
+          </h2>
+          {status}
+        </div>
+      </div>
+    </RootPage>
+  );
+};
 
 function mapStateToProps(state) {
   return {
@@ -76,6 +70,10 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
+EmailVerificationView.defaultProps = {
+  emailVerificationTokenState: null
+};
+
 EmailVerificationView.propTypes = {
   emailVerificationTokenState: PropTypes.oneOf([
     'checking',

client/routes.jsx

@@ -48,8 +48,10 @@ const withParams = (Component) => (props) => (
 const Route = ({ component, ...props }) => (
   <RouterRoute component={withParams(component)} {...props} />
 );
-Route.propTypes = { ...RouterRoute.propTypes };
-Route.propTypes.component = PropTypes.elementType.isRequired;
+Route.propTypes = {
+  ...RouterRoute.propTypes,
+  component: PropTypes.elementType.isRequired
+};
 
 const routes = (
   <Switch>

client/styles/components/_form-container.scss

@@ -34,6 +34,7 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	margin-bottom: 20px;
 }
 
 .form-container--align-left .form-container__content {
@@ -76,3 +77,6 @@
 .form-container__stack > * + * {
 	margin-top: #{10 / $base-font-size}rem;
 }
+.form__navigation-options a {
+	font-weight: bold;
+  }