feat: CodeMirror - add indentation markers extension

Author: RohitRaj011

package-lock.json

@@ -103,6 +103,7 @@
         "@codemirror/legacy-modes": "6.4.2",
         "@codemirror/lint": "6.8.4",
         "@codemirror/search": "6.5.8",
+        "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
         "@uiw/codemirror-theme-github": "^4.23.7",
@@ -118,11 +119,11 @@
         "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
+        "react-draggable": "^4.4.5",
         "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
-        "tslib": "2.7.0",
-        "react-draggable": "^4.4.5"
+        "tslib": "2.7.0"
     },
     "overrides": {
         "cross-spawn": "^7.0.5",

package.json

@@ -27,6 +27,7 @@ import { foldGutter } from '@codemirror/language'
 import { search } from '@codemirror/search'
 import { lintGutter } from '@codemirror/lint'
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
+import { indentationMarkers } from '@replit/codemirror-indentation-markers'
 
 import { AppThemeType, useTheme } from '@Shared/Providers'
 import { getUniqueId } from '@Shared/Helpers'
@@ -196,6 +197,7 @@ const CodeEditor = <DiffView extends boolean = false>({
     const baseExtensions: Extension[] = [
         basicSetup(basicSetupOptions),
         keymap.of(vscodeKeymap.filter(({ key }) => !disableSearch || key !== 'Mod-f')),
+        indentationMarkers(),
         getLanguageExtension(mode),
         foldingCompartment.of(foldConfig),
         lintGutter(),