Merge pull request #2955 from KeeJef/settings-update

feat: Allow enter to break line in settings

_locales/en/messages.json

@@ -411,6 +411,10 @@
   "open": "Open",
   "audioMessageAutoplayTitle": "Autoplay Audio Messages",
   "audioMessageAutoplayDescription": "Autoplay consecutive audio messages.",
+  "enterKeySettingTitle": "Enter Key",
+  "enterKeySettingDescription": "Function of the enter key when typing in a conversation.",
+  "enterSendNewMessageDescription": "ENTER sends a message, SHIFT + ENTER starts a new line",
+  "enterNewLineDescription": "SHIFT + ENTER sends a message, ENTER starts a new line",
   "clickToTrustContact": "Click to download media",
   "trustThisContactDialogTitle": "Trust $name$?",
   "trustThisContactDialogDescription": "Are you sure you want to download media sent by $name$?",

ts/components/basic/SessionRadioGroup.tsx

@@ -8,7 +8,7 @@ interface Props {
   initialItem: string;
   items: Array<{ value: string; label: string }>;
   group: string;
-  onClick: (selectedValue: string) => any;
+  onClick: (selectedValue: string) => void;
   style?: CSSProperties;
 }
 

ts/components/conversation/composition/CompositionBox.tsx

@@ -832,8 +832,19 @@ class CompositionBoxInner extends React.Component<Props, State> {
   }
 
   private async onKeyDown(event: any) {
-    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+    const isEnter = event.key === 'Enter';
-      // If shift, newline. If in IME composing mode, leave it to IME. Else send message.
+    const isShiftEnter = event.shiftKey && isEnter;
+    const isShiftSendEnabled = window.getSettingValue(SettingsKey.hasShiftSendEnabled) as boolean;
+    const isNotComposing = !event.nativeEvent.isComposing;
+
+    if (isShiftSendEnabled && isEnter && isNotComposing) {
+      event.preventDefault();
+      if (isShiftEnter) {
+        await this.onSendMessage();
+      } else {
+        this.insertNewLine();
+      }
+    } else if (isEnter && !event.shiftKey && isNotComposing) {
       event.preventDefault();
       await this.onSendMessage();
     } else if (event.key === 'Escape' && this.state.showEmojiPanel) {
@@ -845,6 +856,34 @@ class CompositionBoxInner extends React.Component<Props, State> {
     }
   }
 
+  private insertNewLine() {
+    const messageBox = this.textarea.current;
+    if (!messageBox) {
+      return;
+    }
+
+    const { draft } = this.state;
+    const { selectedConversationKey } = this.props;
+
+    if (!selectedConversationKey) {
+      return; // add this check to prevent undefined from being used
+    }
+
+    const currentSelectionStart = Number(messageBox.selectionStart);
+    const realSelectionStart = getSelectionBasedOnMentions(draft, currentSelectionStart);
+
+    const before = draft.slice(0, realSelectionStart);
+    const after = draft.slice(realSelectionStart);
+
+    const updatedDraft = `${before}\n${after}`;
+
+    this.setState({ draft: updatedDraft });
+    updateDraftForConversation({
+      conversationKey: selectedConversationKey,
+      draft: updatedDraft,
+    });
+  }
+
   private async onKeyUp() {
     if (!this.props.selectedConversationKey) {
       throw new Error('selectedConversationKey is needed');

ts/components/settings/section/CategoryConversations.tsx

@@ -6,10 +6,13 @@ import { SettingsKey } from '../../../data/settings-key';
 import { ToastUtils } from '../../../session/utils';
 import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { getAudioAutoplay } from '../../../state/selectors/userConfig';
-
+import { SessionRadioGroup } from '../../basic/SessionRadioGroup';
 import { BlockedContactsList } from '../BlockedList';
-
+import {
-import { SessionToggleWithDescription } from '../SessionSettingListItem';
+  SessionSettingsItemWrapper,
+  SessionToggleWithDescription,
+} from '../SessionSettingListItem';
+import { useHasEnterSendEnabled } from '../../../state/selectors/settings';
 
 async function toggleCommunitiesPruning() {
   try {
@@ -81,13 +84,49 @@ const AudioMessageAutoPlaySetting = () => {
   );
 };
 
+const EnterKeyFunctionSetting = () => {
+  const initialSetting = useHasEnterSendEnabled();
+  const selectedWithSettingTrue = 'enterForNewLine';
+
+  const items = [
+    {
+      label: window.i18n('enterSendNewMessageDescription'),
+      value: 'enterForSend',
+    },
+    {
+      label: window.i18n('enterNewLineDescription'),
+      value: selectedWithSettingTrue,
+    },
+  ];
+
+  return (
+    <SessionSettingsItemWrapper
+      title={window.i18n('enterKeySettingTitle')}
+      description={window.i18n('enterKeySettingDescription')}
+      inline={false}
+    >
+      <SessionRadioGroup
+        initialItem={initialSetting ? 'enterForNewLine' : 'enterForSend'}
+        group={SettingsKey.hasShiftSendEnabled} // make sure to define this key in your SettingsKey enum
+        items={items}
+        onClick={(selectedRadioValue: string) => {
+          void window.setSettingValue(
+            SettingsKey.hasShiftSendEnabled,
+            selectedRadioValue === selectedWithSettingTrue
+          );
+        }}
+      />
+    </SessionSettingsItemWrapper>
+  );
+};
+
 export const CategoryConversations = () => {
   return (
     <>
       <CommunitiesPruningSetting />
       <SpellCheckSetting />
       <AudioMessageAutoPlaySetting />
-
+      <EnterKeyFunctionSetting />
       <BlockedContactsList />
     </>
   );

ts/data/settings-key.ts

@@ -1,7 +1,7 @@
 const settingsReadReceipt = 'read-receipt-setting';
 const settingsTypingIndicator = 'typing-indicators-setting';
 const settingsAutoUpdate = 'auto-update';
-
+const hasShiftSendEnabled = 'hasShiftSendEnabled';
 const settingsMenuBar = 'hide-menu-bar';
 const settingsSpellCheck = 'spell-check';
 const settingsLinkPreview = 'link-preview-setting';
@@ -24,6 +24,7 @@ export const SettingsKey = {
   settingsReadReceipt,
   settingsTypingIndicator,
   settingsAutoUpdate,
+  hasShiftSendEnabled,
   settingsMenuBar,
   settingsSpellCheck,
   settingsLinkPreview,

ts/state/ducks/settings.tsx

@@ -8,6 +8,7 @@ const SettingsBoolsKeyTrackedInRedux = [
   SettingsKey.someDeviceOutdatedSyncing,
   SettingsKey.settingsLinkPreview,
   SettingsKey.hasBlindedMsgRequestsEnabled,
+  SettingsKey.hasShiftSendEnabled,
 ] as const;
 
 export type SettingsState = {
@@ -20,6 +21,7 @@ export function getSettingsInitialState() {
       someDeviceOutdatedSyncing: false,
       'link-preview-setting': false, // this is the value of SettingsKey.settingsLinkPreview
       hasBlindedMsgRequestsEnabled: false,
+      hasShiftSendEnabled: false,
     },
   };
 }
@@ -47,6 +49,8 @@ const settingsSlice = createSlice({
         SettingsKey.hasBlindedMsgRequestsEnabled,
         false
       );
+      const hasShiftSendEnabled = Storage.get(SettingsKey.hasShiftSendEnabled, false);
+
       state.settingsBools.someDeviceOutdatedSyncing = isBoolean(outdatedSync)
         ? outdatedSync
         : false;
@@ -54,6 +58,9 @@ const settingsSlice = createSlice({
       state.settingsBools.hasBlindedMsgRequestsEnabled = isBoolean(hasBlindedMsgRequestsEnabled)
         ? hasBlindedMsgRequestsEnabled
         : false;
+      state.settingsBools.hasShiftSendEnabled = isBoolean(hasShiftSendEnabled)
+        ? hasShiftSendEnabled
+        : false;
       return state;
     },
     updateSettingsBoolValue(state, action: PayloadAction<{ id: string; value: boolean }>) {

ts/state/selectors/settings.ts

@@ -11,6 +11,9 @@ const getHasDeviceOutdatedSyncing = (state: StateType) =>
 const getHasBlindedMsgRequestsEnabled = (state: StateType) =>
   state.settings.settingsBools[SettingsKey.hasBlindedMsgRequestsEnabled];
 
+const getHasShiftSendEnabled = (state: StateType) =>
+  state.settings.settingsBools[SettingsKey.hasShiftSendEnabled];
+
 export const useHasLinkPreviewEnabled = () => {
   const value = useSelector(getLinkPreviewEnabled);
   return Boolean(value);
@@ -25,3 +28,8 @@ export const useHasBlindedMsgRequestsEnabled = () => {
   const value = useSelector(getHasBlindedMsgRequestsEnabled);
   return Boolean(value);
 };
+
+export const useHasEnterSendEnabled = () => {
+  const value = useSelector(getHasShiftSendEnabled);
+  return Boolean(value);
+};

ts/types/LocalizerKeys.ts

@@ -169,9 +169,13 @@ export type LocalizerKeys =
   | 'endCall'
   | 'enterAnOpenGroupURL'
   | 'enterDisplayName'
+  | 'enterKeySettingDescription'
+  | 'enterKeySettingTitle'
+  | 'enterNewLineDescription'
   | 'enterNewPassword'
   | 'enterPassword'
   | 'enterRecoveryPhrase'
+  | 'enterSendNewMessageDescription'
   | 'enterSessionID'
   | 'enterSessionIDOfRecipient'
   | 'enterSessionIDOrONSName'