Use data-mx-color for rainbows (#12325)

* Use data-mx-color for rainbows

The font tag may be deprecated soon (matrix-org/matrix-spec#1739)

Signed-off-by: Tulir Asokan <tulir@maunium.net>

* Update tests

Signed-off-by: Tulir Asokan <tulir@maunium.net>

---------

Signed-off-by: Tulir Asokan <tulir@maunium.net>

src/utils/colour.ts

@@ -27,13 +27,13 @@ export function textToHtmlRainbow(str: string): string {
             const [a, b] = generateAB(i * frequency, 1);
             const [red, green, blue] = labToRGB(75, a, b);
             return (
-                '<font color="#' +
+                '<span data-mx-color="#' +
                 red.toString(16).padStart(2, "0") +
                 green.toString(16).padStart(2, "0") +
                 blue.toString(16).padStart(2, "0") +
                 '">' +
                 c +
-                "</font>"
+                "</span>"
             );
         })
         .join("");

test/__snapshots__/SlashCommands-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`SlashCommands /rainbow should make things rainbowy 1`] = `
 {
   "body": "this is a test message",
   "format": "org.matrix.custom.html",
-  "formatted_body": "<font color="#ff00be">t</font><font color="#ff0080">h</font><font color="#ff0041">i</font><font color="#ff5f00">s</font> <font color="#faa900">i</font><font color="#c3bf00">s</font> <font color="#00d800">a</font> <font color="#00e371">t</font><font color="#00e6b6">e</font><font color="#00e7f8">s</font><font color="#00e7ff">t</font> <font color="#00deff">m</font><font color="#00d2ff">e</font><font color="#00c0ff">s</font><font color="#44a4ff">s</font><font color="#e87dff">a</font><font color="#ff42ff">g</font><font color="#ff00fe">e</font>",
+  "formatted_body": "<span data-mx-color="#ff00be">t</span><span data-mx-color="#ff0080">h</span><span data-mx-color="#ff0041">i</span><span data-mx-color="#ff5f00">s</span> <span data-mx-color="#faa900">i</span><span data-mx-color="#c3bf00">s</span> <span data-mx-color="#00d800">a</span> <span data-mx-color="#00e371">t</span><span data-mx-color="#00e6b6">e</span><span data-mx-color="#00e7f8">s</span><span data-mx-color="#00e7ff">t</span> <span data-mx-color="#00deff">m</span><span data-mx-color="#00d2ff">e</span><span data-mx-color="#00c0ff">s</span><span data-mx-color="#44a4ff">s</span><span data-mx-color="#e87dff">a</span><span data-mx-color="#ff42ff">g</span><span data-mx-color="#ff00fe">e</span>",
   "msgtype": "m.text",
 }
 `;
@@ -27,7 +27,7 @@ exports[`SlashCommands /rainbowme should make things rainbowy 1`] = `
 {
   "body": "this is a test message",
   "format": "org.matrix.custom.html",
-  "formatted_body": "<font color="#ff00be">t</font><font color="#ff0080">h</font><font color="#ff0041">i</font><font color="#ff5f00">s</font> <font color="#faa900">i</font><font color="#c3bf00">s</font> <font color="#00d800">a</font> <font color="#00e371">t</font><font color="#00e6b6">e</font><font color="#00e7f8">s</font><font color="#00e7ff">t</font> <font color="#00deff">m</font><font color="#00d2ff">e</font><font color="#00c0ff">s</font><font color="#44a4ff">s</font><font color="#e87dff">a</font><font color="#ff42ff">g</font><font color="#ff00fe">e</font>",
+  "formatted_body": "<span data-mx-color="#ff00be">t</span><span data-mx-color="#ff0080">h</span><span data-mx-color="#ff0041">i</span><span data-mx-color="#ff5f00">s</span> <span data-mx-color="#faa900">i</span><span data-mx-color="#c3bf00">s</span> <span data-mx-color="#00d800">a</span> <span data-mx-color="#00e371">t</span><span data-mx-color="#00e6b6">e</span><span data-mx-color="#00e7f8">s</span><span data-mx-color="#00e7ff">t</span> <span data-mx-color="#00deff">m</span><span data-mx-color="#00d2ff">e</span><span data-mx-color="#00c0ff">s</span><span data-mx-color="#44a4ff">s</span><span data-mx-color="#e87dff">a</span><span data-mx-color="#ff42ff">g</span><span data-mx-color="#ff00fe">e</span>",
   "msgtype": "m.emote",
 }
 `;

test/utils/colour-test.ts

@@ -18,7 +18,7 @@ import { textToHtmlRainbow } from "../../src/utils/colour";
 
 describe("textToHtmlRainbow", () => {
     it("correctly transform text to html without splitting the emoji in two", () => {
-        expect(textToHtmlRainbow("🐻")).toBe('<font color="#ff00be">🐻</font>');
-        expect(textToHtmlRainbow("🐕‍🦺")).toBe('<font color="#ff00be">🐕‍🦺</font>');
+        expect(textToHtmlRainbow("🐻")).toBe('<span data-mx-color="#ff00be">🐻</span>');
+        expect(textToHtmlRainbow("🐕‍🦺")).toBe('<span data-mx-color="#ff00be">🐕‍🦺</span>');
     });
 });