testing remark42 on obsidian publish

publish.js

var remark_config = {
  host: "https://demo.remark42.com",
  site_id: "remark",
};

// https://stackoverflow.com/a/74271142/3952024
async function waitForElement(selector, timeout = null, location = document.body) {
    return new Promise((resolve) => {
        let element = document.querySelector(selector);
        if (element) {
            return resolve(element);
        }

        const observer = new MutationObserver(async () => {
            let element = document.querySelector(selector);
            if (element) {
                resolve(element);
                observer.disconnect();
            } else {
                if (timeout) {
                    async function timeOver() {
                        return new Promise((resolve) => {
                            setTimeout(() => {
                                observer.disconnect();
                                resolve(false);
                            }, timeout);
                        });
                    }
                    resolve(await timeOver());
                }
            }
        });

        observer.observe(location, {
            childList: true,
            subtree: true,
        });
    });
}

async function loadRemark() {
    console.log("remark42: loading");
    const mdPreview = await waitForElement(".markdown-preview-section", 10000);
    console.log(mdPreview);

    var remark = document.createElement("div");
    remark.id = "remark42";
    mdPreview.appendChild(remark);

    console.log(mdPreview);

    !(function (e, n) {
        for (var o = 0; o < e.length; o++) {
          var r = n.createElement("script"),
            c = ".js",
            d = n.head || n.body;
          "noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
            (r.defer = !0),
            (r.src = remark_config.host + "/web/" + e[o] + c),
            d.appendChild(r);
        }
      })(remark_config.components || ["embed"], document);

    
};

loadRemark();

// on click of .tree-item-inner run loadRemark()

[...document.querySelectorAll(".tree-item-self")].forEach((item) => {
    const path = item.dataset.path;
    item.addEventListener("click", () => {
        console.log("clicked " + path);
    });
});