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 { .myEditableLineDecoration.tests-passed {
background-color: #4caf50; 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; 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