Merge branch 'release-2.16.1' into release

Author: raclim

client/modules/IDE/components/FileNode.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
@@ -88,6 +89,24 @@ const FileNode = ({
   const [isDeleting, setIsDeleting] = useState(false);
   const [updatedName, setUpdatedName] = useState(name);
 
+  const files = useSelector((state) => state.files);
+
+  const checkDuplicate = (newName) => {
+    const parentFolder = files.find((f) => f.id === parentId);
+    if (!parentFolder) return false;
+
+    const siblingFiles = parentFolder.children
+      .map((childId) => files.find((f) => f.id === childId))
+      .filter(Boolean)
+      .filter((file) => file.id !== id);
+
+    const isDuplicate = siblingFiles.some(
+      (f) => f.name.trim().toLowerCase() === newName.trim().toLowerCase()
+    );
+
+    return isDuplicate;
+  };
+
   const { t } = useTranslation();
   const fileNameInput = useRef(null);
   const fileOptionsRef = useRef(null);
@@ -157,7 +176,7 @@ const FileNode = ({
   };
 
   const saveUpdatedFileName = () => {
-    if (updatedName !== name) {
+    if (!checkDuplicate(updatedName) && updatedName !== name) {
       updateFileName(id, updatedName);
     }
   };
@@ -198,8 +217,13 @@ const FileNode = ({
   };
 
   const handleFileNameBlur = () => {
-    validateFileName();
-    hideEditFileName();
+    if (!checkDuplicate(updatedName)) {
+      validateFileName();
+      hideEditFileName();
+    } else {
+      setUpdatedName(name);
+      hideEditFileName();
+    }
   };
 
   const toggleFileOptions = (event) => {
@@ -271,6 +295,7 @@ const FileNode = ({
             aria-label={updatedName}
             className="sidebar__file-item-name"
             onClick={handleFileClick}
+            onDoubleClick={handleClickRename}
             data-testid="file-name"
           >
             <FileName name={updatedName} />

client/modules/IDE/components/FileNode.unit.test.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 
 import {
   fireEvent,
@@ -9,6 +12,8 @@ import {
 } from '../../../test-utils';
 import { FileNode } from './FileNode';
 
+const mockStore = configureStore([thunk]);
+
 describe('<FileNode />', () => {
   const changeName = (newFileName) => {
     const renameButton = screen.getByText(/Rename/i);
@@ -32,6 +37,7 @@ describe('<FileNode />', () => {
       fileType,
       canEdit: true,
       children: [],
+      parentId: 'parent-folder-id',
       authenticated: false,
       setSelectedFile: jest.fn(),
       deleteFile: jest.fn(),
@@ -45,7 +51,40 @@ describe('<FileNode />', () => {
       setProjectName: jest.fn()
     };
 
-    render(<FileNode {...props} />);
+    const mockFiles = [
+      {
+        id: '0',
+        name: props.name,
+        parentId: 'parent-folder-id'
+      },
+      {
+        id: '1',
+        name: 'sketch.js',
+        parentId: '0',
+        isSelectedFile: true
+      },
+      {
+        id: 'parent-folder-id',
+        name: 'parent',
+        parentId: null,
+        children: ['0', 'some-other-file-id']
+      },
+      {
+        id: 'some-other-file-id',
+        name: 'duplicate.js',
+        parentId: 'parent-folder-id'
+      }
+    ];
+
+    const store = mockStore({
+      files: mockFiles
+    });
+
+    render(
+      <Provider store={store}>
+        <FileNode {...props} />
+      </Provider>
+    );
 
     return props;
   };

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

@@ -249,6 +249,13 @@ export default function Preferences() {
                 onClick={() => {
                   fontSizeInputRef.current?.select();
                 }}
+                onKeyDown={(event) => {
+                  if (event.key === 'ArrowUp') {
+                    increaseFontSize();
+                  } else if (event.key === 'ArrowDown') {
+                    decreaseFontSize();
+                  }
+                }}
               />
             </form>
             <button

client/modules/IDE/components/SketchListRowBase.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import slugify from 'slugify';
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -31,10 +31,15 @@ const SketchListRowBase = ({
   const [renameValue, setRenameValue] = useState(sketch.name);
   const renameInput = useRef(null);
 
+  useEffect(() => {
+    if (renameOpen && renameInput.current) {
+      renameInput.current.focus();
+    }
+  }, [renameOpen]);
+
   const openRename = useCallback(() => {
     setRenameOpen(true);
     setRenameValue(sketch.name);
-    renameInput.current.focus();
   }, [sketch.name]);
 
   const closeRename = () => setRenameOpen(false);

client/modules/IDE/hooks/useP5Version.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable func-names */
 import React, { useContext, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -8,6 +9,7 @@ import PropTypes from 'prop-types';
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
   '2.0.0',
+  '1.11.5',
   '1.11.4',
   '1.11.3',
   '1.11.2',
@@ -134,7 +136,7 @@ export const p5Versions = [
   '0.2.1'
 ];
 
-export const currentP5Version = '1.11.4'; // Don't update to 2.x until 2026
+export const currentP5Version = '1.11.3'; // Don't update to 2.x until 2026
 
 export const p5SoundURLOld = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js`;
 export const p5SoundURL =
@@ -315,7 +317,7 @@ export function P5VersionProvider(props) {
 }
 
 P5VersionProvider.propTypes = {
-  children: PropTypes.element.isRequired
+  children: PropTypes.node.isRequired
 };
 
 export function useP5Version() {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "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.11.4/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.4/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />