mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 19:25:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix {enter} press in RTE (#9927)

Browse source 
Fix enter combination in RTE
This commit is contained in:
Florian Duros 2023-01-19 10:17:18 +01:00 committed by GitHub
parent eb43f3449e
commit b47588fc5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
View file

@ -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(
@ -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();

40
test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
View file

@ -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";
@ -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", () => {