diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue index 42ef3d3e4999c..fb08778b9d2aa 100644 --- a/apps/comments/src/components/Comment.vue +++ b/apps/comments/src/components/Comment.vue @@ -90,14 +90,12 @@ - - -
- + :class="{'comment__message--expanded': expanded}" + :text="richContent.message" + :arguments="richContent.mentions" + @click="onExpand" /> @@ -113,7 +111,7 @@ import NcAvatar from '@nextcloud/vue/components/NcAvatar' import NcButton from '@nextcloud/vue/components/NcButton' import NcDateTime from '@nextcloud/vue/components/NcDateTime' import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' -import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js' +import NcUserBubble from '@nextcloud/vue/components/NcUserBubble' import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue' import IconClose from 'vue-material-design-icons/Close.vue' @@ -126,6 +124,7 @@ import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js' // Dynamic loading const NcRichContenteditable = () => import('@nextcloud/vue/components/NcRichContenteditable') +const NcRichText = () => import('@nextcloud/vue/components/NcRichText') export default { name: 'Comment', @@ -143,8 +142,9 @@ export default { NcDateTime, NcLoadingIcon, NcRichContenteditable, + NcRichText, }, - mixins: [RichEditorMixin, CommentMixin], + mixins: [CommentMixin], inheritAttrs: false, @@ -177,6 +177,10 @@ export default { type: Function, required: true, }, + userData: { + type: Object, + default: () => ({}), + }, tag: { type: String, @@ -206,16 +210,25 @@ export default { return getCurrentUser().uid === this.actorId }, - /** - * Rendered content as html string - * - * @return {string} - */ - renderedContent() { - if (this.isEmptyMessage) { - return '' - } - return this.renderContent(this.localMessage) + richContent() { + const mentions = {} + let message = this.localMessage + + Object.keys(this.userData).forEach((user, index) => { + const key = `mention-${index}` + const regex = new RegExp(`@${user}|@"${user}"`, 'g') + message = message.replace(regex, `{${key}}`) + mentions[key] = { + component: NcUserBubble, + props: { + user, + displayName: this.userData[user].label, + primary: this.userData[user].primary, + }, + } + }) + + return { mentions, message } }, isEmptyMessage() { diff --git a/dist/3920-3920.js.license b/dist/3920-3920.js.license index a8c6e18355875..cb625bd2b5d3f 100644 --- a/dist/3920-3920.js.license +++ b/dist/3920-3920.js.license @@ -350,6 +350,9 @@ This file is generated from multiple sources. Included packages: - vue-material-design-icons - version: 5.3.1 - license: MIT +- vue-router + - version: 3.6.5 + - license: MIT - vue - version: 2.7.16 - license: MIT diff --git a/dist/4508-4508.js b/dist/4508-4508.js new file mode 100644 index 0000000000000..939141ac11b97 --- /dev/null +++ b/dist/4508-4508.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknextcloud=self.webpackChunknextcloud||[]).push([[4508],{64508:(e,r,i)=>{i.r(r),i.d(r,{NcCustomPickerRenderResult:()=>t.N,NcReferenceList:()=>c.a,NcReferencePicker:()=>d.e,NcReferencePickerModal:()=>d.f,NcReferenceWidget:()=>d.N,NcRichText:()=>c.N,NcSearch:()=>d.h,anyLinkProviderId:()=>d.a,default:()=>c.N,getLinkWithPicker:()=>d.g,getProvider:()=>d.b,getProviders:()=>d.c,isCustomPickerElementRegistered:()=>t.d,isWidgetRegistered:()=>t.i,registerCustomPickerElement:()=>t.b,registerWidget:()=>t.r,renderCustomPickerElement:()=>t.c,renderWidget:()=>t.a,searchProvider:()=>d.d,sortProviders:()=>d.s});var c=i(51919),t=i(73933),d=i(13851)}}]); \ No newline at end of file diff --git a/dist/4508-4508.js.license b/dist/4508-4508.js.license new file mode 100644 index 0000000000000..63bb1ca0968f4 --- /dev/null +++ b/dist/4508-4508.js.license @@ -0,0 +1,396 @@ +SPDX-License-Identifier: MIT +SPDX-License-Identifier: ISC +SPDX-License-Identifier: GPL-3.0-or-later +SPDX-License-Identifier: BSD-3-Clause +SPDX-License-Identifier: BSD-2-Clause +SPDX-License-Identifier: AGPL-3.0-or-later +SPDX-License-Identifier: (MPL-2.0 OR Apache-2.0) +SPDX-FileCopyrightText: rhysd