43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('dees-editormarkdownoutlet')
|
||
|
|
export class DeesEditorMarkdownOutlet extends DeesElement {
|
||
|
|
// DEMO
|
||
|
|
public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
|
||
|
|
|
||
|
|
// INSTANCE
|
||
|
|
private outlet: HTMLElement;
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<div class="outlet markdown-body">
|
||
|
|
<h1>Hi there</h1>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
|
||
|
|
await super.firstUpdated(_changedProperties);
|
||
|
|
const styleElement = document.createElement('style');
|
||
|
|
const cssText = await (
|
||
|
|
await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
|
||
|
|
).text();
|
||
|
|
styleElement.textContent = cssText;
|
||
|
|
this.shadowRoot.append(styleElement);
|
||
|
|
}
|
||
|
|
|
||
|
|
public async updateHtmlText(htmlTextArg: string) {
|
||
|
|
await this.updateComplete;
|
||
|
|
if (!this.outlet) {
|
||
|
|
this.outlet = this.shadowRoot.querySelector('.outlet');
|
||
|
|
}
|
||
|
|
this.outlet.innerHTML = htmlTextArg;
|
||
|
|
}
|
||
|
|
}
|