feat(NewMessageUploadEditor) - caption to file share

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -325,6 +325,7 @@ describe('Message.vue', () => {
 				const messageEl = wrapper.findComponent({ name: 'NcRichText' })
 				// note: indices as object keys are on purpose
 				expect(messageEl.props('arguments')).toMatchObject(expectedRichParameters)
+				return messageEl
 			}
 
 			test('renders mentions', () => {
@@ -364,7 +365,7 @@ describe('Message.vue', () => {
 				)
 			})
 
-			test('renders file previews', () => {
+			test('renders single file preview', () => {
 				const params = {
 					actor: {
 						id: 'alice',
@@ -391,6 +392,36 @@ describe('Message.vue', () => {
 				)
 			})
 
+			test('renders single file preview with caption', () => {
+				const caption = 'text caption'
+				const params = {
+					actor: {
+						id: 'alice',
+						name: 'Alice',
+						type: 'user',
+					},
+					file: {
+						path: 'some/path',
+						type: 'file',
+					},
+				}
+				const messageEl = renderRichObject(
+					caption,
+					params, {
+						actor: {
+							component: Mention,
+							props: params.actor,
+						},
+						file: {
+							component: FilePreview,
+							props: params.file,
+						},
+					}
+				)
+
+				expect(messageEl.props('text')).toBe('{file}' + '\n\n' + caption)
+			})
+
 			test('renders deck cards', () => {
 				const params = {
 					actor: {

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -47,19 +47,19 @@ the main body of the message as well as a quote.
 					class="message-body__main__text">
 					<Quote v-if="parent" v-bind="parent" />
 					<div class="single-emoji">
-						{{ message }}
+						{{ renderedMessage }}
 					</div>
 				</div>
 				<div v-else-if="showJoinCallButton" class="message-body__main__text call-started">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
 						:reference-limit="0" />
 					<CallButton />
 				</div>
 				<div v-else-if="showResultsButton || isSystemMessage" class="message-body__main__text system-message">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -72,7 +72,7 @@ the main body of the message as well as a quote.
 						show-as-button />
 				</div>
 				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -83,7 +83,7 @@ the main body of the message as well as a quote.
 					@mouseover="handleMarkdownMouseOver"
 					@mouseleave="handleMarkdownMouseLeave">
 					<Quote v-if="parent" v-bind="parent" />
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -502,6 +502,15 @@ export default {
 			return !this.isLastMessage && this.id === this.$store.getters.getVisualLastReadMessageId(this.token)
 		},
 
+		renderedMessage() {
+			if (this.messageParameters?.file && this.message !== '{file}') {
+				// Add a new line after file to split content into different paragraphs
+				return '{file}' + '\n\n' + this.message
+			} else {
+				return this.message
+			}
+		},
+
 		messageObject() {
 			return this.$store.getters.message(this.token, this.id)
 		},
@@ -568,7 +577,7 @@ export default {
 			let match
 			let emojiStrings = ''
 			let emojiCount = 0
-			const trimmedMessage = this.message.trim()
+			const trimmedMessage = this.renderedMessage.trim()
 
 			// eslint-disable-next-line no-cond-assign
 			while (match = regex.exec(trimmedMessage)) {

src/components/NewMessage/NewMessage.vue

@@ -109,7 +109,7 @@
 
 			<!-- Send buttons -->
 			<template v-else>
-				<NcActions v-if="!broadcast"
+				<NcActions v-if="!broadcast && !upload"
 					:container="container"
 					:force-menu="true">
 					<!-- Silent send -->
@@ -240,6 +240,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Upload files caption.
+		 */
+		upload: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Show an indicator if someone is currently typing a message.
 		 */
@@ -359,11 +367,11 @@ export default {
 		},
 
 		showAttachmentsMenu() {
-			return this.canShareFiles && !this.broadcast
+			return this.canShareFiles && !this.broadcast && !this.upload
 		},
 
 		showAudioRecorder() {
-			return !this.hasText && this.canUploadFiles && !this.broadcast
+			return !this.hasText && this.canUploadFiles && !this.broadcast && !this.upload
 		},
 		showTypingStatus() {
 			return this.hasTypingIndicator && this.supportTypingStatus
@@ -446,8 +454,15 @@ export default {
 		},
 
 		handleUploadStart() {
-			// refocus on upload start as the user might want to type again while the upload is running
-			this.focusInput()
+			if (this.upload) {
+				return
+			}
+			this.$nextTick(() => {
+				// reset main input in chat view after upload file with caption
+				this.text = this.$store.getters.currentMessageInput(this.token)
+				// refocus on upload start as the user might want to type again while the upload is running
+				this.focusInput()
+			})
 		},
 
 		/**
@@ -466,6 +481,12 @@ export default {
 				}
 			}
 
+			if (this.upload) {
+				this.$emit('sent', this.text)
+				this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: '' })
+				return
+			}
+
 			if (this.hasText) {
 				// FIXME upstream: https://github.com/nextcloud-libraries/nextcloud-vue/issues/4492
 				const temp = document.createElement('textarea')

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -21,6 +21,7 @@
 
 <template>
 	<NcModal v-if="showModal"
+		ref="modal"
 		:size="isVoiceMessage ? 'small' : 'normal'"
 		class="upload-editor"
 		:container="container"
@@ -39,9 +40,9 @@
 					tag="div"
 					group>
 					<template v-for="file in files">
-						<FilePreview :key="file.temporaryMessage.id"
+						<FilePreview :key="file[1].temporaryMessage.id"
 							:token="token"
-							v-bind="file.temporaryMessage.messageParameters.file"
+							v-bind="file[1].temporaryMessage.messageParameters.file"
 							:is-upload-editor="true"
 							@remove-file="handleRemoveFileFromSelection" />
 					</template>
@@ -62,14 +63,15 @@
 				<AudioPlayer :name="voiceMessageName"
 					:local-url="voiceMessageLocalURL" />
 			</template>
-			<div class="upload-editor__actions">
-				<NcButton type="tertiary" @click="handleDismiss">
-					{{ t('spreed', 'Dismiss') }}
-				</NcButton>
-				<NcButton ref="submitButton" type="primary" @click="handleUpload">
-					{{ t('spreed', 'Send') }}
-				</NcButton>
-			</div>
+			<NewMessage v-if="modalContainerId"
+				ref="newMessage"
+				role="region"
+				upload
+				:token="token"
+				:container="modalContainerId"
+				:aria-label="t('spreed', 'Post message')"
+				@sent="handleUpload"
+				@failure="handleDismiss" />
 		</div>
 	</NcModal>
 </template>
@@ -83,6 +85,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import AudioPlayer from '../MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue'
 import FilePreview from '../MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
+import NewMessage from './NewMessage.vue'
 import TransitionWrapper from '../TransitionWrapper.vue'
 
 export default {
@@ -94,9 +97,16 @@ export default {
 		Plus,
 		AudioPlayer,
 		NcButton,
+		NewMessage,
 		TransitionWrapper,
 	},
 
+	data() {
+		return {
+			modalContainerId: null,
+		}
+	},
+
 	computed: {
 		token() {
 			return this.$store.getters.getToken()
@@ -107,10 +117,7 @@ export default {
 		},
 
 		files() {
-			if (this.currentUploadId) {
-				return this.$store.getters.getInitialisedUploads(this.currentUploadId)
-			}
-			return []
+			return this.$store.getters.getInitialisedUploads(this.currentUploadId)
 		},
 
 		showModal() {
@@ -126,11 +133,10 @@ export default {
 		},
 
 		firstFile() {
-			return this.files[Object.keys(this.files)[0]]
+			return this.files?.at(0)?.at(1)
 		},
 
-		// Hide the plus button in case this editor is used while sending a voice
-		// message
+		// Hide the plus button in case this editor is used while sending a voice message
 		isVoiceMessage() {
 			if (!this.firstFile) {
 				return false
@@ -154,26 +160,30 @@ export default {
 	},
 
 	watch: {
-		showModal(show) {
+		async showModal(show) {
 			if (show) {
-				this.focus()
+				await this.getContainerId()
+				this.$nextTick(() => {
+					this.$refs.newMessage?.focusInput()
+				})
 			}
 		},
 	},
 
 	methods: {
-		focus() {
+		async getContainerId() {
 			this.$nextTick(() => {
-				this.$refs.submitButton.$el.focus()
+				// Postpone render of NewMessage until modal container is mounted
+				this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
 			})
 		},
 
 		handleDismiss() {
 			this.$store.dispatch('discardUpload', this.currentUploadId)
 		},
 
-		handleUpload() {
-			this.$store.dispatch('uploadFiles', this.currentUploadId)
+		handleUpload(caption) {
+			this.$store.dispatch('uploadFiles', { uploadId: this.currentUploadId, caption })
 		},
 		/**
 		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
@@ -204,21 +214,11 @@ export default {
 	padding: 16px;
 
 	&__previews {
-		overflow-x: hidden !important;
 		display: flex;
 		position: relative;
 		overflow: auto;
 		flex-wrap: wrap;
 	}
-	&__actions {
-		display: flex;
-		justify-content: space-between;
-		margin-top: 16px;
-		margin-bottom: 4px;
-		button {
-			margin: 0 4px 0 4px;
-		}
-	}
 }
 
 .add-more {
@@ -230,5 +230,4 @@ export default {
 		margin: auto;
 	}
 }
-
 </style>