Merge pull request #1035 from nextcloud/render-messages-from-html-source

render messages based on the source html

package.json

@@ -34,6 +34,7 @@
 		"@nextcloud/axios": "^1.4.0",
 		"@nextcloud/initial-state": "^1.1.2",
 		"@nextcloud/logger": "^1.1.2",
+		"@nextcloud/router": "^1.2.0",
 		"@nextcloud/vue": "^2.6.8",
 		"he": "^1.2.0",
 		"linkifyjs": "^2.1.8",

src/components/Emoji.vue

@@ -0,0 +1,37 @@
+<template>
+	<img class="emoji" draggable="false" :alt="emoji"
+		:src="emojiUrl">
+</template>
+
+<script>
+import { generateFilePath } from '@nextcloud/router'
+import twemoji from 'twemoji'
+
+// avoid using a string literal like '\u200D' here because minifiers expand it inline
+const U200D = String.fromCharCode(0x200D)
+const UFE0Fg = /\uFE0F/g
+
+export default {
+	name: 'Emoji',
+	props: {
+		emoji: { type: String, default: '' }
+	},
+	data: function() {
+		return {}
+	},
+	computed: {
+		icon() {
+			return twemoji.convert.toCodePoint(this.emoji.indexOf(U200D) < 0
+				? this.emoji.replace(UFE0Fg, '')
+				: this.emoji
+			)
+		},
+		emojiUrl() {
+			return generateFilePath('social', 'img', 'twemoji/' + this.icon + '.svg')
+		}
+	}
+}
+</script>
+<style scoped>
+
+</style>

src/components/TimelinePost.vue

@@ -31,7 +31,9 @@
 				</div>
 			</div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<div v-if="item.content" class="post-message" v-html="formatedMessage" />
+			<div v-if="item.content" class="post-message">
+				<MessageContent :source="source" />
+			</div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<div v-else class="post-message" v-html="item.actor_info.summary" />
 			<div v-if="hasAttachments" class="post-attachments">
@@ -62,6 +64,7 @@ import 'linkifyjs/string'
 import popoverMenu from './../mixins/popoverMenu'
 import currentUser from './../mixins/currentUserMixin'
 import PostAttachment from './PostAttachment.vue'
+import MessageContent from './MessageContent'
 
 pluginMention(linkify)
 
@@ -69,7 +72,8 @@ export default {
 	name: 'TimelinePost',
 	components: {
 		Avatar,
-		PostAttachment
+		PostAttachment,
+		MessageContent
 	},
 	mixins: [popoverMenu, currentUser],
 	props: {
@@ -104,24 +108,15 @@ export default {
 		timestamp() {
 			return Date.parse(this.item.published)
 		},
-		formatedMessage() {
-			let message = this.item.content
-			if (typeof message === 'undefined') {
-				return ''
-			}
-			message = message.linkify({
-				formatHref: {
-					mention: function(href) {
-						return OC.generateUrl('/apps/social/@' + href.substring(1))
-					}
+		source() {
+			if (!this.item.source && this.item.content) {
+				// local posts don't have a source json
+				return {
+					content: this.item.content,
+					tag: []
 				}
-			})
-			if (this.item.hashtags !== undefined) {
-				message = this.mangleHashtags(message)
 			}
-			message = message.replace(/(?:\r\n|\r|\n)/g, '<br>')
-			message = this.$twemoji.parse(message)
-			return message
+			return JSON.parse(this.item.source)
 		},
 		avatarUrl() {
 			return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo)
@@ -143,17 +138,6 @@ export default {
 		}
 	},
 	methods: {
-		mangleHashtags(msg) {
-			// Replace hashtag's href parameter with local ones
-			this.item.hashtags.forEach(tag => {
-				let patt = new RegExp('#' + tag, 'gi')
-				msg = msg.replace(patt, function(matched) {
-					var a = '<a href="' + OC.generateUrl('/apps/social/timeline/tags/' + matched.substring(1)) + '">' + matched + '</a>'
-					return a
-				})
-			})
-			return msg
-		},
 		userDisplayName(actorInfo) {
 			return actorInfo.name !== '' ? actorInfo.name : actorInfo.preferredUsername
 		},

src/router.js

@@ -104,7 +104,7 @@ export default new Router({
 				default: Profile,
 				details: ProfileTimeline
 			},
-			props: true,
+			props: true
 		}
 	]
 })