feat: support equals sign and surrounding whitespace in \htmlData attribute values (#4112)

AljoschaMeyer · edemaine · web-flow · commit c77aaec00c76 · 2025-12-07T15:59:12.000-05:00
* Support data attributes containing equals signs

* Fix linter nits

* Fix third linter nit

* Code cleanup, more tests, and stop trimming value

* Another test improvement

---------

Co-authored-by: Erik Demaine &lt;edemaine@mit.edu&gt;
diff --git a/src/functions/html.js b/src/functions/html.js
@@ -52,12 +52,15 @@ defineFunction({
             case "\\htmlData": {
                 const data = value.split(",");
                 for (let i = 0; i < data.length; i++) {
-                    const keyVal = data[i].split("=");
-                    if (keyVal.length !== 2) {
-                        throw new ParseError(
-                            "Error parsing key-value for \\htmlData");
+                    const item = data[i];
+                    const firstEquals = item.indexOf("=");
+                    if (firstEquals < 0) {
+                        throw new ParseError(`\\htmlData key/value '${item}'` +
+                            ` missing equals sign`);
                     }
-                    attributes["data-" + keyVal[0].trim()] = keyVal[1].trim();
+                    const key = item.slice(0, firstEquals);
+                    const value = item.slice(firstEquals + 1);
+                    attributes["data-" + key.trim()] = value;
                 }
 
                 trustContext = {
diff --git a/test/katex-spec.js b/test/katex-spec.js
@@ -2217,6 +2217,49 @@ describe("An HTML extension builder", function() {
     });
 });
 
+describe("The \\htmlData macro", function() {
+    const trustNonStrictSettings = new Settings({trust: true, strict: false});
+    it("should not fail if an argument contains a single equals sign", () => {
+        expect("\\htmlData{foo=a}{x}").toBuild(trustNonStrictSettings);
+    });
+
+    it("should allow equals signs in value", () => {
+        const built = getBuilt(
+            "\\htmlData{foo=a=b}{x}", trustNonStrictSettings);
+        expect(built[0].attributes["data-foo"]).toEqual("a=b");
+    });
+
+    it("should accept empty values", () => {
+        expect("\\htmlData{foo=}{x}").toBuild(trustNonStrictSettings);
+    });
+
+    it("should accept empty keys", () => {
+        expect("\\htmlData{=a}{x}").toBuild(trustNonStrictSettings);
+    });
+
+    it("should preserve spaces in value", () => {
+        const built = getBuilt(
+            "\\htmlData{foo= bar }{x}", trustNonStrictSettings);
+        expect(built[0].attributes["data-foo"]).toEqual(" bar ");
+    });
+
+    it("should throw Error if an argument contains no equals signs", () => {
+        try {
+            katex.renderToString(
+                "\\htmlData{foo}{x}", trustNonStrictSettings);
+
+            // Render is expected to throw, so this should not be called.
+            expect(true).toBe(false);
+        } catch (error) {
+            expect(error).toBeInstanceOf(ParseError);
+            const message =
+                "\\htmlData key/value 'foo' missing equals sign";
+            expect(error.message).toBe(`KaTeX parse error: ${message}`);
+            expect(error.rawMessage).toBe(message);
+        }
+    });
+});
+
 describe("A bin builder", function() {
     it("should create mbins normally", function() {
         const built = getBuilt`x + y`;
