gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: highlight editable region (#44123)

Browse Source 
* 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:
Oliver Eyton-Williams
2021-11-05 16:41:55 +01:00
committed by GitHub
parent 0a5c7cbfcf
commit 9082671475
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/templates/Challenges/classic/editor.css
View File

@ -67,3 +67,8 @@
.myEditableLineDecoration.tests-passed {
background-color: #4caf50;
}
.editable-region {
background-color: var(--primary-background);
z-index: -1;
}

13
client/src/templates/Challenges/classic/editor.tsx
View File

@ -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