diff --git a/custom_components/bahmcloud_store/panel/panel.js b/custom_components/bahmcloud_store/panel/panel.js
index b1a1a27..0b4feb8 100644
--- a/custom_components/bahmcloud_store/panel/panel.js
+++ b/custom_components/bahmcloud_store/panel/panel.js
@@ -21,10 +21,8 @@ class BahmcloudStorePanel extends HTMLElement {
this._readmeLoading = false;
this._readmeText = null;
- this._readmeHtml = null;
+ this._readmeHtml = null; // backend may provide; we don't rely on it anymore
this._readmeError = null;
-
- this._mdMountToken = 0;
}
set hass(hass) {
@@ -333,26 +331,10 @@ class BahmcloudStorePanel extends HTMLElement {
details{ margin-top: 10px; }
summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 900; }
- /* Pretty markdown (server rendered HTML) */
+ /* Pretty Markdown container spacing (ha-markdown renders inside) */
.md { line-height: 1.65; font-size: 14px; }
- .md h1,.md h2,.md h3{ margin: 18px 0 10px; }
- .md p{ margin: 10px 0; }
- .md code{ padding: 2px 6px; border-radius: 8px; border: 1px solid var(--divider-color); }
- .md pre{
- padding: 12px;
- border-radius: 14px;
- border: 1px solid var(--divider-color);
- overflow: auto;
- }
- .md blockquote{
- margin: 10px 0;
- padding: 8px 12px;
- border-left: 4px solid var(--bcs-accent);
- background: color-mix(in srgb, var(--bcs-accent) 8%, var(--card-background-color));
- border-radius: 12px;
- }
- .md table{ width:100%; border-collapse: collapse; }
- .md th,.md td{ border: 1px solid var(--divider-color); padding: 8px; text-align: left; }
+ .md :is(h1,h2,h3){ margin: 18px 0 10px; }
+ .md :is(p,ul,ol,pre,blockquote,table){ margin: 10px 0; }
@@ -621,7 +603,7 @@ class BahmcloudStorePanel extends HTMLElement {
README
-
${this._readmeHtml ? "Rendered Markdown" : "Raw Markdown (renderer unavailable)"}
+
Rendered Markdown
@@ -679,14 +661,43 @@ class BahmcloudStorePanel extends HTMLElement {
_wireDetail() {
const root = this.shadowRoot;
- const pretty = root.getElementById("readmePretty");
- if (!pretty) return;
+ const mount = root.getElementById("readmePretty");
+ if (!mount) return;
- if (this._readmeHtml) {
- pretty.innerHTML = this._readmeHtml;
- } else if (this._readmeText) {
- pretty.innerHTML = `
Markdown rendering is not available on this system. Use “Show raw Markdown”.
`;
+ // Always prefer HA's frontend markdown renderer to get a professional look.
+ // This uses the same renderer concept as HA's Markdown card (Marked.js). :contentReference[oaicite:1]{index=1}
+ if (this._readmeText) {
+ try {
+ mount.innerHTML = "";
+
+ const el = document.createElement("ha-markdown");
+ // Ensure it has access to HA context (themes, link handling, etc.)
+ el.hass = this._hass;
+
+ // Different HA versions use either "content" or "markdown" internally;
+ // setting both is harmless and maximizes compatibility.
+ el.content = this._readmeText;
+ el.markdown = this._readmeText;
+
+ // Some versions support these flags; safe to set even if ignored.
+ el.allowHtml = false;
+ el.breaks = true;
+
+ mount.appendChild(el);
+ return;
+ } catch (_) {
+ // fall through to html/raw fallback
+ }
}
+
+ // Fallback: if backend provided sanitized HTML, use it
+ if (this._readmeHtml) {
+ mount.innerHTML = this._readmeHtml;
+ return;
+ }
+
+ // Last resort: show nothing here (raw is still available via details)
+ mount.innerHTML = `
Unable to render Markdown on this client.
`;
}
_renderFabs() {