Merge branch 'release-2.12.14' into release

Author: raclim

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[
@@ -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

@@ -270,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

@@ -12,12 +12,12 @@ const Header = (props) => {
   const isMobile = useIsMobile();
 
   return (
-    <header>
+    <>
       <Nav />
       {!isMobile && (
         <Toolbar syncFileContent={props.syncFileContent} key={project.id} />
       )}
-    </header>
+    </>
   );
 };
 

client/modules/IDE/hooks/useSketchActions.js

@@ -16,6 +16,7 @@ const useSketchActions = () => {
   const unsavedChanges = useSelector((state) => state.ide.unsavedChanges);
   const authenticated = useSelector((state) => state.user.authenticated);
   const project = useSelector((state) => state.project);
+  const user = useSelector((state) => state.user);
   const canEditProjectName = useSelector(selectCanEditSketch);
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -40,8 +41,10 @@ const useSketchActions = () => {
   }
 
   function downloadSketch() {
-    dispatch(autosaveProject());
-    exportProjectAsZip(project.id);
+    if (authenticated && user.id === project.owner.id) {
+      dispatch(autosaveProject());
+      exportProjectAsZip(project.id);
+    }
   }
 
   function shareSketch() {

client/modules/IDE/pages/IDEView.jsx

@@ -27,7 +27,6 @@ import {
 } from '../components/Editor/MobileEditor';
 import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
-import { CrossIcon } from '../../../common/icons';
 
 function getTitle(project) {
   const { id } = project;
@@ -105,7 +104,6 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-  const [displayBanner, setDisplayBanner] = useState(true);
 
   const cmRef = useRef({});
 
@@ -116,45 +114,6 @@ const IDEView = () => {
     dispatch(updateFileContent(file.id, file.content));
   };
 
-  const Banner = () => {
-    // temporary banner to display funding opportunities
-    const [textObj, setTextObj] = useState({});
-
-    useEffect(() => {
-      const grant1 = {
-        copy:
-          'Learn to make art with AI with the Social Software High School Summer Institute. Apply by June 1!',
-        url: 'https://summer.ucla.edu/program/social-software-summer-institute/'
-      };
-
-      const grant2 = {
-        copy:
-          'Join us in contributing to p5.js——receive a $10,000 opportunity to grow within the contributor community!',
-        url: 'https://processingfoundation.org/grants'
-      };
-
-      const allMessages = [grant1, grant2];
-      const randomIndex = Math.floor(Math.random() * allMessages.length);
-      const randomMessage = allMessages[randomIndex];
-
-      setTextObj(randomMessage);
-    }, []);
-
-    return (
-      <div className="banner">
-        <a href={textObj.url}>{textObj.copy}</a>
-        <button
-          className="banner-close-button"
-          onClick={() => {
-            setDisplayBanner(!displayBanner);
-          }}
-        >
-          <CrossIcon />
-        </button>
-      </div>
-    );
-  };
-
   useEffect(() => {
     dispatch(clearPersistedState());
   }, [dispatch]);
@@ -211,7 +170,6 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
-      {displayBanner && <Banner />}
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />

client/styles/layout/_ide.scss

@@ -16,29 +16,6 @@
 	width: 100%;
 }
 
-.banner {
-  width: 100%;
-  min-height: 2.2rem;
-  text-align: center;
-  padding: 0.5rem;
-  font-weight: bold;
-  border-bottom: 1px dashed #A6A6A6;
-
-  @media (max-width: 770px) {
-    min-height: 3.3rem;
-  }
-}
-
-.banner-close-button{
-  display: flex;
-  flex-direction: column;
-  align-items: center; 
-  justify-content: center;
-  height: 20px;
-  width:20px;
-  float: right;
-}
-
 .sidebar {
   width: 100%;
   height: 100%;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.12.13",
+  "version": "2.12.14",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

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