Custom render after embeds are rendered

aidenlx · May 13, 2021, 10:28am

You can use mutaionObserver to handle embed loading

alx-plugins/media-extended/blob/aedd7ea2b3be41a30e24f40bfd7876aa080129eb/src/processor.ts#L36


    option: { attributeFilter: ["class"], attributeOldValue: true },
  };

  for (const link of el.querySelectorAll("a.internal-link")) {
    const ilObs = new MutationObserver(internalLink.callback);
    ilObs.observe(link, internalLink.option);
  }
}

/** Process internal media embeds with hash */
export function processInternalEmbeds(el: HTMLElement) {
  let allEmbeds;
  if ((allEmbeds = el.querySelectorAll("span.internal-embed"))) {
    const internalEmbed: mutationParam = {
      callback: (list, obs) => {
        for (const mutation of list) {
          const span = mutation.target as HTMLSpanElement;
          if (span.hasClass("is-loaded") && !span.hasClass("mod-empty")) {
            if (span.hasClass("media-embed")) handleMedia(span);
            obs.disconnect();
          }