Merge branch 'develop' into piyush/fix-autocapitalize

Author: raclim

README.md

@@ -31,17 +31,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 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: [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: 
-
-2.12.0 MINOR Release: By February 27, 2024
-
-[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
 

client/components/Dropdown/TableDropdown.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 import DropdownMenu from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
+import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
 
 const DotsHorizontal = styled(MoreIconSvg)`
   transform: rotate(90deg);
 `;
 
 const TableDropdownIcon = () => {
-  // TODO: centralize breakpoints
-  const isMobile = useMediaQuery({ maxWidth: 770 });
-
+  const isMobile = useIsMobile();
   return isMobile ? (
     <DotsHorizontal focusable="false" aria-hidden="true" />
   ) : (

client/modules/IDE/components/About.jsx

@@ -162,6 +162,20 @@ function About(props) {
             {t('About.Discord')}
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://p5js.org/download/support.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Donate
+          </a>
+        </p>
         <p className="about__content-column-list">
           <Link to="/privacy-policy">
             <AsteriskIcon

client/modules/IDE/components/Editor/MobileEditor.jsx

@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {

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

@@ -208,6 +208,10 @@ class Editor extends React.Component {
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         this.showHint(_cm);
       }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this._cm.getInputField().blur();
+      }
     });
 
     this._cm.getWrapperElement().style[
@@ -338,7 +342,7 @@ class Editor extends React.Component {
       mode = 'application/json';
     } else if (fileName.match(/.+\.(frag|glsl)$/i)) {
       mode = 'x-shader/x-fragment';
-    } else if (fileName.match(/.+\.(vert|stl)$/i)) {
+    } else if (fileName.match(/.+\.(vert|stl|mtl)$/i)) {
       mode = 'x-shader/x-vertex';
     } else {
       mode = 'text/plain';
@@ -513,7 +517,7 @@ class Editor extends React.Component {
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <header className="editor__header">
+              <div className="editor__header">
                 <button
                   aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__contract"
@@ -538,7 +542,7 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-              </header>
+              </div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -555,7 +559,7 @@ class Editor extends React.Component {
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
-              <header>
+              <>
                 <IconButton
                   onClick={this.props.expandSidebar}
                   icon={FolderIcon}
@@ -564,7 +568,7 @@ class Editor extends React.Component {
                   {this.props.file.name}
                   <UnsavedChangesIndicator />
                 </span>
-              </header>
+              </>
               <section>
                 <EditorHolder
                   ref={(element) => {

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

@@ -4,7 +4,6 @@ import { sortBy } from 'lodash';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import MediaQuery from 'react-responsive';
 import NavDropdownMenu from '../../../../components/Nav/NavDropdownMenu';
 import NavMenuItem from '../../../../components/Nav/NavMenuItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
@@ -30,21 +29,20 @@ import {
 import { logoutUser } from '../../../User/actions';
 import { CmControllerContext } from '../../pages/IDEView';
 import MobileNav from './MobileNav';
+import useIsMobile from '../../hooks/useIsMobile';
 
-const Nav = ({ layout }) => (
-  <MediaQuery minWidth={770}>
-    {(matches) =>
-      matches ? (
-        <NavBar>
-          <LeftLayout layout={layout} />
-          <UserMenu />
-        </NavBar>
-      ) : (
-        <MobileNav />
-      )
-    }
-  </MediaQuery>
-);
+const Nav = ({ layout }) => {
+  const isMobile = useIsMobile();
+
+  return isMobile ? (
+    <MobileNav />
+  ) : (
+    <NavBar>
+      <LeftLayout layout={layout} />
+      <UserMenu />
+    </NavBar>
+  );
+};
 
 Nav.propTypes = {
   layout: PropTypes.oneOf(['dashboard', 'project'])
@@ -272,7 +270,7 @@ const UnauthenticatedUserMenu = () => {
           </span>
         </Link>
       </li>
-      <span className="nav__item-or">{t('Nav.LoginOr')}</span>
+      <li className="nav__item-or">{t('Nav.LoginOr')}</li>
       <li className="nav__item">
         <Link to="/signup" className="nav__auth-button">
           <span className="nav__item-header" title="SignUp">

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

@@ -1,29 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import MediaQuery from 'react-responsive';
+import useIsMobile from '../../hooks/useIsMobile';
+
 import Nav from './Nav';
 import Toolbar from './Toolbar';
 
 const Header = (props) => {
   const project = useSelector((state) => state.project);
 
+  const isMobile = useIsMobile();
+
   return (
-    <header>
+    <>
       <Nav />
-      <MediaQuery minWidth={770}>
-        {(matches) => {
-          if (matches)
-            return (
-              <Toolbar
-                syncFileContent={props.syncFileContent}
-                key={project.id}
-              />
-            );
-          return null;
-        }}
-      </MediaQuery>
-    </header>
+      {!isMobile && (
+        <Toolbar syncFileContent={props.syncFileContent} key={project.id} />
+      )}
+    </>
   );
 };
 

client/modules/IDE/components/IDEOverlays.jsx

@@ -34,9 +34,6 @@ export default function IDEOverlays() {
     preferencesIsVisible,
     keyboardShortcutVisible,
     shareModalVisible,
-    shareModalProjectId,
-    shareModalProjectName,
-    shareModalProjectUsername,
     errorType,
     previousPath
   } = useSelector((state) => state.ide);
@@ -87,11 +84,7 @@ export default function IDEOverlays() {
           ariaLabel={t('IDEView.ShareARIA')}
           closeOverlay={() => dispatch(closeShareModal())}
         >
-          <ShareModal
-            projectId={shareModalProjectId}
-            projectName={shareModalProjectName}
-            ownerUsername={shareModalProjectUsername}
-          />
+          <ShareModal />
         </Overlay>
       )}
       {keyboardShortcutVisible && (

client/modules/IDE/components/ShareModal.jsx

@@ -1,11 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import CopyableInput from './CopyableInput';
 // import getConfig from '../../../utils/getConfig';
 
-const ShareModal = ({ projectId, ownerUsername, projectName }) => {
+const ShareModal = () => {
   const { t } = useTranslation();
+
+  // TODO: store these as nested properties instead of top-level
+  const projectId = useSelector((state) => state.ide.shareModalProjectId);
+  const projectName = useSelector((state) => state.ide.shareModalProjectName);
+  const ownerUsername = useSelector(
+    (state) => state.ide.shareModalProjectUsername
+  );
+
   const hostname = window.location.origin;
   // const previewUrl = getConfig('PREVIEW_URL');
   return (
@@ -35,10 +43,4 @@ const ShareModal = ({ projectId, ownerUsername, projectName }) => {
   );
 };
 
-ShareModal.propTypes = {
-  projectId: PropTypes.string.isRequired,
-  ownerUsername: PropTypes.string.isRequired,
-  projectName: PropTypes.string.isRequired
-};
-
 export default ShareModal;

client/modules/IDE/hooks/useIsMobile.js

@@ -0,0 +1,9 @@
+import { useMediaQuery } from 'react-responsive';
+
+const useIsMobile = (customBreakpoint) => {
+  const breakPoint = customBreakpoint || 770;
+  const isMobile = useMediaQuery({ maxWidth: breakPoint });
+  return isMobile;
+};
+
+export default useIsMobile;