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

fix: correctly identify emoticons (#10108)

Browse source 
Signed-off-by: Adarsh Singh <thakurluckysinghbrh@gmail.com>
This commit is contained in:
Adarsh Singh 2023-02-08 21:59:12 +05:30 committed by GitHub
parent 42692820c7
commit f24db71753
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/rooms/BasicMessageComposer.tsx
View file

@ -191,16 +191,19 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number {
const { model } = this.props;
const range = model.startRange(caretPosition);
// expand range max 8 characters backwards from caretPosition,
// expand range max 9 characters backwards from caretPosition,
// as a space to look for an emoticon
let n = 8;
let n = 9;
range.expandBackwardsWhile((index, offset) => {
const part = model.parts[index];
n -= 1;
return n >= 0 && [Type.Plain, Type.PillCandidate, Type.Newline].includes(part.type);
});
const emoticonMatch = regex.exec(range.text);
if (emoticonMatch) {
// ignore matches at start of proper substrings
// 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());

58
test/components/views/rooms/BasicMessageComposer-test.tsx
View file

@ -24,34 +24,64 @@ import * as TestUtils from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import EditorModel from "../../../../src/editor/model";
import { createPartCreator, createRenderer } from "../../../editor/mock";
import SettingsStore from "../../../../src/settings/SettingsStore";
describe("BasicMessageComposer", () => {
const renderer = createRenderer();
const pc = createPartCreator();
beforeEach(() => {
TestUtils.stubClient();
});
TestUtils.stubClient();
it("should allow a user to paste a URL without it being mangled", () => {
const client: MatrixClient = MatrixClientPeg.get();
const roomId = "!1234567890:domain";
const userId = client.getSafeUserId();
const room = new Room(roomId, client, userId);
it("should allow a user to paste a URL without it being mangled", async () => {
const model = new EditorModel([], pc, renderer);
const client: MatrixClient = MatrixClientPeg.get();
const roomId = "!1234567890:domain";
const userId = client.getSafeUserId();
const room = new Room(roomId, client, userId);
render(<BasicMessageComposer model={model} room={room} />);
const testUrl = "https://element.io";
const mockDataTransfer = generateMockDataTransferForString(testUrl);
render(<BasicMessageComposer model={model} room={room} />);
userEvent.paste(mockDataTransfer);
await userEvent.paste(mockDataTransfer);
expect(model.parts).toHaveLength(1);
expect(model.parts[0].text).toBe(testUrl);
expect(screen.getByText(testUrl)).toBeInTheDocument();
});
it("should replaceEmoticons properly", async () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
return settingName === "MessageComposerInput.autoReplaceEmoji";
});
userEvent.setup();
const model = new EditorModel([], pc, renderer);
render(<BasicMessageComposer model={model} room={room} />);
const tranformations = [
{ before: "4:3 video", after: "4:3 video" },
{ before: "regexp 12345678", after: "regexp 12345678" },
{ before: "--:--)", after: "--:--)" },
{ before: "we <3 matrix", after: "we ❤️ matrix" },
{ before: "hello world :-)", after: "hello world 🙂" },
{ before: ":) hello world", after: "🙂 hello world" },
{ before: ":D 4:3 video :)", after: "😄 4:3 video 🙂" },
{ before: ":-D", after: "😄" },
{ before: ":D", after: "😄" },
{ before: ":3", after: "😽" },
];
const input = screen.getByRole("textbox");
for (const { before, after } of tranformations) {
await userEvent.clear(input);
//add a space after the text to trigger the replacement
await userEvent.type(input, before + " ");
const transformedText = model.parts.map((part) => part.text).join("");
expect(transformedText).toBe(after + " ");
}
});
});
function generateMockDataTransferForString(string: string): DataTransfer {