Custom render after embeds are rendered

yana · February 9, 2021, 12:28am

I’d like to adjust how images are rendered in preview mode and I’d like my plugin to work with ![[image]] notation. It seemed that custom MarkdownPostProcessor was the way to go, but it is called before the embed is loaded. What is the correct way to make changes to the final render? I am currently looking if it can be achieved by editing MarkdownPreviewView contents, but this feels hacky. Am I missing something?

aidenlx · May 13, 2021, 10:28am

You can use mutaionObserver to handle embed loading

github.com

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();
          }