markdown/background_image/apply.js

/** @module */
import marpitPlugin from '../../plugin'

/**
 * Marpit background image apply plugin.
 *
 * Apply parsed meta for background image / color into directives of each page.
 *
 * When inline SVG is enabled, it will reshape meta for advanced process instead
 * of converting to directives.
 *
 * @function backgroundImageApply
 * @param {MarkdownIt} md markdown-it instance.
 */
function _backgroundImageApply(md) {
  md.core.ruler.after(
    'marpit_inline_svg',
    'marpit_apply_background_image',
    ({ inlineMode, tokens }) => {
      if (inlineMode) return

      let current = {}

      for (const tb of tokens) {
        if (tb.type === 'marpit_slide_open') current.open = tb
        if (tb.type === 'marpit_inline_svg_content_open')
          current.svgContent = tb

        if (tb.type === 'marpit_slide_close') {
          if (current.images && current.images.length > 0) {
            if (current.svgContent) {
              // Reshape meta for advanced background
              current.svgContent.meta = {
                ...(current.svgContent.meta || {}),
                marpitBackground: {
                  direction: current.direction,
                  height: current.svgContent.attrGet('height'),
                  images: current.images,
                  open: current.open,
                  split: current.split,
                  splitSize: current.splitSize,
                  width: current.svgContent.attrGet('width'),
                },
              }
            } else {
              // Apply simple CSS background
              const img = current.images[current.images.length - 1]

              current.open.meta.marpitDirectives = {
                ...(current.open.meta.marpitDirectives || {}),
                backgroundImage: `url("${img.url}")`,
              }

              if (img.size)
                current.open.meta.marpitDirectives.backgroundSize = img.size
            }
          }
          current = {}
        }

        // Collect parsed inline image meta
        if (current.open && tb.type === 'inline')
          for (const t of tb.children) {
            if (t.type === 'image') {
              const {
                background,
                backgroundDirection,
                backgroundSize,
                backgroundSplit,
                backgroundSplitSize,
                color,
                filter,
                height,
                size,
                url,
                width,
              } = t.meta.marpitImage

              if (background && !url.match(/^\s*$/)) {
                if (color) {
                  // Background color
                  current.open.meta.marpitDirectives = {
                    ...(current.open.meta.marpitDirectives || {}),
                    backgroundColor: color,
                  }
                } else {
                  // Background image
                  current.images = [
                    ...(current.images || []),
                    {
                      filter,
                      height,
                      size: (() => {
                        const s = size || backgroundSize || undefined

                        return !['contain', 'cover'].includes(s) &&
                          (width || height)
                          ? `${width || s || 'auto'} ${height || s || 'auto'}`
                          : s
                      })(),
                      url,
                      width,
                    },
                  ]
                }
              }

              if (backgroundDirection) current.direction = backgroundDirection
              if (backgroundSplit) current.split = backgroundSplit
              if (backgroundSplitSize) current.splitSize = backgroundSplitSize
            }
          }
      }
    }
  )
}

export const backgroundImageApply = marpitPlugin(_backgroundImageApply)
export default backgroundImageApply