devplacepy/devplacepy/static/js/ContentEnhancer.js

import { contentRenderer } from "./ContentRenderer.js";
import { MentionInput } from "./MentionInput.js";
import { EmojiPicker } from "./EmojiPicker.js";

export class ContentEnhancer {
    constructor() {
        this.initContentRenderer();
        this.initEmojiPickers();
        this.initMentionInputs();
        this.initImageFallbacks();
    }

    initContentRenderer() {
        document.querySelectorAll("[data-render]").forEach((el) => {
            contentRenderer.applyTo(el);
        });
        contentRenderer.highlightAll();
    }

    initEmojiPickers() {
        document.querySelectorAll(".comment-form textarea, .emoji-picker-target").forEach((textarea) => {
            if (textarea.dataset.emojiInitialized) return;
            textarea.dataset.emojiInitialized = "true";

            const btn = document.createElement("button");
            btn.type = "button";
            btn.className = "emoji-toggle-btn";
            btn.title = "Add emoji";
            btn.innerHTML = "\u{1F600}";

            const picker = new EmojiPicker(textarea);
            btn.addEventListener("click", () => picker.toggle());

            const parent = textarea.parentElement;
            if (parent) {
                const actions = parent.querySelector(".comment-form-actions");
                if (actions) {
                    actions.style.position = "relative";
                    actions.appendChild(picker.wrapper);
                    actions.insertBefore(btn, actions.firstChild);
                }
            }
        });
    }

    initMentionInputs() {
        document.querySelectorAll("[data-mention]").forEach((el) => {
            if (el.dataset.mentionInitialized) return;
            el.dataset.mentionInitialized = "true";
            new MentionInput(el);
        });
    }

    initImageFallbacks() {
        document.querySelectorAll(".image-fallback").forEach((img) => {
            img.addEventListener("error", () => {
                const container = img.closest(".news-card-image, .news-detail-image") || img.parentElement;
                if (container) container.style.display = "none";
            });
        });
    }
}