From 79c50db00993a97a0b6b8c3df02b8eec4e6cb21a Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 20 Mar 2024 01:34:11 +0200
Subject: [PATCH] Use data-mx-color for rainbows (#12325)

* Use data-mx-color for rainbows

The font tag may be deprecated soon (https://github.com/matrix-org/matrix-spec/pull/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                            | 4 ++--
 test/__snapshots__/SlashCommands-test.tsx.snap | 4 ++--
 test/utils/colour-test.ts                      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utils/colour.ts b/src/utils/colour.ts
index 518b11f835a..8262718a399 100644
--- a/src/utils/colour.ts
+++ b/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("");
diff --git a/test/__snapshots__/SlashCommands-test.tsx.snap b/test/__snapshots__/SlashCommands-test.tsx.snap
index 08d3bdcc47e..fdffb74ac31 100644
--- a/test/__snapshots__/SlashCommands-test.tsx.snap
+++ b/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",
 }
 `;
diff --git a/test/utils/colour-test.ts b/test/utils/colour-test.ts
index 02a559447a2..2e533d0aa92 100644
--- a/test/utils/colour-test.ts
+++ b/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>');
     });
 });