@k9n/scully-plugin-mermaid/lib/mermaid.js

this plugin for Scully provides a postRenderer to generate a SVGs from mermaid source code sections

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSvg = exports.mermaidPlugin = void 0;
const scully_1 = require("@scullyio/scully");
const jsdom_1 = require("jsdom");
const mermaid_render_1 = require("mermaid-render");
const constants_1 = require("./constants");
const defaultSelector = '.language-mermaid';
const defaultWrapper = {
    tagName: 'div',
    classNames: ['mermaid-svg'],
};
const mermaidPlugin = async (html, routeData) => {
    const pluginConfig = (0, scully_1.getPluginConfig)(constants_1.MermaidPluginName);
    const selector = pluginConfig.selector || defaultSelector;
    let useWrapper = true;
    let wrapper = defaultWrapper;
    if (pluginConfig.wrapper === false) {
        useWrapper = false;
    }
    if (typeof pluginConfig.wrapper === 'object' &&
        pluginConfig.wrapper.tagName) {
        wrapper = pluginConfig.wrapper;
    }
    let mermaidMatches = 0;
    const route = routeData.route;
    try {
        const dom = new jsdom_1.JSDOM(html);
        const { window } = dom;
        const nodeList = window.document.querySelectorAll(selector);
        const elements = [].slice.call(nodeList);
        // count the mermaid matches for logging
        mermaidMatches = elements.length;
        for (let i = 0; i < elements.length; i++) {
            const svgCode = await (0, exports.getSvg)(elements[i].textContent, pluginConfig.config);
            if (svgCode) {
                let mermaidTargetEl;
                if (!useWrapper) {
                    const templateEl = window.document.createElement('template');
                    templateEl.innerHTML = svgCode.trim();
                    mermaidTargetEl = templateEl.content.firstElementChild;
                }
                else {
                    mermaidTargetEl = window.document.createElement(wrapper.tagName.toLowerCase());
                    if (wrapper.classNames.length) {
                        mermaidTargetEl.className = wrapper.classNames.join(' ');
                    }
                    mermaidTargetEl.innerHTML = svgCode;
                }
                const tagName = nodeList.item(i).tagName;
                if (tagName === 'PRE') {
                    nodeList.item(i).replaceWith(mermaidTargetEl); // replace the whole `pre`-Element
                }
                else if (tagName === 'CODE') {
                    nodeList.item(i).parentElement.tagName === 'PRE'
                        ? nodeList.item(i).parentElement.replaceWith(mermaidTargetEl) // replace the whole parent `pre`-Element
                        : nodeList.item(i).replaceWith(mermaidTargetEl); // replace the `code`-Element
                }
                else {
                    (0, scully_1.logWarn)(`Selector '${(0, scully_1.yellow)(selector)}' matches neither a 'pre' nor a 'code' element. Can't render / insert graphic.`);
                }
            }
        }
        (0, scully_1.log)(`Rendered ${mermaidMatches} Mermaid SVGs`);
        return Promise.resolve(dom.serialize());
    }
    catch (e) {
        (0, scully_1.logWarn)(`error in mermaidPlugin, didn't handle route '${(0, scully_1.yellow)(route)}'`);
    }
    // in case of failure return unchanged HTML to keep flow going
    return Promise.resolve(html);
};
exports.mermaidPlugin = mermaidPlugin;
const getSvg = (data, config) => {
    return (0, mermaid_render_1.renderMermaid)(data, {
        initParams: Promise.resolve(config || {}),
    });
};
exports.getSvg = getSvg;
//# sourceMappingURL=mermaid.js.map