devplacepy/devplacepy/static/js/components/AppContent.js

// retoor <retoor@molodetz.nl>

import { Component } from "./Component.js";
import { contentRenderer } from "../ContentRenderer.js";

export class AppContent extends Component {
    connectedCallback() {
        if (this._rendered) {
            return;
        }
        if (typeof DOMPurify === "undefined" || typeof marked === "undefined") {
            window.addEventListener("load", () => this.connectedCallback(), { once: true });
            return;
        }
        if (!contentRenderer.emojiLoaded) {
            contentRenderer.ready.then(() => this.connectedCallback());
            return;
        }
        this._rendered = true;
        this._source = this.textContent;
        this.classList.add("rendered-content");
        contentRenderer.applyTo(this);
        if (typeof hljs !== "undefined") {
            this.querySelectorAll("pre code").forEach((block) => hljs.highlightElement(block));
        }
        if (!this.hasAttribute("no-copy")) {
            this.addCopyButton();
        }
    }

    addCopyButton() {
        if (!this._source || !this._source.trim()) {
            return;
        }
        if (this.querySelector(":scope > .content-copy-btn")) {
            return;
        }
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = "content-copy-btn";
        btn.textContent = "Copy";
        btn.addEventListener("click", async () => {
            try {
                await navigator.clipboard.writeText(this._source);
                btn.textContent = "Copied";
            } catch {
                btn.textContent = "Failed";
            }
            setTimeout(() => { btn.textContent = "Copy"; }, 1500);
        });
        this.appendChild(btn);
    }
}

customElements.define("dp-content", AppContent);