Merge branch 'develop' into update/tidy-code-shortcut

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');
@@ -447,28 +435,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

@@ -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/components/useAsModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useModalBehavior } from '../utils/custom-hooks';
+import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
 
 const BackgroundOverlay = styled.div`
   position: fixed;

client/images/console-command-contrast.svg

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -25,33 +25,51 @@ import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl';
 import infoLightUrl from '../../../images/console-info-light.svg?byUrl';
 import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
 import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
+import ConsoleInput from './ConsoleInput';
+
+import commandLightUrl from '../../../images/console-command-light.svg?byUrl';
+import resultLightUrl from '../../../images/console-result-light.svg?byUrl';
+import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl';
+import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl';
+import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl';
+import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl';
 
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
 
 import * as IDEActions from '../../IDE/actions/ide';
 import * as ConsoleActions from '../../IDE/actions/console';
-import { useDidUpdate } from '../../../utils/custom-hooks';
+import { useDidUpdate } from '../hooks/custom-hooks';
+import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
+import { listen } from '../../../utils/dispatcher';
 
 const getConsoleFeedStyle = (theme, times, fontSize) => {
-  const style = {};
+  const style = {
+    BASE_FONT_FAMILY: 'Inconsolata, monospace'
+  };
   const CONSOLE_FEED_LIGHT_ICONS = {
     LOG_WARN_ICON: `url(${warnLightUrl})`,
     LOG_ERROR_ICON: `url(${errorLightUrl})`,
     LOG_DEBUG_ICON: `url(${debugLightUrl})`,
-    LOG_INFO_ICON: `url(${infoLightUrl})`
+    LOG_INFO_ICON: `url(${infoLightUrl})`,
+    LOG_COMMAND_ICON: `url(${commandLightUrl})`,
+    LOG_RESULT_ICON: `url(${resultLightUrl})`
   };
   const CONSOLE_FEED_DARK_ICONS = {
     LOG_WARN_ICON: `url(${warnDarkUrl})`,
     LOG_ERROR_ICON: `url(${errorDarkUrl})`,
     LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
-    LOG_INFO_ICON: `url(${infoDarkUrl})`
+    LOG_INFO_ICON: `url(${infoDarkUrl})`,
+    LOG_COMMAND_ICON: `url(${commandDarkUrl})`,
+    LOG_RESULT_ICON: `url(${resultDarkUrl})`
   };
   const CONSOLE_FEED_CONTRAST_ICONS = {
     LOG_WARN_ICON: `url(${warnContrastUrl})`,
     LOG_ERROR_ICON: `url(${errorContrastUrl})`,
     LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
-    LOG_INFO_ICON: `url(${infoContrastUrl})`
+    LOG_INFO_ICON: `url(${infoContrastUrl})`,
+    LOG_COMMAND_ICON: `url(${commandContrastUrl})`,
+    LOG_RESULT_ICON: `url(${resultContrastUrl})`
   };
   const CONSOLE_FEED_SIZES = {
     TREENODE_LINE_HEIGHT: 1.2,
@@ -94,6 +112,7 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
 const Console = ({ t }) => {
   const consoleEvents = useSelector((state) => state.console);
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
+  const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
 
   const {
@@ -103,17 +122,20 @@ const Console = ({ t }) => {
     dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
-  useDidUpdate(() => {
-    clearConsole();
-    dispatchConsoleEvent(consoleEvents);
-  }, [theme, fontSize]);
-
   const cm = useRef({});
 
   useDidUpdate(() => {
     cm.current.scrollTop = cm.current.scrollHeight;
   });
 
+  const handleMessageEvent = useHandleMessageEvent();
+  useEffect(() => {
+    const unsubscribe = listen(handleMessageEvent);
+    return function cleanup() {
+      unsubscribe();
+    };
+  });
+
   const consoleClass = classNames({
     'preview-console': true,
     'preview-console--collapsed': !isExpanded
@@ -147,29 +169,39 @@ const Console = ({ t }) => {
           </button>
         </div>
       </header>
-      <div ref={cm} className="preview-console__messages">
-        {consoleEvents.map((consoleEvent) => {
-          const { method, times } = consoleEvent;
-          return (
-            <div
-              key={consoleEvent.id}
-              className={`preview-console__message preview-console__message--${method}`}
-            >
-              {times > 1 && (
-                <div
-                  className="preview-console__logged-times"
-                  style={{ fontSize, borderRadius: fontSize / 2 }}
-                >
-                  {times}
-                </div>
-              )}
-              <ConsoleFeed
-                styles={getConsoleFeedStyle(theme, times, fontSize)}
-                logs={[consoleEvent]}
-              />
-            </div>
-          );
-        })}
+      <div className="preview-console__body">
+        <div ref={cm} className="preview-console__messages">
+          {consoleEvents.map((consoleEvent) => {
+            const { method, times } = consoleEvent;
+            return (
+              <div
+                key={consoleEvent.id}
+                className={`preview-console__message preview-console__message--${method}`}
+              >
+                {times > 1 && (
+                  <div
+                    className="preview-console__logged-times"
+                    style={{ fontSize, borderRadius: fontSize / 2 }}
+                  >
+                    {times}
+                  </div>
+                )}
+                <ConsoleFeed
+                  styles={getConsoleFeedStyle(theme, times, fontSize)}
+                  logs={[consoleEvent]}
+                  key={`${consoleEvent.id}-${theme}-${fontSize}`}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {isExpanded && isPlaying && (
+          <ConsoleInput
+            theme={theme}
+            dispatchConsoleEvent={dispatchConsoleEvent}
+            fontSize={fontSize}
+          />
+        )}
       </div>
     </section>
   );