Add info for custom versions

Author: davepagurek

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() {
             </div>
           </div>
         </TabPanel>
-        <TabPanel>TODO</TabPanel>
+        <TabPanel>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.LibraryVersion')}
+            </h4>
+            <div className="preference__options">
+              <VersionPicker />
+            </div>
+            <div className="preference__subtitle">
+              {versionInfo ? (
+                <p className="preference__paragraph">
+                  {t('Preferences.LibraryVersionInfo')}
+                </p>
+              ) : (
+                <>
+                  <p className="preference__paragraph">
+                    {t('Preferences.CustomVersionInfo')}
+                  </p>
+                  <p className="preference__paragraph">
+                    {t('Preferences.CustomVersionReset')}
+                  </p>
+                  <textarea className="preference__textarea">
+                    {'<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>\n' +
+                      '<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>'}
+                  </textarea>
+                </>
+              )}
+            </div>
+          </div>
+          {versionInfo ? (
+            <>
+              <p>Test</p>
+              <p>Test</p>
+            </>
+          ) : (
+            <>
+              <p>Test</p>
+              <p>Test</p>
+            </>
+          )}
+        </TabPanel>
       </Tabs>
     </section>
   );

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 <p>Custom</p>;
+    return (
+      <button disabled className="versionPicker">
+        {t('Toolbar.CustomLibraryVersion')}
+      </button>
+    );
   }
 
   return (
-    <DropdownMenu anchor={<span>{versionInfo.version}</span>} align="left">
+    <DropdownMenu
+      anchor={<button className="versionPicker">{versionInfo.version}</button>}
+      align="left"
+    >
       {p5Versions.map((version) => (
         <MenuItem key={version} onClick={() => dispatchReplaceVersion(version)}>
           {version}

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

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 <script> tag to manage the version yourself. In that case, the version can't be managed from this tab, only from the code in index.html.",
+    "CustomVersionReset": "If you do want to use the default libraries, you can replace your script tags in index.html to the following:"
   },
   "KeyboardShortcuts": {
     "Title": " Keyboard Shortcuts",