Add a placeholder hint for template selector (#27297)

Add a placeholder for template selector

src/components/ha-code-editor.ts

@@ -8,6 +8,7 @@ import type {
 import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
+import { placeholder } from "@codemirror/view";
 import {
   mdiArrowExpand,
   mdiArrowCollapse,
@@ -81,6 +82,8 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "has-toolbar" })
   public hasToolbar = true;
 
+  @property({ type: String }) public placeholder?: string;
+
   @state() private _value = "";
 
   @state() private _isFullscreen = false;
@@ -264,6 +267,7 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.foldingCompartment.of(
         this._getFoldingExtensions()
       ),
+      ...(this.placeholder ? [placeholder(this.placeholder)] : []),
     ];
 
     if (!this.readOnly) {

src/components/ha-selector/ha-selector-template.ts

@@ -19,6 +19,8 @@ export class HaTemplateSelector extends LitElement {
 
   @property() public helper?: string;
 
+  @property() public placeholder?: any;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -55,6 +57,7 @@ export class HaTemplateSelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .readOnly=${this.disabled}
+        .placeholder=${this.placeholder || "{{ ... }}"}
         autofocus
         autocomplete-entities
         autocomplete-icons