Merge branch 'develop' into piyush/refactor-lodash-imports

Author: lindapaiste

README.md

@@ -29,7 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 ### How Do I Know My Issue or Pull Request is Getting Reviewed?
 
-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: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/9), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+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: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [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!
 
@@ -38,11 +38,9 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
 
-MINOR Release for [p5.js version 1.8.0](https://github.com/processing/p5.js/releases/tag/v1.8.0): By October 27, 2023
+2.9.3 PATCH Release: By November 17, 2023
 
-PATCH Release: By November 2, 2023
-
-MINOR Release: By November 30, 2023
+2.10.0 MINOR Release: By December 15, 2023
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/modules/IDE/components/EditableInput.jsx

@@ -31,6 +31,9 @@ function EditableInput({
       inputRef.current?.focus();
     }
   }, [isEditing]);
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
 
   function beginEditing() {
     setIsEditing(true);

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

@@ -594,7 +594,8 @@ Editor.propTypes = {
   linewrap: PropTypes.bool.isRequired,
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

client/modules/IDE/components/EditorAccessibility.jsx

@@ -37,7 +37,8 @@ const EditorAccessibility = ({ lintMessages = [] }) => {
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen } from '../../../test-utils';
+
+import EditorAccessibility from './EditorAccessibility';
+
+describe('<EditorAccessibility />', () => {
+  it('renders empty message with no lines', () => {
+    render(<EditorAccessibility lintMessages={[]} />);
+
+    expect(
+      screen.getByRole('listitem', {
+        description: 'There are no lint messages'
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders lint message', () => {
+    render(
+      <EditorAccessibility
+        lintMessages={[
+          {
+            severity: 'info',
+            line: '1',
+            message: 'foo',
+            id: '1a2b3c'
+          }
+        ]}
+      />
+    );
+
+    expect(
+      screen.queryByText('There are no lint messages')
+    ).not.toBeInTheDocument();
+
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toBeInTheDocument();
+    expect(listItem.textContent).toEqual('info in line1 :foo');
+  });
+});

client/styles/components/_account.scss

@@ -4,6 +4,12 @@
     background-color: getThemifyVariable('background-color');
   }
   min-height: 100%;
+
+  @media (max-width: 770px) {
+    .account-settings__header {
+      display: none;
+    }
+  }
 }
 
 .account-settings {
@@ -24,6 +30,16 @@
 
 .account__social-stack {
   display: flex;
+  @media (max-width: 770px) {
+    flex-direction: column;
+    align-items: center;
+    gap: #{15 / $base-font-size}rem;
+
+    button, a {
+      width: 100% !important;
+      margin-right: 0;
+    }
+  }
 }
 
 .account__social-stack > * {

client/styles/components/_form-container.scss

@@ -29,6 +29,7 @@
 
 .form-container__content {
 	height: 100%;
+	max-width: 90vw;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -59,6 +60,10 @@
 
 .form-container__divider {
 	padding: #{20 / $base-font-size}rem 0;
+
+	@media (max-width: 770px) {
+		text-align: center;
+	}
 }
 
 .form-container__logo-button {

client/styles/components/_forms.scss

@@ -56,14 +56,19 @@
 }
 
 .form__input {
-  max-width: 90vw;
-  width: #{360 / $base-font-size}rem;
+  min-width: #{355 / $base-font-size}rem;
+  width: 100%;
   height: #{40 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
   }
+
+  @media (max-width: 770px) {
+    max-width: 100%;
+    width:100%;
+  }
 }
 
 .form__input-flexible-height {

client/styles/components/_modal.scss

@@ -10,8 +10,13 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
+  
+  @media (min-width: 770px) {
+    width: #{500 / $base-font-size}rem;
+    
+  }
+
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
   }

client/styles/components/_preferences.scss

@@ -10,7 +10,6 @@
   flex-direction: column;
   outline: none;
   height: calc(80vh - #{65 / $base-font-size}rem);
-  max-height: #{460 / $base-font-size}rem;
   & .react-tabs {
     max-height: 100%;
     display: flex;
@@ -19,6 +18,11 @@
   & .react-tabs__tab-panel {
     overflow-y: auto;
   }
+  
+  @media (min-width: 770px) {
+    max-height: #{460 / $base-font-size}rem;
+    
+  }
 }
 
 .preference__minus-button,