Merge branch 'develop' into chore/emmet-integration

Author: catarak

.env.example

@@ -10,9 +10,9 @@ EXAMPLE_USER_PASSWORD=hellop5js
 GG_EXAMPLES_USERNAME=generativedesign
 GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de
 GG_EXAMPLES_PASS=generativedesign
-ML5_EXAMPLES_USERNAME=ml5
-ML5_EXAMPLES_EMAIL=examples@ml5js.org
-ML5_EXAMPLES_PASS=helloml5
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=examples@ml5js.org
+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)

client/components/Nav.jsx

@@ -42,9 +42,7 @@ class Nav extends React.PureComponent {
     this.handleFind = this.handleFind.bind(this);
     this.handleAddFile = this.handleAddFile.bind(this);
     this.handleAddFolder = this.handleAddFolder.bind(this);
-    this.handleFindNext = this.handleFindNext.bind(this);
     this.handleRun = this.handleRun.bind(this);
-    this.handleFindPrevious = this.handleFindPrevious.bind(this);
     this.handleReplace = this.handleReplace.bind(this);
     this.handleStop = this.handleStop.bind(this);
     this.handleStartAccessible = this.handleStartAccessible.bind(this);
@@ -128,16 +126,6 @@ class Nav extends React.PureComponent {
     this.setDropdown('none');
   }
 
-  handleFindNext() {
-    this.props.cmController.findNext();
-    this.setDropdown('none');
-  }
-
-  handleFindPrevious() {
-    this.props.cmController.findPrev();
-    this.setDropdown('none');
-  }
-
   handleReplace() {
     this.props.cmController.showReplace();
     this.setDropdown('none');
@@ -434,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">
@@ -447,28 +437,6 @@ class Nav extends React.PureComponent {
                 <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
               </button>
             </li>
-            <li className="nav__dropdown-item">
-              <button
-                onClick={this.handleFindNext}
-                onFocus={this.handleFocusForEdit}
-                onBlur={this.handleBlur}
-              >
-                {this.props.t('Nav.Edit.FindNext')}
-                <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
-              </button>
-            </li>
-            <li className="nav__dropdown-item">
-              <button
-                onClick={this.handleFindPrevious}
-                onFocus={this.handleFocusForEdit}
-                onBlur={this.handleBlur}
-              >
-                {this.props.t('Nav.Edit.FindPrevious')}
-                <span className="nav__keyboard-shortcut">
-                  {'\u21E7'}+{metaKeyName}+G
-                </span>
-              </button>
-            </li>
             <li className="nav__dropdown-item">
               <button
                 onClick={this.handleReplace}

client/components/__test__/Nav.test.jsx

@@ -46,7 +46,8 @@ describe('Nav', () => {
     },
     t: jest.fn(),
     setLanguage: jest.fn(),
-    language: 'en-US'
+    language: 'en-US',
+    isUserOwner: true
   };
 
   it('renders correctly', () => {

client/components/__test__/__snapshots__/Nav.test.jsx.snap

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

client/modules/IDE/components/Editor.jsx

@@ -65,7 +65,6 @@ const beautifyHTML = beautifyJS.html;
 window.JSHINT = JSHINT;
 window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
-delete CodeMirror.keyMap.sublime['Shift-Tab'];
 
 const IS_TAB_INDENT = false;
 const INDENTATION_AMOUNT = 2;
@@ -179,8 +178,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();
       }
     });
@@ -295,7 +300,7 @@ class Editor extends React.Component {
       mode = 'javascript';
     } else if (fileName.match(/.+\.css$/i)) {
       mode = 'css';
-    } else if (fileName.match(/.+\.html$/i)) {
+    } else if (fileName.match(/.+\.(html|xml)$/i)) {
       mode = 'htmlmixed';
     } else if (fileName.match(/.+\.json$/i)) {
       mode = 'application/json';

client/modules/IDE/components/KeyboardShortcutModal.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/reducers/files.js

@@ -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.1.9/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
+    <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>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 
@@ -167,8 +167,7 @@ const files = (state, action) => {
       return [...action.files];
     case ActionTypes.RESET_PROJECT:
       return initialState();
-    case ActionTypes.CREATE_FILE: // eslint-disable-line
-    {
+    case ActionTypes.CREATE_FILE: {
       const newState = [
         ...updateParent(state, action),
         {

package-lock.json

@@ -217,8 +217,6 @@
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0",
     "redux-thunk": "^2.3.0",
-    "request": "^2.88.2",
-    "request-promise": "^4.2.5",
     "reselect": "^4.0.0",
     "s3-policy-v4": "0.0.3",
     "sass-extract": "^2.1.0",

package.json

@@ -3,7 +3,7 @@ import format from 'date-fns/format';
 import isUrl from 'is-url';
 import jsdom, { serializeDocument } from 'jsdom';
 import isAfter from 'date-fns/isAfter';
-import request from 'request';
+import axios from 'axios';
 import slugify from 'slugify';
 import Project from '../models/project';
 import User from '../models/user';
@@ -125,7 +125,7 @@ export function getProjectsForUserId(userId) {
 export function getProjectAsset(req, res) {
   Project.findById(req.params.project_id)
     .populate('user', 'username')
-    .exec((err, project) => { // eslint-disable-line
+    .exec(async (err, project) => { // eslint-disable-line
       if (err) {
         return res
           .status(404)
@@ -145,15 +145,15 @@ export function getProjectAsset(req, res) {
       if (!resolvedFile.url) {
         return res.send(resolvedFile.content);
       }
-      request(
-        { method: 'GET', url: resolvedFile.url, encoding: null },
-        (innerErr, response, body) => {
-          if (innerErr) {
-            return res.status(404).send({ message: 'Asset does not exist' });
-          }
-          return res.send(body);
-        }
-      );
+
+      try {
+        const { data } = await axios.get(resolvedFile.url, {
+          responseType: 'arraybuffer'
+        });
+        res.send(data);
+      } catch (error) {
+        res.status(404).send({ message: 'Asset does not exist' });
+      }
     });
 }
 
@@ -198,7 +198,7 @@ function bundleExternalLibs(project, zip, callback) {
   let numScriptsResolved = 0;
   let numScriptTags = 0;
 
-  function resolveScriptTagSrc(scriptTag, document) {
+  async function resolveScriptTagSrc(scriptTag, document) {
     const path = scriptTag.src.split('/');
     const filename = path[path.length - 1];
     const { src } = scriptTag;
@@ -212,23 +212,21 @@ function bundleExternalLibs(project, zip, callback) {
       return;
     }
 
-    request(
-      { method: 'GET', url: src, encoding: null },
-      (err, response, body) => {
-        if (err) {
-          console.log(err);
-        } else {
-          zip.append(body, { name: filename });
-          scriptTag.src = filename;
-        }
+    try {
+      const { data } = await axios.get(src, {
+        responseType: 'arraybuffer'
+      });
+      zip.append(data, { name: filename });
+      scriptTag.src = filename;
+    } catch (err) {
+      console.log(err);
+    }
 
-        numScriptsResolved += 1;
-        if (numScriptsResolved === numScriptTags) {
-          indexHtml.content = serializeDocument(document);
-          callback();
-        }
-      }
-    );
+    numScriptsResolved += 1;
+    if (numScriptsResolved === numScriptTags) {
+      indexHtml.content = serializeDocument(document);
+      callback();
+    }
   }
 
   jsdom.env(indexHtml.content, (innerErr, window) => {
@@ -264,7 +262,7 @@ function buildZip(project, req, res) {
   );
   zip.pipe(res);
 
-  function addFileToZip(file, path) {
+  async function addFileToZip(file, path) {
     if (file.fileType === 'folder') {
       const newPath = file.name === 'root' ? path : `${path}${file.name}/`;
       file.children.forEach((fileId) => {
@@ -274,16 +272,18 @@ function buildZip(project, req, res) {
         })();
       });
     } else if (file.url) {
-      request(
-        { method: 'GET', url: file.url, encoding: null },
-        (err, response, body) => {
-          zip.append(body, { name: `${path}${file.name}` });
-          numCompletedFiles += 1;
-          if (numCompletedFiles === numFiles) {
-            zip.finalize();
-          }
-        }
-      );
+      try {
+        const { data } = await axios.get(file.url, {
+          responseType: 'arraybuffer'
+        });
+        zip.append(data, { name: `${path}${file.name}` });
+      } catch (err) {
+        console.log(err);
+      }
+      numCompletedFiles += 1;
+      if (numCompletedFiles === numFiles) {
+        zip.finalize();
+      }
     } else {
       zip.append(file.content, { name: `${path}${file.name}` });
       numCompletedFiles += 1;