Merge pull request #2476 from nextcloud/enh/linkify-comments

Linkify comments

1 files changed, 13 insertions, 4 deletions

diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 7ef6c66f..29954702 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -29,9 +29,11 @@
 			<div v-for="(subComment) in comment.subComments"
 				:key="subComment.id"
 				class="comment-item__subcomment">
-				<span class="comment-item__comment">
-					{{ subComment.comment }}
-				</span>
+				<!-- eslint-disable vue/no-v-html -->
+				<span class="comment-item__comment"
+					v-html="linkify(subComment.comment)" />
+				<!-- eslint-enable vue/no-v-html -->
+
 				<ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner"
 					:title="t('polls', 'Delete comment')"
 					@delete="deleteComment(subComment)" />
@@ -42,6 +44,7 @@
 
 <script>
 import moment from '@nextcloud/moment'
+import linkifyStr from 'linkify-string'
 import { showError } from '@nextcloud/dialogs'
 import { mapState } from 'vuex'
 import ActionDelete from '../Actions/ActionDelete.vue'
@@ -69,6 +72,10 @@ export default {
 	},
 
 	methods: {
+		linkify(comment) {
+			return linkifyStr(comment)
+		},
+
 		async deleteComment(comment) {
 			try {
 				await this.$store.dispatch({ type: 'comments/delete', comment })
@@ -123,10 +130,12 @@ export default {
 				}
 			}
 		}
-
 		.comment-item__comment {
 			hyphens: auto;
 			flex: 1;
+			a {
+				text-decoration-line: underline;
+			}
 		}
 	}