From 27afe9ecb7623e79849b2731b3ea744cfa62e12a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 17 Jun 2024 21:15:55 +0200
Subject: [PATCH] Wrap code editor for template selector (#21104)

* 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..8a2e966b5d41 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 linewrap = false;
+
   @property({ type: Boolean, attribute: "autocomplete-entities" })
   public autocompleteEntities = false;
 
@@ -134,6 +136,13 @@ export class HaCodeEditor extends ReactiveElement {
         ),
       });
     }
+    if (changedProps.has("linewrap")) {
+      transactions.push({
+        effects: this._loadedCodeMirror!.linewrapCompartment!.reconfigure(
+          this.linewrap ? 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.linewrap ? 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..470f0b640aeb 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"
+        linewrap
       ></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 },