Markdown support

**Really nice** with Markdown
NewsGuyTor · Jan 28, 2025 · 008d34c · 008d34c
1 parent f5a2dd6
commit 008d34c
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 5 deletions.
diff --git a/flower-card.js b/flower-card.js
diff --git a/flower-card.js.gz b/flower-card.js.gz
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "custom-card-helpers": "^1.9.0",
     "home-assistant-js-websocket": "^9.4.0",
     "lit": "^3.2.0",
+    "marked": "^15.0.6",
     "webpack": "^5.95.0",
     "yarn": "^1.22.22"
   },

diff --git a/src/flower-card.ts b/src/flower-card.ts
@@ -131,7 +131,7 @@ export default class FlowerCard extends LitElement {
                 if (this.stateObj.attributes.notes === null || this.stateObj.attributes.notes.trim() === '') {
                     return html`<div class="divider"></div><div class="notes notes-empty">Plant has no notes, add one in the device's configuration. Edit this card and uncheck "Notes" if you want to hide this.</div>`;
                 }
-                return html`<div class="divider"></div><div class="notes">${this.stateObj.attributes.notes}</div>`;
+                return html`<div class="divider"></div><div class="notes"><ha-markdown .content=${this.stateObj.attributes.notes} allow-svg></ha-markdown></div>`;
             })()}
             </ha-card>
             `;

diff --git a/src/styles.ts b/src/styles.ts
@@ -26,7 +26,6 @@ export const style = css`
 .notes {
   padding: 15px;
   color: var(--primary-text-color);
-  white-space: pre-wrap;
 }
 .notes-empty {
   color: var(--secondary-text-color);

diff --git a/src/types/flower-card-types.ts b/src/types/flower-card-types.ts
@@ -6,6 +6,7 @@ export interface FlowerCardConfig extends LovelaceCardConfig {
     battery_sensor?: string;
     display_type?: DisplayType;
     show_info?: string[];
+    markdown?: string;
 }
 
 export enum DisplayType {