☰

workflowy-img

Automatically render pictures in workflowy

// ==UserScript==
// @name         workflowy-img
// @namespace    https://github.com/zkytech/Tampermonkey_scripts
// @version      0.0.2
// @description  Automatically render pictures in workflowy
// @author       zkytech
// @include      *://workflowy.com*
// @grant        none1
// ==/UserScript==

(function () {
  "use strict";
  const regexpImgUrl = /http[s]?:\/\/.*\.(jpg|png|ico|gif|jpeg)(\?.*)?/i;
  function refreshImgs() {
    // make sure all img url exists in contentLink
    document
      .querySelectorAll("img.workflowy-img-generated-img-element")
      .forEach((imgElement) => {
        const UUID = imgElement.id.replace(/^img/, "link");
        const link = document.getElementById(UUID);
        if (
          link &&
          link.href != imgElement.src &&
          regexpImgUrl.test(link.href)
        ) {
          imgElement.src = link.href;
        } else if (!link) {
          // img url text has been deleted
          imgElement.remove();
        }
      });

    // make sure all contentLink has been rendered
    document.querySelectorAll("a.contentLink").forEach((link) => {
      if (
        link.href &&
        regexpImgUrl.test(link.href) &&
        !link.getAttribute("workflowy-img-rendered")
      ) {
        const UUID = crypto.randomUUID();
        const imgElement = document.createElement("img");
        imgElement.src = link.href;
        imgElement.id = "img" + UUID;
        imgElement.className = "workflowy-img-generated-img-element";

        link.parentElement.parentElement.parentElement.parentElement.appendChild(
          imgElement
        );
        link.setAttribute("workflowy-img-rendered", true);
        link.id = "link" + UUID;
      } else if (link.id && link.getAttribute("workflowy-img-rendered")) {
        const UUID = link.id.replace(/^link/, "img");
        const imgElement = document.getElementById(UUID);
        if (imgElement.src != link.href) {
          // img url change
          if (regexpImgUrl.test(link.href)) {
            // if new url is still img, update <img> element
            imgElement.src = link.href;
          } else {
            // new url is not img, remove <img> element
            imgElement.remove();
            link.removeAttribute("id");
            link.removeAttribute("workflowy-img-rendered");
          }
        }
      }
    });
  }
  // refresh all img when dom change
  const observer = new MutationObserver(function (mutations, observer) {
    console.log("refreshing img");
    refreshImgs();
  });
  const el = document.querySelector("body");
  const options = {
    childList: true,
    attributes: false,
    subtree:true
  };
  observer.observe(el, options);
})();