blog/markdown-it-revealjs.js

"use strict";

const HSEP = "---";
const VSEP = "===";


/**
 * MarkdownIt plugin to generate revealjs friendly markup.
 *
 * Use "---" to transition to a new horizontal slide.
 * Use "===" to transition to a vertical child slide.
 *
 * @param {*} md
 * @param {*} options
 */
export default function revealjs_plugin(md, options) {
    function isVSep(token) {
        return token.type === "inline" && token.content === VSEP;
    }

    function isHSep(token) {
        return token.type === "hr" && token.markup === HSEP;
    }

    function isSep(token) {
        return isHSep(token) || isVSep(token);
    }

    function renderOpening(tokens, idx, options, env, slf) {
        var token = tokens[idx];
        return `<${tokens[idx].tag}${slf.renderAttrs(tokens[idx])}>`;
    };

    function renderClosing(tokens, idx, options, env, slf) {
        var token = tokens[idx];
        return `</${tokens[idx].tag}>`;
    };

    md.renderer.rules.pres_open = renderOpening;
    md.renderer.rules.pres_close = renderClosing;
    md.renderer.rules.slide_open = renderOpening;
    md.renderer.rules.slide_close = renderClosing;

    function nextDivider(tokens, start) {
        for (let i = start; i < tokens.length; i++) {
            if (isSep(tokens[i])) {
                return i;
            }
        }
        return -1;
    }

    function previousSlideOpen(tokens, before) {
        for (let i = before - 1; i >= 0; i--) {
            if (tokens[i].type === "slide_open") {
                return i;
            }
        }
        return -1;
    }

    var openSlides = 0;

    function presentationOpen(state) {
        var token = new state.Token("pres_open", "section", 1);
        token.block = true;
        token.attrs = [
            ["class", "reveal"]
        ];
        return token;
    }

    function presentationClose(state) {
        return new state.Token("pres_close", "section", -1);
    }

    function slidesOpen(state) {
        var token = new state.Token("slides_open", "div", 1);
        token.block = true;
        token.attrs = [
            ["class", "slides"]
        ];
        return token;
    }

    function slidesClose(state) {
        return new state.Token("slides_close", "div", -1);
    }

    function slideOpen(state) {
        openSlides++;
        return new state.Token("slide_open", "section", 1);
    }

    function slideClose(state) {
        openSlides--;
        return new state.Token("slide_close", "section", -1);
    }

    md.core.ruler.push("revealjs", function(state) {
        let divIdx = 0;
        while (true) {
            divIdx = nextDivider(state.tokens, divIdx);
            if (divIdx === -1) {
                break;
            }
            let divider = state.tokens[divIdx];
            if (isSep(divider) && openSlides === 0) {
                state.tokens.unshift(slideOpen(state));
                divIdx++; // we added a token at the beginning, we need to update divIdx
            }
            let tags = [];
            if (isHSep(divider)) {
                while (openSlides > 0) {
                    tags.push(slideClose(state));
                }
                tags.push(slideOpen(state));
                // because "---" is hijacked from plain markdown, it translates
                // to one token which we remove
                state.tokens.splice(divIdx, 1, ...tags);
            } else if (isVSep(divider)) {
                // if it is a vertical separator, we need to wrap the current slide
                // in it's own section
                if (openSlides === 1) {
                    let slideOpenIdx = previousSlideOpen(state.tokens, divIdx);
                    state.tokens.splice(slideOpenIdx, 1,
                        state.tokens[slideOpenIdx], // reuse it to avoid increasing openSlides
                        slideOpen(state)
                    );
                    divIdx++; // we added a token before the divider, we need to update divIdx
                }
                // if the current slide is already a vertical child, we need to close
                // it; this will be indicated by a nesting level of two:
                // <section horizontal-parent>
                //    <section current-vertical-child>
                //    <!-- this is where we are right now -->
                if (openSlides === 2) {
                    tags.push(slideClose(state));
                }
                tags.push(slideOpen(state));
                // because this is a custom token, it is first wrapped by the processor
                // in a paragraph, so we need to replace para_open, sep, para_close
                state.tokens.splice(divIdx - 1, 3, ...tags);
            }
        }

        while (openSlides > 0) {
            state.tokens.push(slideClose(state));
        }
        state.tokens.unshift(slidesOpen(state));
        state.tokens.unshift(presentationOpen(state));
        state.tokens.push(slidesClose(state));
        state.tokens.push(presentationClose(state));
    });
};