Mount the math rendering alert before inline math blocks

What does this MR do and why?

Fixes an uncaught TypeError in KaTeX math rendering when rendering limits stop an inline math block.

SafeMathRenderer in app/assets/javascripts/behaviors/markdown/render_math.js protects against slow rendering. When math rendering limits are enabled, a block longer than 1000 characters, or one that comes after the 2 second render budget is used up, is not rendered. The renderer shows the raw math instead and mounts a GlAlert with a "Display anyway" button.

renderAlert mounted the alert with mountBeforeEl.before(alert.$el), where mountBeforeEl was the closest .js-markdown-code wrapper. That wrapper is the div the Banzai syntax highlight filter puts around fenced code blocks, so the alert lands before the wrapper and not under the copy-code button.

Inline math in a paragraph has no such wrapper. closest returned null, and null.before(...) threw Uncaught TypeError: Cannot read properties of null (reading 'before'). The throw happens in a setTimeout callback, so it is uncaught.

In CI this logged the error in 3 examples of spec/features/markdown/math_spec.rb under "applying limits on math rendering".

Changes made:

  • app/assets/javascripts/behaviors/markdown/render_math.js — fall back to the math block itself when there is no wrapper. The alert then renders right before the inline block. Nothing else changes.
  • spec/frontend/behaviors/markdown/render_math_spec.js — new spec, the renderer had no unit spec. Two cases with a too long math block: inside a .js-markdown-code wrapper the alert mounts before the wrapper; inline without a wrapper nothing throws and the alert mounts before the block. The inline case fails on the old code with the exact reading 'before' TypeError and passes with the fix. KaTeX is mocked.

How to set up and validate locally

  1. Check that math rendering limits are enabled. That is the default in Admin > Settings > General > Preferences.

  2. Create an issue whose description contains inline math with more than 1000 characters, for example $ followed by x+ repeated 600 times and $.

  3. Open the issue and the DevTools console.

  4. Check there is no reading 'before' TypeError, and that an alert with "Display anyway" appears before the math.

    Alert mounted before inline math
  5. Click "Display anyway" and check the math renders.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports

Loading
Loading