 MATH_MARKER_BLOCK  = '\u200c\u200c\u200c' # zero-width non-joiner
 MATH_MARKER_INLINE = '\u200b\u200b\u200b' # zero-width space
 
-MATH_SELECTOR = '[data-math]:not(.math-rendered), math:not(.math-rendered)'
+MATH_DATA_SELECTOR = '[data-math]:not(.math-rendered)'
+MATH_ML_SELECTOR   = 'math:not(.math-rendered)'
+COMBINED_MATH_SELECTOR = "#{MATH_DATA_SELECTOR}, #{MATH_ML_SELECTOR}"
 
 cleanMathArtifacts = ->
   # Once MathJax finishes processing, cleanup the MathJax message nodes to prevent




# Typesets the entire document
typesetDocument = ->

  nodes = document.querySelectorAll(MATH_SELECTOR)
  return if _.isEmpty(nodes)

  for node in nodes
    node.classList.add('math-rendered')
    # math elements are corrupted when the marker is inserted
    continue if node.tagName is 'math'

    formula = node.getAttribute('data-math')
    # divs with data-math should be rendered as a block
    if node.tagName.toLowerCase() is 'div'
      node.textContent = "#{MATH_MARKER_BLOCK}#{formula}#{MATH_MARKER_BLOCK}"
    else
      node.textContent = "#{MATH_MARKER_INLINE}#{formula}#{MATH_MARKER_INLINE}"

  # submit all nodes at once for optimal rendering performance
  window.MathJax.Hub.Queue(['Typeset', MathJax.Hub, _.toArray(nodes)])

  cleanMathArtifacts()

# Install a debounce around typesetting function so that it will only run once

# It's called by components like HTML after they're rendered
typesetMath = (root) ->
  # schedule a Mathjax pass if there is at least one [data-math] or <math> element present
  if window.MathJax?.Hub?.Queue? and root.querySelector(COMBINED_MATH_SELECTOR)
    typesetDocument()


