Macros using textcolor don't work as expected with = sign spacing

Include code fragments or CodePen.io links to illustrate the issue. Do not include screenshots of code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change FontShape of MathField</title>
<script defer src="https://unpkg.com/mathlive"></script>
</head>
<body>
<h1>MathField FontShape Example</h1>
<math-field id='mf'>x=\red{1}</math-field>
<br>
<math-field>x=\textcolor{red}{1}</math-field>
<script>
customElements.whenDefined("math-field").then(() => {
document.body.classList.add("ready");
mf=document.getElementById('mf');
mf.macros={...mf.macros,red:'\\textcolor{red}{#1}'}
});
</script>
</body>
</html>
If you get a runtime or TypeScript error, copy the text of the error message, from the JavaScript console, for example. Do not include a screenshot of the error message. There is no error message

If the issue is with rendering of the math, please include the LaTeX code that is causing the issue as text. Do not include a screenshot of LaTeX code. The latex code is x=\red{1}

Description

The spacing of the = sign in the MathField 1=\textcolor{red}{1} is different from 1=\red{1} even though \textcolor{red}{1} and \red{1} are the same thing.

Steps to Reproduce

Run the html code at the beginning

Actual Behavior

(Required) What happened when you followed the steps above?

There is less space before '\red{1}' than \textcolor{red}{1} because \textcolor{red}{1} is not recognized as a '=' special command

(Required) What did you expect to happen instead? It may be obvious to you what should have happened, but if you don't state it explicitly it may not be obvious to others.

The two mathfields "1=\textcolor{red}{1}" and "1=\red{1}" to look the same

Chrome on Windows

arnog / mathlive

Macros using textcolor don't work as expected with = sign spacing #2387

Description

Steps to Reproduce

Actual Behavior