Merge pull request #3525 from A-L-A/version-dropdown-enhancement

[#3504] Add version labels for default and beta versions

Author: raclim

client/modules/IDE/components/VersionPicker.jsx

@@ -77,9 +77,23 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
   return (
     <VersionDropdownMenu
       className="versionPicker"
+      aria-label="Select p5.js version"
       anchor={
         <VersionPickerButton ref={ref}>
-          <VersionPickerText>{versionInfo.version}</VersionPickerText>
+          <VersionPickerText>
+            {versionInfo
+              ? (() => {
+                  const current = p5Versions.find((v) =>
+                    typeof v === 'string'
+                      ? v === versionInfo.version
+                      : v.version === versionInfo.version
+                  );
+                  if (!current) return versionInfo.version;
+                  if (typeof current === 'string') return current;
+                  return `${current.version} ${current.label}`;
+                })()
+              : t('Toolbar.CustomLibraryVersion')}
+          </VersionPickerText>
           <VersionPickerArrow>
             <DropdownArrowIcon />
           </VersionPickerArrow>
@@ -88,11 +102,20 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
       align="left"
       maxHeight="50vh"
     >
-      {p5Versions.map((version) => (
-        <MenuItem key={version} onClick={() => dispatchReplaceVersion(version)}>
-          {version}
-        </MenuItem>
-      ))}
+      {p5Versions.map((item) => {
+        const version = typeof item === 'string' ? item : item.version;
+        const label =
+          typeof item === 'string' ? item : `${item.version} ${item.label}`;
+
+        return (
+          <MenuItem
+            key={version}
+            onClick={() => dispatchReplaceVersion(version)}
+          >
+            {label}
+          </MenuItem>
+        );
+      })}
     </VersionDropdownMenu>
   );
 });

client/modules/IDE/hooks/useP5Version.jsx

@@ -60,7 +60,10 @@ export function P5VersionProvider(props) {
         if (!match) return null;
 
         // See if this is a version we recognize
-        if (p5Versions.includes(match[1])) {
+        const versionExists = p5Versions.some((v) =>
+          typeof v === 'string' ? v === match[1] : v.version === match[1]
+        );
+        if (versionExists) {
           return { version: match[1], minified: !!match[2], scriptNode };
         }
         return null;

common/p5Versions.js

@@ -5,14 +5,14 @@ export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
 // JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
-  '2.1.1',
+  { version: '2.1.1', label: '(Beta)' },
   '2.0.5',
   '2.0.4',
   '2.0.3',
   '2.0.2',
   '2.0.1',
   '2.0.0',
-  '1.11.11',
+  { version: '1.11.11', label: '(Default)' },
   '1.11.10',
   '1.11.9',
   '1.11.8',