feat: highlight editable region (#44123)
* feat: give editable region own background * refactor: remove unused prop * fix: remove debugging log Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
committed by
GitHub
parent
0a5c7cbfcf
commit
9082671475
@ -67,3 +67,8 @@
|
||||
.myEditableLineDecoration.tests-passed {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.editable-region {
|
||||
background-color: var(--primary-background);
|
||||
z-index: -1;
|
||||
}
|
||||
|
@ -65,7 +65,6 @@ interface EditorProps {
|
||||
initialExt: string;
|
||||
initTests: (tests: Test[]) => void;
|
||||
initialTests: Test[];
|
||||
isProjectStep: boolean;
|
||||
isResetting: boolean;
|
||||
output: string[];
|
||||
resizeProps: ResizePropsType;
|
||||
@ -143,7 +142,10 @@ const modeMap = {
|
||||
};
|
||||
|
||||
let monacoThemesDefined = false;
|
||||
const defineMonacoThemes = (monaco: typeof monacoEditor) => {
|
||||
const defineMonacoThemes = (
|
||||
monaco: typeof monacoEditor,
|
||||
options: { usesMultifileEditor: boolean }
|
||||
) => {
|
||||
if (monacoThemesDefined) {
|
||||
return;
|
||||
}
|
||||
@ -169,7 +171,7 @@ const defineMonacoThemes = (monaco: typeof monacoEditor) => {
|
||||
inherit: true,
|
||||
// TODO: Use actual color from style-guide
|
||||
colors: {
|
||||
'editor.background': '#fff'
|
||||
'editor.background': options.usesMultifileEditor ? '#eee' : '#fff'
|
||||
},
|
||||
rules: [{ token: 'identifier.js', foreground: darkBlueColor }]
|
||||
});
|
||||
@ -259,10 +261,10 @@ const Editor = (props: EditorProps): JSX.Element => {
|
||||
};
|
||||
|
||||
const editorWillMount = (monaco: typeof monacoEditor) => {
|
||||
const { challengeFiles, fileKey } = props;
|
||||
const { challengeFiles, fileKey, usesMultifileEditor } = props;
|
||||
|
||||
monacoRef.current = monaco;
|
||||
defineMonacoThemes(monaco);
|
||||
defineMonacoThemes(monaco, { usesMultifileEditor });
|
||||
// If a model is not provided, then the editor 'owns' the model it creates
|
||||
// and will dispose of that model if it is replaced. Since we intend to
|
||||
// swap and reuse models, we have to create our own models to prevent
|
||||
@ -613,6 +615,7 @@ const Editor = (props: EditorProps): JSX.Element => {
|
||||
range,
|
||||
options: {
|
||||
isWholeLine: true,
|
||||
className: 'editable-region',
|
||||
linesDecorationsClassName: 'myEditableLineDecoration',
|
||||
stickiness:
|
||||
monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges
|
||||
|
Reference in New Issue
Block a user