Skip to content

fix: Support XHTML phrasing content in MathML token elements #4924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 29, 2025
Merged

fix: Support XHTML phrasing content in MathML token elements #4924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
861612f
junk: Vitest doesn't run locally so I guess I'm testing in the CI
rschristian Sep 27, 2025
aac0039
fix: Try regex w/ inlined nodeType check
rschristian Sep 28, 2025
baafde5
refactor: Bigger, but maybe better perf?
rschristian Sep 28, 2025
3937caf
refactor: No need to check SVG namespace I suppose
rschristian Sep 28, 2025
86c70d6
refactor: Save a few bytes on the regex
rschristian Sep 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,5 @@ export const NULL = null;
export const UNDEFINED = undefined;
export const EMPTY_OBJ = /** @type {any} */ ({});
export const EMPTY_ARR = [];

export const MATHML_TOKEN_ELEMENTS = /(mi|mn|mo|ms$|mte|msp)/;
12 changes: 10 additions & 2 deletions src/diff/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
RESET_MODE,
SVG_NAMESPACE,
UNDEFINED,
XHTML_NAMESPACE
XHTML_NAMESPACE,
MATHML_TOKEN_ELEMENTS
} from '../constants';
import { BaseComponent, getDomSibling } from '../component';
import { Fragment } from '../create-element';
Expand Down Expand Up @@ -608,14 +609,21 @@ function diffElementNodes(
} else {
if (oldHtml) dom.innerHTML = '';

if (
nodeType == 'foreignObject' ||
(namespace == MATH_NAMESPACE && MATHML_TOKEN_ELEMENTS.test(nodeType))
) {
namespace = XHTML_NAMESPACE;
}

diffChildren(
// @ts-expect-error
nodeType == 'template' ? dom.content : dom,
isArray(newChildren) ? newChildren : [newChildren],
newVNode,
oldVNode,
globalContext,
nodeType == 'foreignObject' ? XHTML_NAMESPACE : namespace,
namespace,
excessDomChildren,
commitQueue,
excessDomChildren
Expand Down
35 changes: 29 additions & 6 deletions test/browser/mathml.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { createElement, Component, render } from 'preact';
import { setupRerender } from 'preact/test-utils';
import { setupScratch, teardown } from '../_util/helpers';

const XHTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';

describe('mathml', () => {
let scratch;

Expand All @@ -18,7 +21,7 @@ describe('mathml', () => {

let namespace = scratch.querySelector('math').namespaceURI;

expect(namespace).to.equal('http://www.w3.org/1998/Math/MathML');
expect(namespace).to.equal(MATH_NAMESPACE);
});

it('should render children with the correct namespace URI', () => {
Expand All @@ -31,27 +34,27 @@ describe('mathml', () => {

let namespace = scratch.querySelector('mrow').namespaceURI;

expect(namespace).to.equal('http://www.w3.org/1998/Math/MathML');
expect(namespace).to.equal(MATH_NAMESPACE);
});

it('should inherit correct namespace URI from parent', () => {
const math = document.createElementNS(
'http://www.w3.org/1998/Math/MathML',
MATH_NAMESPACE,
'math'
);
scratch.appendChild(math);

render(<mrow />, scratch.firstChild);

let namespace = scratch.querySelector('mrow').namespaceURI;
expect(namespace).to.equal('http://www.w3.org/1998/Math/MathML');
expect(namespace).to.equal(MATH_NAMESPACE);
});

it('should inherit correct namespace URI from parent upon updating', () => {
setupRerender();

const math = document.createElementNS(
'http://www.w3.org/1998/Math/MathML',
MATH_NAMESPACE,
'math'
);
scratch.appendChild(math);
Expand All @@ -62,7 +65,7 @@ describe('mathml', () => {
// eslint-disable-next-line
this.setState({ show: false }, () => {
expect(scratch.querySelector('mo').namespaceURI).to.equal(
'http://www.w3.org/1998/Math/MathML'
MATH_NAMESPACE
);
});
}
Expand Down Expand Up @@ -90,4 +93,24 @@ describe('mathml', () => {
expect(scratch.firstChild).to.be.an('HTMLDivElement');
expect(scratch.firstChild.firstChild).to.be.an('MathMLElement');
});

it('should support XHTML phrasing content within MathML token elements', () => {
render(
<div>
<math>
<mrow>
<mi><ins>123</ins></mi>
</mrow>
</math>
</div>,
scratch
);

expect(scratch.querySelector('mi').namespaceURI).to.equal(
MATH_NAMESPACE
);
expect(scratch.querySelector('ins').namespaceURI).to.equal(
XHTML_NAMESPACE
);
});
});
Loading