Merge develop

Author: catarak

.env.example

@@ -10,20 +10,21 @@ EXAMPLE_USER_PASSWORD=hellop5js
 GG_EXAMPLES_USERNAME=generativedesign
 GG_EXAMPLES_EMAIL=[email protected]
 GG_EXAMPLES_PASS=generativedesign
-ML5_LIBRARY_USERNAME=ml5
-ML5_LIBRARY_EMAIL=[email protected]
-ML5_LIBRARY_PASS=helloml5
 GITHUB_ID=<your-github-client-id>
 GITHUB_SECRET=<your-github-client-secret>
 GOOGLE_ID=<your-google-client-id> (use google+ api)
 GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
 MAILGUN_DOMAIN=<your-mailgun-domain>
 MAILGUN_KEY=<your-mailgun-api-key>
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=[email protected]
+ML5_LIBRARY_PASS=helloml5
+MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+TRANSLATIONS_ENABLED=true
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
-MOBILE_ENABLED=true

client/components/Nav.jsx

@@ -422,7 +422,9 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
               >
                 {this.props.t('Nav.Edit.TidyCode')}
-                <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
+                <span className="nav__keyboard-shortcut">
+                  {metaKeyName}+{'\u21E7'}+F
+                </span>
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -865,8 +867,6 @@ Nav.propTypes = {
   cmController: PropTypes.shape({
     tidyCode: PropTypes.func,
     showFind: PropTypes.func,
-    findNext: PropTypes.func,
-    findPrev: PropTypes.func,
     showReplace: PropTypes.func,
     getContent: PropTypes.func
   }),

client/components/__test__/Nav.test.jsx renamed to client/components/Nav.unit.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { NavComponent } from '../Nav';
+import { NavComponent } from './Nav';
 
-jest.mock('../../i18n');
+jest.mock('../i18n');
 
 describe('Nav', () => {
   const props = {

client/components/__test__/__snapshots__/Nav.test.jsx.snap renamed to client/components/__snapshots__/Nav.unit.test.jsx.snap

@@ -85,7 +85,7 @@ exports[`Nav renders correctly 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⇧+Tab
+                  ⌃+⇧+F
                 </span>
               </button>
             </li>

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -52,8 +52,9 @@ class SketchList extends React.Component {
   };
 
   inCollection = (sketch) =>
-    this.props.collection.items.find((item) => item.project.id === sketch.id) !=
-    null;
+    this.props.collection.items.find((item) =>
+      item.isDeleted ? false : item.project.id === sketch.id
+    ) != null;
 
   render() {
     const hasSketches = this.props.sketches.length > 0;

client/modules/IDE/components/Editor.jsx

@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
-import beautifyJS from 'js-beautify';
+import emmet from '@emmetio/codemirror-plugin';
+import prettier from 'prettier';
+import babelParser from 'prettier/parser-babel';
+import htmlParser from 'prettier/parser-html';
+import cssParser from 'prettier/parser-postcss';
 import { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
 import 'codemirror/addon/selection/active-line';
@@ -56,15 +60,12 @@ import * as UserActions from '../../User/actions';
 import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
-const beautifyCSS = beautifyJS.css;
-const beautifyHTML = beautifyJS.html;
+emmet(CodeMirror);
 
 window.JSHINT = JSHINT;
 window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
-delete CodeMirror.keyMap.sublime['Shift-Tab'];
 
-const IS_TAB_INDENT = false;
 const INDENTATION_AMOUNT = 2;
 
 class Editor extends React.Component {
@@ -84,8 +85,6 @@ class Editor extends React.Component {
       }
     }, 2000);
     this.showFind = this.showFind.bind(this);
-    this.findNext = this.findNext.bind(this);
-    this.findPrev = this.findPrev.bind(this);
     this.showReplace = this.showReplace.bind(this);
     this.getContent = this.getContent.bind(this);
   }
@@ -107,6 +106,11 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
+      emmet: {
+        preview: ['html'],
+        markTagPairs: true,
+        autoRenameTags: true
+      },
       autoCloseBrackets: this.props.autocloseBracketsQuotes,
       styleSelectedText: true,
       lint: {
@@ -129,6 +133,7 @@ class Editor extends React.Component {
       metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     this._cm.setOption('extraKeys', {
       Tab: (cm) => {
+        if (!cm.execCommand('emmetExpandAbbreviation')) return;
         // might need to specify and indent more?
         const selection = cm.doc.getSelection();
         if (selection.length > 0) {
@@ -137,11 +142,13 @@ class Editor extends React.Component {
           cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
         }
       },
+      Enter: 'emmetInsertLineBreak',
+      Esc: 'emmetResetAbbreviation',
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
-      [`${metaKey}-G`]: 'findNext',
-      [`Shift-${metaKey}-G`]: 'findPrev',
+      [`${metaKey}-G`]: 'findPersistentNext',
+      [`Shift-${metaKey}-G`]: 'findPersistentPrev',
       [replaceCommand]: 'replace'
     });
 
@@ -168,8 +175,14 @@ class Editor extends React.Component {
     });
 
     this._cm.on('keydown', (_cm, e) => {
-      // 9 === Tab
-      if (e.keyCode === 9 && e.shiftKey) {
+      // 70 === f
+      if (
+        ((metaKey === 'Cmd' && e.metaKey) ||
+          (metaKey === 'Ctrl' && e.ctrlKey)) &&
+        e.shiftKey &&
+        e.keyCode === 70
+      ) {
+        e.preventDefault();
         this.tidyCode();
       }
     });
@@ -181,8 +194,6 @@ class Editor extends React.Component {
     this.props.provideController({
       tidyCode: this.tidyCode,
       showFind: this.showFind,
-      findNext: this.findNext,
-      findPrev: this.findPrev,
       showReplace: this.showReplace,
       getContent: this.getContent
     });
@@ -302,16 +313,6 @@ class Editor extends React.Component {
     return updatedFile;
   }
 
-  findPrev() {
-    this._cm.focus();
-    this._cm.execCommand('findPrev');
-  }
-
-  findNext() {
-    this._cm.focus();
-    this._cm.execCommand('findNext');
-  }
-
   showFind() {
     this._cm.execCommand('findPersistent');
   }
@@ -320,31 +321,33 @@ class Editor extends React.Component {
     this._cm.execCommand('replace');
   }
 
+  prettierFormatWithCursor(parser, plugins) {
+    try {
+      const { formatted, cursorOffset } = prettier.formatWithCursor(
+        this._cm.doc.getValue(),
+        {
+          cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()),
+          parser,
+          plugins
+        }
+      );
+      this._cm.doc.setValue(formatted);
+      this._cm.focus();
+      this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset));
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   tidyCode() {
-    const beautifyOptions = {
-      indent_size: INDENTATION_AMOUNT,
-      indent_with_tabs: IS_TAB_INDENT
-    };
     const mode = this._cm.getOption('mode');
-    const currentPosition = this._cm.doc.getCursor();
     if (mode === 'javascript') {
-      this._cm.doc.setValue(
-        beautifyJS(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('babel', [babelParser]);
     } else if (mode === 'css') {
-      this._cm.doc.setValue(
-        beautifyCSS(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('css', [cssParser]);
     } else if (mode === 'htmlmixed') {
-      this._cm.doc.setValue(
-        beautifyHTML(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('html', [htmlParser]);
     }
-    this._cm.focus();
-    this._cm.doc.setCursor({
-      line: currentPosition.line,
-      ch: currentPosition.ch + INDENTATION_AMOUNT
-    });
   }
 
   initializeDocuments(files) {

client/modules/IDE/components/FileNode.jsx

@@ -16,7 +16,7 @@ function parseFileName(name) {
   const nameArray = name.split('.');
   if (nameArray.length > 1) {
     const extension = `.${nameArray[nameArray.length - 1]}`;
-    const baseName = nameArray.slice(0, -1).join('');
+    const baseName = nameArray.slice(0, -1).join('.');
     const firstLetter = baseName[0];
     const lastLetter = baseName[baseName.length - 1];
     const middleText = baseName.slice(1, -1);

client/modules/IDE/components/FileNode.test.jsx renamed to client/modules/IDE/components/FileNode.unit.test.jsx

@@ -24,7 +24,9 @@ function KeyboardShortcutModal() {
       </p>
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + F
+          </span>
           <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
         </li>
         <li className="keyboard-shortcut-item">

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -35,6 +35,7 @@ import {
 } from '../actions/preferences';
 import { setBlobUrl } from '../actions/files';
 import { clearConsole, dispatchConsoleEvent } from '../actions/console';
+import getConfig from '../../../utils/getConfig';
 
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
@@ -168,7 +169,7 @@ class PreviewFrame extends React.Component {
     }
 
     const previewScripts = sketchDoc.createElement('script');
-    previewScripts.src = '/previewScripts.js';
+    previewScripts.src = getConfig('PREVIEW_SCRIPTS_URL');
     sketchDoc.head.appendChild(previewScripts);
 
     const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;

client/modules/IDE/components/PreviewFrame.jsx

@@ -101,13 +101,6 @@ class IDEView extends React.Component {
     if (nextProps.location !== this.props.location) {
       this.props.setPreviousPath(this.props.location.pathname);
     }
-
-    if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
-      this.setState({
-        consoleSize: nextProps.ide.consoleIsExpanded ? 150 : 29
-      });
-    }
-
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
       this.setState({
         sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20
@@ -337,7 +330,9 @@ class IDEView extends React.Component {
               <SplitPane
                 split="horizontal"
                 primary="second"
-                size={this.state.consoleSize}
+                size={
+                  this.props.ide.consoleIsExpanded ? this.state.consoleSize : 29
+                }
                 minSize={29}
                 onChange={(size) => this.setState({ consoleSize: size })}
                 allowResize={this.props.ide.consoleIsExpanded}
@@ -378,10 +373,7 @@ class IDEView extends React.Component {
         </main>
         {this.props.ide.modalIsVisible && <NewFileModal />}
         {this.props.ide.newFolderModalVisible && (
-          <NewFolderModal
-            closeModal={this.props.closeNewFolderModal}
-            createFolder={this.props.createFolder}
-          />
+          <NewFolderModal closeModal={this.props.closeNewFolderModal} />
         )}
         {this.props.ide.uploadFileModalVisible && (
           <UploadFileModal closeModal={this.props.closeUploadFileModal} />
@@ -505,9 +497,6 @@ IDEView.propTypes = {
     }),
     updatedAt: PropTypes.string
   }).isRequired,
-  editorAccessibility: PropTypes.shape({
-    lintMessages: PropTypes.objectOf(PropTypes.shape()).isRequired
-  }).isRequired,
   preferences: PropTypes.shape({
     autosave: PropTypes.bool.isRequired,
     fontSize: PropTypes.number.isRequired,
@@ -564,7 +553,6 @@ IDEView.propTypes = {
   newFolder: PropTypes.func.isRequired,
   closeNewFolderModal: PropTypes.func.isRequired,
   closeNewFileModal: PropTypes.func.isRequired,
-  createFolder: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
   toast: PropTypes.shape({

client/modules/IDE/components/Toolbar.test.jsx renamed to client/modules/IDE/components/Toolbar.unit.test.jsx

@@ -12,8 +12,8 @@ function draw() {
 const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 

client/modules/IDE/pages/IDEView.jsx

@@ -83,6 +83,8 @@ $themes: (
     input-text-color: $dark,
     input-background-color: $lightest,
     input-secondary-background-color: $lightest,
+    input-selection-text-color: $dark,
+    input-selection-background-color: $medium-light,
     input-border-color: $middle-light,
     search-background-color: $lightest,
     search-clear-background-color: $light,
@@ -163,6 +165,8 @@ $themes: (
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,
+    input-selection-text-color: $darkest,
+    input-selection-background-color: $lightest,
     input-border-color: $middle-dark,
     search-background-color: $lightest,
     search-clear-background-color: $medium-dark,
@@ -241,6 +245,8 @@ $themes: (
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,
+    input-selection-text-color: $darkest,
+    input-selection-background-color: $lightest,
     input-border-color: $middle-dark,
     search-background-color: $white,
     search-clear-background-color: $medium-dark,

client/modules/IDE/reducers/files.js

@@ -44,6 +44,14 @@ textarea {
 	}
 }
 
+input::selection,
+textarea::selection {
+	@include themify() {
+		color: getThemifyVariable('input-selection-text-color');
+		background-color: getThemifyVariable('input-selection-background-color');
+	}
+}
+
 button[type="submit"],
 input[type="submit"] {
 	@include themify() {