From 68657915963aba89b6391fb098302eb0749ef1d2 Mon Sep 17 00:00:00 2001
From: Franck Nijhof <git@frenck.dev>
Date: Fri, 22 Apr 2022 03:42:28 +0200
Subject: [PATCH] Add jinja2 editor to template triggers/conditions (#12365)

Co-authored-by: Zack <zackbarett@hey.com>
---
 .../types/ha-automation-condition-template.ts | 27 +++++++++----------
 .../types/ha-automation-trigger-template.ts   | 25 +++++++++--------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
index 6ada82f152..ed9bc32e82 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
@@ -1,6 +1,6 @@
-import "../../../../../components/ha-textarea";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../../../components/ha-textarea";
 import type { TemplateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-condition-row";
@@ -18,28 +18,27 @@ export class HaTemplateCondition extends LitElement {
   protected render() {
     const { value_template } = this.condition;
     return html`
-      <ha-textarea
-        name="value_template"
-        .label=${this.hass.localize(
+      <p>
+        ${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.template.value_template"
         )}
+        *
+      </p>
+      <ha-code-editor
+        .name=${"value_template"}
+        mode="jinja2"
+        .hass=${this.hass}
         .value=${value_template}
-        @input=${this._valueChanged}
+        autocomplete-entities
+        @value-changed=${this._valueChanged}
         dir="ltr"
-        autogrow
-      ></ha-textarea>
+      ></ha-code-editor>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  static styles = css`
-    ha-textarea {
-      display: block;
-    }
-  `;
 }
 
 declare global {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
index 1bc192a231..eeb78b986a 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
@@ -1,5 +1,5 @@
 import "../../../../../components/ha-textarea";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { TemplateTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
@@ -18,28 +18,27 @@ export class HaTemplateTrigger extends LitElement {
   protected render() {
     const { value_template } = this.trigger;
     return html`
-      <ha-textarea
-        name="value_template"
-        .label=${this.hass.localize(
+      <p>
+        ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.template.value_template"
         )}
+        *
+      </p>
+      <ha-code-editor
+        .name=${"value_template"}
+        mode="jinja2"
+        .hass=${this.hass}
         .value=${value_template}
-        @input=${this._valueChanged}
+        autocomplete-entities
+        @value-changed=${this._valueChanged}
         dir="ltr"
-        autogrow
-      ></ha-textarea>
+      ></ha-code-editor>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  static styles = css`
-    ha-textarea {
-      display: block;
-    }
-  `;
 }
 
 declare global {