|
/**
|
|
* @fileoverview Rant Content Component for Rantii
|
|
* @author retoor <retoor@molodetz.nl>
|
|
* @description Renders rant text with markdown, images, and media
|
|
* @keywords rant, content, markdown, media, render
|
|
*/
|
|
|
|
import { BaseComponent } from './base-component.js';
|
|
import { markdownRenderer } from '../utils/markdown.js';
|
|
import { extractImageUrls, extractYoutubeUrls, extractNonMediaUrls } from '../utils/url.js';
|
|
|
|
class RantContent extends BaseComponent {
|
|
static get observedAttributes() {
|
|
return ['text'];
|
|
}
|
|
|
|
init() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const text = this.getAttr('text') || '';
|
|
|
|
this.addClass('rant-content');
|
|
|
|
const images = extractImageUrls(text);
|
|
const youtubeLinks = extractYoutubeUrls(text);
|
|
const otherLinks = extractNonMediaUrls(text);
|
|
|
|
const renderedText = markdownRenderer.render(text);
|
|
|
|
let html = `<div class="content-text">${renderedText}</div>`;
|
|
|
|
if (images.length > 0) {
|
|
html += `
|
|
<div class="content-images">
|
|
${images.map(url => `
|
|
<image-preview src="${url}"></image-preview>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (youtubeLinks.length > 0) {
|
|
html += `
|
|
<div class="content-videos">
|
|
${youtubeLinks.map(url => `
|
|
<youtube-embed url="${url}"></youtube-embed>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (otherLinks.length > 0) {
|
|
html += `
|
|
<div class="content-links">
|
|
${otherLinks.slice(0, 3).map(url => `
|
|
<link-preview url="${url}"></link-preview>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
this.setHtml(html);
|
|
}
|
|
|
|
onAttributeChanged(name, oldValue, newValue) {
|
|
this.render();
|
|
}
|
|
|
|
setText(text) {
|
|
this.setAttr('text', text);
|
|
}
|
|
}
|
|
|
|
customElements.define('rant-content', RantContent);
|
|
|
|
export { RantContent };
|