hacks/content/mermaid-viewer/head.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
 integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
 crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.7.0/mermaid.min.js"
 integrity="sha512-ecc+vlmmc1f51s2l/AeIC552wULnv9Q8bYJ4FbODxsL6jGrFoLaKnGkN5JUZNH6LBjkAYy9Q4fKqyTuFUIvvFA=="
 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
 // Detect if BookStack's dark mode is enabled
 const isDarkMode = document.documentElement.classList.contains('dark-mode');

 // Initialize Mermaid.js, dynamically setting the theme based on BookStack's mode
 mermaid.initialize({
 startOnLoad: false,
 securityLevel: 'loose',
 theme: isDarkMode ? 'dark' : 'default'
 });

 // Zoom Level Configuration
 const ZOOM_LEVEL_MIN = 0.5;
 const ZOOM_LEVEL_MAX = 2.0;
 const ZOOM_LEVEL_INCREMENT = 0.1;
 const DEFAULT_ZOOM_SCALE = 1.0;

 const DRAG_THRESHOLD_PIXELS = 3;
 const ZOOM_ANIMATION_CLASS_TIMEOUT_MS = 200;

 const CSS_CLASSES = {
 CONTAINER: 'mermaid-container',
 VIEWPORT: 'mermaid-viewport',
 CONTENT: 'mermaid-content',
 DIAGRAM: 'mermaid-diagram',
 CONTROLS: 'mermaid-controls',
 ZOOM_CONTROLS: 'mermaid-zoom-controls',
 INTERACTION_ENABLED: 'interaction-enabled',
 DRAGGING: 'dragging',
 ZOOMING: 'zooming',
 LOCK_ICON: 'fa fa-lock',
 UNLOCK_ICON: 'fa fa-unlock',
 INTERACTIVE_HOVER: 'interactive-hover', // Class for 'grab' cursor state
 INTERACTIVE_PAN: 'interactive-pan', // Class for 'grabbing' cursor state
 BUTTON_BASE: 'mermaid-viewer-button-base' // Base class for all viewer buttons
 };

 class InteractiveMermaidViewer {
 constructor(container, mermaidCode) {
 this.container = container;
 this.mermaidCode = mermaidCode;
 this.scale = 1.0;
 this.translateX = 0;
 this.translateY = 0;
 this.isDragging = false;
 this.dragStarted = false;
 this.startX = 0;
 this.startY = 0;

 const numDecimalPlaces = (ZOOM_LEVEL_INCREMENT.toString().split('.')[1] || '').length;
 this.zoomLevels = Array.from(
 { length: Math.round((ZOOM_LEVEL_MAX - ZOOM_LEVEL_MIN) / ZOOM_LEVEL_INCREMENT) + 1 },
 (_, i) => parseFloat((ZOOM_LEVEL_MIN + i * ZOOM_LEVEL_INCREMENT).toFixed(numDecimalPlaces))
 );

 this.currentZoomIndex = this.zoomLevels.findIndex(level => Math.abs(level - DEFAULT_ZOOM_SCALE) < 1e-9);
 if (this.currentZoomIndex === -1) {
 this.currentZoomIndex = Math.floor(this.zoomLevels.length / 2);
 }
 this.interactionEnabled = false;
 this.initialContentOffset = { x: 0, y: 0 };

 // Cache DOM elements
 this.toggleInteractionBtn = null;
 this.copyCodeBtn = null;
 this.zoomInBtn = null;
 this.zoomOutBtn = null;
 this.zoomResetBtn = null;

 // Use an AbortController for robust event listener cleanup.
 this.abortController = new AbortController();

 // Bind event handlers for proper addition and removal
 this.boundMouseMoveHandler = this.handleMouseMove.bind(this);
 this.boundMouseUpHandler = this.handleMouseUp.bind(this);
 this.boundToggleInteraction = this.toggleInteraction.bind(this);
 this.boundCopyCode = this.copyCode.bind(this);
 this.boundZoomIn = this.handleZoomClick.bind(this, 1);
 this.boundZoomOut = this.handleZoomClick.bind(this, -1);
 this.boundResetZoom = this.resetZoom.bind(this);
 this.boundHandleWheel = this.handleWheel.bind(this);
 this.boundHandleMouseDown = this.handleMouseDown.bind(this);
 this.boundPreventDefault = e => e.preventDefault();
 this.boundPreventSelect = e => { if (this.isDragging || this.interactionEnabled) e.preventDefault(); };

 this.setupViewer();
 this.setupEventListeners();
 }

 /**
 * Creates the DOM structure for the viewer programmatically.
 * This is safer and more maintainable than using innerHTML with a large template string.
 */
 setupViewer() {
 const createButton = (title, iconClass, ...extraClasses) => {
 const button = document.createElement('div');
 button.setAttribute('role', 'button');
 button.setAttribute('tabindex', '0');
 button.className = `${CSS_CLASSES.BUTTON_BASE} ${extraClasses.join(' ')}`;
 button.title = title;
 const icon = document.createElement('i');
 icon.className = iconClass;
 icon.setAttribute('aria-hidden', 'true');
 button.append(icon);
 return button;
 };

 const controls = document.createElement('div');
 controls.className = CSS_CLASSES.CONTROLS;
 this.toggleInteractionBtn = createButton('Toggle interaction', CSS_CLASSES.LOCK_ICON, 'mermaid-btn', 'toggle-interaction');
 this.copyCodeBtn = createButton('Copy code', 'fa fa-copy', 'mermaid-btn');
 controls.append(this.toggleInteractionBtn, this.copyCodeBtn);

 const zoomControls = document.createElement('div');
 zoomControls.className = CSS_CLASSES.ZOOM_CONTROLS;
 this.zoomInBtn = createButton('Zoom in', 'fa fa-search-plus', 'mermaid-zoom-btn', 'zoom-in');
 this.zoomOutBtn = createButton('Zoom out', 'fa fa-search-minus', 'mermaid-zoom-btn', 'zoom-out');
 this.zoomResetBtn = createButton('Reset', 'fa fa-refresh', 'mermaid-zoom-btn', 'zoom-reset');
 zoomControls.append(this.zoomInBtn, this.zoomOutBtn, this.zoomResetBtn);

 this.diagram = document.createElement('div');
 this.diagram.className = CSS_CLASSES.DIAGRAM;
 // Use textContent for security, preventing any potential HTML injection.
 // Mermaid will parse the text content safely.
 this.diagram.textContent = this.mermaidCode;

 this.content = document.createElement('div');
 this.content.className = CSS_CLASSES.CONTENT;
 this.content.append(this.diagram);

 this.viewport = document.createElement('div');
 this.viewport.className = CSS_CLASSES.VIEWPORT;
 this.viewport.append(this.content);

 // Clear the container and append the new structure
 this.container.innerHTML = '';
 this.container.append(controls, zoomControls, this.viewport);

 // Function to render the diagram and perform post-render setup
 const renderAndSetup = () => {
 mermaid.run({ nodes: [this.diagram] }).then(() => {
 this.adjustContainerHeight();
 this.calculateInitialOffset();
 this.centerDiagram();
 }).catch(error => {
 console.error("Mermaid rendering error for diagram:", this.mermaidCode, error);
 // Use BookStack's negative color variable and provide a clearer message for debugging.
 this.diagram.innerHTML = `<p style="color: var(--color-neg); padding: 10px;">Error rendering diagram. Check browser console for details.</p>`;
 });
 };

 // Check if Font Awesome is loaded before rendering
 // This checks for the 'Font Awesome 6 Free' font family, which is common.
 // Adjust if your Font Awesome version uses a different family name for its core icons.
 if (document.fonts && typeof document.fonts.check === 'function' && document.fonts.check('1em "Font Awesome 6 Free"')) { // Check if Font Awesome is immediately available
 renderAndSetup();
 } else if (document.fonts && document.fonts.ready) { // Simplified check for document.fonts.ready
 document.fonts.ready.then(renderAndSetup).catch(err => {
 renderAndSetup(); // Proceed with rendering even if font check fails after timeout/error
 });
 } else {
 renderAndSetup();
 }
 }

 adjustContainerHeight() {
 const svgElement = this.content.querySelector('svg');
 if (svgElement) {
 // Ensure the viewport takes up the height of the rendered SVG
 this.viewport.style.height = '100%';
 }
 }

 calculateInitialOffset() {
 const originalTransform = this.content.style.transform;
 this.content.style.transform = '';
 const contentRect = this.content.getBoundingClientRect();
 const viewportRect = this.viewport.getBoundingClientRect();
 this.initialContentOffset.x = contentRect.left - viewportRect.left;
 this.initialContentOffset.y = contentRect.top - viewportRect.top;
 this.content.style.transform = originalTransform;
 }

 _getViewportCenterClientCoords() {
 const viewportRect = this.viewport.getBoundingClientRect();
 return {
 clientX: viewportRect.left + viewportRect.width / 2,
 clientY: viewportRect.top + viewportRect.height / 2,
 };
 }

 setupEventListeners() {
 const { signal } = this.abortController;

 this.toggleInteractionBtn.addEventListener('click', this.boundToggleInteraction, { signal });
 this.copyCodeBtn.addEventListener('click', this.boundCopyCode, { signal });
 this.zoomInBtn.addEventListener('click', this.boundZoomIn, { signal });
 this.zoomOutBtn.addEventListener('click', this.boundZoomOut, { signal });
 this.zoomResetBtn.addEventListener('click', this.boundResetZoom, { signal });

 this.viewport.addEventListener('wheel', this.boundHandleWheel, { passive: false, signal });
 this.viewport.addEventListener('mousedown', this.boundHandleMouseDown, { signal });

 // Listen on document for mousemove to handle dragging outside viewport
 document.addEventListener('mousemove', this.boundMouseMoveHandler, { signal });
 // Listen on window for mouseup to ensure drag ends even if mouse is released outside
 window.addEventListener('mouseup', this.boundMouseUpHandler, { signal, capture: true });

 this.viewport.addEventListener('contextmenu', this.boundPreventDefault, { signal });
 this.viewport.addEventListener('selectstart', this.boundPreventSelect, { signal });
 }

 toggleInteraction() {
 this.interactionEnabled = !this.interactionEnabled;
 const icon = this.toggleInteractionBtn.querySelector('i');
 this.toggleInteractionBtn.setAttribute('aria-pressed', this.interactionEnabled.toString());

 if (this.interactionEnabled) {
 icon.className = CSS_CLASSES.UNLOCK_ICON;
 this.toggleInteractionBtn.title = 'Disable manual interaction';
 this.viewport.classList.add(CSS_CLASSES.INTERACTION_ENABLED);
 this.viewport.classList.add(CSS_CLASSES.INTERACTIVE_HOVER); // Set grab cursor state
 this.viewport.classList.remove(CSS_CLASSES.INTERACTIVE_PAN); // Ensure pan cursor state is off
 } else {
 icon.className = CSS_CLASSES.LOCK_ICON;
 this.toggleInteractionBtn.title = 'Enable manual interaction';
 this.viewport.classList.remove(CSS_CLASSES.INTERACTION_ENABLED);
 this.viewport.classList.remove(CSS_CLASSES.INTERACTIVE_HOVER);
 this.viewport.classList.remove(CSS_CLASSES.INTERACTIVE_PAN);
 this.isDragging = false; // Ensure dragging stops if interaction is disabled mid-drag
 this.dragStarted = false;
 this.viewport.classList.remove(CSS_CLASSES.DRAGGING);
 }
 }

 updateTransform() {
 this.content.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
 }

 handleZoomClick(direction) {
 const { clientX, clientY } = this._getViewportCenterClientCoords();
 this.zoom(direction, clientX, clientY);
 }

 handleWheel(e) {
 if (!this.interactionEnabled) return;
 // Prevent default browser scroll/zoom behavior when wheeling over the diagram
 e.preventDefault();
 this.content.classList.add(CSS_CLASSES.ZOOMING);
 const clientX = e.clientX;
 const clientY = e.clientY;
 if (e.deltaY > 0) this.zoom(-1, clientX, clientY);
 else this.zoom(1, clientX, clientY);
 setTimeout(() => this.content.classList.remove(CSS_CLASSES.ZOOMING), ZOOM_ANIMATION_CLASS_TIMEOUT_MS);
 }

 handleMouseDown(e) {
 if (!this.interactionEnabled || e.button !== 0) return;
 e.preventDefault();
 this.isDragging = true;
 this.dragStarted = false;
 this.startX = e.clientX;
 this.startY = e.clientY;
 this.dragBaseTranslateX = this.translateX;
 this.dragBaseTranslateY = this.translateY;
 this.viewport.classList.add(CSS_CLASSES.DRAGGING);
 this.viewport.classList.remove(CSS_CLASSES.INTERACTIVE_HOVER);
 this.viewport.classList.add(CSS_CLASSES.INTERACTIVE_PAN);
 this.content.classList.remove(CSS_CLASSES.ZOOMING);
 }

 handleMouseMove(e) {
 if (!this.isDragging) return;
 // e.preventDefault() is called only after dragStarted is true to allow clicks if threshold isn't met.
 const deltaX = e.clientX - this.startX;
 const deltaY = e.clientY - this.startY;
 if (!this.dragStarted && (Math.abs(deltaX) > DRAG_THRESHOLD_PIXELS || Math.abs(deltaY) > DRAG_THRESHOLD_PIXELS)) {
 this.dragStarted = true;
 }
 if (this.dragStarted) {
 e.preventDefault(); // Prevent text selection, etc., only when drag has truly started
 this.translateX = this.dragBaseTranslateX + deltaX;
 this.translateY = this.dragBaseTranslateY + deltaY;
 this.updateTransform();
 }
 }

 handleMouseUp() {
 if (this.isDragging) {
 this.isDragging = false;
 this.dragStarted = false;
 this.viewport.classList.remove(CSS_CLASSES.DRAGGING);
 this.viewport.classList.remove(CSS_CLASSES.INTERACTIVE_PAN);
 if (this.interactionEnabled) { // Revert to grab cursor if interaction is still enabled
 this.viewport.classList.add(CSS_CLASSES.INTERACTIVE_HOVER);
 }
 }
 this.content.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
 }

 centerDiagram() {
 const svgElement = this.content.querySelector('svg');
 if (svgElement) {
 const viewportRect = this.viewport.getBoundingClientRect();
 const svgIntrinsicWidth = svgElement.viewBox.baseVal.width || svgElement.clientWidth;
 const svgIntrinsicHeight = svgElement.viewBox.baseVal.height || svgElement.clientHeight;

 const targetContentLeftRelativeToViewport = (viewportRect.width - (svgIntrinsicWidth * this.scale)) / 2;
 const targetContentTopRelativeToViewport = (viewportRect.height - (svgIntrinsicHeight * this.scale)) / 2;

 this.translateX = targetContentLeftRelativeToViewport - this.initialContentOffset.x;
 this.translateY = targetContentTopRelativeToViewport - this.initialContentOffset.y;

 // Initial centering constraints; may need adjustment for very large diagrams.
 this.translateX = Math.max(0, this.translateX);
 this.translateY = Math.max(0, this.translateY);

 this.updateTransform();
 }
 }

 zoom(direction, clientX, clientY) {
 this.content.classList.add(CSS_CLASSES.ZOOMING);
 const oldScale = this.scale;
 let newZoomIndex = this.currentZoomIndex + direction;

 if (newZoomIndex >= 0 && newZoomIndex < this.zoomLevels.length) {
 this.currentZoomIndex = newZoomIndex;
 const newScale = this.zoomLevels[this.currentZoomIndex];

 const viewportRect = this.viewport.getBoundingClientRect();
 const pointXInContent = (clientX - viewportRect.left - this.translateX) / oldScale;
 const pointYInContent = (clientY - viewportRect.top - this.translateY) / oldScale;

 this.translateX = (clientX - viewportRect.left) - (pointXInContent * newScale);
 this.translateY = (clientY - viewportRect.top) - (pointYInContent * newScale);
 this.scale = newScale;
 this.updateTransform();
 }
 setTimeout(() => this.content.classList.remove(CSS_CLASSES.ZOOMING), ZOOM_ANIMATION_CLASS_TIMEOUT_MS);
 }

 resetZoom() {
 this.content.classList.add(CSS_CLASSES.ZOOMING);
 this.currentZoomIndex = this.zoomLevels.findIndex(level => Math.abs(level - DEFAULT_ZOOM_SCALE) < 1e-9);
 if (this.currentZoomIndex === -1) { // Fallback if default not exactly in levels
 this.currentZoomIndex = Math.floor(this.zoomLevels.length / 2);
 }
 this.scale = this.zoomLevels[this.currentZoomIndex];
 // Use requestAnimationFrame to ensure layout is stable before centering
 requestAnimationFrame(() => {
 this.centerDiagram();
 setTimeout(() => this.content.classList.remove(CSS_CLASSES.ZOOMING), ZOOM_ANIMATION_CLASS_TIMEOUT_MS);
 });
 }

 async copyCode() {
 try {
 await navigator.clipboard.writeText(this.mermaidCode);
 this.showNotification('Copied!');
 } catch (error) {
 // Fallback for older browsers or if clipboard API fails
 console.error('Clipboard API copy failed, attempting fallback:', error);
 const textArea = document.createElement('textarea');
 textArea.value = this.mermaidCode;
 // Style to make it invisible
 textArea.style.position = 'fixed';
 textArea.style.top = '-9999px';
 textArea.style.left = '-9999px';
 document.body.appendChild(textArea);
 textArea.select();
 try {
 document.execCommand('copy');
 this.showNotification('Copied!');
 } catch (copyError) {
 console.error('Fallback copy failed:', copyError);
 this.showNotification('Copy failed.', true); // Error
 }
 document.body.removeChild(textArea);
 }
 }

 showNotification(message, isError = false) {
 if (window.$events) {
 const eventName = isError ? 'error' : 'success';
 window.$events.emit(eventName, message);
 } else {
 // Fallback for if the event system is not available
 console.warn('BookStack event system not found, falling back to console log for notification.');
 if (isError) {
 console.error(message);
 } else {
 console.log(message);
 }
 }
 }

 destroy() {
 // Abort all listeners attached with this controller's signal.
 this.abortController.abort();
 this.container.innerHTML = ''; // Clear the container's content
 }
 }

 const mermaidViewers = [];
 function initializeMermaidViewers() {
 const codeBlocks = document.querySelectorAll('pre code.language-mermaid');
 for (const codeBlock of codeBlocks) {
 // Ensure we don't re-initialize if this script runs multiple times or content is dynamic
 if (codeBlock.dataset.mermaidViewerInitialized) continue;

 const mermaidCode = codeBlock.textContent || codeBlock.innerHTML; // textContent is usually better
 const container = document.createElement('div');
 container.className = CSS_CLASSES.CONTAINER;

 const replaceTarget = (codeBlock.nodeName === 'CODE') ? codeBlock.parentElement : codeBlock;

 // Check if replaceTarget is already a mermaid-container (e.g. from previous init)
 if (replaceTarget.classList.contains(CSS_CLASSES.CONTAINER)) continue;

 replaceTarget.after(container);
 replaceTarget.remove(); // Remove the original <pre> or <pre><code> block

 const viewer = new InteractiveMermaidViewer(container, mermaidCode);
 mermaidViewers.push(viewer);
 codeBlock.dataset.mermaidViewerInitialized = 'true'; // Mark as initialized
 }
 }

 // Initialize on DOMContentLoaded
 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', initializeMermaidViewers);
 } else {
 // DOMContentLoaded has already fired
 initializeMermaidViewers();
 }

 const recenterAllViewers = () => mermaidViewers.forEach(viewer => viewer.centerDiagram());

 // Re-center diagrams on window load and window resize, as images/fonts inside SVG might affect size
 window.addEventListener('load', () => {
 // Delay slightly to ensure mermaid rendering is fully complete and dimensions are stable
 setTimeout(recenterAllViewers, 100);
 });

 window.addEventListener('resize', recenterAllViewers);

</script>
<style>
 /* Use BookStack's CSS variables for seamless theme integration */
 .mermaid-container {
 background: var(--color-bg-alt);
 border: 1px solid #d0d7de;
 border-radius: 6px;
 position: relative;
 margin: 20px 0;
 }

 .mermaid-viewport {
 height: 100%;
 /* This will now be 100% of the dynamically set container height */
 overflow: hidden;
 /* Keep this for panning/zooming when content exceeds viewport */
 cursor: auto;
 /* Default to normal system cursor */
 }

 /* Ensure viewport cursor is auto when locked, even if active.
 The text selection (I-beam) cursor will still appear over selectable text within .mermaid-content. */
 .mermaid-viewport:not(.interaction-enabled):active {
 cursor: auto;
 }

 /* Set 'grab' cursor when the viewport has the 'interactive-hover' class. */
 .mermaid-viewport.interactive-hover {
 cursor: grab;
 }

 /* Set 'grabbing' cursor when the viewport has the 'interactive-pan' class. */
 .mermaid-viewport.interactive-pan {
 cursor: grabbing !important;
 }

 .mermaid-content {
 transform-origin: 0 0;
 /* Allow text selection by default (when interaction is locked) */
 user-select: auto;
 /* or 'text' */
 will-change: transform;
 }

 /* Disable text selection ONLY when interaction is enabled on the viewport */
 .mermaid-viewport.interaction-enabled .mermaid-content {
 user-select: none;
 }

 /* SVG elements inherit cursor from the viewport when interaction is enabled. */
 .mermaid-viewport.interaction-enabled .mermaid-content svg,
 .mermaid-viewport.interaction-enabled .mermaid-content svg * {
 cursor: inherit !important;
 /* Force inheritance from the viewport's cursor */
 }

 .mermaid-content.zooming {
 transition: transform 0.2s ease;
 }

 .mermaid-controls {
 position: absolute;
 top: 10px;
 right: 10px;
 display: flex;
 gap: 5px;
 z-index: 10;
 }

 .mermaid-viewer-button-base {
 border: 1px solid #C0C0C0;
 border-radius: 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 user-select: none;
 width: 32px;
 height: 32px;
 color: var(--color-text);
 /* The above color is overridden in dark mode below to ensure visibility */
 }

 .mermaid-viewer-button-base:hover {
 background: #C8C8C8;
 }

 .dark-mode .mermaid-viewer-button-base {
 background: #282828;
 border: 1px solid #444444;
 color: #FFFFFF;
 /* Explicitly set to white for dark mode icons */
 }

 .dark-mode .mermaid-viewer-button-base:hover {
 background: #383838;
 }

 .mermaid-zoom-controls {
 position: absolute;
 bottom: 10px;
 left: 10px;
 display: flex;
 flex-direction: column;
 gap: 5px;
 z-index: 10;
 }
</style>