Bookmarklet that converts the contents of note to markdown

note2markdown.js

/**
 * @file Bookmarklet that converts the contents of note to markdown
 * @author Shuto Iwasaki <cabernet.rock@gmail.com>
 * @copyright Iwasaki Shuto 2022
 * @license MIT
 */

(function () {
  /** <--- Utility Functions --- */
  const br2n = (text) =>
    text !== undefined ? text.split(/<br.*?>/).join("\n") : "";
  const quote = (text) =>
    text !== undefined ? `> ${text.split("\n").join("\n> ")}` : "";
  const getLast = (lst) => lst[lst.length - 1];
  const img2text = (img) => `![${img?.alt}](${img?.src})`;
  /** --- End Utility Functions ---> */

  /* <--- Get Note Editor --- */
  let nb = getLast(document.querySelectorAll("div[contenteditable=true]"));
  if (!nb) {
    alert("Noteの編集画面が正しく表示されているかどうか確認してください。");
    return;
  }
  /* <--- End Get Note Editor --- */

  /* <--- Note Basic Information --- */
  let title = document.getElementById("note-name")?.innerText;
  let header_img = document.querySelector('img[alt="見出し画像"]');
  let header = header_img && img2text(header_img);
  /* --- End Note Basic Information ---> */

  /* <--- Note Content --- */
  var lines = [header];
  nb.childNodes.forEach((item) => {
    let text = br2n(item.innerHTML);
    switch (item.nodeName) {
      case "P":
        if (
          item.childNodes &&
          item.childNodes[0] &&
          item.childNodes[0].nodeName == "IMG"
        ) {
          lines.push(img2text(item.childNodes[0]));
        } else {
          text = text.replace(
            /<a.[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/g,
            "[$2]($1)"
          );
          text = text
            .replace(/<b>(.*?)<\/b>/g, " **$1** ")
            .replace(/<strong>(.*?)<\/strong>/g, " **$1** ");
          lines.push(text);
        }
        break;
      case "H2":
        lines.push(`## ${text}`);
        break;
      case "H3":
        lines.push(`### ${text}`);
        break;
      case "BLOCKQUOTE":
        lines.push(quote(text));
        break;
      case "PRE":
        lines.push(text.replace(/<code>(.*?)<\/code>/g, "```\n$1\n```"));
        break;
      case "FIGURE":
        let img = item.querySelector("img");
        lines.push(img2text(img));
        let caption = item.querySelector("figcaption");
        if (caption) lines.push(quote(br2n(caption.innerHTML)));
        break;
    }
  });
  /* --- End Note Content ---> */

  const ID_DLG = "note2infty_dialog";
  const ID_MD = `${ID_DLG}_markdown`;

  var dialog;
  dialog = document.getElementById(ID_DLG);
  if (!dialog) {
    dialog = document.createElement("dialog");
  }
  dialog.innerHTML = "";

  let mdview = document.createElement("div");
  let mdlabel = document.createElement("label");
  let mdtext = document.createElement("textarea");
  let titleview = document.createElement("div");
  let titletext = document.createElement("div");
  let closeBtn = document.createElement("button");
  let copyWrapper = document.createElement("div");
  let copyBtn = document.createElement("button");

  dialog.id = ID_DLG;
  dialog.style.width = "60vw";
  dialog.style.height = "70vh";
  dialog.style.margin = "auto";

  mdview.style.padding = "30px 5px 10px";
  mdtext.value = lines.join("\n\n");
  // mdtext.readOnly = true;
  mdtext.id = ID_MD;
  mdtext.style.padding = "10px";
  mdtext.style.display = "block";
  mdtext.style.width = "100%";
  mdtext.style.minHeight = "20em";
  mdtext.addEventListener("focus", () => {
    mdtext.select();
  });
  mdlabel.textContent = "【Markdown】";
  mdlabel.appendChild(mdtext);
  mdview.appendChild(mdlabel);

  titleview.style.display = "flex";
  titleview.style.alignItems = "center";
  titleview.style.borderBottom = "1px solid #333";
  titleview.style.padding = "10px";
  titletext.style.marginRight = "auto";
  titletext.style.width = "calc(100% - 50px)";
  titletext.style.wordBreak = "break-all";
  titletext.innerHTML = title;
  closeBtn.style.marginLeft = "auto";
  closeBtn.style.padding = "10px 14px";
  closeBtn.style.borderRadius = "50%";
  closeBtn.style.cursor = "pointer";
  closeBtn.textContent = "x";
  closeBtn.style.width = "40px";
  closeBtn.addEventListener("click", () => {
    dialog.close();
  });
  titleview.appendChild(titletext);
  titleview.appendChild(closeBtn);

  copyBtn.textContent = "Copy";
  copyBtn.style.marginLeft = "auto";
  copyBtn.style.padding = "5px 10px";
  copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(document.getElementById(ID_MD).value);
    console.log(document.getElementById(ID_MD).value);
    alert("クリップボードにコピーしました。");
  });
  copyWrapper.style.display = "flex";
  copyWrapper.appendChild(copyBtn);

  dialog.appendChild(titleview);
  dialog.appendChild(mdview);
  dialog.appendChild(copyWrapper);
  document.body.appendChild(dialog);

  dialog.showModal();
})();

Closure Compilerでコンパイルした後

javascript:(function(){var h=function(a){return void 0!==a?a.split(/<br.*?>/).join("\n"):""},p=function(a){return void 0!==a?"> "+a.split("\n").join("\n> "):""},q=function(a){return"!["+(null==a?void 0:a.alt)+"]("+(null==a?void 0:a.src)+")"},l=function(a){return a[a.length-1]}(document.querySelectorAll("div[contenteditable=true]"));if(l){var e,d,t=(null==(e=document.getElementById("note-name"))?void 0:e.innerText)||(null==(d=document.querySelector('textarea[placeholder="\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb"]'))?
void 0:d.value);e=document.querySelector('img[alt="\u898b\u51fa\u3057\u753b\u50cf"]');var f=[e&&q(e)];l.childNodes.forEach(function(a){var c=h(a.innerHTML);switch(a.nodeName){case "P":a.childNodes&&a.childNodes[0]&&"IMG"==a.childNodes[0].nodeName?f.push(q(a.childNodes[0])):(c=c.replace(/<a.[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/g,"[$2]($1)"),c=c.replace(/<b>(.*?)<\/b>/g," **$1** ").replace(/<strong>(.*?)<\/strong>/g," **$1** "),f.push(c));break;case "H2":f.push("## "+c);break;case "H3":f.push("### "+
c);break;case "BLOCKQUOTE":f.push(p(c));break;case "PRE":f.push(c.replace(/<code>(.*?)<\/code>/g,"```\n$1\n```"));break;case "FIGURE":c=a.querySelector("img"),f.push(q(c)),(a=a.querySelector("figcaption"))&&f.push(p(h(a.innerHTML)))}});var b;(b=document.getElementById("note2infty_dialog"))||(b=document.createElement("dialog"));b.innerHTML="";l=document.createElement("div");e=document.createElement("label");var g=document.createElement("textarea");d=document.createElement("div");var m=document.createElement("div"),
k=document.createElement("button"),r=document.createElement("div"),n=document.createElement("button");b.id="note2infty_dialog";b.style.width="60vw";b.style.height="70vh";b.style.margin="auto";l.style.padding="30px 5px 10px";g.value=f.join("\n\n");g.id="note2infty_dialog_markdown";g.style.padding="10px";g.style.display="block";g.style.width="100%";g.style.minHeight="20em";g.addEventListener("focus",function(){g.select()});e.textContent="\u3010Markdown\u3011";e.appendChild(g);l.appendChild(e);d.style.display=
"flex";d.style.alignItems="center";d.style.borderBottom="1px solid #333";d.style.padding="10px";m.style.marginRight="auto";m.style.width="calc(100% - 50px)";m.style.wordBreak="break-all";m.innerHTML=t;k.style.marginLeft="auto";k.style.padding="10px 14px";k.style.borderRadius="50%";k.style.cursor="pointer";k.textContent="x";k.style.width="40px";k.addEventListener("click",function(){b.close()});d.appendChild(m);d.appendChild(k);n.textContent="Copy";n.style.marginLeft="auto";n.style.padding="5px 10px";
n.addEventListener("click",function(){navigator.clipboard.writeText(document.getElementById("note2infty_dialog_markdown").value);console.log(document.getElementById("note2infty_dialog_markdown").value);alert("\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3002")});r.style.display="flex";r.appendChild(n);b.appendChild(d);b.appendChild(l);b.appendChild(r);document.body.appendChild(b);b.showModal()}else alert("Note\u306e\u7de8\u96c6\u753b\u9762\u304c\u6b63\u3057\u304f\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002")})();