From 24302b56de517e27a03a74461b9f0f07eb1bace0 Mon Sep 17 00:00:00 2001
From: Laksh Singla <30999375+LakshSingla@users.noreply.github.com>
Date: Wed, 27 Mar 2019 01:07:44 +0530
Subject: [PATCH] Added softwrap preference for users. (#970)

* Client and server side code added for Linewrap option

* Linked linewrap prop with the Editor.jsx property

* linewrap defaults to true

* Renamed 'LineWrap' to 'WordWrap'
---
 client/constants.js                           |  1 +
 client/modules/IDE/actions/preferences.js     | 18 ++++++++++
 client/modules/IDE/components/Editor.jsx      |  6 +++-
 client/modules/IDE/components/Preferences.jsx | 35 +++++++++++++++++++
 client/modules/IDE/pages/IDEView.jsx          |  5 +++
 client/modules/IDE/reducers/preferences.js    |  3 ++
 client/styles/components/_overlay.scss        |  2 +-
 server/models/user.js                         |  1 +
 8 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/client/constants.js b/client/constants.js
index 4250cc3b..5d10b458 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -62,6 +62,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';
diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index 3e26e45a..c5fb44ad 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -102,6 +102,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({
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 485302e5..859baf77 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -80,7 +80,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' },
@@ -178,6 +178,9 @@ class Editor extends React.Component {
       this._cm.setOption('tabSize', this.props.indentationAmount);
       this._cm.setOption('indentUnit', this.props.indentationAmount);
     }
+    if (this.props.linewrap !== prevProps.linewrap) {
+      this._cm.setOption('lineWrapping', this.props.linewrap);
+    }
     if (this.props.isTabIndent !== prevProps.isTabIndent) {
       this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     }
@@ -339,6 +342,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,
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 27eddd7d..16d8bf15 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/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.handleUpdateIndentation = this.handleUpdateIndentation.bind(this);
     this.handleLintWarning = this.handleLintWarning.bind(this);
@@ -53,6 +54,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);
@@ -230,6 +236,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">
@@ -325,7 +358,9 @@ Preferences.propTypes = {
   isTabIndent: PropTypes.bool.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,
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 05163b63..bd8c785e 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -209,7 +209,9 @@ class IDEView extends React.Component {
               isTabIndent={this.props.preferences.isTabIndent}
               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}
@@ -266,6 +268,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}
@@ -516,6 +519,7 @@ IDEView.propTypes = {
     indentationAmount: PropTypes.number.isRequired,
     isTabIndent: PropTypes.bool.isRequired,
     autosave: PropTypes.bool.isRequired,
+    linewrap: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
     textOutput: PropTypes.bool.isRequired,
     gridOutput: PropTypes.bool.isRequired,
@@ -529,6 +533,7 @@ IDEView.propTypes = {
   indentWithTab: PropTypes.func.isRequired,
   indentWithSpace: PropTypes.func.isRequired,
   setAutosave: PropTypes.func.isRequired,
+  setLinewrap: PropTypes.func.isRequired,
   setLintWarning: PropTypes.func.isRequired,
   setTextOutput: PropTypes.func.isRequired,
   setGridOutput: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js
index 8441f042..48bc79a2 100644
--- a/client/modules/IDE/reducers/preferences.js
+++ b/client/modules/IDE/reducers/preferences.js
@@ -5,6 +5,7 @@ const initialState = {
   indentationAmount: 2,
   isTabIndent: true,
   autosave: true,
+  linewrap: true,
   lintWarning: false,
   textOutput: false,
   gridOutput: false,
@@ -29,6 +30,8 @@ const preferences = (state = initialState, action) => {
       });
     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:
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 2065a230..8662bc2d 100644
--- a/client/styles/components/_overlay.scss
+++ b/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%;
 }
 
diff --git a/server/models/user.js b/server/models/user.js
index 168a71ca..ec4037e2 100644
--- a/server/models/user.js
+++ b/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 },