suggestion: Toggle Editor (and also horizontal resizer)

[DarrenSem]

Sometimes I find the "editor" div a bit distracting after I paste in the MarkDown contents, so I wrote some CSS and JS to add a new "Toggle Editor" link to the top button bar, along with a green vertical bar in the middle of the 2 divs that you can drag-resize left or right.

I have only tried this in Chrome on desktop, not yet tested this in mobile etc. But for my needs it works well, I am quite happy with it.

Extra HTML: (added "toggleButton" next to "Copy" button, and added "resizer" div between "edit" and "preview")

  <div id="toggleButton"><a href="#">Toggle Editor</a></div>
...
  <div id="edit">...</div>
  <div id="resizer"></div>
  <div id="preview">...</div>

Extra CSS:

    body {
      margin: 0; /* Remove default margin */
      height: 100vh; /* Ensure full height usage */
      overflow: hidden; /* Prevent body scrollbars */
    }
    #container {
      display: flex;
      width: 100%;
      height: 100%; /* Full height of the parent */
      overflow: hidden;
    }
    #edit, #preview {
      flex-grow: 1;
      overflow: auto; /* Enable scrolling for content overflow */
      transition: flex 0.3s ease;
    }
    #resizer {
      width: 4px; /* Updated resizer width */
      background-color: green;
      cursor: col-resize;
      flex-shrink: 0; /* Prevent shrinking */
    }
    #toggleButton {
      margin-left: 16px; /* Ensure it doesn't overflow to hide */
    }
    .shrunk {
      flex: 0 0 0px !important;
    }

Extra JavaScript:

  const container = document.getElementById("container");
  const edit = document.getElementById("edit");
  const preview = document.getElementById("preview");
  const resizer = document.getElementById("resizer");
  const toggleButton = document.getElementById("toggleButton");
  const MIN_EDIT_WIDTH = 72; // Minimum width for the editor div

  let isMouseDown = false;

  resizer.addEventListener("mousedown", (e) => {
    isMouseDown = true;
    document.addEventListener("mousemove", resize);
    document.addEventListener("mouseup", stopResize);
  });

  function resize(e) {
    if (!isMouseDown) return;
    const containerRect = container.getBoundingClientRect();
    const newEditWidth = e.clientX - containerRect.left;

    if (newEditWidth >= MIN_EDIT_WIDTH) {
      edit.classList.remove("shrunk");
      edit.style.flex = `0 0 ${newEditWidth}px`;
      preview.style.flex = `1 1 auto`;
    }
  }

  function stopResize() {
    isMouseDown = false;
    document.removeEventListener("mousemove", resize);
    document.removeEventListener("mouseup", stopResize);
  }

  function toggleEditor() {
    edit.classList.toggle("shrunk");
  }

  toggleButton.addEventListener("click", toggleEditor);

NOTE: some of the CSS is the result of some back-and-forth tweaking via ChatGPT, so I'm not sure if they are the best way or might cause problems and/or the comments are even accurate, but again it seems to work #GoodEnough for my needs.

HTH!

[DarrenSem]

I made a Bookmarklet, which will insert the required HTML and CSS and JavaScript (and will also redirect to MarkdownLivePreview.com if not on that page).

I also made it re-center the splitter if you double-click it.

https://gist.github.com/DarrenSem/795d8bb43687b6c771780d74542822cd

Feel free to use or adapt the code above for the main repo or your own forks.