From 18fe05915e2b7fd1a1379e0707fa0926366b0703 Mon Sep 17 00:00:00 2001 From: David Langley Date: Mon, 7 Oct 2024 16:41:14 +0100 Subject: [PATCH 1/4] Updgrade emojibase-bindings and remove local handling of emoticon variations --- package.json | 2 +- .../views/rooms/BasicMessageComposer.tsx | 6 ++-- .../wysiwyg_composer/hooks/useSuggestion.ts | 4 ++- .../views/rooms/BasicMessageComposer-test.tsx | 1 + .../components/WysiwygComposer-test.tsx | 2 +- yarn.lock | 28 +++++++++---------- 6 files changed, 23 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index f658bf04b6..887cae7ba5 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "dependencies": { "@babel/runtime": "^7.12.5", "@matrix-org/analytics-events": "^0.26.0", - "@matrix-org/emojibase-bindings": "^1.1.2", + "@matrix-org/emojibase-bindings": "^1.3.0", "@matrix-org/matrix-wysiwyg": "2.37.9", "@matrix-org/react-sdk-module-api": "^2.4.0", "@matrix-org/spec": "^1.7.0", diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 012e99669a..0add0c1027 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -201,9 +201,9 @@ export default class BasicMessageEditor extends React.Component // so xd will not match if the string was "mixd 123456" // and we are lookinh at xd 123456 part of the string if (emoticonMatch && (n >= 0 || emoticonMatch.index !== 0)) { - const query = emoticonMatch[1].replace("-", ""); - // try both exact match and lower-case, this means that xd won't match xD but :P will match :p - const data = EMOTICON_TO_EMOJI.get(query) || EMOTICON_TO_EMOJI.get(query.toLowerCase()); + const query = emoticonMatch[1]; + // variations of plaintext emoitcons(E.g. :P vs :p vs :-P) are handled upstream by the emojibase-bindings library + const data = EMOTICON_TO_EMOJI.get(query); if (data) { const { partCreator } = model; diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts index 9b728c1018..14e2933547 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts @@ -388,7 +388,9 @@ function shouldIncrementEndIndex(text: string, index: number): boolean { */ export function getMappedSuggestion(text: string, isAutoReplaceEmojiEnabled?: boolean): MappedSuggestion | null { if (isAutoReplaceEmojiEnabled) { - const emoji = EMOTICON_TO_EMOJI.get(text.toLocaleLowerCase()); + // variations of plaintext emoitcons(E.g. :P vs :p vs :-P) are handled upstream by the emojibase-bindings/emojibase libraries. + // See rules for variations here https://github.com/milesj/emojibase/blob/master/packages/core/src/generateEmoticonPermutations.ts#L3-L32 + const emoji = EMOTICON_TO_EMOJI.get(text); if (emoji?.unicode) { return { keyChar: "", text: emoji.unicode, type: "custom" }; } diff --git a/test/components/views/rooms/BasicMessageComposer-test.tsx b/test/components/views/rooms/BasicMessageComposer-test.tsx index f498479a68..a46dba0f1e 100644 --- a/test/components/views/rooms/BasicMessageComposer-test.tsx +++ b/test/components/views/rooms/BasicMessageComposer-test.tsx @@ -63,6 +63,7 @@ describe("BasicMessageComposer", () => { { before: ":-D", after: "😄" }, { before: ":D", after: "😄" }, { before: ":3", after: "😽" }, + { before: "=-]", after: "🙂" }, ]; const input = screen.getByRole("textbox"); diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx index e58b21db6e..14ba764d10 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx @@ -427,7 +427,7 @@ describe("WysiwygComposer", () => { }); it("typing a space to trigger an emoji replacement", async () => { fireEvent.input(screen.getByRole("textbox"), { - data: ":P", + data: ":-P", inputType: "insertText", }); fireEvent.input(screen.getByRole("textbox"), { diff --git a/yarn.lock b/yarn.lock index ee422b6f28..baf7e2fbe8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1898,13 +1898,13 @@ resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.26.0.tgz#7c8f8f924d8313c87951a0e941640ef8ff78f3d6" integrity sha512-cjKZBejajUG8wPhVygMkBTwTLdEn74luUP6g6RjCUqPR3RYIl3NVi58Zil8CWfRTILb4wVLCPpAvehgXJn1HnQ== -"@matrix-org/emojibase-bindings@^1.1.2": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.1.3.tgz#d35f0367d586d83261564662b6bb67fda8845d68" - integrity sha512-ljr0kPerx8yUc4JVJz7japebb1ZbtGH4V4cvlO2LYgTg+warjagDwkJ5x+ZUVuTU6MH8x0LrUxmkqVgmSoQyWA== +"@matrix-org/emojibase-bindings@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.3.0.tgz#6d45948cb2e507f6d7765c4fcf757a4a7e66b8bd" + integrity sha512-WQtCkoJAtWidie9chXqta0RR32aopxr6vROoN2gfyi4JLZz06rq4WqioajYGs0hJS86f4dpdPhC0lGbvWtSLGQ== dependencies: - emojibase "^15.0.0" - emojibase-data "^15.0.0" + emojibase "^15.3.1" + emojibase-data "^15.3.1" "@matrix-org/matrix-sdk-crypto-wasm@^7.0.0": version "7.0.0" @@ -4431,20 +4431,20 @@ emoji-regex@^9.2.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== -emojibase-data@^15.0.0: - version "15.2.0" - resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-15.2.0.tgz#475a786c091a101ef4bcf57227771c6260ee39b2" - integrity sha512-hDiw4ugxnI4pcVQO+73NlKx6aZP/A+BAPfDgK/3A83RVbHZa0Ut6GHpd5r5XUV9G7BZhKejlIRuxhXialpbt6Q== +emojibase-data@^15.3.1: + version "15.3.2" + resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-15.3.2.tgz#2742246bfe14f16a7829b42ca156dec09934cf85" + integrity sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A== emojibase-regex@15.3.2: version "15.3.2" resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-15.3.2.tgz#5175231715b86d4b437754527288844a6c29318f" integrity sha512-ue6BVeb2qu33l97MkxcOoyMJlg6Tug3eTv2z1at+M9TjvlWKvdmAPvZIDG1JbT2RH3FSyJNLucO5K5H/yxT03w== -emojibase@^15.0.0: - version "15.2.0" - resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-15.2.0.tgz#0a175d4218f4a1600f2ada6b3a3184cef1b3ec7b" - integrity sha512-gB6rIVtyJPersQvAo4nOGYPeILMhlcfZdiwCWVeRAtkJ7sm0tExZETGyLhrTQcHvZQhDEYI1vlCeqUhn5gZkQA== +emojibase@^15.3.1: + version "15.3.1" + resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-15.3.1.tgz#7f6ff5482486f23e59a457de64e974bd35f3c9a3" + integrity sha512-GNsjHnG2J3Ktg684Fs/vZR/6XpOSkZPMAv85EHrr6br2RN2cJNwdS4am/3YSK3y+/gOv2kmoK3GGdahXdMxg2g== emojis-list@^3.0.0: version "3.0.0" From ae8411270dcbdd15ec231558a6f9554d59b3f9f9 Mon Sep 17 00:00:00 2001 From: David Langley Date: Tue, 8 Oct 2024 10:17:39 +0100 Subject: [PATCH 2/4] bump bindings to fix issue of mission emojis with version == 0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 30e96640ec..ea3ab91b79 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "dependencies": { "@babel/runtime": "^7.12.5", "@matrix-org/analytics-events": "^0.26.0", - "@matrix-org/emojibase-bindings": "^1.3.0", + "@matrix-org/emojibase-bindings": "^1.3.3", "@vector-im/matrix-wysiwyg": "2.37.13", "@matrix-org/react-sdk-module-api": "^2.4.0", "@matrix-org/spec": "^1.7.0", From 07df0aa40ae12897c41a6dc933ebdce706e67813 Mon Sep 17 00:00:00 2001 From: David Langley Date: Tue, 8 Oct 2024 10:27:44 +0100 Subject: [PATCH 3/4] update lockfile --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index a714cede24..c34ac3a9f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1898,10 +1898,10 @@ resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.26.0.tgz#7c8f8f924d8313c87951a0e941640ef8ff78f3d6" integrity sha512-cjKZBejajUG8wPhVygMkBTwTLdEn74luUP6g6RjCUqPR3RYIl3NVi58Zil8CWfRTILb4wVLCPpAvehgXJn1HnQ== -"@matrix-org/emojibase-bindings@^1.3.0": - version "1.3.0" - resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.3.0.tgz#6d45948cb2e507f6d7765c4fcf757a4a7e66b8bd" - integrity sha512-WQtCkoJAtWidie9chXqta0RR32aopxr6vROoN2gfyi4JLZz06rq4WqioajYGs0hJS86f4dpdPhC0lGbvWtSLGQ== +"@matrix-org/emojibase-bindings@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.3.3.tgz#cee82a739c0866bf3100b03755647ace1f3ba6ef" + integrity sha512-GwuZdmF+wZT34RKehQYjTzdgba1ju2W3FM4jPJfwqh0jUxVXZLb+6b6dV3lna6/7EDzgGvOMwTwCAolILDwS0g== dependencies: emojibase "^15.3.1" emojibase-data "^15.3.1" From 55f66bc9f4ae6cd458da8106de3b6e82a38388f0 Mon Sep 17 00:00:00 2001 From: David Langley Date: Tue, 8 Oct 2024 10:36:25 +0100 Subject: [PATCH 4/4] test emoji variation in RTE --- .../components/WysiwygComposer-test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx index 14ba764d10..f32a4e7a4e 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx @@ -426,6 +426,18 @@ describe("WysiwygComposer", () => { await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true")); }); it("typing a space to trigger an emoji replacement", async () => { + fireEvent.input(screen.getByRole("textbox"), { + data: ":P", + inputType: "insertText", + }); + fireEvent.input(screen.getByRole("textbox"), { + data: " ", + inputType: "insertText", + }); + + await waitFor(() => expect(onChange).toHaveBeenNthCalledWith(3, expect.stringContaining("😛"))); + }); + it("typing a space to trigger an emoji varitation replacement", async () => { fireEvent.input(screen.getByRole("textbox"), { data: ":-P", inputType: "insertText",