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 {
|
.myEditableLineDecoration.tests-passed {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editable-region {
|
||||||
|
background-color: var(--primary-background);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
@ -65,7 +65,6 @@ interface EditorProps {
|
|||||||
initialExt: string;
|
initialExt: string;
|
||||||
initTests: (tests: Test[]) => void;
|
initTests: (tests: Test[]) => void;
|
||||||
initialTests: Test[];
|
initialTests: Test[];
|
||||||
isProjectStep: boolean;
|
|
||||||
isResetting: boolean;
|
isResetting: boolean;
|
||||||
output: string[];
|
output: string[];
|
||||||
resizeProps: ResizePropsType;
|
resizeProps: ResizePropsType;
|
||||||
@ -143,7 +142,10 @@ const modeMap = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
let monacoThemesDefined = false;
|
let monacoThemesDefined = false;
|
||||||
const defineMonacoThemes = (monaco: typeof monacoEditor) => {
|
const defineMonacoThemes = (
|
||||||
|
monaco: typeof monacoEditor,
|
||||||
|
options: { usesMultifileEditor: boolean }
|
||||||
|
) => {
|
||||||
if (monacoThemesDefined) {
|
if (monacoThemesDefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -169,7 +171,7 @@ const defineMonacoThemes = (monaco: typeof monacoEditor) => {
|
|||||||
inherit: true,
|
inherit: true,
|
||||||
// TODO: Use actual color from style-guide
|
// TODO: Use actual color from style-guide
|
||||||
colors: {
|
colors: {
|
||||||
'editor.background': '#fff'
|
'editor.background': options.usesMultifileEditor ? '#eee' : '#fff'
|
||||||
},
|
},
|
||||||
rules: [{ token: 'identifier.js', foreground: darkBlueColor }]
|
rules: [{ token: 'identifier.js', foreground: darkBlueColor }]
|
||||||
});
|
});
|
||||||
@ -259,10 +261,10 @@ const Editor = (props: EditorProps): JSX.Element => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const editorWillMount = (monaco: typeof monacoEditor) => {
|
const editorWillMount = (monaco: typeof monacoEditor) => {
|
||||||
const { challengeFiles, fileKey } = props;
|
const { challengeFiles, fileKey, usesMultifileEditor } = props;
|
||||||
|
|
||||||
monacoRef.current = monaco;
|
monacoRef.current = monaco;
|
||||||
defineMonacoThemes(monaco);
|
defineMonacoThemes(monaco, { usesMultifileEditor });
|
||||||
// If a model is not provided, then the editor 'owns' the model it creates
|
// 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
|
// 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
|
// swap and reuse models, we have to create our own models to prevent
|
||||||
@ -613,6 +615,7 @@ const Editor = (props: EditorProps): JSX.Element => {
|
|||||||
range,
|
range,
|
||||||
options: {
|
options: {
|
||||||
isWholeLine: true,
|
isWholeLine: true,
|
||||||
|
className: 'editable-region',
|
||||||
linesDecorationsClassName: 'myEditableLineDecoration',
|
linesDecorationsClassName: 'myEditableLineDecoration',
|
||||||
stickiness:
|
stickiness:
|
||||||
monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges
|
monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges
|
||||||
|
Reference in New Issue
Block a user