Added setting to change preferred key for sending messages

lib/Controller/SettingsController.php

@@ -26,6 +26,7 @@
 namespace OCA\Talk\Controller;
 
 use OCA\Files_Sharing\SharedStorage;
+use OCA\Talk\Participant;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\OCSController;
@@ -79,7 +80,10 @@ public function setUserSetting(string $key, ?string $value): DataResponse {
 	}
 
 	protected function validateUserSetting(string $setting, ?string $value): bool {
-		if ($setting === 'attachment_folder') {
+		if ($setting === 'send_message_key') {
+			return $value === Participant::SEND_MESSAGE_KEY_ENTER
+				|| $value === Participant::SEND_MESSAGE_KEY_SHIFT_ENTER;
+		} elseif ($setting === 'attachment_folder') {
 			$userFolder = $this->rootFolder->getUserFolder($this->userId);
 			try {
 				$node = $userFolder->get($value);

lib/Participant.php

@@ -47,6 +47,9 @@ class Participant {
 	public const NOTIFY_MENTION = 2;
 	public const NOTIFY_NEVER = 3;
 
+	public const SEND_MESSAGE_KEY_ENTER = 'enter';
+	public const SEND_MESSAGE_KEY_SHIFT_ENTER = 'shift_enter';
+
 	/** @var IDBConnection */
 	protected $db;
 	/** @var IConfig */

lib/TInitialState.php

@@ -82,6 +82,13 @@ protected function publishInitialStateForUser(IUser $user, IRootFolder $rootFold
 			$appManager->isEnabledForUser('circles', $user)
 		);
 
+		$this->initialStateService->provideInitialState(
+			'talk', 'send_message_key',
+			$this->serverConfig->getUserValue(
+				$user->getUID(), 'spreed', 'send_message_key', Participant::SEND_MESSAGE_KEY_ENTER
+			)
+		);
+
 		$attachmentFolder = $this->talkConfig->getAttachmentFolder($user->getUID());
 
 		if ($attachmentFolder) {
@@ -127,6 +134,10 @@ protected function publishInitialStateForGuest(): void {
 			''
 		);
 
+		$this->initialStateService->provideInitialState(
+			'talk', 'send_message_key', Participant::SEND_MESSAGE_KEY_ENTER
+		);
+
 		$this->initialStateService->provideInitialState(
 			'talk', 'enable_matterbridge',
 			false

src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue

@@ -198,6 +198,14 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		/**
+		 * Whether to use the shift-enter key to submitting instead of enter
+		 */
+		submitWithShiftEnter: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data: function() {
 		return {
@@ -303,7 +311,7 @@ export default {
 			}
 
 			// TODO: add support for CTRL+ENTER new line
-			if (!(event.shiftKey)) {
+			if (event.shiftKey === this.submitWithShiftEnter) {
 				event.preventDefault()
 				this.$emit('submit', event)
 			}

src/components/NewMessageForm/NewMessageForm.vue

@@ -80,6 +80,7 @@
 						ref="advancedInput"
 						v-model="text"
 						:token="token"
+						:submit-with-shift-enter="submitWithShiftEnter"
 						@update:contentEditable="contentEditableToParsed"
 						@submit="handleSubmit"
 						@files-pasted="handleFiles" />
@@ -104,7 +105,7 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
 import { shareFile } from '../../services/filesSharingServices'
 import { processFiles } from '../../utils/fileUpload'
-import { CONVERSATION } from '../../constants'
+import { CONVERSATION, SEND_MESSAGE_KEY } from '../../constants'
 import createTemporaryMessage from '../../utils/temporaryMessage'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline'
 
@@ -142,6 +143,10 @@ export default {
 			return this.$store.getters.getToken()
 		},
 
+		submitWithShiftEnter() {
+			return this.$store.getters.getSendMessageKey() === SEND_MESSAGE_KEY.SHIFT_ENTER
+		},
+
 		conversation() {
 			return this.$store.getters.conversation(this.token) || {
 				readOnly: CONVERSATION.STATE.READ_WRITE,
@@ -159,10 +164,6 @@ export default {
 		canShareAndUploadFiles() {
 			return !this.currentUserIsGuest && this.conversation.readOnly === CONVERSATION.STATE.READ_WRITE
 		},
-
-		attachmentFolder() {
-			return this.$store.getters.getAttachmentFolder()
-		},
 	},
 
 	watch: {
@@ -202,7 +203,26 @@ export default {
 		 * @returns {String} the parsed text
 		 */
 		rawToParsed(text) {
+			// first div doesn't count
+			text = text.replace(/^<div>/g, '')
+
+			// newlines from enter key
+			//   extra newlines
+			text = text.replace(/<div><br><\/div>/g, '\n')
+			//   regular newlines
+			text = text.replace(/<div>/g, '\n')
+
+			// newlines from shift+enter key
 			text = text.replace(/<br>/g, '\n')
+
+			// clear formatting tags (for now)i
+			// some browsers natively allow users to insert those with ctrl+b or ctrl+i
+			text = text.replace(/<\/?i>/g, '')
+			text = text.replace(/<\/?b>/g, '')
+
+			// clean up
+			text = text.replace(/<\/div>/g, '')
+
 			text = text.replace(/&nbsp;/g, ' ')
 
 			// Since we used innerHTML to get the content of the div.contenteditable

src/components/SettingsDialog/SettingsDialog.vue

@@ -49,7 +49,22 @@
 					{{ t('spreed', 'Keyboard shortcuts') }}
 				</h2>
 
-				<p>{{ t('spreed', 'Speed up your Talk experience with these quick shortcuts.') }}</p>
+				<div v-if="!isGuest">
+					<input
+						id="app-settings-send-message-key"
+						type="checkbox"
+						class="checkbox"
+						:checked="sendMessageKeyIsShiftEnter"
+						:disabled="sendMessageKeyLoading"
+						@change="updateSendMessageKey($event)">
+					<label for="app-settings-send-message-key">
+						{{ t('spreed', 'Shift-Enter sends messages instead of Enter') }}
+					</label>
+				</div>
+
+				<h3 class="app-settings-section__hint">
+					{{ t('spreed', 'Speed up your Talk experience with these quick shortcuts.') }}
+				</h3>
 
 				<dl>
 					<div>
@@ -101,8 +116,9 @@
 <script>
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
-import { setAttachmentFolder } from '../../services/settingsService'
+import { setAttachmentFolder, setSendMessageKey } from '../../services/settingsService'
 import { EventBus } from '../../services/EventBus'
+import { SEND_MESSAGE_KEY } from '../../constants'
 import MediaDevicesPreview from '../MediaDevicesPreview'
 
 export default {
@@ -117,6 +133,7 @@ export default {
 		return {
 			showSettings: false,
 			attachmentFolderLoading: true,
+			sendMessageKeyLoading: true,
 		}
 	},
 
@@ -125,6 +142,10 @@ export default {
 			return this.$store.getters.getAttachmentFolder()
 		},
 
+		sendMessageKeyIsShiftEnter() {
+			return this.$store.getters.getSendMessageKey() === SEND_MESSAGE_KEY.SHIFT_ENTER
+		},
+
 		locationHint() {
 			return t('spreed', 'Choose in which folder attachments should be saved.')
 		},
@@ -137,6 +158,7 @@ export default {
 	mounted() {
 		EventBus.$on('show-settings', this.handleShowSettings)
 		this.attachmentFolderLoading = false
+		this.sendMessageKeyLoading = false
 	},
 
 	methods: {
@@ -170,6 +192,20 @@ export default {
 				})
 		},
 
+		async updateSendMessageKey(event) {
+			const newValue = event.target.checked ? SEND_MESSAGE_KEY.SHIFT_ENTER : SEND_MESSAGE_KEY.ENTER
+			this.sendMessageKeyLoading = true
+
+			try {
+				this.$store.commit('updateSendMessageKey', newValue)
+				await setSendMessageKey(newValue)
+			} catch (exception) {
+				showError(t('spreed', 'Error while setting the send message key'))
+			}
+
+			this.sendMessageKeyLoading = false
+		},
+
 		handleShowSettings(showSettings) {
 			this.showSettings = showSettings
 		},

src/constants.js

@@ -85,3 +85,8 @@ export const FLOW = {
 		ROOM_MENTION: 3,
 	},
 }
+
+export const SEND_MESSAGE_KEY = {
+	ENTER: 'enter',
+	SHIFT_ENTER: 'shift_enter',
+}

src/services/settingsService.js

@@ -24,7 +24,7 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 
 /**
- * Gets the conversation token for a given file id
+ * Sets the attachment folder setting for the user
  *
  * @param {string} path The name of the folder
  * @returns {Object} The axios response
@@ -36,6 +36,20 @@ const setAttachmentFolder = async function(path) {
 	})
 }
 
+/**
+ * Sets the flag for sending messages with shift+enter
+ *
+ * @param {String} key key
+ * @returns {Object} The axios response
+ */
+const setSendMessageKey = async function(key) {
+	return axios.post(generateOcsUrl('apps/spreed/api/v1/settings', 2) + 'user', {
+		key: 'send_message_key',
+		value: key,
+	})
+}
+
 export {
 	setAttachmentFolder,
+	setSendMessageKey,
 }

src/store/index.js

@@ -29,6 +29,7 @@ import messagesStore from './messagesStore'
 import participantsStore from './participantsStore'
 import quoteReplyStore from './quoteReplyStore'
 import sidebarStore from './sidebarStore'
+import settingsStore from './settingsStore'
 import tokenStore from './tokenStore'
 import windowVisibilityStore from './windowVisibilityStore'
 import fileUploadStore from './fileUploadStore'
@@ -49,6 +50,7 @@ export default new Store({
 		participantsStore,
 		quoteReplyStore,
 		sidebarStore,
+		settingsStore,
 		tokenStore,
 		windowVisibilityStore,
 		fileUploadStore,

src/store/settingsStore.js

@@ -0,0 +1,65 @@
+/**
+ * @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+
+const state = {
+	sendMessageKey: loadState('talk', 'send_message_key'),
+}
+
+const getters = {
+	/**
+	 * Returns the preferred keyboard key for sending messages.
+	 * See SEND_MESSAGE_KEY constants.
+	 *
+	 * @param {object} state state
+	 * @returns {string} key key to use
+	 */
+	getSendMessageKey: (state) => () => {
+		return state.sendMessageKey
+	},
+}
+
+const mutations = {
+	/**
+	 * Set preferred keyboard key for sending messages
+	 * See SEND_MESSAGE_KEY constants.
+	 *
+	 * @param {object} state current store state;
+	 * @param {String} key key to use
+	 */
+	updateSendMessageKey(state, key) {
+		state.sendMessageKey = key
+	},
+}
+
+const actions = {
+	/**
+	 * Set preferred key for sending messages
+	 *
+	 * @param {object} context default store context;
+	 * @param {String} key key to use
+	 */
+	updateSendMessageKey(context, key) {
+		context.commit('updateSendMessageKey', key)
+	},
+}
+
+export default { state, mutations, getters, actions }