rantii/js/components/rant-content.js

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