fix: editor resize (#39542)
This commit is contained in:
committed by
Mrugesh Mohapatra
parent
9b1077acf5
commit
a500279036
@ -22,6 +22,8 @@
|
|||||||
--red-dark: #850000;
|
--red-dark: #850000;
|
||||||
--love-light: #f8577c;
|
--love-light: #f8577c;
|
||||||
--love-dark: #f82153;
|
--love-dark: #f82153;
|
||||||
|
--editor-background-light: #fffffe;
|
||||||
|
--editor-background-dark: #2a2b40;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-palette {
|
.dark-palette {
|
||||||
@ -40,6 +42,7 @@
|
|||||||
--danger-color: var(--red-light);
|
--danger-color: var(--red-light);
|
||||||
--danger-background: var(--red-dark);
|
--danger-background: var(--red-dark);
|
||||||
--love-color: var(--love-light);
|
--love-color: var(--love-light);
|
||||||
|
--editor-background: var(--editor-background-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-palette {
|
.light-palette {
|
||||||
@ -58,4 +61,5 @@
|
|||||||
--danger-color: var(--red-dark);
|
--danger-color: var(--red-dark);
|
||||||
--danger-background: var(--red-light);
|
--danger-background: var(--red-light);
|
||||||
--love-color: var(--love-dark);
|
--love-color: var(--love-dark);
|
||||||
|
--editor-background: var(--editor-background-light);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component, Suspense } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
@ -15,6 +15,7 @@ import {
|
|||||||
updateFile
|
updateFile
|
||||||
} from '../redux';
|
} from '../redux';
|
||||||
import { userSelector, isDonationModalOpenSelector } from '../../../redux';
|
import { userSelector, isDonationModalOpenSelector } from '../../../redux';
|
||||||
|
import { Loader } from '../../../components/helpers';
|
||||||
|
|
||||||
import './editor.css';
|
import './editor.css';
|
||||||
|
|
||||||
@ -949,8 +950,9 @@ class Editor extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
|
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Suspense fallback={<Loader timeout={600} />}>
|
||||||
|
<span className='notranslate'>
|
||||||
<MonacoEditor
|
<MonacoEditor
|
||||||
editorDidMount={this.editorDidMount}
|
editorDidMount={this.editorDidMount}
|
||||||
editorWillMount={this.editorWillMount}
|
editorWillMount={this.editorWillMount}
|
||||||
@ -958,6 +960,8 @@ class Editor extends Component {
|
|||||||
options={this.options}
|
options={this.options}
|
||||||
theme={editorTheme}
|
theme={editorTheme}
|
||||||
/>
|
/>
|
||||||
|
</span>
|
||||||
|
</Suspense>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component, Suspense } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
|
import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
@ -17,7 +17,6 @@ import {
|
|||||||
updateFile
|
updateFile
|
||||||
} from '../redux';
|
} from '../redux';
|
||||||
import './editor.css';
|
import './editor.css';
|
||||||
import { Loader } from '../../../components/helpers';
|
|
||||||
import Editor from './Editor';
|
import Editor from './Editor';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
@ -201,13 +200,12 @@ class MultifileEditor extends Component {
|
|||||||
orientation='horizontal'
|
orientation='horizontal'
|
||||||
{...reflexProps}
|
{...reflexProps}
|
||||||
{...resizeProps}
|
{...resizeProps}
|
||||||
|
className='editor-container'
|
||||||
>
|
>
|
||||||
<ReflexElement flex={10} {...reflexProps} {...resizeProps}>
|
<ReflexElement flex={10} {...reflexProps} {...resizeProps}>
|
||||||
<ReflexContainer orientation='vertical'>
|
<ReflexContainer orientation='vertical'>
|
||||||
{visibleEditors.indexhtml && (
|
{visibleEditors.indexhtml && (
|
||||||
<ReflexElement {...reflexProps} {...resizeProps}>
|
<ReflexElement {...reflexProps} {...resizeProps}>
|
||||||
<Suspense fallback={<Loader timeout={600} />}>
|
|
||||||
<span className='notranslate'>
|
|
||||||
<Editor
|
<Editor
|
||||||
challengeFiles={challengeFiles}
|
challengeFiles={challengeFiles}
|
||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
@ -220,49 +218,35 @@ class MultifileEditor extends Component {
|
|||||||
resizeProps={resizeProps}
|
resizeProps={resizeProps}
|
||||||
theme={editorTheme}
|
theme={editorTheme}
|
||||||
/>
|
/>
|
||||||
</span>
|
|
||||||
</Suspense>
|
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
)}
|
)}
|
||||||
{splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
|
{splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
|
||||||
{visibleEditors.indexcss && (
|
{visibleEditors.indexcss && (
|
||||||
<ReflexElement {...reflexProps} {...resizeProps}>
|
<ReflexElement {...reflexProps} {...resizeProps}>
|
||||||
<Suspense fallback={<Loader timeout={600} />}>
|
|
||||||
<span className='notranslate'>
|
|
||||||
<Editor
|
<Editor
|
||||||
challengeFiles={challengeFiles}
|
challengeFiles={challengeFiles}
|
||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
description={
|
description={targetEditor === 'indexcss' ? description : null}
|
||||||
targetEditor === 'indexcss' ? description : null
|
|
||||||
}
|
|
||||||
fileKey='indexcss'
|
fileKey='indexcss'
|
||||||
key='indexcss'
|
key='indexcss'
|
||||||
resizeProps={resizeProps}
|
resizeProps={resizeProps}
|
||||||
theme={editorTheme}
|
theme={editorTheme}
|
||||||
/>
|
/>
|
||||||
</span>
|
|
||||||
</Suspense>
|
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
)}
|
)}
|
||||||
{splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
|
{splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
|
||||||
|
|
||||||
{visibleEditors.indexjs && (
|
{visibleEditors.indexjs && (
|
||||||
<ReflexElement {...reflexProps} {...resizeProps}>
|
<ReflexElement {...reflexProps} {...resizeProps}>
|
||||||
<Suspense fallback={<Loader timeout={600} />}>
|
|
||||||
<span className='notranslate'>
|
|
||||||
<Editor
|
<Editor
|
||||||
challengeFiles={challengeFiles}
|
challengeFiles={challengeFiles}
|
||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
description={
|
description={targetEditor === 'indexjs' ? description : null}
|
||||||
targetEditor === 'indexjs' ? description : null
|
|
||||||
}
|
|
||||||
fileKey='indexjs'
|
fileKey='indexjs'
|
||||||
key='indexjs'
|
key='indexjs'
|
||||||
resizeProps={resizeProps}
|
resizeProps={resizeProps}
|
||||||
theme={editorTheme}
|
theme={editorTheme}
|
||||||
/>
|
/>
|
||||||
</span>
|
|
||||||
</Suspense>
|
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
)}
|
)}
|
||||||
</ReflexContainer>
|
</ReflexContainer>
|
||||||
|
@ -13,3 +13,7 @@
|
|||||||
.vs .monaco-scrollable-element > .scrollbar > .slider {
|
.vs .monaco-scrollable-element > .scrollbar > .slider {
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
background: var(--editor-background);
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user