@anywhichway/nerd-editor/components/data-block/index.js

A JavaScript rich text editor based on and with support for custom elements.

const transform = (text,from,to) => {
    if(from===to) {
        return text;
    }
}

const dummyDiv = document.createElement("div");

self.properties({
    async render() {
        if(this.timeout) {
            clearTimeout(this.timeout);
        }
        const src = this.getAttribute("src"),
            type = this.getAttribute("type")||"json";
        let html =  this.textContent;
        if(src) {
            // todo get content type from response
            dummyDiv.innerHTML = await fetch(src).then((response) => response.text());
            if(dummyDiv.textContent!==html) {
                this.innerHTML = html = dummyDiv.textContent;
                //this.innerHTML = html = newhtml;
            }
        }
        const el = document.createElement("data");
        el.innerText = transform(html,"json",type);
        this.shadowRoot.innerHTML = "";
        this.shadowRoot.appendChild(el);
        const timeout = parseInt(this.getAttribute("timeout"));
        if(timeout && !isNaN(timeout)) {
            this.timeout = setTimeout(() => this.render(),timeout)
        }
    }
})