Add option to send/edit a message with Ctrl + Enter / Command + Enter

When editing multi-line text this option helps to prevent accidentally
sending a message too early. With this option, Enter just inserts a new
line.

For example, composing programming code in a dev chat becomes much
easier when Enter just inserts a new line instead of sending the
message.

Signed-off-by: Clemens Zeidler <clemens.zeidler@gmail.com>
This commit is contained in:
Clemens Zeidler 2020-08-30 20:17:08 +12:00
parent 83c2ae2479
commit db61d343f5
5 changed files with 19 additions and 4 deletions

View file

@ -29,9 +29,10 @@ import EditorStateTransfer from '../../../utils/EditorStateTransfer';
import classNames from 'classnames'; import classNames from 'classnames';
import {EventStatus} from 'matrix-js-sdk'; import {EventStatus} from 'matrix-js-sdk';
import BasicMessageComposer from "./BasicMessageComposer"; import BasicMessageComposer from "./BasicMessageComposer";
import {Key} from "../../../Keyboard"; import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {Action} from "../../../dispatcher/actions"; import {Action} from "../../../dispatcher/actions";
import SettingsStore from "../../../settings/SettingsStore";
function _isReply(mxEvent) { function _isReply(mxEvent) {
const relatesTo = mxEvent.getContent()["m.relates_to"]; const relatesTo = mxEvent.getContent()["m.relates_to"];
@ -135,7 +136,10 @@ export default class EditMessageComposer extends React.Component {
if (event.metaKey || event.altKey || event.shiftKey) { if (event.metaKey || event.altKey || event.shiftKey) {
return; return;
} }
if (event.key === Key.ENTER) { const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
const send = ctrlEnterToSend ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
: event.key === Key.ENTER;
if (send) {
this._sendEdit(); this._sendEdit();
event.preventDefault(); event.preventDefault();
} else if (event.key === Key.ESCAPE) { } else if (event.key === Key.ESCAPE) {

View file

@ -39,11 +39,12 @@ import * as sdk from '../../../index';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import {_t, _td} from '../../../languageHandler'; import {_t, _td} from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages'; import ContentMessages from '../../../ContentMessages';
import {Key} from "../../../Keyboard"; import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {MatrixClientPeg} from "../../../MatrixClientPeg"; import {MatrixClientPeg} from "../../../MatrixClientPeg";
import RateLimitedFunc from '../../../ratelimitedfunc'; import RateLimitedFunc from '../../../ratelimitedfunc';
import {Action} from "../../../dispatcher/actions"; import {Action} from "../../../dispatcher/actions";
import SettingsStore from "../../../settings/SettingsStore";
function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) { function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent); const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@ -122,7 +123,10 @@ export default class SendMessageComposer extends React.Component {
return; return;
} }
const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey; const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
if (event.key === Key.ENTER && !hasModifier) { const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
const send = ctrlEnterToSend ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
: event.key === Key.ENTER && !hasModifier;
if (send) {
this._sendMessage(); this._sendMessage();
event.preventDefault(); event.preventDefault();
} else if (event.key === Key.ARROW_UP) { } else if (event.key === Key.ARROW_UP) {

View file

@ -33,6 +33,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
'MessageComposerInput.autoReplaceEmoji', 'MessageComposerInput.autoReplaceEmoji',
'MessageComposerInput.suggestEmoji', 'MessageComposerInput.suggestEmoji',
'sendTypingNotifications', 'sendTypingNotifications',
'MessageComposerInput.ctrlEnterToSend',
]; ];
static TIMELINE_SETTINGS = [ static TIMELINE_SETTINGS = [

View file

@ -477,6 +477,7 @@
"Enable big emoji in chat": "Enable big emoji in chat", "Enable big emoji in chat": "Enable big emoji in chat",
"Send typing notifications": "Send typing notifications", "Send typing notifications": "Send typing notifications",
"Show typing notifications": "Show typing notifications", "Show typing notifications": "Show typing notifications",
"Use Ctrl + Enter to send a message (Mac: Command + Enter)": "Use Ctrl + Enter to send a message (Mac: Command + Enter)",
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji", "Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
"Mirror local video feed": "Mirror local video feed", "Mirror local video feed": "Mirror local video feed",
"Enable Community Filter Panel": "Enable Community Filter Panel", "Enable Community Filter Panel": "Enable Community Filter Panel",

View file

@ -321,6 +321,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
displayName: _td("Show typing notifications"), displayName: _td("Show typing notifications"),
default: true, default: true,
}, },
"MessageComposerInput.ctrlEnterToSend": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td("Use Ctrl + Enter to send a message (Mac: Command + Enter)"),
default: false,
},
"MessageComposerInput.autoReplaceEmoji": { "MessageComposerInput.autoReplaceEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Automatically replace plain text Emoji'), displayName: _td('Automatically replace plain text Emoji'),