Merge pull request #2466 from nextcloud/bugfix/2388/fix-new-lines-in-message

Correctly render newlines in text

package.json

@@ -25,6 +25,7 @@
 		"crypto-js": "^3.1.9-1",
 		"debounce": "^1.2.0",
 		"emoji-regex": "^8.0.0",
+		"escape-html": "^1.0.3",
 		"nextcloud-vue-collections": "^0.6.0",
 		"vue": "^2.6.10",
 		"vue-clipboard2": "^0.3.1",

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

@@ -20,10 +20,12 @@
 -->
 
 <template>
-	<span>{{ data.text }}</span>
+	<span v-html="text" />
 </template>
 
 <script>
+import escapeHtml from 'escape-html'
+
 export default {
 	name: 'PlainText',
 	props: {
@@ -32,5 +34,11 @@ export default {
 			required: true,
 		},
 	},
+
+	computed: {
+		text() {
+			return escapeHtml(this.data.text).replace(/\n/g, '<br>')
+		},
+	},
 }
 </script>

src/components/NewMessageForm/NewMessageForm.vue

@@ -83,6 +83,8 @@ export default {
 		 * @returns {Object}
 		 */
 		createTemporaryMessage() {
+			console.error(this.text)
+
 			const message = Object.assign({}, {
 				id: this.createTemporaryMessageId(),
 				actorId: this.$store.getters.getActorId(),