Merge branch 'master' into feature/remove-indentation-options

client/components/Nav.jsx

@@ -487,8 +487,8 @@ class Nav extends React.PureComponent {
                 onFocus={this.clearHideTimeout}
               >
                 My Account
-              </button>
                 <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+              </button>
               <ul className="nav__dropdown">
                 <button
                   onClick={this.toggleDropdown.bind(this, 'account')}

client/constants.js

@@ -54,6 +54,7 @@ export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';
 
 export const SET_AUTOSAVE = 'SET_AUTOSAVE';
+export const SET_LINEWRAP = 'SET_LINEWRAP';
 export const SET_LINT_WARNING = 'SET_LINT_WARNING';
 export const SET_PREFERENCES = 'SET_PREFERENCES';
 export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';

client/modules/IDE/actions/preferences.js

@@ -50,6 +50,24 @@ export function setAutosave(value) {
   };
 }
 
+export function setLinewrap(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_LINEWRAP,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          linewrap: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
 export function setLintWarning(value) {
   return (dispatch, getState) => {
     dispatch({

client/modules/IDE/components/Editor.jsx

@@ -83,7 +83,7 @@ class Editor extends React.Component {
       lineNumbers: true,
       styleActiveLine: true,
       inputStyle: 'contenteditable',
-      lineWrapping: false,
+      lineWrapping: this.props.linewrap,
       fixedGutter: false,
       foldGutter: true,
       foldOptions: { widget: '\u2026' },
@@ -175,6 +175,9 @@ class Editor extends React.Component {
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
     }
+    if (this.props.linewrap !== prevProps.linewrap) {
+      this._cm.setOption('lineWrapping', this.props.linewrap);
+    }
     if (this.props.theme !== prevProps.theme) {
       this._cm.setOption('theme', `p5-${this.props.theme}`);
     }
@@ -333,6 +336,7 @@ class Editor extends React.Component {
 
 Editor.propTypes = {
   lintWarning: PropTypes.bool.isRequired,
+  linewrap: PropTypes.bool.isRequired,
   lintMessages: PropTypes.arrayOf(PropTypes.shape({
     severity: PropTypes.string.isRequired,
     line: PropTypes.number.isRequired,

client/modules/IDE/components/Preferences.jsx

@@ -15,6 +15,7 @@ class Preferences extends React.Component {
   constructor(props) {
     super(props);
     this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
+    this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
     this.handleUpdateFont = this.handleUpdateFont.bind(this);
     this.handleLintWarning = this.handleLintWarning.bind(this);
   }
@@ -38,6 +39,11 @@ class Preferences extends React.Component {
     this.props.setAutosave(value);
   }
 
+  handleUpdateLinewrap(event) {
+    const value = event.target.value === 'true';
+    this.props.setLinewrap(value);
+  }
+
   handleLintWarning(event) {
     const value = event.target.value === 'true';
     this.props.setLintWarning(value);
@@ -156,6 +162,33 @@ class Preferences extends React.Component {
                 <label htmlFor="autosave-off" className="preference__option">Off</label>
               </div>
             </div>
+            <div className="preference">
+              <h4 className="preference__title">Word Wrap</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setLinewrap(true)}
+                  aria-label="linewrap on"
+                  name="linewrap"
+                  id="linewrap-on"
+                  className="preference__radio-button"
+                  value="On"
+                  checked={this.props.linewrap}
+                />
+                <label htmlFor="linewrap-on" className="preference__option">On</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setLinewrap(false)}
+                  aria-label="linewrap off"
+                  name="linewrap"
+                  id="linewrap-off"
+                  className="preference__radio-button"
+                  value="Off"
+                  checked={!this.props.linewrap}
+                />
+                <label htmlFor="linewrap-off" className="preference__option">Off</label>
+              </div>
+            </div>
           </TabPanel>
           <TabPanel>
             <div className="preference">
@@ -246,7 +279,9 @@ Preferences.propTypes = {
   fontSize: PropTypes.number.isRequired,
   setFontSize: PropTypes.func.isRequired,
   autosave: PropTypes.bool.isRequired,
+  linewrap: PropTypes.bool.isRequired,
   setAutosave: PropTypes.func.isRequired,
+  setLinewrap: PropTypes.func.isRequired,
   textOutput: PropTypes.bool.isRequired,
   gridOutput: PropTypes.bool.isRequired,
   soundOutput: PropTypes.bool.isRequired,

client/modules/IDE/pages/IDEView.jsx

@@ -204,7 +204,9 @@ class IDEView extends React.Component {
               fontSize={this.props.preferences.fontSize}
               setFontSize={this.props.setFontSize}
               autosave={this.props.preferences.autosave}
+              linewrap={this.props.preferences.linewrap}
               setAutosave={this.props.setAutosave}
+              setLinewrap={this.props.setLinewrap}
               lintWarning={this.props.preferences.lintWarning}
               setLintWarning={this.props.setLintWarning}
               textOutput={this.props.preferences.textOutput}
@@ -261,6 +263,7 @@ class IDEView extends React.Component {
               >
                 <Editor
                   lintWarning={this.props.preferences.lintWarning}
+                  linewrap={this.props.preferences.linewrap}
                   lintMessages={this.props.editorAccessibility.lintMessages}
                   updateLintMessage={this.props.updateLintMessage}
                   clearLintMessage={this.props.clearLintMessage}
@@ -507,6 +510,7 @@ IDEView.propTypes = {
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
     autosave: PropTypes.bool.isRequired,
+    linewrap: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
     textOutput: PropTypes.bool.isRequired,
     gridOutput: PropTypes.bool.isRequired,
@@ -517,6 +521,7 @@ IDEView.propTypes = {
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
   setAutosave: PropTypes.func.isRequired,
+  setLinewrap: PropTypes.func.isRequired,
   setLintWarning: PropTypes.func.isRequired,
   setTextOutput: PropTypes.func.isRequired,
   setGridOutput: PropTypes.func.isRequired,

client/modules/IDE/reducers/preferences.js

@@ -3,6 +3,7 @@ import * as ActionTypes from '../../../constants';
 const initialState = {
   fontSize: 18,
   autosave: true,
+  linewrap: true,
   lintWarning: false,
   textOutput: false,
   gridOutput: false,
@@ -17,6 +18,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { fontSize: action.value });
     case ActionTypes.SET_AUTOSAVE:
       return Object.assign({}, state, { autosave: action.value });
+    case ActionTypes.SET_LINEWRAP:
+      return Object.assign({}, state, { linewrap: action.value });
     case ActionTypes.SET_LINT_WARNING:
       return Object.assign({}, state, { lintWarning: action.value });
     case ActionTypes.SET_TEXT_OUTPUT:

client/styles/components/_overlay.scss

@@ -22,7 +22,7 @@
   display: flex;
   flex-wrap: wrap;
   flex-flow: column;
-  max-height: 80%;
+  max-height: 88%;
   max-width: 65%;
 }
 

server/models/user.js

@@ -27,6 +27,7 @@ const userSchema = new Schema({
     indentationAmount: { type: Number, default: 2 },
     isTabIndent: { type: Boolean, default: false },
     autosave: { type: Boolean, default: true },
+    linewrap: { type: Boolean, default: true },
     lintWarning: { type: Boolean, default: false },
     textOutput: { type: Boolean, default: false },
     gridOutput: { type: Boolean, default: false },