From 90826714755fc106256c0cad7252b624ffb871f4 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
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 <shauhami020@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
---
 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