Merge branch 'develop' into fix/console-context

Author: raclim

.github/CONTRIBUTING.md

@@ -53,7 +53,7 @@ Issues with these labels are a great place to start!
 - [Need Steps to Reproduce](https://github.com/processing/p5.js-web-editor/labels/Needs%20Steps%20to%20Reproduce)
 - [Ready for Work](https://github.com/processing/p5.js-web-editor/labels/Ready%20for%20Work)
 
-A breakdown of what each label means can be found in the [Preparing an Issue Guide](#preparing-an-issue). 
+A breakdown of what each label means can be found in the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md). 
 
 When approaching these issues, know that it's okay to not know how to fix an issue! Feel free to ask questions about to approach the problem. We are all here to learn and make something awesome. Someone from the community will help you out, and asking questions is a great way to learn about the p5.js editor, its file structure, and development process.
 
@@ -83,7 +83,7 @@ Before submitting a pull request, make sure that:
 ---
 
 ## Ideas for Getting Started
-* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](#preparing-an-issue) and open an issue.
+* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md) and open an issue.
 * Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
 * Try getting the project running locally on your computer by following the [installation steps](./../contributor_docs/installation.md).
 * Look through the documentation in the [developer docs](../contributor_docs/) and the [development guide](./../contributor_docs/development.md). Is there anything that could be expanded? Is there anything missing?

client/common/ButtonOrLink.jsx

@@ -5,23 +5,60 @@ import PropTypes from 'prop-types';
 /**
  * Helper for switching between <button>, <a>, and <Link>
  */
-const ButtonOrLink = ({ href, children, ...props }) => {
-  if (href) {
-    if (href.startsWith('http')) {
+
+const ButtonOrLink = React.forwardRef(
+  ({ href, children, isDisabled, onClick, ...props }, ref) => {
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    };
+
+    if (href) {
+      if (href.startsWith('http')) {
+        return (
+          <a
+            ref={ref}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-disabled={isDisabled}
+            {...props}
+            onClick={handleClick}
+          >
+            {children}
+          </a>
+        );
+      }
       return (
-        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        <Link
+          ref={ref}
+          to={href}
+          aria-disabled={isDisabled}
+          {...props}
+          onClick={handleClick}
+        >
           {children}
-        </a>
+        </Link>
       );
     }
     return (
-      <Link to={href} {...props}>
+      <button
+        ref={ref}
+        aria-disabled={isDisabled}
+        {...props}
+        onClick={handleClick}
+      >
         {children}
-      </Link>
+      </button>
     );
   }
-  return <button {...props}>{children}</button>;
-};
+);
 
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
@@ -34,15 +71,19 @@ ButtonOrLink.propTypes = {
    * External links should start with 'http' or 'https' and will open in a new window.
    */
   href: PropTypes.string,
+  isDisabled: PropTypes.bool,
   /**
    * Content of the button/link.
    * Can be either a string or a complex element.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func
 };
 
 ButtonOrLink.defaultProps = {
-  href: null
+  href: null,
+  isDisabled: false,
+  onClick: null
 };
 
 export default ButtonOrLink;

client/common/ButtonOrLink.test.jsx

@@ -13,7 +13,7 @@ describe('ButtonOrLink', () => {
     render(<ButtonOrLink onClick={clickHandler}>Text</ButtonOrLink>);
     const button = screen.getByRole('button');
     expect(button).toBeInstanceOf(HTMLButtonElement);
-    expect(button).toContainHTML('<button>Text</button>');
+    expect(button).toContainHTML('<button aria-disabled="false">Text</button>');
     fireEvent.click(button);
     expect(clickHandler).toHaveBeenCalled();
   });

client/common/usePrevious.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}