abulgatz
commented
3 years ago +1
In the meantime, here are two options:
UserStyle using Stylus that you can enable/disable to hide the preview pane:
#markdown-editor .markdown-editor-wrap {
display: none;
}
#markdown-editor .markdown-editor-wrap.active {
display: flex;
width: 100%;
max-width: 100%;
}UserScript using Tampermonkey that allows resizing the two panes:
// ==UserScript==
// @name BookStack Resize Markdown Panes
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Allow resizing of the two panes in Mardown editing modes
// @author Adam Bulgatz
// @match https://YOURDOMAIN.com/*
// @icon https://www.google.com/s2/favicons?domain=YOURDOMAIN.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
const panes = document.getElementsByClassName("markdown-editor-wrap")
for (let i = 0; i < panes.length; i++) {
panes[i].style.width = "inherit";
panes[i].style.maxWidth = "inherit";
}
const leftSide = panes[0];
const rightSide = panes[1];
leftSide.style.borderRight = "none";
rightSide.style.borderLeft = "none";
const resizer = document.createElement("div");
resizer.className = "resizer";
resizer.id = "dragMe";
resizer.style.backgroundColor = "#ccc";
resizer.style.cursor = "col-resize";
resizer.style.height = "100%";
resizer.style.width = "4px";
rightSide.parentNode.insertBefore(resizer, rightSide)
// From: https://htmldom.dev/create-resizable-split-views/
// Query the element
// const resizer = document.getElementById('dragMe');
// const leftSide = resizer.previousElementSibling;
// const rightSide = resizer.nextElementSibling;
// The current position of mouse
let x = 0;
let y = 0;
let leftWidth = 0;
// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function(e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;
// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function(e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;
const newLeftWidth = (leftWidth + dx) * 100 / resizer.parentNode.getBoundingClientRect().width;
const newRightWidth = 100 - newLeftWidth;
leftSide.style.maxWidth = `calc(${newLeftWidth}% - 4px)`;
rightSide.style.maxWidth = `calc(${newRightWidth}% - 4px)`;
resizer.style.cursor = 'col-resize';
document.body.style.cursor = 'col-resize';
leftSide.style.userSelect = 'none';
leftSide.style.pointerEvents = 'none';
rightSide.style.userSelect = 'none';
rightSide.style.pointerEvents = 'none';
};
const mouseUpHandler = function() {
document.body.style.removeProperty('cursor');
leftSide.style.removeProperty('user-select');
leftSide.style.removeProperty('pointer-events');
rightSide.style.removeProperty('user-select');
rightSide.style.removeProperty('pointer-events');
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
})();
noeltaillardat
jacdyb
zachallaun
ssddanbrown
Describe the feature you'd like I love the markdown mode. The preview pane while editing the markdown source pane is a nice touch. However, most of the time markdown is already readable enough that a preview pane is not necessary. I don't mind having it enabled when BookStack can use the full monitor screen size, but if I put the browser page on only the left/right half of the screen, the preview pane is quite obstructive because the source pane is only covering 1/4 of the screen.
It would be nice to have a button to simply disable the preview pane letting the source pane use 100% of the available screen width. Or even better yet, allow a slider between the panes to dynamically adjust the width of both to the point were either one can be completely hidden to view the other pane at 100% width.
I have been able to simply modify the DOM to achieve hiding the preview pane by deleting the preview pane node and adjusting the source pane width from 50% to 100%.
Describe the benefits this feature would bring to BookStack users Such a feature would benefit people with one monitor (such as laptops) who use BookStack on one half of the screen and another type of content on the other, e.g., to write notes while reading a PDF.