Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix {enter} press in RTE #9927

Merged
merged 6 commits into from
Jan 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ import { useCallback } from "react";

import { useSettingValue } from "../../../../../hooks/useSettings";

function isEnterPressed(event: KeyboardEvent): boolean {
// Ugly but here we need to send the message only if Enter is pressed
// And we need to stop the event propagation on enter to avoid the composer to grow
return event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey;
}

export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent) => WysiwygEvent | null {
const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
return useCallback(
Expand All @@ -28,12 +34,12 @@ export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent
}

const isKeyboardEvent = event instanceof KeyboardEvent;
const isEnterPress =
!isCtrlEnter && (isKeyboardEvent ? event.key === "Enter" : event.inputType === "insertParagraph");
// sendMessage is sent when ctrl+enter is pressed
const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
const isEnterPress = !isCtrlEnter && isKeyboardEvent && isEnterPressed(event);
const isInsertParagraph = !isCtrlEnter && !isKeyboardEvent && event.inputType === "insertParagraph";
// sendMessage is sent when cmd+enter is pressed
const isSendMessage = isCtrlEnter && !isKeyboardEvent && event.inputType === "sendMessage";

if (isEnterPress || isSendMessage) {
if (isEnterPress || isInsertParagraph || isSendMessage) {
event.stopPropagation?.();
event.preventDefault?.();
onSend();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ limitations under the License.
import "@testing-library/jest-dom";
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import { WysiwygComposer } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
Expand Down Expand Up @@ -87,6 +88,45 @@ describe("WysiwygComposer", () => {
// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(1));
});

it("Should not call onSend when Shift+Enter is pressed ", async () => {
//When
await userEvent.type(screen.getByRole("textbox"), "{shift>}{enter}");

// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(0));
});

it("Should not call onSend when ctrl+Enter is pressed ", async () => {
//When
// Using userEvent.type or .keyboard wasn't working as expected in the case of ctrl+enter
fireEvent(
screen.getByRole("textbox"),
new KeyboardEvent("keydown", {
ctrlKey: true,
code: "Enter",
}),
);

// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(0));
});

it("Should not call onSend when alt+Enter is pressed ", async () => {
//When
await userEvent.type(screen.getByRole("textbox"), "{alt>}{enter}");

// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(0));
});

it("Should not call onSend when meta+Enter is pressed ", async () => {
//When
await userEvent.type(screen.getByRole("textbox"), "{meta>}{enter}");

// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(0));
});
});

describe("When settings require Ctrl+Enter to send", () => {
Expand Down