diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index 8b00fcf40d..24487a5f24 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -77,9 +77,23 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => { return ( - {versionInfo.version} + + {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')} + @@ -88,11 +102,20 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => { align="left" maxHeight="50vh" > - {p5Versions.map((version) => ( - dispatchReplaceVersion(version)}> - {version} - - ))} + {p5Versions.map((item) => { + const version = typeof item === 'string' ? item : item.version; + const label = + typeof item === 'string' ? item : `${item.version} ${item.label}`; + + return ( + dispatchReplaceVersion(version)} + > + {label} + + ); + })} ); }); diff --git a/client/modules/IDE/hooks/useP5Version.jsx b/client/modules/IDE/hooks/useP5Version.jsx index 07171f698a..a21a7c3b7f 100644 --- a/client/modules/IDE/hooks/useP5Version.jsx +++ b/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; diff --git a/common/p5Versions.js b/common/p5Versions.js index cade044581..b4121c4bc4 100644 --- a/common/p5Versions.js +++ b/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',