From 95c15bd7b0c117ac89addfbe7b9ce8b63740ee28 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 17 Jun 2024 12:28:45 +0200
Subject: [PATCH 1/3] Wrap code editor for template selector

---
 src/components/ha-code-editor.ts                   | 12 ++++++++++++
 src/components/ha-selector/ha-selector-template.ts |  1 +
 src/resources/codemirror.ts                        |  1 +
 3 files changed, 14 insertions(+)

diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index 8b29c7802a86..4db1044fb69a 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -47,6 +47,8 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property({ type: Boolean }) public readOnly = false;
 
+  @property({ type: Boolean }) public wrap = false;
+
   @property({ type: Boolean, attribute: "autocomplete-entities" })
   public autocompleteEntities = false;
 
@@ -134,6 +136,13 @@ export class HaCodeEditor extends ReactiveElement {
         ),
       });
     }
+    if (changedProps.has("wrap")) {
+      transactions.push({
+        effects: this._loadedCodeMirror!.linewrapCompartment!.reconfigure(
+          this.wrap ? this._loadedCodeMirror!.EditorView.lineWrapping : []
+        ),
+      });
+    }
     if (changedProps.has("_value") && this._value !== this.value) {
       transactions.push({
         changes: {
@@ -181,6 +190,9 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.readonlyCompartment.of(
         this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
       ),
+      this._loadedCodeMirror.linewrapCompartment.of(
+        this.wrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
+      ),
       this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
     ];
 
diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts
index ae83de5ee13f..f8c4abec1bb3 100644
--- a/src/components/ha-selector/ha-selector-template.ts
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -32,6 +32,7 @@ export class HaTemplateSelector extends LitElement {
         autocomplete-icons
         @value-changed=${this._handleChange}
         dir="ltr"
+        wrap
       ></ha-code-editor>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index ad3e48b852ed..3cceb275b84d 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -33,6 +33,7 @@ export const langs = {
 
 export const langCompartment = new Compartment();
 export const readonlyCompartment = new Compartment();
+export const linewrapCompartment = new Compartment();
 
 export const tabKeyBindings: KeyBinding[] = [
   { key: "Tab", run: indentMore },

From 01e74b5d94cb0d008870c75a64e46c6377c8129d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 17 Jun 2024 20:33:12 +0200
Subject: [PATCH 2/3] Change to `linewrap`

---
 src/components/ha-code-editor.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index 4db1044fb69a..8a2e966b5d41 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -47,7 +47,7 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property({ type: Boolean }) public readOnly = false;
 
-  @property({ type: Boolean }) public wrap = false;
+  @property({ type: Boolean }) public linewrap = false;
 
   @property({ type: Boolean, attribute: "autocomplete-entities" })
   public autocompleteEntities = false;
@@ -136,10 +136,10 @@ export class HaCodeEditor extends ReactiveElement {
         ),
       });
     }
-    if (changedProps.has("wrap")) {
+    if (changedProps.has("linewrap")) {
       transactions.push({
         effects: this._loadedCodeMirror!.linewrapCompartment!.reconfigure(
-          this.wrap ? this._loadedCodeMirror!.EditorView.lineWrapping : []
+          this.linewrap ? this._loadedCodeMirror!.EditorView.lineWrapping : []
         ),
       });
     }
@@ -191,7 +191,7 @@ export class HaCodeEditor extends ReactiveElement {
         this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
       ),
       this._loadedCodeMirror.linewrapCompartment.of(
-        this.wrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
+        this.linewrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
       ),
       this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
     ];

From 8f557c0ec22991d77175ecc653cdb466c057d31a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 17 Jun 2024 21:05:34 +0200
Subject: [PATCH 3/3] Update src/components/ha-selector/ha-selector-template.ts

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
---
 src/components/ha-selector/ha-selector-template.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts
index f8c4abec1bb3..470f0b640aeb 100644
--- a/src/components/ha-selector/ha-selector-template.ts
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -32,7 +32,7 @@ export class HaTemplateSelector extends LitElement {
         autocomplete-icons
         @value-changed=${this._handleChange}
         dir="ltr"
-        wrap
+        linewrap
       ></ha-code-editor>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`