From 2793ca65cda91cdb64ea87d8bb9aca87497c3295 Mon Sep 17 00:00:00 2001
From: Miguel Palhas <mpalhas@gmail.com>
Date: Wed, 25 Sep 2024 12:35:47 +0100
Subject: [PATCH] Adds highlight on current indentation mark to code editor
 (#21972)

* Adds highlight on current indentation mark to code editor

* code review
---
 package.json                     |  1 +
 src/components/ha-code-editor.ts |  8 ++++++++
 src/resources/codemirror.ts      |  1 +
 yarn.lock                        | 12 ++++++++++++
 4 files changed, 22 insertions(+)

diff --git a/package.json b/package.json
index 1c116f8f6c..7e1191ed92 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
+    "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
     "@vaadin/combo-box": "24.4.9",
     "@vaadin/vaadin-themable-mixin": "24.4.9",
diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index 093c58fc16..e07ab07330 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -180,6 +180,14 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.crosshairCursor(),
       this._loadedCodeMirror.highlightSelectionMatches(),
       this._loadedCodeMirror.highlightActiveLine(),
+      this._loadedCodeMirror.indentationMarkers({
+        thickness: 0,
+        activeThickness: 1,
+        colors: {
+          activeLight: "var(--secondary-text-color)",
+          activeDark: "var(--secondary-text-color)",
+        },
+      }),
       this._loadedCodeMirror.keymap.of([
         ...this._loadedCodeMirror.defaultKeymap,
         ...this._loadedCodeMirror.searchKeymap,
diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index 6860f1f204..3a9fb811df 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -25,6 +25,7 @@ export {
   lineNumbers,
   rectangularSelection,
 } from "@codemirror/view";
+export { indentationMarkers } from "@replit/codemirror-indentation-markers";
 export { tags } from "@lezer/highlight";
 
 export const langs = {
diff --git a/yarn.lock b/yarn.lock
index bc6d5a16cd..785fcee0c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3713,6 +3713,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@replit/codemirror-indentation-markers@npm:6.5.3":
+  version: 6.5.3
+  resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
+  peerDependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+  checksum: 10/9292734a228038805bdf72ed2c6cdd70e7b7f87090d6d07bb64af4ac986ea277349409f4d52c2863128d4b481ea8a094c2486d7d677875d47336a52cb15fc4ed
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-babel@npm:6.0.4":
   version: 6.0.4
   resolution: "@rollup/plugin-babel@npm:6.0.4"
@@ -8958,6 +8969,7 @@ __metadata:
     "@polymer/paper-listbox": "npm:3.0.1"
     "@polymer/paper-tabs": "npm:3.1.0"
     "@polymer/polymer": "npm:3.5.1"
+    "@replit/codemirror-indentation-markers": "npm:6.5.3"
     "@rollup/plugin-babel": "npm:6.0.4"
     "@rollup/plugin-commonjs": "npm:26.0.1"
     "@rollup/plugin-json": "npm:6.1.0"