mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-15 13:26:34 +00:00
Adds more styling to markdown elements (#5904)
This commit is contained in:
parent
0c94ad46b2
commit
21296b4224
@ -64,6 +64,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
|
||||
padding: 8px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
ha-markdown {
|
||||
padding: 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement {
|
||||
color: var(--text-primary-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
ha-markdown {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
71
src/components/ha-markdown-element.ts
Normal file
71
src/components/ha-markdown-element.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user