From 2b65272e5055ca24b243bb2d5953992e9934122c Mon Sep 17 00:00:00 2001 From: EECvision Date: Wed, 6 Apr 2022 20:01:17 +0100 Subject: [PATCH 1/4] fix rainbow breaks compound emojis --- res/css/views/elements/_RichText.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 221fc54a055..a8181aa0164 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -78,6 +78,7 @@ a.mx_Pill { .mx_Emoji { font-size: 1.8rem; vertical-align: bottom; + font-family: Segoe UI Symbol; } .mx_Markdown_BOLD { From abf19cf4190adb80fd954533594dfd9eaa1413ef Mon Sep 17 00:00:00 2001 From: EECvision Date: Thu, 7 Apr 2022 15:43:56 +0100 Subject: [PATCH 2/4] use lodash split method for text splitting and add a unit test to test the behaviour --- src/utils/colour.ts | 4 +++- test/utils/colour-test.ts | 24 ++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 test/utils/colour-test.ts diff --git a/src/utils/colour.ts b/src/utils/colour.ts index 10c18dbfe76..96eabd4eb40 100644 --- a/src/utils/colour.ts +++ b/src/utils/colour.ts @@ -14,10 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { split } from 'lodash'; + export function textToHtmlRainbow(str: string): string { const frequency = (2 * Math.PI) / str.length; - return Array.from(str) + return split(str, '') .map((c, i) => { if (c === " ") { return c; diff --git a/test/utils/colour-test.ts b/test/utils/colour-test.ts new file mode 100644 index 00000000000..1a35c2f7098 --- /dev/null +++ b/test/utils/colour-test.ts @@ -0,0 +1,24 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { textToHtmlRainbow } from "../../src/utils/colour"; + +describe("textToHtmlRainbow", () => { + it('correctly transform text to html without splitting the emoji in two', () => { + expect(textToHtmlRainbow('🐻')).toBe('🐻'); + expect(textToHtmlRainbow('🐕‍🦺')).toBe('🐕‍🦺'); + }); +}); From 0dd712d089304245355fafd6b0024c74c07be8e0 Mon Sep 17 00:00:00 2001 From: Emmanuel <63562663+EECvision@users.noreply.github.com> Date: Tue, 19 Apr 2022 08:53:07 +0100 Subject: [PATCH 3/4] Update _RichText.scss --- res/css/views/elements/_RichText.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index e3666e84a8f..4615f5da23f 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -80,7 +80,6 @@ a.mx_Pill { // and scale with the size of the surrounding text font-size: calc(18 / 14 * 1em); vertical-align: bottom; - font-family: Segoe UI Symbol; } .mx_Markdown_BOLD { From b9adc7d5941baaa92481691fe953682087a6f4bd Mon Sep 17 00:00:00 2001 From: Emmanuel <63562663+EECvision@users.noreply.github.com> Date: Wed, 20 Apr 2022 11:47:13 +0100 Subject: [PATCH 4/4] Update colour-test.ts --- test/utils/colour-test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/colour-test.ts b/test/utils/colour-test.ts index 1a35c2f7098..720c34e07bb 100644 --- a/test/utils/colour-test.ts +++ b/test/utils/colour-test.ts @@ -1,5 +1,5 @@ /* -Copyright 2021 Šimon Brandner +Copyright 2022 Emmanuel Ezeka Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.