Add text only style to markdown card (#24329)

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -107,18 +107,26 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
     return html`
       ${this._error
-        ? html`<ha-alert
-            alert-type=${this._errorLevel?.toLowerCase() || "error"}
-            >${this._error}</ha-alert
-          >`
+        ? html`
+            <ha-alert
+              .alertType=${(this._errorLevel?.toLowerCase() as
+                | "error"
+                | "warning") || "error"}
+            >
+              ${this._error}
+            </ha-alert>
+          `
         : nothing}
-      <ha-card .header=${this._config.title}>
+      <ha-card
+        .header=${!this._config.text_only ? this._config.title : undefined}
+        class=${classMap({
+          "with-header": !!this._config.title,
+          "text-only": this._config.text_only ?? false,
+        })}
+      >
         <ha-markdown
           cache
           breaks
-          class=${classMap({
-            "no-header": !this._config.title,
-          })}
           .content=${this._templateResult?.result}
         ></ha-markdown>
       </ha-card>
@@ -228,11 +236,19 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       margin-bottom: 8px;
     }
     ha-markdown {
-      padding: 0 16px 16px;
+      padding: 16px;
       word-wrap: break-word;
     }
-    ha-markdown.no-header {
-      padding-top: 16px;
+    .with-header ha-markdown {
+      padding: 0 16px 16px;
+    }
+    .text-only {
+      background: none;
+      box-shadow: none;
+      border: none;
+    }
+    .text-only ha-markdown {
+      padding: 2px 4px;
     }
   `;
 }

src/panels/lovelace/cards/types.ts

@@ -336,6 +336,7 @@ export interface MapCardConfig extends LovelaceCardConfig {
 export interface MarkdownCardConfig extends LovelaceCardConfig {
   type: "markdown";
   content: string;
+  text_only?: boolean;
   title?: string;
   card_size?: number;
   entity_ids?: string | string[];

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -1,29 +1,28 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { MarkdownCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
+    text_only: optional(boolean()),
     title: optional(string()),
     content: string(),
-    theme: optional(string()),
   })
 );
 
-const SCHEMA = [
-  { name: "title", selector: { text: {} } },
-  { name: "content", required: true, selector: { template: {} } },
-  { name: "theme", selector: { theme: {} } },
-] as const;
-
 @customElement("hui-markdown-card-editor")
 export class HuiMarkdownCardEditor
   extends LitElement
@@ -38,16 +37,51 @@ export class HuiMarkdownCardEditor
     this._config = config;
   }
 
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc, text_only: boolean) =>
+      [
+        {
+          name: "style",
+          required: true,
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: ["card", "text-only"].map((style) => ({
+                label: localize(
+                  `ui.panel.lovelace.editor.card.markdown.style_options.${style}`
+                ),
+                value: style,
+              })),
+            },
+          },
+        },
+        ...(!text_only
+          ? ([{ name: "title", selector: { text: {} } }] as const)
+          : []),
+        { name: "content", required: true, selector: { template: {} } },
+      ] as const satisfies HaFormSchema[]
+  );
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
+    const data = {
+      ...this._config,
+      style: this._config.text_only ? "text-only" : "card",
+    };
+
+    const schema = this._schema(
+      this.hass.localize,
+      this._config.text_only || false
+    );
+
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
-        .schema=${SCHEMA}
+        .data=${data}
+        .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -55,17 +89,23 @@ export class HuiMarkdownCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const config = { ...ev.detail.value };
+
+    if (config.style === "text-only") {
+      config.text_only = true;
+    } else {
+      delete config.text_only;
+    }
+    delete config.style;
+
+    fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     switch (schema.name) {
-      case "theme":
-        return `${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.generic.theme"
-        )} (${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.config.optional"
-        )})`;
+      case "style":
       case "content":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.markdown.${schema.name}`

src/translations/en.json

@@ -7048,6 +7048,11 @@
             "markdown": {
               "name": "Markdown",
               "content": "Content",
+              "style": "Style",
+              "style_options": {
+                "card": "Card",
+                "text-only": "Text only"
+              },
               "description": "The Markdown card is used to render Markdown."
             },
             "media-control": {