Merge branch 'develop' into fix/document-theme

Author: raclim

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,12 @@
+blank_issues_enabled: false
+
+contact_links:
+  - name: 🌸 p5.js Issues
+    url: https://github.com/processing/p5.js/issues
+    about: Report issues with the p5.js here.
+  - name: 🌐 Website Issues
+    url: https://github.com/processing/p5.js-website/issues
+    about: Report issues with the p5.js website here.
+  - name: 💬 Forum
+    url: https://discourse.processing.org/c/p5js
+    about: Have other questions about using p5.js? Ask them here!

.github/ISSUE_TEMPLATE/existing-feature-enhancement.yml

@@ -0,0 +1,16 @@
+name: 💡 Existing Feature Enhancement
+description: Suggest an improvement to an existing feature.
+labels: [ Enhancement ]
+body:
+  - type: textarea
+    attributes:
+      label: Increasing Access
+      description: How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Web Editor? (If you're not sure, you can type "Unsure" here and let others from the community offer their thoughts.)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Feature enhancement details
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,16 @@
+name: 🌱 New Feature Request
+description: Request a new feature be added.
+labels: [ Feature Request ]
+body:
+  - type: textarea
+    attributes:
+      label: Increasing Access
+      description: How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Web Editor? (If you're not sure, you can type "Unsure" here and let others from the community offer their thoughts.)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Feature request details
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/found-a-bug.yml

@@ -0,0 +1,76 @@
+name: 🐛 Found a Bug
+description: Report p5.js web editor bugs (broken or incorrect behaviour).
+labels: [ Bug ]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        - Please make sure to [search for existing issues](https://github.com/processing/p5.js-web-editor/issues) before filing a new one!
+
+  - type: input
+    attributes:
+      label: p5.js version
+      description: You can find this in the first line of the p5.js file.
+    validations:
+      required: false
+
+  - type: dropdown
+    attributes:
+      label: What is your operating system?
+      options:
+        - Windows
+        - Mac OS
+        - Linux
+        - Android
+        - iOS
+        - Other (specify if possible)
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Web browser and version
+      description: |
+        In the address bar, on Chrome enter `chrome://version`, on Firefox enter `about:support`. On Safari, use `About Safari`.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      placeholder: What is currently happening.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: |
+        If you want to include screenshots, paste them into the markdown editor below.
+      placeholder: What were you expecting?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: |
+        - Add steps to reproduce bugs or add information on the place where the feature should be implemented.
+        - Add links to a sample deployment or code.
+      value: "### Steps: 
+      
+              1.
+              2.
+              3.
+          
+              ### Snippet:
+              
+              ```js
+              
+              
+              // Paste your code here :)
+              
+              
+              ```"
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/🌱-new-feature-request.md

@@ -20,3 +20,5 @@ terraform/.terraform/
 
 storybook-static
 duplicates.json
+
+coverage

.github/ISSUE_TEMPLATE/🐛-found-a-bug.md

@@ -18,6 +18,7 @@ import { logoutUser } from '../modules/User/actions';
 import getConfig from '../utils/getConfig';
 import { metaKeyName, metaKey } from '../utils/metaKey';
 import { getIsUserOwner } from '../modules/IDE/selectors/users';
+import { selectSketchPath } from '../modules/IDE/selectors/project';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
@@ -245,7 +246,7 @@ class Nav extends React.PureComponent {
           />
         </li>
         <li className="nav__item nav__item--no-icon">
-          <Link to="/" className="nav__back-link">
+          <Link to={this.props.editorLink} className="nav__back-link">
             <CaretLeftIcon
               className="nav__back-icon"
               focusable="false"
@@ -752,6 +753,16 @@ class Nav extends React.PureComponent {
                 正體中文
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="tr"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Türkçe
+              </button>
+            </li>
           </ul>
         </li>
       </React.Fragment>
@@ -980,7 +991,8 @@ Nav.propTypes = {
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
-  isUserOwner: PropTypes.bool.isRequired
+  isUserOwner: PropTypes.bool.isRequired,
+  editorLink: PropTypes.string
 };
 
 Nav.defaultProps = {
@@ -993,7 +1005,8 @@ Nav.defaultProps = {
   warnIfUnsavedChanges: undefined,
   params: {
     username: undefined
-  }
+  },
+  editorLink: '/'
 };
 
 function mapStateToProps(state) {
@@ -1003,7 +1016,8 @@ function mapStateToProps(state) {
     unsavedChanges: state.ide.unsavedChanges,
     rootFile: state.files.filter((file) => file.name === 'root')[0],
     language: state.preferences.language,
-    isUserOwner: getIsUserOwner(state)
+    isUserOwner: getIsUserOwner(state),
+    editorLink: selectSketchPath(state)
   };
 }
 

.github/ISSUE_TEMPLATE/💡-existing-feature-enhancement.md

@@ -15,7 +15,8 @@ import {
   zhCN,
   zhTW,
   uk,
-  sv
+  sv,
+  tr
 } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
@@ -32,7 +33,8 @@ const availableLanguages = [
   'sv',
   'uk-UA',
   'zh-CN',
-  'zh-TW'
+  'zh-TW',
+  'tr'
 ];
 
 export function languageKeyToLabel(lang) {
@@ -49,7 +51,8 @@ export function languageKeyToLabel(lang) {
     sv: 'Svenska',
     'uk-UA': 'Українська',
     'zh-CN': '简体中文',
-    'zh-TW': '正體中文'
+    'zh-TW': '正體中文',
+    tr: 'Türkçe'
   };
   return languageMap[lang];
 }
@@ -68,7 +71,8 @@ export function languageKeyToDateLocale(lang) {
     sv,
     'uk-UA': uk,
     'zh-CN': zhCN,
-    'zh-TW': zhTW
+    'zh-TW': zhTW,
+    tr
   };
   return languageMap[lang];
 }

.gitignore

@@ -158,7 +158,8 @@ class Editor extends React.Component {
       // choose a color, it deletes characters inline. This is a
       // hack to prevent that.
       [`${metaKey}-K`]: (cm, event) =>
-        cm.state.colorpicker.popup_color_picker({ length: 0 })
+        cm.state.colorpicker.popup_color_picker({ length: 0 }),
+      [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
     });
 
     this.initializeDocuments(this.props.files);
@@ -312,7 +313,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)$/i)) {
+    } else if (fileName.match(/.+\.(vert|stl)$/i)) {
       mode = 'x-shader/x-vertex';
     } else {
       mode = 'text/plain';

client/components/Nav.jsx

@@ -61,6 +61,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + /</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{metaKeyName} + .</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
+        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
           <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>

client/i18n.js

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+import ExitIcon from '../../../images/exit.svg';
+
+// Common logic from NewFolderModal, NewFileModal, UploadFileModal
+
+const Modal = ({
+  title,
+  onClose,
+  closeAriaLabel,
+  contentClassName,
+  children
+}) => {
+  const modalRef = useRef(null);
+
+  const handleOutsideClick = (e) => {
+    // ignore clicks on the component itself
+    if (modalRef.current?.contains?.(e.target)) return;
+
+    onClose();
+  };
+
+  useEffect(() => {
+    modalRef.current?.focus();
+    document.addEventListener('click', handleOutsideClick, false);
+
+    return () => {
+      document.removeEventListener('click', handleOutsideClick, false);
+    };
+  }, []);
+
+  return (
+    <section className="modal" ref={modalRef}>
+      <div className={classNames('modal-content', contentClassName)}>
+        <div className="modal__header">
+          <h2 className="modal__title">{title}</h2>
+          <button
+            className="modal__exit-button"
+            onClick={onClose}
+            aria-label={closeAriaLabel}
+          >
+            <ExitIcon focusable="false" aria-hidden="true" />
+          </button>
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+};
+
+Modal.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  closeAriaLabel: PropTypes.string.isRequired,
+  contentClassName: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+
+Modal.defaultProps = {
+  contentClassName: ''
+};
+
+export default Modal;