From 21296b4224daa60f4608b4fe8e53a2f328dcbce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Tue, 19 May 2020 22:20:29 +0200 Subject: [PATCH] Adds more styling to markdown elements (#5904) --- .../hassio-addon-documentation-tab.ts | 3 + .../src/addon-view/info/hassio-addon-info.ts | 9 +- .../markdown/dialog-hassio-markdown.ts | 3 + src/components/ha-markdown-element.ts | 71 +++++++++++ src/components/ha-markdown.ts | 119 ++++++++++-------- .../lovelace/cards/hui-markdown-card.ts | 22 +--- 6 files changed, 151 insertions(+), 76 deletions(-) create mode 100644 src/components/ha-markdown-element.ts diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts index 5a25c5e30d..34d0087120 100644 --- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts +++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts @@ -64,6 +64,9 @@ class HassioAddonDocumentationDashboard extends LitElement { padding: 8px; max-width: 1024px; } + ha-markdown { + padding: 16px; + } `, ]; } diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 59f0a88466..7ba518c194 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -630,14 +630,10 @@ class HassioAddonInfo extends LitElement { .right { float: right; } - ha-markdown img { - max-width: 100%; - } protection-enable mwc-button { --mdc-theme-primary: white; } - .description a, - ha-markdown a { + .description a { color: var(--primary-color); } .red { @@ -675,6 +671,9 @@ class HassioAddonInfo extends LitElement { text-decoration: underline; cursor: pointer; } + ha-markdown { + padding: 16px; + } `, ]; } diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts index 947a42f236..8feae8e709 100644 --- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts +++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts @@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement { color: var(--text-primary-color); background-color: var(--primary-color); } + ha-markdown { + padding: 16px; + } } `, ]; diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts new file mode 100644 index 0000000000..69844b3ad2 --- /dev/null +++ b/src/components/ha-markdown-element.ts @@ -0,0 +1,71 @@ +import { customElement, property, UpdatingElement } from "lit-element"; +import { fireEvent } from "../common/dom/fire_event"; +import { renderMarkdown } from "../resources/render-markdown"; + +@customElement("ha-markdown-element") +class HaMarkdownElement extends UpdatingElement { + @property() public content?; + + @property({ type: Boolean }) public allowSvg = false; + + @property({ type: Boolean }) public breaks = false; + + protected update(changedProps) { + super.update(changedProps); + if (this.content !== undefined) { + this._render(); + } + } + + private async _render() { + this.innerHTML = await renderMarkdown( + this.content, + { + breaks: this.breaks, + gfm: true, + tables: true, + }, + { + allowSvg: this.allowSvg, + } + ); + + this._resize(); + + const walker = document.createTreeWalker( + this, + 1 /* SHOW_ELEMENT */, + null, + false + ); + + while (walker.nextNode()) { + const node = walker.currentNode; + + // Open external links in a new window + if ( + node instanceof HTMLAnchorElement && + node.host !== document.location.host + ) { + node.target = "_blank"; + node.rel = "noreferrer"; + + // protect referrer on external links and deny window.opener access for security reasons + // (see https://mathiasbynens.github.io/rel-noopener/) + node.rel = "noreferrer noopener"; + + // Fire a resize event when images loaded to notify content resized + } else if (node instanceof HTMLImageElement) { + node.addEventListener("load", this._resize); + } + } + } + + private _resize = () => fireEvent(this, "iron-resize"); +} + +declare global { + interface HTMLElementTagNameMap { + "ha-markdown-element": HaMarkdownElement; + } +} diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index 162a344daf..b3f6b6b0c8 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -1,65 +1,80 @@ -import { customElement, property, UpdatingElement } from "lit-element"; -import { fireEvent } from "../common/dom/fire_event"; -import { renderMarkdown } from "../resources/render-markdown"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +import "./ha-markdown-element"; @customElement("ha-markdown") -class HaMarkdown extends UpdatingElement { - @property() public content = ""; +class HaMarkdown extends LitElement { + @property() public content?; @property({ type: Boolean }) public allowSvg = false; @property({ type: Boolean }) public breaks = false; - protected update(changedProps) { - super.update(changedProps); - this._render(); - } - - private async _render() { - this.innerHTML = await renderMarkdown( - this.content, - { - breaks: this.breaks, - gfm: true, - tables: true, - }, - { - allowSvg: this.allowSvg, - } - ); - - this._resize(); - - const walker = document.createTreeWalker( - this, - 1 /* SHOW_ELEMENT */, - null, - false - ); - - while (walker.nextNode()) { - const node = walker.currentNode; - - // Open external links in a new window - if ( - node instanceof HTMLAnchorElement && - node.host !== document.location.host - ) { - node.target = "_blank"; - node.rel = "noreferrer"; - - // protect referrer on external links and deny window.opener access for security reasons - // (see https://mathiasbynens.github.io/rel-noopener/) - node.rel = "noreferrer noopener"; - - // Fire a resize event when images loaded to notify content resized - } else if (node instanceof HTMLImageElement) { - node.addEventListener("load", this._resize); - } + protected render(): TemplateResult { + if (!this.content) { + return html``; } + + return html``; } - private _resize = () => fireEvent(this, "iron-resize"); + static get styles(): CSSResult { + return css` + :host { + display: block; + } + ha-markdown-element { + -ms-user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + } + ha-markdown-element > *:first-child { + margin-top: 0; + } + ha-markdown-element > *:last-child { + margin-bottom: 0; + } + ha-markdown-element a { + color: var(--primary-color); + } + ha-markdown-element img { + max-width: 100%; + } + ha-markdown-element code, + pre { + background-color: var(--markdown-code-background-color, #f6f8fa); + border-radius: 3px; + } + ha-markdown-element code { + font-size: 85%; + padding: 0.2em 0.4em; + } + ha-markdown-element pre code { + padding: 0; + } + ha-markdown-element pre { + padding: 16px; + overflow: auto; + line-height: 1.45; + } + ha-markdown-element h2 { + font-size: 1.5em !important; + font-weight: bold !important; + } + `; + } } declare global { diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index 75ac449ad0..97ca5aab28 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -80,9 +80,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { @@ -162,27 +162,11 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` ha-markdown { - display: block; padding: 0 16px 16px; - -ms-user-select: initial; - -webkit-user-select: initial; - -moz-user-select: initial; } - .markdown.no-header { + ha-markdown.no-header { padding-top: 16px; } - ha-markdown > *:first-child { - margin-top: 0; - } - ha-markdown > *:last-child { - margin-bottom: 0; - } - ha-markdown a { - color: var(--primary-color); - } - ha-markdown img { - max-width: 100%; - } `; } }