metadata

Author: raclim

.babelrc

@@ -62,6 +62,20 @@
           }
         ]
       ]
+    },
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        [
+          "@babel/preset-react",
+          {
+            "runtime": "automatic"
+          }
+        ]
+      ],
+      "plugins": [
+        "babel-plugin-styled-components"
+      ]
     }
   },
   "plugins": [

.github/CONTRIBUTING.md

@@ -46,7 +46,7 @@ For first-time contributors or those who want to start with a small task, [check
 If you're looking for a bigger project to take on, look through the issues tagged [good medium issue](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issue). These issues are self-contained projects that may take longer to work on, but are great if you're looking to get more deeply involved in contributing!
 
 ### Project Board
-Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/4) board.
+Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/) board.
 
 ### Project Ideas
 If you're looking for inspiration for Google Summer of Code or a bigger project, there's a [project list](https://github.com/processing/processing/wiki/Project-List#p5js-web-editor) maintained on the Processing wiki.

README.md

@@ -14,7 +14,13 @@ Learn more about [our community](https://p5js.org/community/) and read our commu
 
 ## 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.
+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/tutorials/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.
+
+## Contributing
+
+[Contributing to the p5.js Web Editor](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/README.md)
+
+[p5.js Community Statement](https://editor.p5js.org/code-of-conduct)
 
 
 ## Issues
@@ -24,18 +30,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 * p5.js library: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)
 
-
-## 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. 

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

@@ -168,6 +168,7 @@ class Editor extends React.Component {
       },
       Enter: 'emmetInsertLineBreak',
       Esc: 'emmetResetAbbreviation',
+      [`Shift-Tab`]: false,
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
@@ -209,10 +210,6 @@ 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[

client/modules/IDE/components/FileNode.jsx

@@ -292,6 +292,7 @@ const FileNode = ({
             ref={fileOptionsRef}
             tabIndex="0"
             onClick={toggleFileOptions}
+            onBlur={() => setTimeout(hideFileOptions, 200)}
           >
             <DownArrowIcon focusable="false" aria-hidden="true" />
           </button>

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -211,7 +211,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -324,7 +324,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -340,7 +340,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>
@@ -912,7 +912,7 @@ exports[`Nav renders editor version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -1025,7 +1025,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -1041,7 +1041,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>

client/modules/IDE/components/Header/resolveUtils.unit.test.jsx

@@ -0,0 +1,67 @@
+// resolveUtils.unit.test.jsx
+
+import resolvePathsForElementsWithAttribute from '../../../../../server/utils/resolveUtils';
+import { resolvePathToFile } from '../../../../../server/utils/filePath';
+
+// Mock the dependencies
+jest.mock('../../../../../server/utils/filePath', () => ({
+  resolvePathToFile: jest.fn()
+}));
+
+jest.mock('../../../../../server/utils/fileUtils', () => ({
+  MEDIA_FILE_REGEX: /\.(png|jpg|jpeg|gif|svg)$/i
+}));
+
+describe('resolvePathsForElementsWithAttribute', () => {
+  let mockSketchDoc;
+  let mockFiles;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Create a mock DOM environment
+    mockSketchDoc = document.implementation.createHTMLDocument();
+    mockFiles = {
+      'image.png': { url: 'https://example.com/image.png' },
+      'missing.jpg': { url: null }
+    };
+
+    resolvePathToFile.mockImplementation((fileName, files) => files[fileName]);
+  });
+
+  it('should update the attribute when the file is resolved successfully', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'image.png');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('https://example.com/image.png');
+  });
+
+  it('should not update the attribute when the file resolution fails', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'missing.jpg');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('missing.jpg');
+  });
+
+  it('should not update the attribute when the value does not match MEDIA_FILE_REGEX', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'document.pdf');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('document.pdf');
+  });
+
+  it('should do nothing when no elements with the specified attribute are found', () => {
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(mockSketchDoc.querySelectorAll('[src]').length).toBe(0);
+  });
+});

client/modules/IDE/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,21 +30,37 @@ export default function SideBar() {
   );
   const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
   const canEditProject = useSelector(selectCanEditSketch);
+  const isAuthenticated = useSelector(getAuthenticated);
 
   const sidebarOptionsRef = useRef(null);
 
-  const isAuthenticated = useSelector(getAuthenticated);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        projectOptionsVisible &&
+        sidebarOptionsRef.current &&
+        !sidebarOptionsRef.current.contains(event.target)
+      ) {
+        setTimeout(() => dispatch(closeProjectOptions()), 300);
+      }
+    }
 
-  const onBlurComponent = () => {
-    setTimeout(() => dispatch(closeProjectOptions()), 200);
-  };
+    if (projectOptionsVisible) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [projectOptionsVisible, dispatch]);
 
   const toggleProjectOptions = (e) => {
     e.preventDefault();
     if (projectOptionsVisible) {
       dispatch(closeProjectOptions());
     } else {
-      sidebarOptionsRef.current?.focus();
       dispatch(openProjectOptions());
     }
   };
@@ -65,9 +81,7 @@ export default function SideBar() {
             dispatch(collapseSidebar());
             dispatch(closeProjectOptions());
           }}
-        >
-          {' '}
-        </button>
+        />
       )}
       <section className={sidebarClass}>
         <header
@@ -77,57 +91,54 @@ export default function SideBar() {
           <h3 className="sidebar__title">
             <span>{t('Sidebar.Title')}</span>
           </h3>
-          <div className="sidebar__icons">
+          <div className="sidebar__icons" ref={sidebarOptionsRef}>
             <button
               aria-label={t('Sidebar.ToggleARIA')}
               className="sidebar__add"
               tabIndex="0"
-              ref={sidebarOptionsRef}
               onClick={toggleProjectOptions}
-              onBlur={onBlurComponent}
             >
               <PlusIcon focusable="false" aria-hidden="true" />
             </button>
-            <ul className="sidebar__project-options">
-              <li>
-                <button
-                  aria-label={t('Sidebar.AddFolderARIA')}
-                  onClick={() => {
-                    dispatch(newFolder(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                >
-                  {t('Sidebar.AddFolder')}
-                </button>
-              </li>
-              <li>
-                <button
-                  aria-label={t('Sidebar.AddFileARIA')}
-                  onClick={() => {
-                    dispatch(newFile(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                >
-                  {t('Sidebar.AddFile')}
-                </button>
-              </li>
-              {isAuthenticated && (
+            {projectOptionsVisible && (
+              <ul className="sidebar__project-options">
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFolderARIA')}
+                    onClick={() => {
+                      dispatch(newFolder(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 300);
+                    }}
+                  >
+                    {t('Sidebar.AddFolder')}
+                  </button>
+                </li>
                 <li>
                   <button
-                    aria-label={t('Sidebar.UploadFileARIA')}
+                    aria-label={t('Sidebar.AddFileARIA')}
                     onClick={() => {
-                      dispatch(openUploadFileModal(rootFile.id));
-                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                      dispatch(newFile(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 300);
                     }}
-                    onBlur={onBlurComponent}
                   >
-                    {t('Sidebar.UploadFile')}
+                    {t('Sidebar.AddFile')}
                   </button>
                 </li>
-              )}
-            </ul>
+                {isAuthenticated && (
+                  <li>
+                    <button
+                      aria-label={t('Sidebar.UploadFileARIA')}
+                      onClick={() => {
+                        dispatch(openUploadFileModal(rootFile.id));
+                        setTimeout(() => dispatch(closeProjectOptions()), 300);
+                      }}
+                    >
+                      {t('Sidebar.UploadFile')}
+                    </button>
+                  </li>
+                )}
+              </ul>
+            )}
           </div>
         </header>
         <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />

client/modules/IDE/hooks/custom-hooks.js

@@ -47,8 +47,8 @@ export const useModalBehavior = (hideOverlay) => {
 };
 
 // Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 })
-// This hook basically applies useEffect but keeping track of the last value of relevant props
-// So you can passa a 2-param function to capture new and old values and do whatever with them.
+// This hook basically applies useEffect but keeps track of the last value of relevant props
+// So you can pass a 2-param function to capture new and old values and do whatever with them.
 export const useEffectWithComparison = (fn, props) => {
   const [prevProps, update] = useState({});