MathJax formula fails to render when $$ delimiters are split across <span> elements by text editor

[dududuguo]

Describe the bug

When editing math formulas with $$...$$ LaTeX delimiters in draw.io's rich text editor, the browser's contenteditable engine sometimes splits the formula text across multiple <span> elements. This causes MathJax to fail to recognize and render the formula, because MathJax's TeX input processor cannot match $$ delimiter pairs that span across different HTML element boundaries.

To Reproduce

1. Open draw.io and enable Mathematical Typesetting (Extras → Mathematical Typesetting)
2. Create a text element and type a LaTeX formula, e.g. $$s_0 \to A_0 h_0$$
3. Edit the formula — place the cursor in the middle of the formula, delete some characters, then retype them (or copy-paste part of the formula)
4. After editing, the formula may stop rendering and instead displays as raw LaTeX text

The underlying cause can be seen in the saved .drawio XML. After editing, the cell value changes from a single <span> to multiple <span> elements:

Before editing (renders correctly):

<mxCell value="&lt;span&gt;$$s_0 \to A_0→h_0$$&lt;/span&gt;" />

After editing (fails to render):

<mxCell value="&lt;span style=&quot;text-align: center; text-wrap: nowrap;&quot;&gt;$$s_0 \to A_0&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;text-align: center; text-wrap: nowrap; background-color: initial;&quot;&gt;h_0$$&lt;/span&gt;" />

The opening $$ is in the first <span> and the closing $$ is in the second <span>, so MathJax cannot match them.

Environment

• draw.io version 26.0.9 (dev)
• OS: Windows 11
• Browser: Chrome
• Browser Version: 134

• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

[draw-io-triage-bot]

👋 Thank you for opening this issue!

---

Summary: When editing MathJax formulas with $...$ delimiters in draw.io's rich text editor, the browser's contenteditable engine can split the formula across multiple <span> elements, causing MathJax to fail to match the $ delimiter pairs and leaving the formula unrendered as raw LaTeX text.

---

📝 Additional Information Needed

To help us investigate this more effectively, could you please provide:

• expected behavior: While implied, an explicit statement of the expected behavior (e.g., 'MathJax should render the formula correctly regardless of how the rich text editor splits the HTML internally') would strengthen the report.

We also have some questions:

• Does this issue also occur in the draw.io desktop application, or only in the browser-based version?
• Is the issue reproducible consistently with specific editing actions (e.g., backspace in the middle of a formula then retype), or does it happen intermittently?
• As a current workaround, have you tried editing the formula by selecting the entire text and retyping it in one go, or using Edit → Edit Style to manually fix the XML value back to a single ?

📋 Bug Report Template

**Environment:**
- draw.io version: [e.g., web app / desktop 24.x.x / Confluence plugin]
- Browser (if web): [e.g., Chrome 120, Firefox 121]
- OS: [e.g., Windows 11, macOS 14, Ubuntu 22.04]

**Steps to Reproduce:**
1. Go to ...
2. Click on ...
3. See error

**Expected Behavior:**
What you expected to happen.

**Actual Behavior:**
What actually happened.

**Screenshots/Files:**
If applicable, add screenshots or attach the .drawio file.

---

---

_{🤖 This is an automated response to help with initial triage. A human maintainer will review this issue. If you've provided all the requested information, no further action is needed - we'll get back to you soon!}

[dududuguo]

I found a possible fix for this. The idea is to normalize the DOM before MathJax processes it:

1. Before MathJax.typesetClear() in Editor.doMathJaxRender(), walk through all foreignObject elements in the container
2. For each one, recursively find adjacent <span> elements with compatible styles (ignoring no-op differences like background-color: initial)
3. Merge them into a single <span>, so the $$...$$ delimiters end up in the same element

I've prototyped this in my fork — see the implementation in [Editor.js].

---