From 15e426c0056a4f4b0b79d456ed4e378bbdf7f106 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 6 Feb 2025 19:31:23 -0500 Subject: [PATCH 01/34] Initial version detection --- .../modules/IDE/components/Header/Toolbar.jsx | 4 + .../modules/IDE/components/VersionPicker.jsx | 12 ++ client/modules/IDE/hooks/useP5Version.js | 184 ++++++++++++++++++ 3 files changed, 200 insertions(+) create mode 100644 client/modules/IDE/components/VersionPicker.jsx create mode 100644 client/modules/IDE/hooks/useP5Version.js diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx index 5ebdbdafea..a15416011a 100644 --- a/client/modules/IDE/components/Header/Toolbar.jsx +++ b/client/modules/IDE/components/Header/Toolbar.jsx @@ -20,6 +20,7 @@ import PlayIcon from '../../../../images/play.svg'; import StopIcon from '../../../../images/stop.svg'; import PreferencesIcon from '../../../../images/preferences.svg'; import ProjectName from './ProjectName'; +import VersionPicker from '../VersionPicker'; const Toolbar = (props) => { const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector( @@ -97,6 +98,9 @@ const Toolbar = (props) => { {t('Toolbar.Auto-refresh')} +
+ +
{(() => { diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx new file mode 100644 index 0000000000..158be4691f --- /dev/null +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { useP5Version } from '../hooks/useP5Version'; + +const VersionPicker = () => { + const versionInfo = useP5Version(); + + return

{versionInfo?.version || 'custom'}

; +}; + +VersionPicker.popTypes = {}; + +export default VersionPicker; diff --git a/client/modules/IDE/hooks/useP5Version.js b/client/modules/IDE/hooks/useP5Version.js new file mode 100644 index 0000000000..2e345eace7 --- /dev/null +++ b/client/modules/IDE/hooks/useP5Version.js @@ -0,0 +1,184 @@ +import { useMemo } from 'react'; +import { useSelector } from 'react-redux'; + +// Generated from https://www.npmjs.com/package/p5?activeTab=versions +// Run this in the console: +// 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 = [ + '1.11.3', + '2.0.0-beta.2', + '1.11.3', + '1.11.2', + '1.11.1', + '1.11.0', + '1.10.0', + '1.9.4', + '1.9.3', + '1.9.2', + '1.9.1', + '1.9.0', + '1.8.0', + '1.7.0', + '1.6.0', + '1.5.0', + '1.4.2', + '1.4.1', + '1.4.0', + '1.3.1', + '1.3.0', + '1.2.0', + '1.1.9', + '1.1.8', + '1.1.7', + '1.1.5', + '1.1.4', + '1.1.3', + '1.1.2', + '1.1.1', + '1.1.0', + '1.0.0', + '0.10.2', + '0.10.1', + '0.10.0', + '0.9.0', + '0.8.0', + '0.7.3', + '0.7.2', + '0.7.1', + '0.7.0', + '0.6.1', + '0.6.0', + '0.5.16', + '0.5.15', + '0.5.14', + '0.5.13', + '0.5.12', + '0.5.11', + '0.5.10', + '0.5.9', + '0.5.8', + '0.5.7', + '0.5.6', + '0.5.5', + '0.5.4', + '0.5.3', + '0.5.2', + '0.5.1', + '0.5.0', + '0.4.24', + '0.4.23', + '0.4.22', + '0.4.21', + '0.4.20', + '0.4.19', + '0.4.18', + '0.4.17', + '0.4.16', + '0.4.15', + '0.4.14', + '0.4.13', + '0.4.12', + '0.4.11', + '0.4.10', + '0.4.9', + '0.4.8', + '0.4.7', + '0.4.6', + '0.4.5', + '0.4.4', + '0.4.3', + '0.4.2', + '0.4.1', + '0.4.0', + '0.3.16', + '0.3.15', + '0.3.14', + '0.3.13', + '0.3.12', + '0.3.11', + '0.3.10', + '0.3.9', + '0.3.8', + '0.3.7', + '0.3.6', + '0.3.5', + '0.3.4', + '0.3.3', + '0.3.2', + '0.3.1', + '0.3.0', + '0.2.23', + '0.2.22', + '0.2.21', + '0.2.20', + '0.2.19', + '0.2.18', + '0.2.17', + '0.2.16', + '0.2.15', + '0.2.14', + '0.2.13', + '0.2.12', + '0.2.11', + '0.2.10', + '0.2.9', + '0.2.8', + '0.2.7', + '0.2.6', + '0.2.5', + '0.2.4', + '0.2.3', + '0.2.2', + '0.2.1' +]; + +export function useP5Version() { + const files = useSelector((state) => state.files); + const indexSrc = files.find( + (file) => + file.fileType === 'file' && + file.name === 'index.html' && + file.filePath === '' + )?.content; + + // { version: string, minified: boolean, replaceVersion: (version: string) => string } | null + const versionInfo = useMemo(() => { + if (!indexSrc) return null; + const dom = new DOMParser().parseFromString(indexSrc, 'text/html'); + const usedP5Versions = [...dom.documentElement.querySelectorAll('script')] + .map((scriptNode) => { + const src = scriptNode.getAttribute('src') || ''; + const matches = [ + /^https?:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/(.+)\/p5\.(?:min\.)?js$/, + /^https?:\/\/cdn.jsdelivr.net\/npm\/p5@(.+)\/lib\/p5\.(min\.)?js$/ + ].map((regex) => regex.exec(src)); + const match = matches.find((m) => m); // Find first that matched + if (!match) return null; + + // See if this is a version we recognize + if (p5Versions.includes(match[1])) { + return { version: match[1], minified: !!match[2], scriptNode }; + } + return null; + }) + .filter((version) => version !== null); + + // We only know for certain which one we've got if + if (usedP5Versions.length === 1) { + const { version, minified, scriptNode } = usedP5Versions[0]; + const replaceVersion = function (newVersion) { + const file = minified ? 'p5.min.js' : 'p5.js'; + scriptNode.setAttribute( + 'src', + `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${newVersion}/${file}` + ); + return dom.documentElement.outerHTML; + }; + return { version, minified, replaceVersion }; + } + return null; + }, [indexSrc]); + + return versionInfo; +} From 5acd3ea415ebb137ed53f9d9f56c3675147e4ab0 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 6 Feb 2025 20:17:57 -0500 Subject: [PATCH 02/34] Half working version switcher --- .../modules/IDE/components/Editor/index.jsx | 3 ++ .../modules/IDE/components/VersionPicker.jsx | 33 ++++++++++++++++--- client/modules/IDE/hooks/useP5Version.js | 9 ++--- 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index 8393116308..ef503a14c5 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -257,6 +257,9 @@ class Editor extends React.Component { if (!prevProps.unsavedChanges) { setTimeout(() => this.props.setUnsavedChanges(false), 400); } + } else if (this.getContent().content !== this.props.file.content) { + // TODO: make this not break regular edits! + this._cm.setValue(this.props.file.content); } if (this.props.fontSize !== prevProps.fontSize) { this._cm.getWrapperElement().style[ diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index 158be4691f..08ba45fe5b 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -1,10 +1,35 @@ -import React from 'react'; -import { useP5Version } from '../hooks/useP5Version'; +import React, { useCallback } from 'react'; +import { useDispatch } from 'react-redux'; + +import { useP5Version, p5Versions } from '../hooks/useP5Version'; +import MenuItem from '../../../components/Dropdown/MenuItem'; +import DropdownMenu from '../../../components/Dropdown/DropdownMenu'; +import { updateFileContent } from '../actions/files'; const VersionPicker = () => { - const versionInfo = useP5Version(); + const { indexID, versionInfo } = useP5Version(); + const dispatch = useDispatch(); + const dispatchReplaceVersion = useCallback( + (version) => { + if (!indexID || !versionInfo) return; + dispatch(updateFileContent(indexID, versionInfo.replaceVersion(version))); + }, + [indexID, versionInfo] + ); + + if (!versionInfo) { + return

Custom

; + } - return

{versionInfo?.version || 'custom'}

; + return ( + Version} align="left"> + {p5Versions.map((version) => ( + dispatchReplaceVersion(version)}> + {version} + + ))} + + ); }; VersionPicker.popTypes = {}; diff --git a/client/modules/IDE/hooks/useP5Version.js b/client/modules/IDE/hooks/useP5Version.js index 2e345eace7..f5ed3cc657 100644 --- a/client/modules/IDE/hooks/useP5Version.js +++ b/client/modules/IDE/hooks/useP5Version.js @@ -8,7 +8,6 @@ import { useSelector } from 'react-redux'; export const p5Versions = [ '1.11.3', '2.0.0-beta.2', - '1.11.3', '1.11.2', '1.11.1', '1.11.0', @@ -135,12 +134,14 @@ export const p5Versions = [ export function useP5Version() { const files = useSelector((state) => state.files); - const indexSrc = files.find( + const indexFile = files.find( (file) => file.fileType === 'file' && file.name === 'index.html' && file.filePath === '' - )?.content; + ); + const indexSrc = indexFile?.content; + const indexID = indexFile?.id; // { version: string, minified: boolean, replaceVersion: (version: string) => string } | null const versionInfo = useMemo(() => { @@ -180,5 +181,5 @@ export function useP5Version() { return null; }, [indexSrc]); - return versionInfo; + return { indexID, versionInfo }; } From e0342fb0f0d0f3af648d6b59390a83476dd9ae4f Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 6 Feb 2025 20:25:09 -0500 Subject: [PATCH 03/34] Show version in picker --- client/modules/IDE/components/Editor/index.jsx | 2 +- client/modules/IDE/components/VersionPicker.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index ef503a14c5..93c0007c9b 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -259,7 +259,7 @@ class Editor extends React.Component { } } else if (this.getContent().content !== this.props.file.content) { // TODO: make this not break regular edits! - this._cm.setValue(this.props.file.content); + // this._cm.setValue(this.props.file.content); } if (this.props.fontSize !== prevProps.fontSize) { this._cm.getWrapperElement().style[ diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index 08ba45fe5b..1291ec51e6 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -8,6 +8,7 @@ import { updateFileContent } from '../actions/files'; const VersionPicker = () => { const { indexID, versionInfo } = useP5Version(); + console.log(versionInfo); const dispatch = useDispatch(); const dispatchReplaceVersion = useCallback( (version) => { @@ -22,7 +23,7 @@ const VersionPicker = () => { } return ( - Version} align="left"> + {versionInfo.version}} align="left"> {p5Versions.map((version) => ( dispatchReplaceVersion(version)}> {version} From cf963b701311ef2e09654db3a5baee112884cfcf Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Wed, 19 Feb 2025 19:09:51 -0500 Subject: [PATCH 04/34] Switch to controlled preferences tabs; create version button --- client/constants.js | 1 + client/modules/IDE/actions/preferences.js | 7 +++++ .../modules/IDE/components/Editor/index.jsx | 4 +++ .../IDE/components/Preferences/index.jsx | 16 ++++++++-- .../IDE/components/VersionIndicator.jsx | 30 +++++++++++++++++++ .../modules/IDE/components/VersionPicker.jsx | 3 +- client/modules/IDE/reducers/preferences.js | 5 ++++ client/styles/components/_editor.scss | 14 +++++++++ translations/locales/en-US/translations.json | 5 +++- 9 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 client/modules/IDE/components/VersionIndicator.jsx diff --git a/client/constants.js b/client/constants.js index fa6010aed1..57c85f4e85 100644 --- a/client/constants.js +++ b/client/constants.js @@ -10,6 +10,7 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT'; export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; +export const SET_PREFERENCES_TAB = 'SET_PREFERENCES_TAB'; export const SET_FONT_SIZE = 'SET_FONT_SIZE'; export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index e0473bd995..ebaefd1625 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -14,6 +14,13 @@ function updatePreferences(formParams, dispatch) { }); } +export function setPreferencesTab(value) { + return { + type: ActionTypes.SET_PREFERENCES_TAB, + value + }; +} + export function setFontSize(value) { return (dispatch, getState) => { // eslint-disable-line diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index 93c0007c9b..7e8f502583 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -72,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator'; import { EditorContainer, EditorHolder } from './MobileEditor'; import { FolderIcon } from '../../../../common/icons'; import IconButton from '../../../../common/IconButton'; +import VersionIndicator from '../VersionIndicator'; emmet(CodeMirror); @@ -565,6 +566,9 @@ class Editor extends React.Component {
+
+ +
{ diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx index fa5859400e..014ed3db3d 100644 --- a/client/modules/IDE/components/Preferences/index.jsx +++ b/client/modules/IDE/components/Preferences/index.jsx @@ -16,7 +16,8 @@ import { setLintWarning, setAutocloseBracketsQuotes, setAutocompleteHinter, - setLinewrap + setLinewrap, + setPreferencesTab } from '../../actions/preferences'; export default function Preferences() { @@ -25,6 +26,7 @@ export default function Preferences() { const dispatch = useDispatch(); const { + tabIndex, fontSize, autosave, linewrap, @@ -78,6 +80,10 @@ export default function Preferences() { handleFontSize(newValue); } + function changeTab(index) { + dispatch(setPreferencesTab(index)); + } + const fontSizeInputRef = useRef(null); return ( @@ -85,7 +91,7 @@ export default function Preferences() { p5.js Web Editor | Preferences - +
@@ -96,6 +102,11 @@ export default function Preferences() {

{t('Preferences.Accessibility')}

 + +

+ {t('Preferences.LibraryManagement')} +

+
@@ -455,6 +466,7 @@ export default function Preferences() { + TODO ); diff --git a/client/modules/IDE/components/VersionIndicator.jsx b/client/modules/IDE/components/VersionIndicator.jsx new file mode 100644 index 0000000000..317514022c --- /dev/null +++ b/client/modules/IDE/components/VersionIndicator.jsx @@ -0,0 +1,30 @@ +import React, { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; +import { openPreferences } from '../actions/ide'; +import { setPreferencesTab } from '../actions/preferences'; + +import { useP5Version } from '../hooks/useP5Version'; + +const VersionIndicator = () => { + const { versionInfo } = useP5Version(); + const { t } = useTranslation(); + const dispatch = useDispatch(); + + const openVersionSettings = useCallback(() => { + dispatch(openPreferences()); + dispatch(setPreferencesTab(2)); + }, []); + + return ( + + ); +}; + +VersionIndicator.propTypes = {}; + +export default VersionIndicator; diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index 1291ec51e6..977735fde8 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -8,7 +8,6 @@ import { updateFileContent } from '../actions/files'; const VersionPicker = () => { const { indexID, versionInfo } = useP5Version(); - console.log(versionInfo); const dispatch = useDispatch(); const dispatchReplaceVersion = useCallback( (version) => { @@ -33,6 +32,6 @@ const VersionPicker = () => { ); }; -VersionPicker.popTypes = {}; +VersionPicker.propTypes = {}; export default VersionPicker; diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js index 087d927aed..630fa465ef 100644 --- a/client/modules/IDE/reducers/preferences.js +++ b/client/modules/IDE/reducers/preferences.js @@ -1,6 +1,7 @@ import * as ActionTypes from '../../../constants'; export const initialState = { + tabIndex: 0, fontSize: 18, autosave: true, linewrap: true, @@ -17,6 +18,10 @@ export const initialState = { const preferences = (state = initialState, action) => { switch (action.type) { + case ActionTypes.OPEN_PREFERENCES: + return Object.assign({}, state, { tabIndex: 0 }); + case ActionTypes.SET_PREFERENCES_TAB: + return Object.assign({}, state, { tabIndex: action.value }); case ActionTypes.SET_FONT_SIZE: return Object.assign({}, state, { fontSize: action.value }); case ActionTypes.SET_AUTOSAVE: diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 0b92dec37b..0aab1d4b9f 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -398,11 +398,25 @@ pre.CodeMirror-line { height: #{math.div(29, $base-font-size)}rem; padding-top: #{math.div(7, $base-font-size)}rem; padding-left: #{math.div(56, $base-font-size)}rem; + padding-right: #{math.div(168, $base-font-size)}rem; font-size: #{math.div(12, $base-font-size)}rem; display: flex; justify-content: space-between; } +.editor__library-version { + @include themify() { + color: getThemifyVariable("primary-text-color"); + } + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: flex-end; + height: #{math.div(29, $base-font-size)}rem; + width: #{math.div(168, $base-font-size)}rem; +} + .editor__unsaved-changes { margin-left: #{math.div(2, $base-font-size)}rem; } diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 697e5a2749..312240627f 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -153,7 +153,9 @@ "StopSketchARIA": "Stop sketch", "EditSketchARIA": "Edit sketch name", "NewSketchNameARIA": "New sketch name", - "By": " by " + "By": " by ", + "LibraryVersion": "p5.js Version:", + "CustomLibraryVersion": "Custom" }, "Console": { "Title": "Console", @@ -168,6 +170,7 @@ "Settings": "Settings", "GeneralSettings": "General settings", "Accessibility": "Accessibility", + "LibraryManagement": "Library Management", "Theme": "Theme", "LightTheme": "Light", "LightThemeARIA": "light theme on", From 5042faa46caed21dede3d61f9e25eb6c49514a0b Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Wed, 19 Feb 2025 19:42:32 -0500 Subject: [PATCH 05/34] Add info for custom versions --- .../IDE/components/Preferences/index.jsx | 45 ++++++++++++++++++- .../modules/IDE/components/VersionPicker.jsx | 13 +++++- client/styles/components/_preferences.scss | 9 ++++ translations/locales/en-US/translations.json | 6 ++- 4 files changed, 69 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx index 014ed3db3d..9d92b1ae8b 100644 --- a/client/modules/IDE/components/Preferences/index.jsx +++ b/client/modules/IDE/components/Preferences/index.jsx @@ -19,6 +19,8 @@ import { setLinewrap, setPreferencesTab } from '../../actions/preferences'; +import { useP5Version } from '../../hooks/useP5Version'; +import VersionPicker from '../VersionPicker'; export default function Preferences() { const { t } = useTranslation(); @@ -40,6 +42,7 @@ export default function Preferences() { } = useSelector((state) => state.preferences); const [state, setState] = useState({ fontSize }); + const { versionInfo } = useP5Version(); function onFontInputChange(event) { const INTEGER_REGEX = /^[0-9\b]+$/; @@ -466,7 +469,47 @@ export default function Preferences() { - TODO + +
+

+ {t('Preferences.LibraryVersion')} +

+
+ +
+
+ {versionInfo ? ( +

+ {t('Preferences.LibraryVersionInfo')} +

+ ) : ( + <> +

+ {t('Preferences.CustomVersionInfo')} +

+

+ {t('Preferences.CustomVersionReset')} +

+ + + )} +
+
+ {versionInfo ? ( + <> +

Test

+

Test

+ + ) : ( + <> +

Test

+

Test

+ + )} + ); diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index 977735fde8..36becc7a4d 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -1,5 +1,6 @@ import React, { useCallback } from 'react'; import { useDispatch } from 'react-redux'; +import { useTranslation } from 'react-i18next'; import { useP5Version, p5Versions } from '../hooks/useP5Version'; import MenuItem from '../../../components/Dropdown/MenuItem'; @@ -8,6 +9,7 @@ import { updateFileContent } from '../actions/files'; const VersionPicker = () => { const { indexID, versionInfo } = useP5Version(); + const { t } = useTranslation(); const dispatch = useDispatch(); const dispatchReplaceVersion = useCallback( (version) => { @@ -18,11 +20,18 @@ const VersionPicker = () => { ); if (!versionInfo) { - return

Custom

; + return ( + + ); } return ( - {versionInfo.version}} align="left"> + {versionInfo.version}} + align="left" + > {p5Versions.map((version) => ( dispatchReplaceVersion(version)}> {version} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index e0c868041a..277f70fce4 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -67,6 +67,15 @@ margin-top: 0; } +.preference__paragraph { + margin-bottom: #{math.div(10, $base-font-size)}rem; +} + +.preference__textarea { + width: 100%; + min-height: 8em; +} + .preference__value { @include themify() { border: #{math.div(1, $base-font-size)}rem solid diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 312240627f..5d8c9f1e75 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -212,7 +212,11 @@ "PlainText": "Plain-text", "TextOutputARIA": "text output on", "TableText": "Table-text", - "TableOutputARIA": "table output on" + "TableOutputARIA": "table output on", + "LibraryVersion": "p5.js Version", + "LibraryVersionInfo": "TODO Add helpful info about the new p5.js version, compatibility, etc.", + "CustomVersionInfo": "It looks like you've changed the \n' + - ''} - - - )} - + + + ) : ( +
+ +

{t('Preferences.CustomVersionInfo')}

+ +

+ {t('Preferences.CustomVersionReset')} +

+ + + + + + ); +} + +TextArea.propTypes = { + src: PropTypes.string.isRequired, + className: PropTypes.string +}; + +TextArea.defaultProps = { + className: undefined +}; diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 0f6035a410..b719506e92 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -126,6 +126,10 @@ $themes: ( hint-item-active-outline-offset: 0, hint-inline-text-color-light: $middle-light, hint-inline-text-color: $middle-gray, + + admonition-border: #ED225D, + admonition-background: #FFE4EC, + admonition-text: #AF0E3D, ), dark: ( logo-color: $p5js-pink, @@ -221,6 +225,10 @@ $themes: ( hint-item-active-outline-offset: 0, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, + + admonition-border: #ED225D, + admonition-background: #FFE4EC, + admonition-text: #AF0E3D, ), contrast: ( logo-color: $yellow, @@ -316,6 +324,10 @@ $themes: ( hint-item-active-outline-offset: -2px, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, + + admonition-border: #ED225D, + admonition-background: $white, + admonition-text: #AF0E3D, ) ); diff --git a/client/styles/components/_admonition.scss b/client/styles/components/_admonition.scss new file mode 100644 index 0000000000..8d2c366b73 --- /dev/null +++ b/client/styles/components/_admonition.scss @@ -0,0 +1,20 @@ +.admonition { + @include themify() { + padding: 1rem; + margin-bottom: 1rem; + margin-top: 1rem; + background: getThemifyVariable('admonition-background'); + color: getThemifyVariable('admonition-text'); + border: 1px solid getThemifyVariable('admonition-border'); + border-left-width: 3px; + } +} + +.admonition__icon { + margin-right: 0.5rem; +} + +.admonition__title { + font-weight: bold; + margin-bottom: 0.5rem; +} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index ccbc5d1e01..a5a352f864 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -72,6 +72,7 @@ } .preference__textarea { + font-family: Inconsolata, monospace; width: 100%; min-height: 8em; } diff --git a/client/styles/main.scss b/client/styles/main.scss index cb88a534de..91e2d93483 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -54,6 +54,7 @@ @import 'components/quick-add'; @import 'components/skip-link'; @import 'components/stars'; +@import 'components/admonition'; @import 'layout/dashboard'; @import 'layout/ide'; diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 44d1f5580a..4a75b68682 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -218,12 +218,14 @@ "TableOutputARIA": "table output on", "LibraryVersion": "p5.js Version", "LibraryVersionInfo": "TODO Add helpful info about the new p5.js version, compatibility, etc.", - "CustomVersionInfo": "It looks like you've changed the \n' + - '' + `\n` + + `` } />
diff --git a/client/modules/IDE/hooks/useP5Version.jsx b/client/modules/IDE/hooks/useP5Version.jsx index 9b673dd562..29870ae160 100644 --- a/client/modules/IDE/hooks/useP5Version.jsx +++ b/client/modules/IDE/hooks/useP5Version.jsx @@ -138,6 +138,7 @@ export const currentP5Version = p5Versions[0]; export const p5SoundURL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/addons/p5.sound.min.js`; export const p5PreloadAddonURL = 'https://TODO/preload.js'; export const p5ShapesAddonURL = 'https://TODO/shapes.js'; +export const p5URL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/p5.js`; const P5VersionContext = React.createContext({}); From cae11eb34463d63300e3e75f27b7f7bbbb791ea8 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 15 Mar 2025 14:15:36 -0400 Subject: [PATCH 19/34] Style dropdown button --- .../modules/IDE/components/VersionPicker.jsx | 55 +++++++++++++++++-- 1 file changed, 49 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/VersionPicker.jsx b/client/modules/IDE/components/VersionPicker.jsx index b1250204b1..bb59382ad7 100644 --- a/client/modules/IDE/components/VersionPicker.jsx +++ b/client/modules/IDE/components/VersionPicker.jsx @@ -2,12 +2,44 @@ import React, { useCallback, useContext } from 'react'; import { useDispatch } from 'react-redux'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { prop } from '../../../theme'; import { useP5Version, p5Versions } from '../hooks/useP5Version'; import MenuItem from '../../../components/Dropdown/MenuItem'; import DropdownMenu from '../../../components/Dropdown/DropdownMenu'; import { updateFileContent } from '../actions/files'; import { CmControllerContext } from '../pages/IDEView'; +import { DropdownArrowIcon } from '../.././../common/icons'; + +const VersionPickerButton = styled.div` + display: flex; + border: 1px solid ${prop('Modal.border')}; + background: ${prop('backgroundColor')}; +`; + +const VersionPickerText = styled.div` + padding: 0.5rem 1rem; + min-width: 8rem; + text-align: left; +`; + +const VersionPickerArrow = styled.div` + background: ${prop('Button.primary.default.background')}; + align-self: stretch; + width: 2rem; + display: flex; + align-items: center; + justify-content: center; +`; + +const VersionDropdownMenu = styled(DropdownMenu)` + & button { + padding: 0; + } + + margin-bottom: 1rem; +`; const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => { const { indexID, versionInfo } = useP5Version(); @@ -29,16 +61,27 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => { if (!versionInfo) { return ( - {t('Toolbar.CustomLibraryVersion')} + + + {t('Toolbar.CustomLibraryVersion')} + + + + + ); } return ( - - {versionInfo.version} - + + {versionInfo.version} + + + + } align="left" maxHeight="50vh" @@ -48,7 +91,7 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => { {version} ))} - + ); }); From 70fde43c47ddf0eec9b4017be4d5f6bb5dfd978f Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Mon, 17 Mar 2025 17:04:39 -0400 Subject: [PATCH 20/34] Update versioning note + admonition --- client/modules/IDE/components/Admonition.jsx | 14 +++---- .../IDE/components/Preferences/index.jsx | 41 +++++++++++++++++-- client/styles/abstracts/_variables.scss | 18 ++++---- client/styles/components/_preferences.scss | 9 ++++ translations/locales/en-US/translations.json | 6 +-- 5 files changed, 62 insertions(+), 26 deletions(-) diff --git a/client/modules/IDE/components/Admonition.jsx b/client/modules/IDE/components/Admonition.jsx index 28e057cfad..8d9a6c6db1 100644 --- a/client/modules/IDE/components/Admonition.jsx +++ b/client/modules/IDE/components/Admonition.jsx @@ -1,23 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useTranslation } from 'react-i18next'; -export default function Admonition({ children }) { - const { t } = useTranslation(); +export default function Admonition({ children, title }) { return (
-

- - 🌸 - - {t('Admonition.Note')} -

+

+ {title} +

{children}
); } Admonition.propTypes = { + title: PropTypes.string.isRequired, children: PropTypes.node }; diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx index 2dd53cf2a2..daeddce97f 100644 --- a/client/modules/IDE/components/Preferences/index.jsx +++ b/client/modules/IDE/components/Preferences/index.jsx @@ -1,8 +1,10 @@ -import React, { useContext, useRef, useState } from 'react'; +import React, { useContext, useMemo, useRef, useState } from 'react'; import { Helmet } from 'react-helmet'; import { useDispatch, useSelector } from 'react-redux'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { useTranslation } from 'react-i18next'; +import ReactMarkdown from 'react-markdown'; +import PropTypes from 'prop-types'; import PlusIcon from '../../../../images/plus.svg'; import MinusIcon from '../../../../images/minus.svg'; import beepUrl from '../../../../sounds/audioAlert.mp3'; @@ -112,6 +114,37 @@ export default function Preferences() { cmRef.current?.updateFileContent(indexID, src); }; + const markdownComponents = useMemo(() => { + const ExternalLink = ({ children, ...props }) => ( + + {children} + + ); + ExternalLink.propTypes = { + children: PropTypes.node + }; + ExternalLink.defaultProps = { + children: undefined + }; + + const Paragraph = ({ children, ...props }) => ( +

+ {children} +

+ ); + Paragraph.propTypes = { + children: PropTypes.node + }; + Paragraph.defaultProps = { + children: undefined + }; + + return { + a: ExternalLink, + p: Paragraph + }; + }, []); + return (
@@ -505,14 +538,14 @@ export default function Preferences() { ref={pickerRef} onChangeVersion={onChangeVersion} /> -

+ {t('Preferences.LibraryVersionInfo')} -

+ ) : (
- +

{t('Preferences.CustomVersionInfo')}

diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b719506e92..8ad2e57062 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -127,9 +127,9 @@ $themes: ( hint-inline-text-color-light: $middle-light, hint-inline-text-color: $middle-gray, - admonition-border: #ED225D, - admonition-background: #FFE4EC, - admonition-text: #AF0E3D, + admonition-border: #22C8ED, + admonition-background: #E4F8FF, + admonition-text: #0E86A1, ), dark: ( logo-color: $p5js-pink, @@ -226,9 +226,9 @@ $themes: ( hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, - admonition-border: #ED225D, - admonition-background: #FFE4EC, - admonition-text: #AF0E3D, + admonition-border: #22C8ED, + admonition-background: #1681b7, + admonition-text: #E4F8FF, ), contrast: ( logo-color: $yellow, @@ -325,9 +325,9 @@ $themes: ( hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, - admonition-border: #ED225D, - admonition-background: $white, - admonition-text: #AF0E3D, + admonition-border: #22C8ED, + admonition-background: #1681b7, + admonition-text: #ffffff, ) ); diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index a5a352f864..bbf2ce8979 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -69,6 +69,15 @@ .preference__paragraph { margin-bottom: #{math.div(10, $base-font-size)}rem; + + & a { + @include themify() { + color: getThemifyVariable('button-background-hover-color'); + } + } + & a:hover { + text-decoration: underline; + } } .preference__textarea { diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 4a75b68682..0e20e0f58a 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -217,7 +217,8 @@ "TableText": "Table-text", "TableOutputARIA": "table output on", "LibraryVersion": "p5.js Version", - "LibraryVersionInfo": "TODO Add helpful info about the new p5.js version, compatibility, etc.", + "LibraryVersionInfo": "There's a [new 2.0 release](https://github.com/processing/p5.js/releases/) of p5.js available! It will become default in August, 2026, so take this time to test it out and report bugs. Interested in transitioning sketches from 1.x to 2.0? Check out the [compatibility & transition resources.](https://github.com/processing/p5.js-compatibility)", + "CustomVersionTitle": "Managing your own libraries? Nice!", "CustomVersionInfo": "The version of p5.js is currently being managed in the code of index.html. This means it can't be adjusted from this tab.", "CustomVersionReset": "If you'd like to use the default libraries, you can replace the script tags in index.html with the following:", "SoundAddon": "p5.sound.js Addon", @@ -666,8 +667,5 @@ }, "SkipLink": { "PlaySketch": "Skip to Play Sketch" - }, - "Admonition": { - "Note": "Note" } } From 261fd12857876d0a9a2b6fa2bfd566fb84d91cd9 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 15:55:31 -0400 Subject: [PATCH 21/34] Update admonition colors for contrast --- client/styles/abstracts/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 8ad2e57062..361ad57a38 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -129,7 +129,7 @@ $themes: ( admonition-border: #22C8ED, admonition-background: #E4F8FF, - admonition-text: #0E86A1, + admonition-text: #075769, ), dark: ( logo-color: $p5js-pink, @@ -227,8 +227,8 @@ $themes: ( hint-inline-text-color: #cfcfcf, admonition-border: #22C8ED, - admonition-background: #1681b7, - admonition-text: #E4F8FF, + admonition-background: #105A7F, + admonition-text: #FFFFFF, ), contrast: ( logo-color: $yellow, @@ -326,7 +326,7 @@ $themes: ( hint-inline-text-color: #cfcfcf, admonition-border: #22C8ED, - admonition-background: #1681b7, + admonition-background: #000000, admonition-text: #ffffff, ) ); From cb255e2522f2b2f97f0fc3d4858aab01254d84cf Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 15:55:42 -0400 Subject: [PATCH 22/34] Add better hover state for version picker --- client/modules/IDE/components/VersionIndicator.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/VersionIndicator.jsx b/client/modules/IDE/components/VersionIndicator.jsx index 317514022c..8a46167d80 100644 --- a/client/modules/IDE/components/VersionIndicator.jsx +++ b/client/modules/IDE/components/VersionIndicator.jsx @@ -1,11 +1,20 @@ import React, { useCallback } from 'react'; +import styled from 'styled-components'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { openPreferences } from '../actions/ide'; import { setPreferencesTab } from '../actions/preferences'; +import { remSize, prop } from '../../../theme'; import { useP5Version } from '../hooks/useP5Version'; +const VersionPickerButton = styled.button` + color: ${prop('Button.primary.default.foreground')}; + &:hover { + color: ${prop('Button.primary.hover.background')} !important; + } +`; + const VersionIndicator = () => { const { versionInfo } = useP5Version(); const { t } = useTranslation(); @@ -17,11 +26,11 @@ const VersionIndicator = () => { }, []); return ( - + ); }; From 9139d02474dfe33401af73b95ffb881f3c9db36a Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 16:07:08 -0400 Subject: [PATCH 23/34] Add pencil icon next to p5 version --- client/images/pencil.svg | 2 +- .../IDE/components/VersionIndicator.jsx | 18 +++++++++++++++++- translations/locales/en-US/translations.json | 2 +- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/client/images/pencil.svg b/client/images/pencil.svg index f9bd1db9b7..a2ac9f4391 100644 --- a/client/images/pencil.svg +++ b/client/images/pencil.svg @@ -4,7 +4,7 @@ - ); }; diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index a0ed805f27..44dd59f7a7 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -157,7 +157,7 @@ "EditSketchARIA": "Edit sketch name", "NewSketchNameARIA": "New sketch name", "By": " by ", - "LibraryVersion": "p5.js Version:", + "LibraryVersion": "p5.js version:", "CustomLibraryVersion": "Custom" }, "Console": { From 22871b5b80c8cd87a0085a7aebaa2b7f1415904d Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 16:22:05 -0400 Subject: [PATCH 24/34] Use fieldset and legend tags --- .../IDE/components/Preferences/index.jsx | 48 +++++++++---------- client/styles/components/_preferences.scss | 3 ++ 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx index daeddce97f..8966b58dc7 100644 --- a/client/modules/IDE/components/Preferences/index.jsx +++ b/client/modules/IDE/components/Preferences/index.jsx @@ -171,7 +171,7 @@ export default function Preferences() {

{t('Preferences.Theme')}

-
+
dispatch(setTheme('light'))} @@ -214,7 +214,7 @@ export default function Preferences() { > {t('Preferences.HighContrastTheme')} -
+

{t('Preferences.TextSize')}

@@ -266,7 +266,7 @@ export default function Preferences() {

{t('Preferences.Autosave')}

-
+
dispatch(setAutosave(true))} @@ -293,13 +293,13 @@ export default function Preferences() { -
+

{t('Preferences.AutocloseBracketsQuotes')}

-
+
dispatch(setAutocloseBracketsQuotes(true))} @@ -332,13 +332,13 @@ export default function Preferences() { > {t('Preferences.Off')} -
+

{t('Preferences.AutocompleteHinter')}

-
+
dispatch(setAutocompleteHinter(true))} @@ -371,11 +371,11 @@ export default function Preferences() { > {t('Preferences.Off')} -
+

{t('Preferences.WordWrap')}

-
+
dispatch(setLinewrap(true))} @@ -402,7 +402,7 @@ export default function Preferences() { -
+
@@ -410,7 +410,7 @@ export default function Preferences() {

{t('Preferences.LineNumbers')}

-
+
dispatch(setLineNumbers(true))} @@ -437,13 +437,13 @@ export default function Preferences() { -
+

{t('Preferences.LintWarningSound')}

-
+
dispatch(setLintWarning(true))} @@ -477,7 +477,7 @@ export default function Preferences() { > {t('Preferences.PreviewSound')} -
+

@@ -487,7 +487,7 @@ export default function Preferences() { {t('Preferences.UsedScreenReader')}

-
+
{ @@ -522,7 +522,7 @@ export default function Preferences() { > {t('Preferences.TableText')} -
+
@@ -567,7 +567,7 @@ export default function Preferences() {

{t('Preferences.SoundAddon')}

-
+
{ @@ -618,17 +618,17 @@ export default function Preferences() { {t('Preferences.Off')} {versionInfo.lastP5SoundURL && ( - + {t('Preferences.UndoSoundVersion')} - + )} -
+

{t('Preferences.PreloadAddon')}

-
+
@@ -665,13 +665,13 @@ export default function Preferences() { > {t('Preferences.Off')} -
+

{t('Preferences.ShapesAddon')}

-
+
@@ -708,7 +708,7 @@ export default function Preferences() { > {t('Preferences.Off')} -
+
)} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index bbf2ce8979..e80bd83b1a 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -149,6 +149,7 @@ .preference__warning { @include themify() { + display: contents; font-weight: bold; color: getThemifyVariable("preferences-warning-color"); } @@ -189,6 +190,8 @@ input[type="number"]::-webkit-outer-spin-button { } .preference__options { + border: 0; + padding: 0; display: flex; justify-content: center; align-items: center; From 3f9c28b8c3b48c226aaffa57342d5f317615db4d Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 16:52:29 -0400 Subject: [PATCH 25/34] Use fieldsets, fix aria labels --- .../IDE/components/Preferences/index.jsx | 69 ++++++++++++++++--- client/modules/IDE/hooks/useP5Version.jsx | 28 ++++++-- translations/locales/en-US/translations.json | 7 +- 3 files changed, 90 insertions(+), 14 deletions(-) diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx index 8966b58dc7..bc5d353e85 100644 --- a/client/modules/IDE/components/Preferences/index.jsx +++ b/client/modules/IDE/components/Preferences/index.jsx @@ -583,7 +583,9 @@ export default function Preferences() { updateHTML(versionInfo.setP5Sound(true)); } }} - aria-label={t('Preferences.AutosaveOnARIA')} + aria-label={`${t('Preferences.SoundAddon')} ${t( + 'Preferences.AddonOn' + )}`} name="soundaddon" id="soundaddon-on" className="preference__radio-button" @@ -604,7 +606,9 @@ export default function Preferences() { } updateHTML(versionInfo.setP5Sound(false)); }} - aria-label={t('Preferences.AutosaveOffARIA')} + aria-label={`${t('Preferences.SoundAddon')} ${t( + 'Preferences.AddonOff' + )}`} name="soundaddon" id="soundaddon-off" className="preference__radio-button" @@ -634,7 +638,9 @@ export default function Preferences() { onChange={() => updateHTML(versionInfo.setP5PreloadAddon(true)) } - aria-label={t('Preferences.AutosaveOnARIA')} + aria-label={`${t('Preferences.PreloadAddon')} ${t( + 'Preferences.AddonOn' + )}`} name="preloadaddon" id="preloadaddon-on" className="preference__radio-button" @@ -652,7 +658,9 @@ export default function Preferences() { onChange={() => updateHTML(versionInfo.setP5PreloadAddon(false)) } - aria-label={t('Preferences.AutosaveOffARIA')} + aria-label={`${t('Preferences.PreloadAddon')} ${t( + 'Preferences.AddonOff' + )}`} name="preloadaddon" id="preloadaddon-off" className="preference__radio-button" @@ -677,12 +685,14 @@ export default function Preferences() { onChange={() => updateHTML(versionInfo.setP5ShapesAddon(true)) } - aria-label={t('Preferences.AutosaveOnARIA')} + aria-label={`${t('Preferences.ShapesAddon')} ${t( + 'Preferences.AddonOn' + )}`} name="shapesaddon" id="shapesaddon-on" className="preference__radio-button" value="On" - checked={versionInfo.p5ShapesAdddon} + checked={versionInfo.p5ShapesAddon} /> diff --git a/client/modules/IDE/hooks/useP5Version.jsx b/client/modules/IDE/hooks/useP5Version.jsx index 29870ae160..00a8695675 100644 --- a/client/modules/IDE/hooks/useP5Version.jsx +++ b/client/modules/IDE/hooks/useP5Version.jsx @@ -136,8 +136,12 @@ export const p5Versions = [ export const currentP5Version = p5Versions[0]; export const p5SoundURL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/addons/p5.sound.min.js`; -export const p5PreloadAddonURL = 'https://TODO/preload.js'; -export const p5ShapesAddonURL = 'https://TODO/shapes.js'; +export const p5PreloadAddonURL = + 'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/preload.js'; +export const p5ShapesAddonURL = + 'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/shapes.js'; +export const p5DataAddonURL = + 'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/data.js'; export const p5URL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/p5.js`; const P5VersionContext = React.createContext({}); @@ -259,6 +263,20 @@ export function P5VersionProvider(props) { return serializeResult(); }; + const p5DataAddonNode = [ + ...dom.documentElement.querySelectorAll('script') + ].find((s) => s.getAttribute('src') === p5DataAddonURL); + const setP5DataAddon = function (enabled) { + if (!enabled && p5DataAddonNode) { + p5DataAddonNode.parentNode.removeChild(p5DataAddonNode); + } else if (enabled && !p5DataAddonNode) { + const newNode = document.createElement('script'); + newNode.setAttribute('src', p5DataAddonURL); + scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling); + } + return serializeResult(); + }; + return { version, minified, @@ -271,8 +289,10 @@ export function P5VersionProvider(props) { setLastP5SoundURL, p5PreloadAddon: !!p5PreloadAddonNode, setP5PreloadAddon, - p5ShapesAdddon: !!p5ShapesAddonNode, - setP5ShapesAddon + p5ShapesAddon: !!p5ShapesAddonNode, + setP5ShapesAddon, + p5DataAddon: !!p5DataAddonNode, + setP5DataAddon }; } return null; diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 44dd59f7a7..62221541bf 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -222,8 +222,11 @@ "CustomVersionInfo": "The version of p5.js is currently being managed in the code of index.html. This means it can't be adjusted from this tab.", "CustomVersionReset": "If you'd like to use the default libraries, you can replace the script tags in index.html with the following:", "SoundAddon": "p5.sound.js Addon", - "PreloadAddon": "p5.js 2.0 Addon - Preload", - "ShapesAddon": "p5.js 2.0 Addon - Shapes", + "PreloadAddon": "p5.js 1.x Compatibility Add-on — Preload", + "ShapesAddon": "p5.js 1.x Compatibility Add-on — Shapes", + "DataAddon": "p5.js 1.x Compatibility Add-on — Data Structures", + "AddonOnARIA": "on", + "AddonOffARIA": "off", "UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before.", "CopyToClipboardSuccess": "Copied to clipboard!", "CopyToClipboardFailure": "We weren't able to copy the text, try selecting it and copying it manually." From 9d2444fb2186595f214891c4f3671e80ba429a31 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 22 Mar 2025 17:02:12 -0400 Subject: [PATCH 26/34] Use gear icon --- client/modules/IDE/components/VersionIndicator.jsx | 11 +++++------ client/modules/IDE/components/VersionPicker.jsx | 2 +- translations/locales/en-US/translations.json | 6 +++--- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/client/modules/IDE/components/VersionIndicator.jsx b/client/modules/IDE/components/VersionIndicator.jsx index ed34aced3b..9d14931d09 100644 --- a/client/modules/IDE/components/VersionIndicator.jsx +++ b/client/modules/IDE/components/VersionIndicator.jsx @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'; import { openPreferences } from '../actions/ide'; import { setPreferencesTab } from '../actions/preferences'; import { prop } from '../../../theme'; -import EditIcon from '../../../images/pencil.svg'; +import EditIcon from '../../../images/preferences.svg'; import { useP5Version } from '../hooks/useP5Version'; @@ -19,6 +19,9 @@ const VersionPickerButton = styled.button` & svg { vertical-align: middle; margin-bottom: 2px; + margin-left: 0.5rem; + width: 1rem; + height: 1rem; } &:hover path { @@ -41,11 +44,7 @@ const VersionIndicator = () => { {t('Toolbar.LibraryVersion')}   {versionInfo?.version || t('Toolbar.CustomLibraryVersion')} -