Wrap code editor for template selector (#21104)

* Wrap code editor for template selector

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),
     ];
 

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>`

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 },