Flyfish's Blog

Popup Media Library for BearBlog’s Built-in Editor

I suppose there are others out there like me who still uses Bearblog's default editor. It’s actually a great experience using it due to its simple, elegant design. Actually, I recommend you to try it! However, I recently found it inconvenient to open a separate page just to copy and paste URLs from my media library. So, I created a popup media library for convenience.

the popup window

Here it is! I'm using it to write this article :D

The code creates an additional "Toggle library" button in the toolbar, click it and the media window should pop up.

The idea behind the popup is simple: use an <iframe> to display the media library. But the hard part is to write the javascript code to inject everything inside the toolbar (It's not easy to select those elements correctly). Fortunately, there is a way to do this.

So here is the code, still, simply copy & paste them into footer directive under customise(?) dashboard. Don't forget to change {your name} in the code to your own one.

<script>
  // update 2025-02-05: Fix not working on first press
  document.querySelector("span:has(#upload-image)").childNodes[3].insertBefore(
    Object.assign(
      document.createElement("a"), {
        id: "toggle-library",
        innerHTML: "Toggle library",
        href: "#"
      }),
    document.querySelector("#upload-image")
  );
  
  document.querySelector("span:has(#upload-image)").childNodes[3].insertBefore(
    Object.assign(
      document.createTextNode(" | ")
    ),
    document.querySelector("#upload-image")
  );

  document.querySelector("main").appendChild(
    Object.assign(
      document.createElement("div"), {
        id: "iframe-container",
        style: "display: none;"
      }
    )
  )
  
  document.querySelector("#iframe-container").appendChild(
    Object.assign(document.createElement("iframe"), {
      src: "https://bearblog.dev/{your name}/dashboard/media/",
      frameBorder: "0",
      id: "library-iframe",
    })
  );

  document.querySelector("#toggle-library").addEventListener("click", function(event) {
    event.preventDefault();
    const iframeContainer = document.querySelector("#iframe-container");
    
    if (iframeContainer) {
      // exists
      iframeContainer.style.display = iframeContainer.style.display === "none" ? "block" : "none";
    } else {
      error("iframeContainer not exist.");
    }
  });
</script>

also some CSS:

#iframe-container {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 30;
    box-shadow: 5px 4px 9px 2px rgb(0 0 0 / 54%);
    border: 2px solid #ddd;

    & iframe{
        width: 35vw;
        height: 50vh;
    }
}

Like this post if it had helped you :)

#bearblog #code #post