@limetech/lime-elements
Version:
153 lines (152 loc) • 4.69 kB
JavaScript
import { h } from '@stencil/core';
import { markdownToHTML } from './markdown-parser';
import { globalConfig } from '../../global/config';
import { ImageIntersectionObserver } from './image-intersection-observer';
/**
* The Markdown component receives markdown syntax
* and renders it as HTML.
*
* @exampleComponent limel-example-markdown-headings
* @exampleComponent limel-example-markdown-emphasis
* @exampleComponent limel-example-markdown-lists
* @exampleComponent limel-example-markdown-links
* @exampleComponent limel-example-markdown-images
* @exampleComponent limel-example-markdown-code
* @exampleComponent limel-example-markdown-footnotes
* @exampleComponent limel-example-markdown-tables
* @exampleComponent limel-example-markdown-html
* @exampleComponent limel-example-markdown-keys
* @exampleComponent limel-example-markdown-blockquotes
* @exampleComponent limel-example-markdown-horizontal-rule
* @exampleComponent limel-example-markdown-composite
* @exampleComponent limel-example-markdown-custom-component
*/
export class Markdown {
constructor() {
this.imageIntersectionObserver = null;
this.value = '';
this.whitelist = globalConfig.markdownWhitelist;
this.lazyLoadImages = false;
}
async textChanged() {
var _a;
try {
this.cleanupImageIntersectionObserver();
const html = await markdownToHTML(this.value, {
forceHardLineBreaks: true,
whitelist: (_a = this.whitelist) !== null && _a !== void 0 ? _a : [],
lazyLoadImages: this.lazyLoadImages,
});
this.rootElement.innerHTML = html;
this.setupImageIntersectionObserver();
}
catch (error) {
console.error(error);
}
}
async componentDidLoad() {
this.textChanged();
}
disconnectedCallback() {
this.cleanupImageIntersectionObserver();
}
render() {
return [
h("div", { id: "markdown", ref: (el) => (this.rootElement = el) }),
];
}
setupImageIntersectionObserver() {
if (this.lazyLoadImages) {
this.imageIntersectionObserver = new ImageIntersectionObserver(this.rootElement);
}
}
cleanupImageIntersectionObserver() {
if (this.imageIntersectionObserver) {
this.imageIntersectionObserver.disconnect();
this.imageIntersectionObserver = null;
}
}
static get is() { return "limel-markdown"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["markdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["markdown.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The input text. Treated as GitHub Flavored Markdown, with the addition\nthat any included HTML will be parsed and rendered as HTML, rather than\nas text."
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"whitelist": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "CustomElementDefinition[]",
"resolved": "CustomElementDefinition[]",
"references": {
"CustomElementDefinition": {
"location": "import",
"path": "../../global/shared-types/custom-element.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "alpha",
"text": undefined
}],
"text": "Whitelisted html elements.\n\nAny custom element added here will not be sanitized and thus rendered.\nCan also be set via `limel-config`. Setting this property will override\nthe global config."
},
"defaultValue": "globalConfig.markdownWhitelist"
},
"lazyLoadImages": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable lazy loading for images"
},
"attribute": "lazy-load-images",
"reflect": false,
"defaultValue": "false"
}
};
}
static get watchers() {
return [{
"propName": "value",
"methodName": "textChanged"
}];
}
}
//# sourceMappingURL=markdown.js.map