Feature/autoclose brackets quotes

client/constants.js

@@ -74,6 +74,7 @@ export const SET_PREFERENCES = 'SET_PREFERENCES';
 export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
 export const SET_GRID_OUTPUT = 'SET_GRID_OUTPUT';
 export const SET_SOUND_OUTPUT = 'SET_SOUND_OUTPUT';
+export const SET_AUTOCLOSE_BRACKETS_QUOTES = 'SET_AUTOCLOSE_BRACKETS_QUOTES';
 
 export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
 export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';

client/modules/IDE/actions/preferences.js

@@ -51,6 +51,24 @@ export function setLineNumbers(value) {
   };
 }
 
+export function setAutocloseBracketsQuotes(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autocloseBracketsQuotes: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
 export function setAutosave(value) {
   return (dispatch, getState) => {
     dispatch({

client/modules/IDE/components/Editor.jsx

@@ -21,6 +21,7 @@ import 'codemirror/addon/search/matchesonscrollbar';
 import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/edit/closebrackets';
 
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
@@ -104,6 +105,7 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
+      autoCloseBrackets: this.props.autocloseBracketsQuotes,
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();
@@ -206,6 +208,9 @@ class Editor extends React.Component {
     if (this.props.lineNumbers !== prevProps.lineNumbers) {
       this._cm.setOption('lineNumbers', this.props.lineNumbers);
     }
+    if (this.props.autocloseBracketsQuotes !== prevProps.autocloseBracketsQuotes) {
+      this._cm.setOption('autoCloseBrackets', this.props.autocloseBracketsQuotes);
+    }
 
     if (prevProps.consoleEvents !== this.props.consoleEvents) {
       this.props.showRuntimeErrorWarning();
@@ -371,6 +376,7 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  autocloseBracketsQuotes: PropTypes.bool.isRequired,
   lineNumbers: PropTypes.bool.isRequired,
   lintWarning: PropTypes.bool.isRequired,
   linewrap: PropTypes.bool.isRequired,

client/modules/IDE/components/Preferences/index.jsx

@@ -202,6 +202,33 @@ class Preferences extends React.Component {
                 <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
               </div>
             </div>
+            <div className="preference">
+              <h4 className="preference__title">{this.props.t('Preferences.AutocloseBracketsQuotes')}</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutocloseBracketsQuotes(true)}
+                  aria-label={this.props.t('Preferences.AutocloseBracketsQuotesOnARIA')}
+                  name="autoclosebracketsquotes"
+                  id="autoclosebracketsquotes-on"
+                  className="preference__radio-button"
+                  value="On"
+                  checked={this.props.autocloseBracketsQuotes}
+                />
+                <label htmlFor="autoclosebracketsquotes-on" className="preference__option">{this.props.t('Preferences.On')}</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutocloseBracketsQuotes(false)}
+                  aria-label={this.props.t('Preferences.AutocloseBracketsQuotesOffARIA')}
+                  name="autoclosebracketsquotes"
+                  id="autoclosebracketsquotes-off"
+                  className="preference__radio-button"
+                  value="Off"
+                  checked={!this.props.autocloseBracketsQuotes}
+                />
+                <label htmlFor="autoclosebracketsquotes-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
+              </div>
+            </div>
             <div className="preference">
               <h4 className="preference__title">{this.props.t('Preferences.WordWrap')}</h4>
               <div className="preference__options">
@@ -361,6 +388,8 @@ Preferences.propTypes = {
   setLintWarning: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
   setTheme: PropTypes.func.isRequired,
+  autocloseBracketsQuotes: PropTypes.bool.isRequired,
+  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
 };
 

client/modules/IDE/pages/IDEView.jsx

@@ -286,6 +286,8 @@ class IDEView extends React.Component {
               setSoundOutput={this.props.setSoundOutput}
               theme={this.props.preferences.theme}
               setTheme={this.props.setTheme}
+              autocloseBracketsQuotes={this.props.preferences.autocloseBracketsQuotes}
+              setAutocloseBracketsQuotes={this.props.setAutocloseBracketsQuotes}
             />
           </Overlay>
         )}
@@ -534,9 +536,11 @@ IDEView.propTypes = {
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
     autorefresh: PropTypes.bool.isRequired,
-    language: PropTypes.string.isRequired
+    language: PropTypes.string.isRequired,
+    autocloseBracketsQuotes: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
+  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
   setAutosave: PropTypes.func.isRequired,
   setLineNumbers: PropTypes.func.isRequired,

client/modules/IDE/reducers/preferences.js

@@ -12,7 +12,8 @@ const initialState = {
   soundOutput: false,
   theme: 'light',
   autorefresh: false,
-  language: 'en-US'
+  language: 'en-US',
+  autocloseBracketsQuotes: true
 };
 
 const preferences = (state = initialState, action) => {
@@ -41,6 +42,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { lineNumbers: action.value });
     case ActionTypes.SET_LANGUAGE:
       return Object.assign({}, state, { language: action.language });
+    case ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES:
+      return Object.assign({}, state, { autocloseBracketsQuotes: action.value });
     default:
       return state;
   }

server/models/user.js

@@ -67,7 +67,8 @@ const userSchema = new Schema({
     soundOutput: { type: Boolean, default: false },
     theme: { type: String, default: 'light' },
     autorefresh: { type: Boolean, default: false },
-    language: { type: String, default: 'en-US' }
+    language: { type: String, default: 'en-US' },
+    autocloseBracketsQuotes: { type: Boolean, default: true }
   },
   totalSize: { type: Number, default: 0 }
 }, { timestamps: true, usePushEach: true });

translations/locales/en-US/translations.json

@@ -133,6 +133,9 @@
     "AutosaveOnARIA": "autosave on",
     "Off": "Off",
     "AutosaveOffARIA": "autosave off",
+    "AutocloseBracketsQuotes": "Autoclose Brackets and Quotes",
+    "AutocloseBracketsQuotesOnARIA": "autoclose brackets and quotes on",
+    "AutocloseBracketsQuotesOffARIA": "autoclose brackets and quotes off",
     "WordWrap": "Word Wrap",
     "LineWrapOnARIA": "linewrap on",
     "LineWrapOffARIA": "linewrap off",

translations/locales/es-419/translations.json

@@ -131,6 +131,9 @@
     "Autosave": "Grabar automáticamente",
     "On": "Activar",
     "AutosaveOnARIA": "Grabado automático activado",
+    "AutocloseBracketsQuotes": "Cerrar automáticamente llaves y comillas",
+    "AutocloseBracketsQuotesOnARIA": "Activar cierre automático de llaves y comillas",
+    "AutocloseBracketsQuotesOffARIA": "Desactivar cierre automático de llaves y comillas",
     "Off": "Desactivar",
     "AutosaveOffARIA": "Grabado automático desactivado",
     "WordWrap": "Ajuste automático de línea",