Fetch upstream branch 'develop' into fix-#1867

Author: ameybh

client/components/Nav.jsx

@@ -617,6 +617,16 @@ class Nav extends React.PureComponent {
             />
           </button>
           <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="de"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Deutsch
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
@@ -641,20 +651,30 @@ class Nav extends React.PureComponent {
               <button
                 onFocus={this.handleFocusForLang}
                 onBlur={this.handleBlur}
-                value="pt-BR"
+                value="fr-CA"
                 onClick={(e) => this.handleLangSelection(e)}
               >
-                Português
+                Français
               </button>
             </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
                 onBlur={this.handleBlur}
-                value="de"
+                value="hi"
                 onClick={(e) => this.handleLangSelection(e)}
               >
-                Deutsch
+                हिन्दी
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="zh-CN"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                简体中文
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -671,10 +691,10 @@ class Nav extends React.PureComponent {
               <button
                 onFocus={this.handleFocusForLang}
                 onBlur={this.handleBlur}
-                value="hi"
+                value="pt-BR"
                 onClick={(e) => this.handleLangSelection(e)}
               >
-                हिन्दी
+                Português
               </button>
             </li>
           </ul>

client/i18n.js

@@ -1,31 +1,44 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
-import { enUS, es, ja, hi, ptBR, de } from 'date-fns/locale';
+import { enUS, es, ja, hi, ptBR, de, frCA, zhCN } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
-const availableLanguages = ['en-US', 'es-419', 'ja', 'hi', 'pt-BR', 'de'];
+const availableLanguages = [
+  'de',
+  'en-US',
+  'es-419',
+  'fr-CA',
+  'hi',
+  'ja',
+  'pt-BR',
+  'zh-CN'
+];
 
 export function languageKeyToLabel(lang) {
   const languageMap = {
+    de: 'Deutsch',
     'en-US': 'English',
     'es-419': 'Español',
-    ja: '日本語',
+    'fr-CA': 'Français',
     hi: 'हिन्दी',
+    ja: '日本語',
     'pt-BR': 'Português',
-    de: 'Deutsch'
+    'zh-CN': '简体中文'
   };
   return languageMap[lang];
 }
 
 export function languageKeyToDateLocale(lang) {
   const languageMap = {
+    de,
     'en-US': enUS,
     'es-419': es,
-    ja,
+    'fr-CA': frCA,
     hi,
-    de,
-    'pt-BR': ptBR
+    ja,
+    'pt-BR': ptBR,
+    'zh-CN': zhCN
   };
   return languageMap[lang];
 }

client/modules/IDE/components/Editor.jsx

@@ -9,6 +9,7 @@ import cssParser from 'prettier/parser-postcss';
 import { withTranslation } from 'react-i18next';
 import StackTrace from 'stacktrace-js';
 import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/javascript-lint';
@@ -39,7 +40,6 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
-import '../../../utils/webGL-clike';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
 import { metaKey } from '../../../utils/metaKey';
@@ -218,10 +218,7 @@ class Editor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (
-      this.props.file.content !== prevProps.file.content &&
-      this.props.file.content !== this._cm.getValue()
-    ) {
+    if (this.props.file.id !== prevProps.file.id) {
       const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
       this._docs[prevProps.file.id] = oldDoc;
       this._cm.focus();
@@ -310,8 +307,10 @@ class Editor extends React.Component {
       mode = 'htmlmixed';
     } else if (fileName.match(/.+\.json$/i)) {
       mode = 'application/json';
-    } else if (fileName.match(/.+\.(frag|vert)$/i)) {
-      mode = 'clike';
+    } else if (fileName.match(/.+\.(frag|glsl)$/i)) {
+      mode = 'x-shader/x-fragment';
+    } else if (fileName.match(/.+\.(vert)$/i)) {
+      mode = 'x-shader/x-vertex';
     } else {
       mode = 'text/plain';
     }