Merge branch 'develop' into centralising-breakpoints

Author: raclim

README.md

@@ -31,17 +31,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
 
-Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
-
-
-### When Will the Next Production Release Be?
-
-We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
-
-2.12.0 MINOR Release: By February 27, 2024
-
-[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
-
 
 ## References for Contributing to the p5.js Web Editor
 

client/modules/App/components/ThemeProvider.jsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import theme from '../../../theme';
 
-import theme, { Theme } from '../../../theme';
-
-const Provider = ({ children, currentTheme }) => (
-  <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
-);
+const Provider = ({ children }) => {
+  const currentTheme = useSelector((state) => state.preferences.theme);
+  return (
+    <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
+  );
+};
 
 Provider.propTypes = {
-  children: PropTypes.node.isRequired,
-  currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired
+  children: PropTypes.node.isRequired
 };
 
-function mapStateToProps(state) {
-  return {
-    currentTheme: state.preferences.theme
-  };
-}
-
-export default connect(mapStateToProps)(Provider);
+export default Provider;

client/modules/IDE/components/About.jsx

@@ -162,6 +162,20 @@ function About(props) {
             {t('About.Discord')}
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://p5js.org/download/support.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Donate
+          </a>
+        </p>
         <p className="about__content-column-list">
           <Link to="/privacy-policy">
             <AsteriskIcon

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

@@ -338,7 +338,7 @@ class Editor extends React.Component {
       mode = 'application/json';
     } else if (fileName.match(/.+\.(frag|glsl)$/i)) {
       mode = 'x-shader/x-fragment';
-    } else if (fileName.match(/.+\.(vert|stl)$/i)) {
+    } else if (fileName.match(/.+\.(vert|stl|mtl)$/i)) {
       mode = 'x-shader/x-vertex';
     } else {
       mode = 'text/plain';

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, reduxRender, screen } from '../../../../test-utils';
+import { initialState } from '../../reducers/preferences';
 import Preferences from './index';
 import * as PreferencesActions from '../../actions/preferences';
 
@@ -15,7 +16,10 @@ describe('<Preferences />', () => {
   const subject = (initialPreferences = {}) =>
     reduxRender(<Preferences />, {
       initialState: {
-        preferences: initialPreferences
+        preferences: {
+          ...initialState,
+          ...initialPreferences
+        }
       }
     });
 

client/modules/IDE/reducers/preferences.js

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../../../constants';
 
-const initialState = {
+export const initialState = {
   fontSize: 18,
   autosave: true,
   linewrap: true,

client/modules/Legal/components/PolicyContainer.jsx

@@ -7,10 +7,10 @@ import { remSize, prop } from '../../../theme';
 
 const PolicyContainerMain = styled.main`
   max-width: ${remSize(700)};
-  min-height: 100vh;
   margin: 0 auto;
   padding: ${remSize(10)};
   line-height: 1.5em;
+  overflow: auto;
   & p {
     margin-bottom: ${remSize(10)};
   }

client/testData/testReduxStore.js

@@ -1,4 +1,5 @@
 import { initialState as initialFilesState } from '../modules/IDE/reducers/files';
+import { initialState as initialPrefState } from '../modules/IDE/reducers/preferences';
 
 const mockProjects = [
   {
@@ -46,20 +47,7 @@ const initialTestState = {
     parentId: undefined
   },
   files: initialFilesState(),
-  preferences: {
-    fontSize: 18,
-    autosave: true,
-    linewrap: true,
-    lineNumbers: true,
-    lintWarning: false,
-    textOutput: false,
-    gridOutput: false,
-    theme: 'light',
-    autorefresh: false,
-    language: 'en-US',
-    autocloseBracketsQuotes: true,
-    autocompleteHinter: false
-  },
+  preferences: initialPrefState,
   user: {
     email: 'happydog@example.com',
     username: 'happydog',