Python indentation marker (#237)

# What's Changed?

- Added and styled indentation markers in the codemirror editor

## Screenshots
<img width="337" alt="Screenshot 2022-10-17 at 10 37 00"
src="https://user-images.githubusercontent.com/88904316/196144184-b4034590-e3a0-4065-9b53-e1df339aaf3d.png">
<img width="348" alt="Screenshot 2022-10-17 at 10 37 47"
src="https://user-images.githubusercontent.com/88904316/196144305-0b6a3d9b-7eab-4076-a095-ba171668b334.png">

closes #218

Co-authored-by: loiswells97 <[email protected]>
Co-authored-by: Lois Wells <[email protected]>

Author: create-issue-branch[bot]

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Cookie banner on the editor site (#206) but not in the embedded viewer (#231)
 - Unit tests for login button and 'useProject' hook (#211)
 - Script for Google Tag Manager to be used on the standalone editor site (#225)
+- Indentation markers in the editor (#237)
 
 ### Changed
 

package.json

@@ -20,6 +20,7 @@
     "@react-three/drei": "^9.7.1",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
+    "@replit/codemirror-indentation-markers": "^6.1.0",
     "@rpf/sauce": "https://github.com/RaspberryPiFoundation/sauce-design-system.git#next",
     "axios": "^0.24.0",
     "codemirror": "^6.0.1",

src/components/Editor/EditorPanel/EditorPanel.js

@@ -9,6 +9,7 @@ import { basicSetup } from 'codemirror'
 import { EditorView, keymap } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
 import { defaultKeymap, indentWithTab } from '@codemirror/commands'
+import { indentationMarkers } from '@replit/codemirror-indentation-markers'
 
 import { html } from '@codemirror/lang-html'
 import { css } from '@codemirror/lang-css'
@@ -71,6 +72,7 @@ const EditorPanel = ({
         mode,
         onUpdate,
         editorTheme,
+        indentationMarkers()
       ],
     });
 

src/components/Editor/editorDarkTheme.js

@@ -22,6 +22,14 @@ export const editorDarkTheme = EditorView.theme({
   "&.cm-focused .cm-cursor": {
     borderLeftColor: "white"
   },
+  ".cm-line .cm-indentation-marker": {
+    'background': 'none',
+    'border-left': '1px solid grey',
+    "&.active": {
+      'background': 'none',
+      'border-left': '1px solid lightgrey',
+    }
+  },
   ".ͼb": {color: "#FF00A4"},
   ".ͼc": {color: "#1498D0"},
   ".ͼd": {color: "#1498D0"},

src/components/Editor/editorLightTheme.js

@@ -14,4 +14,12 @@ export const editorLightTheme = EditorView.theme({
     "color": "black",
     "background-color": "white"
   },
+  ".cm-line .cm-indentation-marker": {
+    'background': 'none',
+    'border-left': '1px solid lightgrey',
+    "&.active": {
+      'background': 'none',
+      'border-left': '1px solid grey',
+    }
+  },
 }, {dark: false})

yarn.lock

@@ -2401,6 +2401,11 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
+"@replit/codemirror-indentation-markers@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.1.0.tgz#53ca559f25609c90e2e905624bb0aa57c7b3041a"
+  integrity sha512-x+9cWXUy60UdS1geFzaELXvchbHvsGjjwB+hQ+p9kOQ4Q3BH1Y2tC46OA6YLx0Lu2BoA1OEdvFsX3V2Af04yeA==
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"