PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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>
This commit is contained in:
Tulir Asokan 2024-03-20 01:34:11 +02:00 committed by GitHub
parent 665605b2b6
commit 79c50db009
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/utils/colour.ts
View file

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

4
test/__snapshots__/SlashCommands-test.tsx.snap
View file

@ -18,7 +18,7 @@ exports[`SlashCommands /rainbow should make things rainbowy 1`] = `
{ {
"body": "this is a test message", "body": "this is a test message",
"format": "org.matrix.custom.html", "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", "msgtype": "m.text",
} }
`; `;
@ -27,7 +27,7 @@ exports[`SlashCommands /rainbowme should make things rainbowy 1`] = `
{ {
"body": "this is a test message", "body": "this is a test message",
"format": "org.matrix.custom.html", "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", "msgtype": "m.emote",
} }
`; `;

4
test/utils/colour-test.ts
View file

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