Adds more styling to markdown elements (#5904)

This commit is contained in:
Joakim Sørensen 2020-05-19 22:20:29 +02:00 committed by GitHub
parent 0c94ad46b2
commit 21296b4224
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 151 additions and 76 deletions

View File

@ -64,6 +64,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
padding: 8px;
max-width: 1024px;
}
ha-markdown {
padding: 16px;
}
`,
];
}

View File

@ -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;
}
`,
];
}

View File

@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement {
color: var(--text-primary-color);
background-color: var(--primary-color);
}
ha-markdown {
padding: 16px;
}
}
`,
];

View File

@ -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;
}
}

View File

@ -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`<ha-markdown-element
.content=${this.content}
.allowSvg=${this.allowSvg}
.breaks=${this.breaks}
></ha-markdown-element>`;
}
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 {

View File

@ -80,9 +80,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
<ha-card .header="${this._config.title}">
<ha-markdown
breaks
class="markdown ${classMap({
class=${classMap({
"no-header": !this._config.title,
})}"
})}
.content="${this._content}"
></ha-markdown>
</ha-card>
@ -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%;
}
`;
}
}