Add hint helpers to fields that support markdown (#25528)

* Add hint helpers to fields that support markdown

* reduce duplication

src/common/translations/markdown_support.ts

@@ -0,0 +1,14 @@
+import { html } from "lit";
+import type { LocalizeFunc } from "./localize";
+
+const MARKDOWN_SUPPORT_URL = "https://commonmark.org/help/";
+
+export const supportsMarkdownHelper = (localize: LocalizeFunc) =>
+  localize("ui.common.supports_markdown", {
+    markdown_help_link: html`<a
+      href=${MARKDOWN_SUPPORT_URL}
+      target="_blank"
+      rel="noreferrer"
+      >${localize("ui.common.markdown")}</a
+    >`,
+  });

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -23,6 +23,7 @@ import type {
   EntityRegistryUpdate,
   SaveDialogParams,
 } from "./show-dialog-automation-save";
+import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support";
 
 @customElement("ha-dialog-automation-save")
 class DialogAutomationSave extends LitElement implements HassDialog {
@@ -156,6 +157,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             name="description"
             autogrow
             .value=${this._newDescription}
+            .helper=${supportsMarkdownHelper(this.hass.localize)}
             @input=${this._valueChanged}
           ></ha-textarea>`
         : nothing}

src/panels/todo/dialog-todo-item-editor.ts

@@ -25,6 +25,7 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { TodoItemEditDialogParams } from "./show-dialog-todo-item-editor";
+import { supportsMarkdownHelper } from "../../common/translations/markdown_support";
 
 @customElement("dialog-todo-item-editor")
 class DialogTodoItemEditor extends LitElement {
@@ -146,6 +147,7 @@ class DialogTodoItemEditor extends LitElement {
                 .label=${this.hass.localize(
                   "ui.components.todo.item.description"
                 )}
+                .helper=${supportsMarkdownHelper(this.hass.localize)}
                 .value=${this._description}
                 @input=${this._handleDescriptionChanged}
                 autogrow

src/translations/en.json

@@ -374,7 +374,9 @@
       "copy": "Copy",
       "show": "Show",
       "replace": "Replace",
-      "append": "Append"
+      "append": "Append",
+      "supports_markdown": "Supports {markdown_help_link}",
+      "markdown": "Markdown"
     },
     "components": {
       "selectors": {