@marp-team/marpit/lib/markdown/directives/apply.js

The skinny framework for creating slide deck from Markdown

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _lodash = _interopRequireDefault(require("lodash.kebabcase"));

var _directives = require("./directives");

var _inline_style = _interopRequireDefault(require("../../helpers/inline_style"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** @module */
const publicDirectives = [...Object.keys(_directives.globals), ...Object.keys(_directives.locals)];
/**
 * Apply parsed Marpit directives to markdown-it tokens.
 *
 * @alias module:markdown/directives/apply
 * @param {MarkdownIt} md markdown-it instance.
 * @param {Object} [opts]
 * @param {boolean} [opts.dataset=true] Assigns directives as HTML data
 *     attributes of each section tag.
 * @param {boolean} [opts.css=true] Assigns directives as CSS Custom Properties
 *     of each section tag.
 * @param {boolean} [opts.includeInternal=false] Whether include internal
 *     directives (Undefined in {@link module:markdown/directives/directives}.)
 *     In default, internal directives are not applied to HTML/CSS.
 */

function apply(md, opts = {}) {
  const dataset = opts.dataset === undefined ? true : !!opts.dataset;
  const css = opts.css === undefined ? true : !!opts.css;

  const filterFunc = key => !!opts.includeInternal || publicDirectives.includes(key);

  md.core.ruler.after('marpit_directives_parse', 'marpit_directives_apply', state => {
    if (state.inlineMode) return;

    for (const token of state.tokens) {
      const {
        marpitDirectives,
        marpitSlide
      } = token.meta || {};

      if (marpitDirectives) {
        const style = new _inline_style.default(token.attrGet('style'));

        for (const dir of Object.keys(marpitDirectives)) {
          if (filterFunc(dir)) {
            const value = marpitDirectives[dir];

            if (value) {
              const kebabCaseDir = (0, _lodash.default)(dir);
              if (dataset) token.attrSet(`data-${kebabCaseDir}`, value);
              if (css) style.set(`--${kebabCaseDir}`, value);
            }
          }
        } // Apply attribute to token


        if (marpitDirectives.class) token.attrJoin('class', marpitDirectives.class);
        if (marpitDirectives.color) style.set('color', marpitDirectives.color);
        if (marpitDirectives.backgroundColor) style.set('background-color', marpitDirectives.backgroundColor).set('background-image', 'none');

        if (marpitDirectives.backgroundImage) {
          style.set('background-image', marpitDirectives.backgroundImage).set('background-position', 'center').set('background-repeat', 'no-repeat').set('background-size', 'cover');
          if (marpitDirectives.backgroundPosition) style.set('background-position', marpitDirectives.backgroundPosition);
          if (marpitDirectives.backgroundRepeat) style.set('background-repeat', marpitDirectives.backgroundRepeat);
          if (marpitDirectives.backgroundSize) style.set('background-size', marpitDirectives.backgroundSize);
        }

        if (marpitDirectives.paginate) token.attrSet('data-marpit-pagination', marpitSlide + 1);
        if (marpitDirectives.header) token.meta.marpitHeader = marpitDirectives.header;
        if (marpitDirectives.footer) token.meta.marpitFooter = marpitDirectives.footer;
        const styleStr = style.toString();
        if (styleStr !== '') token.attrSet('style', styleStr);
      }
    }
  });
}

var _default = apply;
exports.default = _default;