Add a WYSIWYG-esque editor for instructions

package.json

@@ -194,13 +194,15 @@
     "qs": "^6.1.0",
     "react": "^16.3.2",
     "react-copy-to-clipboard": "^5.0.0",
+    "react-coroutine": "^2.0.2",
     "react-dom": "^16.0.0",
     "react-draggable": "^3.0.3",
     "react-ga": "^2.5.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-onclickoutside": "^6.5.0",
     "react-prevent-clickthrough": "^0.0.3",
     "react-redux": "^5.0.3",
+    "react-simplemde-editor": "^3.6.14",
     "reduce-reducers": "^0.1.2",
     "redux": "^3.6.0",
     "redux-actions": "^2.2.1",

src/actions/index.js

@@ -33,6 +33,7 @@ import {
   toggleTopBarMenu,
   closeTopBarMenu,
   startEditingInstructions,
+  continueEditingInstructions,
   cancelEditingInstructions,
 } from './ui';
 
@@ -97,6 +98,7 @@ export {
   toggleTopBarMenu,
   closeTopBarMenu,
   startEditingInstructions,
+  continueEditingInstructions,
   cancelEditingInstructions,
   logIn,
   logOut,

src/actions/ui.js

@@ -65,6 +65,11 @@ export const startEditingInstructions = createAction(
   (_projectKey, timestamp = Date.now()) => ({timestamp}),
 );
 
+export const continueEditingInstructions = createAction(
+  'CONTINUE_EDITING_INSTRUCTIONS',
+  (projectKey, content) => ({projectKey, content}),
+);
+
 export const cancelEditingInstructions = createAction(
   'CANCEL_EDITING_INSTRUCTIONS',
 );

src/components/Instructions.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {toReact as markdownToReact} from '../util/markdown';
-import InstructionsEditor from './InstructionsEditor';
+import InstructionsEditor from './InstructionsEditorAsync';
 
 export default function Instructions({
   instructions,
   isEditing,
   isOpen,
   projectKey,
   onCancelEditing,
+  onContinueEditing,
   onSaveChanges,
 }) {
   if (!isEditing && !instructions || !isOpen) {
@@ -25,6 +26,7 @@ export default function Instructions({
             instructions={instructions}
             projectKey={projectKey}
             onCancelEditing={onCancelEditing}
+            onContinueEditing={onContinueEditing}
             onSaveChanges={onSaveChanges}
           /> :
           <div className="instructions">
@@ -41,5 +43,6 @@ Instructions.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   projectKey: PropTypes.string.isRequired,
   onCancelEditing: PropTypes.func.isRequired,
+  onContinueEditing: PropTypes.func.isRequired,
   onSaveChanges: PropTypes.func.isRequired,
 };

src/components/InstructionsEditor.jsx

@@ -3,29 +3,29 @@ import PropTypes from 'prop-types';
 import {t} from 'i18next';
 import bindAll from 'lodash/bindAll';
 
+import SimpleMDE from 'react-simplemde-editor';
+
 export default class InstructionsEditor extends React.Component {
   constructor() {
     super();
-    bindAll(this, '_handleCancelEditing', '_handleSaveChanges', '_ref');
-  }
-
-  componentDidMount() {
-    if (!this.props.instructions) {
-      this._editor.focus();
-    }
+    bindAll(
+      this,
+      '_handleCancelEditing',
+      '_handleContinueEditing',
+      '_handleSaveChanges',
+    );
   }
 
   _handleCancelEditing() {
     this.props.onCancelEditing();
   }
 
   _handleSaveChanges() {
-    const newValue = this._editor.value.trim();
-    this.props.onSaveChanges(this.props.projectKey, newValue);
+    this.props.onSaveChanges(this.props.projectKey, this.props.instructions);
   }
 
-  _ref(editorElement) {
-    this._editor = editorElement;
+  _handleContinueEditing(newValue) {
+    this.props.onContinueEditing(this.props.projectKey, newValue);
   }
 
   render() {
@@ -46,11 +46,13 @@ export default class InstructionsEditor extends React.Component {
           </button>
         </div>
         <div className="instructions-editor__input-container">
-          <textarea
-            className="instructions-editor__input"
-            defaultValue={this.props.instructions}
-            placeholder="Type here..."
-            ref={this._ref}
+          <SimpleMDE
+            options={{
+              autofocus: true,
+              spellChecker: false,
+            }}
+            value={this.props.instructions}
+            onChange={this._handleContinueEditing}
           />
         </div>
         <div className="instructions-editor__footer">
@@ -60,7 +62,7 @@ export default class InstructionsEditor extends React.Component {
             rel="noopener noreferrer"
             target="_blank"
           >
-            Styling with Markdown is supported
+              Styling with Markdown is supported
           </a>
         </div>
       </div>
@@ -72,5 +74,6 @@ InstructionsEditor.propTypes = {
   instructions: PropTypes.string.isRequired,
   projectKey: PropTypes.string.isRequired,
   onCancelEditing: PropTypes.func.isRequired,
+  onContinueEditing: PropTypes.func.isRequired,
   onSaveChanges: PropTypes.func.isRequired,
 };

src/components/InstructionsEditorAsync.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Coroutine from 'react-coroutine';
+
+async function* InstructionsEditorAsync({
+  instructions,
+  projectKey,
+  onCancelEditing,
+  onContinueEditing,
+  onSaveChanges,
+}) {
+  yield <span />;
+  const {'default': InstructionsEditor} = await import('./InstructionsEditor');
+  return (
+    <InstructionsEditor
+      instructions={instructions}
+      projectKey={projectKey}
+      onCancelEditing={onCancelEditing}
+      onContinueEditing={onContinueEditing}
+      onSaveChanges={onSaveChanges}
+    />
+  );
+}
+
+export default Coroutine.create(InstructionsEditorAsync);

src/containers/Instructions.js

@@ -8,6 +8,7 @@ import {
 } from '../selectors';
 import {
   cancelEditingInstructions,
+  continueEditingInstructions,
   updateProjectInstructions,
 } from '../actions';
 
@@ -25,6 +26,9 @@ function mapDispatchToProps(dispatch) {
     onCancelEditing() {
       dispatch(cancelEditingInstructions());
     },
+    onContinueEditing(projectKey, newValue) {
+      dispatch(continueEditingInstructions(projectKey, newValue));
+    },
     onSaveChanges(projectKey, newValue) {
       dispatch(updateProjectInstructions(projectKey, newValue));
     },

src/css/application.css

@@ -136,6 +136,7 @@ body {
 .layout__instructions {
   flex: 0 0 25%;
   position: relative;
+  animation: 0.2s ease-in 0.1s both fadeIn;
 }
 
 /** @define top-bar */
@@ -388,7 +389,7 @@ body {
 .instructions-editor__menu {
   padding: 0.5rem;
   text-align: right;
-  background-color: var(--color-light-gray);
+  background-color: var(--color-low-contrast-gray);
 }
 
 .instructions-editor__footer {