Tampermonkey script: Split the Mermaid preview horizontally for notion

tampermonkey-split-horizontally-for-mermaid.js

// ==UserScript==
// @name         Split horizontally for Mermaid
// @namespace    https://twitter.com/wa_kinchan
// @version      0.2
// @description  Split horizontally when editing Mermaid
// @author       @wa_kinchan
// @match        https://www.notion.so/*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=notion.so
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function splitHolrizontally() {
        const codeBlocks = document.getElementsByClassName("line-numbers notion-code-block")
        for (let i = 0; i < codeBlocks.length; i ++) {
            const target = codeBlocks[i].parentElement
            if (target.querySelector('[id^="mermaid-"]') && target.childElementCount == 2) {
                target.style = "display: flex; align-items: start; justify-content: center;"
                target.children[1].style = "padding: 34px 16px; flex-grow: 1; flex-shrink: 0; position: sticky; top: 0;"
            }
        }
    }

    let observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (!mutation.addedNodes) return
            for (let i = 0; i < mutation.addedNodes.length; i++) {
                let node = mutation.addedNodes[i]
                if (typeof node.querySelector === "function") {
                    const mermaidNode = node.querySelector('[id^="mermaid-"]')
                    if (mermaidNode) {
                        splitHolrizontally()
                    }
                }
            }
        })
    })

    observer.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false })

    setTimeout(splitHolrizontally, 1000);

    // setTimeout(function() { observer.disconnect() }, 5000);
})();