Merge branch 'develop' into dependabot/npm_and_yarn/lodash-4.17.23

Author: raclim

client/modules/About/pages/About.tsx

@@ -167,7 +167,7 @@ export const About = () => {
             <a
               href="https://github.com/processing/p5.js-web-editor/releases"
               target="_blank"
-              rel="noreferrer"
+              rel="noopener noreferrer"
             >
               {t('About.WebEditor')}: <span>v{packageData?.version}</span>
             </a>
@@ -176,7 +176,7 @@ export const About = () => {
             <a
               href="https://github.com/processing/p5.js/releases"
               target="_blank"
-              rel="noreferrer"
+              rel="noopener noreferrer"
             >
               p5.js: <span>v{p5version}</span>
             </a>

client/modules/IDE/actions/assets.js

@@ -30,7 +30,10 @@ export function getAssets() {
 export function deleteAssetRequest(assetKey) {
   return async (dispatch) => {
     try {
-      await apiClient.delete(`/S3/${assetKey}`);
+      const path = assetKey.split('/').pop();
+      await apiClient.delete(
+        `/S3/delete?objectKey=${encodeURIComponent(path)}`
+      );
       dispatch(deleteAsset(assetKey));
     } catch (error) {
       dispatch({

client/modules/IDE/components/AssetListRow.jsx

@@ -22,7 +22,7 @@ const AssetMenu = ({ item: asset }) => {
   return (
     <TableDropdown aria-label={t('AssetList.ToggleOpenCloseARIA')}>
       <MenuItem onClick={handleAssetDelete}>{t('AssetList.Delete')}</MenuItem>
-      <MenuItem href={asset.url} target="_blank">
+      <MenuItem href={asset.url} target="_blank" rel="noopener noreferrer">
         {t('AssetList.OpenNewTab')}
       </MenuItem>
     </TableDropdown>

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

@@ -118,7 +118,7 @@ export default function Preferences() {
   const markdownComponents = useMemo(() => {
     // eslint-disable-next-line react/no-unstable-nested-components
     const ExternalLink = ({ children, ...props }) => (
-      <a {...props} target="_blank">
+      <a {...props} target="_blank" rel="noopener noreferrer">
         {children}
       </a>
     );
@@ -618,7 +618,7 @@ export default function Preferences() {
                   <legend className="preference__warning">
                     <a
                       target="_blank"
-                      rel="noreferrer"
+                      rel="noopener noreferrer"
                       href={`https://${
                         versionInfo.isVersion2 ? 'beta.' : ''
                       }p5js.org/reference/p5.sound`}

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -37,6 +37,7 @@ const Item = ({ isAdded, onSelect, name, url }) => {
         className="quick-add__item-view"
         to={url}
         target="_blank"
+        rel="noopener noreferrer"
         onClick={(e) => e.stopPropagation()}
       >
         {t('QuickAddList.View')}

client/modules/IDE/components/show-hint.js

@@ -323,13 +323,15 @@ import CodeMirror from 'codemirror';
       return `<div class="hint-container">${hintHTML}</div>`;
     }
   }
-
+  
+  
   function getInlineHintSuggestion(cm, focus, token) {
     let tokenLength = token.string.length;
     if (token.string === '.') {
       tokenLength -= 1;
     }
     const name = focus.item?.text;
+
     const suggestionItem = focus.item;
     // builds the remainder of the suggestion excluding what user already typed
     const baseCompletion = `<span class="inline-hinter-suggestion">${suggestionItem.text.slice(

contributor_docs/preparing_a_pull_request.md

@@ -51,7 +51,17 @@ Then ask git about the latest changes.
     git status       
 
 ## Pull Request Templates
-Once you've opened your pull request, please ensure that you follow the guidelines.
+
+Once you've opened your pull request, please ensure that you follow the guidelines **and verify the following before submitting for review:**
+
+- ✅ Your code has no linting errors (`npm run lint`)
+- ✅ All tests pass successfully (`npm run test`)
+- ✅ Your branch name is unique and based off the latest `develop` branch
+- ✅ The pull request title and description clearly describe the change
+- ✅ Your pull request links to the related issue number (e.g., `Fixes #1234`)
+- ✅ Screenshots or videos are included if the change affects the user interface
+
+Following these steps helps maintain code quality and makes it easier for maintainers to review and merge your contribution.
 
 ## CONFLICTS
 You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream `develop` branch causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.

contributor_docs/styling.md

@@ -0,0 +1,13 @@
+# Style Guide
+
+Currently in progress. 
+
+---
+Additional Resources: 
+- [Zeplin File with Official Colors](google.com/url?q=https://github.com/processing/p5.js-web-editor/wiki/Color-Combinations-for-Accessibility&sa=D&source=docs&ust=1769528946688435&usg=AOvVaw2626esAvAi1JMEjarRcDcT)
+- [Accessible Links Color Combinations](https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3)
+
+Tips when making styling contributions: 
+- Define color specifications and other design tokens as CSS custom properties (e.g. `--var(primary-color)`) instead of hard coded values like HEX, RGB ..etc.
+- Ensure your changes only affect what you intend. For example, review what uses a variable before modifying it to avoid unintended changes. 
+- Before creating a new CSS, check for utility classes and variables that provide styling you need. 

package-lock.json

@@ -65,8 +65,9 @@ export async function deleteObjectsFromS3(keyList) {
 }
 
 export async function deleteObjectFromS3(req, res) {
-  const { objectKey, userId } = req.params;
-  const fullObjectKey = userId ? `${userId}/${objectKey}` : objectKey;
+  const userId = req.user.id;
+  const { objectKey } = req.query;
+  const fullObjectKey = `${userId}/${objectKey}`;
 
   try {
     await deleteObjectsFromS3([fullObjectKey]);