diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 9e6883fc94..b1f2d71ca9 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -107,18 +107,26 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
return html`
${this._error
- ? html`${this._error}`
+ ? html`
+
+ ${this._error}
+
+ `
: nothing}
-
+
@@ -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;
}
`;
}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index c1c3f856f1..9771067a18 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/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[];
diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
index e6f1c29827..8b96938011 100644
--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/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`
@@ -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) => {
+ private _computeLabelCallback = (
+ schema: SchemaUnion>
+ ) => {
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}`
diff --git a/src/translations/en.json b/src/translations/en.json
index 279a57487e..7620768411 100644
--- a/src/translations/en.json
+++ b/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": {