From 90826714755fc106256c0cad7252b624ffb871f4 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Fri, 5 Nov 2021 16:41:55 +0100 Subject: [PATCH] feat: highlight editable region (#44123) * feat: give editable region own background * refactor: remove unused prop * fix: remove debugging log Co-authored-by: Shaun Hamilton Co-authored-by: Shaun Hamilton --- client/src/templates/Challenges/classic/editor.css | 5 +++++ client/src/templates/Challenges/classic/editor.tsx | 13 ++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index cc10dc48af..52e7f9fd0e 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/client/src/templates/Challenges/classic/editor.css @@ -67,3 +67,8 @@ .myEditableLineDecoration.tests-passed { background-color: #4caf50; } + +.editable-region { + background-color: var(--primary-background); + z-index: -1; +} diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 1e79764f32..959e997a09 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -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