fix: editor resize (#39542)

client/src/components/layouts/variables.css

@@ -22,6 +22,8 @@
   --red-dark: #850000;
   --love-light: #f8577c;
   --love-dark: #f82153;
+  --editor-background-light: #fffffe;
+  --editor-background-dark: #2a2b40;
 }
 
 .dark-palette {
@@ -40,6 +42,7 @@
   --danger-color: var(--red-light);
   --danger-background: var(--red-dark);
   --love-color: var(--love-light);
+  --editor-background: var(--editor-background-dark);
 }
 
 .light-palette {
@@ -58,4 +61,5 @@
   --danger-color: var(--red-dark);
   --danger-background: var(--red-light);
   --love-color: var(--love-dark);
+  --editor-background: var(--editor-background-light);
 }

client/src/templates/Challenges/classic/Editor.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -15,6 +15,7 @@ import {
   updateFile
 } from '../redux';
 import { userSelector, isDonationModalOpenSelector } from '../../../redux';
+import { Loader } from '../../../components/helpers';
 
 import './editor.css';
 
@@ -949,15 +950,18 @@ class Editor extends Component {
   render() {
     const { theme } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
-
     return (
-      <MonacoEditor
-        editorDidMount={this.editorDidMount}
-        editorWillMount={this.editorWillMount}
-        onChange={this.onChange}
-        options={this.options}
-        theme={editorTheme}
-      />
+      <Suspense fallback={<Loader timeout={600} />}>
+        <span className='notranslate'>
+          <MonacoEditor
+            editorDidMount={this.editorDidMount}
+            editorWillMount={this.editorWillMount}
+            onChange={this.onChange}
+            options={this.options}
+            theme={editorTheme}
+          />
+        </span>
+      </Suspense>
     );
   }
 }

client/src/templates/Challenges/classic/MultifileEditor.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component, Suspense } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
 import { createSelector } from 'reselect';
@@ -17,7 +17,6 @@ import {
   updateFile
 } from '../redux';
 import './editor.css';
-import { Loader } from '../../../components/helpers';
 import Editor from './Editor';
 
 const propTypes = {
@@ -201,68 +200,53 @@ class MultifileEditor extends Component {
         orientation='horizontal'
         {...reflexProps}
         {...resizeProps}
+        className='editor-container'
       >
         <ReflexElement flex={10} {...reflexProps} {...resizeProps}>
           <ReflexContainer orientation='vertical'>
             {visibleEditors.indexhtml && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
-                    <Editor
-                      challengeFiles={challengeFiles}
-                      containerRef={containerRef}
-                      description={
-                        targetEditor === 'indexhtml' ? description : null
-                      }
-                      fileKey='indexhtml'
-                      key='indexhtml'
-                      ref={editorRef}
-                      resizeProps={resizeProps}
-                      theme={editorTheme}
-                    />
-                  </span>
-                </Suspense>
+                <Editor
+                  challengeFiles={challengeFiles}
+                  containerRef={containerRef}
+                  description={
+                    targetEditor === 'indexhtml' ? description : null
+                  }
+                  fileKey='indexhtml'
+                  key='indexhtml'
+                  ref={editorRef}
+                  resizeProps={resizeProps}
+                  theme={editorTheme}
+                />
               </ReflexElement>
             )}
             {splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
             {visibleEditors.indexcss && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
-                    <Editor
-                      challengeFiles={challengeFiles}
-                      containerRef={containerRef}
-                      description={
-                        targetEditor === 'indexcss' ? description : null
-                      }
-                      fileKey='indexcss'
-                      key='indexcss'
-                      resizeProps={resizeProps}
-                      theme={editorTheme}
-                    />
-                  </span>
-                </Suspense>
+                <Editor
+                  challengeFiles={challengeFiles}
+                  containerRef={containerRef}
+                  description={targetEditor === 'indexcss' ? description : null}
+                  fileKey='indexcss'
+                  key='indexcss'
+                  resizeProps={resizeProps}
+                  theme={editorTheme}
+                />
               </ReflexElement>
             )}
             {splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
 
             {visibleEditors.indexjs && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
-                    <Editor
-                      challengeFiles={challengeFiles}
-                      containerRef={containerRef}
-                      description={
-                        targetEditor === 'indexjs' ? description : null
-                      }
-                      fileKey='indexjs'
-                      key='indexjs'
-                      resizeProps={resizeProps}
-                      theme={editorTheme}
-                    />
-                  </span>
-                </Suspense>
+                <Editor
+                  challengeFiles={challengeFiles}
+                  containerRef={containerRef}
+                  description={targetEditor === 'indexjs' ? description : null}
+                  fileKey='indexjs'
+                  key='indexjs'
+                  resizeProps={resizeProps}
+                  theme={editorTheme}
+                />
               </ReflexElement>
             )}
           </ReflexContainer>

client/src/templates/Challenges/classic/editor.css

@@ -13,3 +13,7 @@
 .vs .monaco-scrollable-element > .scrollbar > .slider {
   z-index: 11;
 }
+
+.editor-container {
+  background: var(--editor-background);
+}