Merge pull request #51268 from nextcloud/backport/51239/stable31

[stable31] fix(Comment): replace richEditor mixin with NcRichText
2026-06-10 17:23:59 -04:00 · 2025-03-05 11:49:31 +01:00 · 2025-03-05 11:49:31 +01:00 · b88e3b730f
commit b88e3b730f
parent 4a07ee3a84 acf6ac7fc1
25 changed files with 480 additions and 46 deletions
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@ -90,14 +90,12 @@
 			</form>

 			<!-- Message content -->
-			<!-- The html is escaped and sanitized before rendering -->
-			<!-- eslint-disable vue/no-v-html-->
-			<div v-else
-				:class="{'comment__message--expanded': expanded}"
+			<NcRichText v-else
 				class="comment__message"
-				@click="onExpand"
-				v-html="renderedContent" />
-			<!-- eslint-enable vue/no-v-html-->
+				:class="{'comment__message--expanded': expanded}"
+				:text="richContent.message"
+				:arguments="richContent.mentions"
+				@click="onExpand" />
 		</div>
 	</component>
 </template>
@ -113,7 +111,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'

 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/dist/Components/NcRichContenteditable.js')
+const NcRichText = () => import('@nextcloud/vue/dist/Components/NcRichText.js')

 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() {
--- a/dist/3920-3920.js.license
+++ b/dist/3920-3920.js.license
@ -362,6 +362,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
--- a/dist/4508-4508.js
+++ 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(40935),t=i(73933),d=i(34301)}}]);
--- a/dist/4508-4508.js.license
+++ b/dist/4508-4508.js.license
@ -0,0 +1,408 @@
+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 <lin90162@yahoo.co.jp>
+SPDX-FileCopyrightText: inline-style-parser developers
+SPDX-FileCopyrightText: escape-html developers
+SPDX-FileCopyrightText: atomiks
+SPDX-FileCopyrightText: Victor Felder <victor@draft.li> (https://draft.li)
+SPDX-FileCopyrightText: Tobias Koppers @sokra
+SPDX-FileCopyrightText: Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
+SPDX-FileCopyrightText: T. Jameson Little <t.jameson.little@gmail.com>
+SPDX-FileCopyrightText: Stefan Thomas <justmoon@members.fsf.org> (http://www.justmoon.net)
+SPDX-FileCopyrightText: Sindre Sorhus
+SPDX-FileCopyrightText: Roman Shtylman <shtylman@gmail.com>
+SPDX-FileCopyrightText: Roeland Jago Douma
+SPDX-FileCopyrightText: Paul Vorbach <paul@vorba.ch> (http://paul.vorba.ch)
+SPDX-FileCopyrightText: Paul Vorbach <paul@vorb.de> (http://vorb.de)
+SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+SPDX-FileCopyrightText: Matt Zabriskie
+SPDX-FileCopyrightText: Mark <mark@remarkablemark.org>
+SPDX-FileCopyrightText: Mapbox
+SPDX-FileCopyrightText: John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)
+SPDX-FileCopyrightText: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+SPDX-FileCopyrightText: Jeff Sagal <sagalbot@gmail.com>
+SPDX-FileCopyrightText: Jacob Clevenger<https://github.com/wheatjs>
+SPDX-FileCopyrightText: Hypercontext
+SPDX-FileCopyrightText: Guillaume Chau <guillaume.b.chau@gmail.com>
+SPDX-FileCopyrightText: GitHub Inc.
+SPDX-FileCopyrightText: Feross Aboukhadijeh
+SPDX-FileCopyrightText: Evan You
+SPDX-FileCopyrightText: Eugene Sharygin <eush77@gmail.com>
+SPDX-FileCopyrightText: Eric Norris (https://github.com/ericnorris)
+SPDX-FileCopyrightText: Dr.-Ing. Mario Heiderich, Cure53 <mario@cure53.de> (https://cure53.de/)
+SPDX-FileCopyrightText: David Clark
+SPDX-FileCopyrightText: Christoph Wurst
+SPDX-FileCopyrightText: Anthony Fu <https://github.com/antfu>
+SPDX-FileCopyrightText: Andris Reinman
+SPDX-FileCopyrightText: Andrea Giammarchi
+
+
+This file is generated from multiple sources. Included packages:
+- @floating-ui/core
+	- version: 1.6.5
+	- license: MIT
+- @floating-ui/utils
+	- version: 0.2.5
+	- license: MIT
+- unist-util-is
+	- version: 3.0.0
+	- license: MIT
+- unist-util-visit-parents
+	- version: 2.1.2
+	- license: MIT
+- unist-util-visit
+	- version: 1.4.1
+	- license: MIT
+- @mapbox/hast-util-table-cell-style
+	- version: 0.2.1
+	- license: BSD-2-Clause
+- @nextcloud/auth
+	- version: 2.4.0
+	- license: GPL-3.0-or-later
+- @nextcloud/axios
+	- version: 2.5.1
+	- license: GPL-3.0-or-later
+- @nextcloud/browser-storage
+	- version: 0.4.0
+	- license: GPL-3.0-or-later
+- @nextcloud/capabilities
+	- version: 1.2.0
+	- license: GPL-3.0-or-later
+- semver
+	- version: 7.6.3
+	- license: ISC
+- @nextcloud/event-bus
+	- version: 3.3.1
+	- license: GPL-3.0-or-later
+- @nextcloud/initial-state
+	- version: 2.2.0
+	- license: GPL-3.0-or-later
+- @nextcloud/l10n
+	- version: 3.1.0
+	- license: GPL-3.0-or-later
+- @nextcloud/logger
+	- version: 3.0.2
+	- license: GPL-3.0-or-later
+- @nextcloud/router
+	- version: 3.0.1
+	- license: GPL-3.0-or-later
+- @nextcloud/sharing
+	- version: 0.2.4
+	- license: GPL-3.0-or-later
+- @nextcloud/vue-select
+	- version: 3.25.1
+	- license: MIT
+- @nextcloud/vue
+	- version: 8.22.0
+	- license: AGPL-3.0-or-later
+- @ungap/structured-clone
+	- version: 1.2.0
+	- license: ISC
+- @vueuse/components
+	- version: 11.1.0
+	- license: MIT
+- @vueuse/core
+	- version: 11.1.0
+	- license: MIT
+- @vueuse/shared
+	- version: 11.1.0
+	- license: MIT
+- axios
+	- version: 1.7.9
+	- license: MIT
+- bail
+	- version: 2.0.2
+	- license: MIT
+- base64-js
+	- version: 1.5.1
+	- license: MIT
+- ccount
+	- version: 2.0.1
+	- license: MIT
+- charenc
+	- version: 0.0.2
+	- license: BSD-3-Clause
+- comma-separated-tokens
+	- version: 2.0.3
+	- license: MIT
+- crypt
+	- version: 0.0.2
+	- license: BSD-3-Clause
+- css-loader
+	- version: 7.1.2
+	- license: MIT
+- decode-named-character-reference
+	- version: 1.0.2
+	- license: MIT
+- devlop
+	- version: 1.1.0
+	- license: MIT
+- dompurify
+	- version: 3.1.7
+	- license: (MPL-2.0 OR Apache-2.0)
+- escape-html
+	- version: 1.0.3
+	- license: MIT
+- extend
+	- version: 3.0.2
+	- license: MIT
+- floating-vue
+	- version: 1.0.0-beta.19
+	- license: MIT
+- focus-trap
+	- version: 7.6.4
+	- license: MIT
+- hast-to-hyperscript
+	- version: 10.0.3
+	- license: MIT
+- hast-util-is-element
+	- version: 3.0.0
+	- license: MIT
+- hast-util-whitespace
+	- version: 2.0.1
+	- license: MIT
+- ieee754
+	- version: 1.2.1
+	- license: BSD-3-Clause
+- inline-style-parser
+	- version: 0.1.1
+	- license: MIT
+- is-absolute-url
+	- version: 4.0.1
+	- license: MIT
+- is-buffer
+	- version: 1.1.6
+	- license: MIT
+- is-plain-obj
+	- version: 4.1.0
+	- license: MIT
+- linkify-string
+	- version: 4.1.3
+	- license: MIT
+- lodash.get
+	- version: 4.4.2
+	- license: MIT
+- longest-streak
+	- version: 3.1.0
+	- license: MIT
+- markdown-table
+	- version: 3.0.3
+	- license: MIT
+- md5
+	- version: 2.3.0
+	- license: BSD-3-Clause
+- escape-string-regexp
+	- version: 5.0.0
+	- license: MIT
+- mdast-util-find-and-replace
+	- version: 3.0.1
+	- license: MIT
+- mdast-util-from-markdown
+	- version: 2.0.1
+	- license: MIT
+- mdast-util-gfm-autolink-literal
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-gfm-footnote
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-gfm-strikethrough
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-gfm-table
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-gfm-task-list-item
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-gfm
+	- version: 3.0.0
+	- license: MIT
+- mdast-util-newline-to-break
+	- version: 2.0.0
+	- license: MIT
+- mdast-util-phrasing
+	- version: 4.1.0
+	- license: MIT
+- mdast-util-to-hast
+	- version: 13.2.0
+	- license: MIT
+- mdast-util-to-markdown
+	- version: 2.1.0
+	- license: MIT
+- mdast-util-to-string
+	- version: 4.0.0
+	- license: MIT
+- micromark-core-commonmark
+	- version: 2.0.1
+	- license: MIT
+- micromark-extension-gfm-autolink-literal
+	- version: 2.1.0
+	- license: MIT
+- micromark-extension-gfm-footnote
+	- version: 2.1.0
+	- license: MIT
+- micromark-extension-gfm-strikethrough
+	- version: 2.1.0
+	- license: MIT
+- micromark-extension-gfm-table
+	- version: 2.1.0
+	- license: MIT
+- micromark-extension-gfm-tagfilter
+	- version: 2.0.0
+	- license: MIT
+- micromark-extension-gfm-task-list-item
+	- version: 2.1.0
+	- license: MIT
+- micromark-extension-gfm
+	- version: 3.0.0
+	- license: MIT
+- micromark-factory-destination
+	- version: 2.0.0
+	- license: MIT
+- micromark-factory-label
+	- version: 2.0.0
+	- license: MIT
+- micromark-factory-space
+	- version: 2.0.0
+	- license: MIT
+- micromark-factory-title
+	- version: 2.0.0
+	- license: MIT
+- micromark-factory-whitespace
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-character
+	- version: 2.1.0
+	- license: MIT
+- micromark-util-chunked
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-classify-character
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-combine-extensions
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-decode-numeric-character-reference
+	- version: 2.0.1
+	- license: MIT
+- micromark-util-decode-string
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-encode
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-html-tag-name
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-normalize-identifier
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-resolve-all
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-sanitize-uri
+	- version: 2.0.0
+	- license: MIT
+- micromark-util-subtokenize
+	- version: 2.0.1
+	- license: MIT
+- micromark
+	- version: 4.0.0
+	- license: MIT
+- node-gettext
+	- version: 3.0.0
+	- license: MIT
+- buffer
+	- version: 6.0.3
+	- license: MIT
+- process
+	- version: 0.11.10
+	- license: MIT
+- property-information
+	- version: 6.5.0
+	- license: MIT
+- rehype-external-links
+	- version: 3.0.0
+	- license: MIT
+- rehype-react
+	- version: 7.2.0
+	- license: MIT
+- remark-breaks
+	- version: 4.0.0
+	- license: MIT
+- remark-gfm
+	- version: 4.0.0
+	- license: MIT
+- remark-parse
+	- version: 11.0.0
+	- license: MIT
+- remark-rehype
+	- version: 11.1.0
+	- license: MIT
+- space-separated-tokens
+	- version: 2.0.2
+	- license: MIT
+- striptags
+	- version: 3.2.0
+	- license: MIT
+- style-loader
+	- version: 4.0.0
+	- license: MIT
+- style-to-object
+	- version: 0.4.4
+	- license: MIT
+- tabbable
+	- version: 6.2.0
+	- license: MIT
+- trim-lines
+	- version: 3.0.1
+	- license: MIT
+- trough
+	- version: 2.2.0
+	- license: MIT
+- unified
+	- version: 11.0.5
+	- license: MIT
+- unist-builder
+	- version: 4.0.0
+	- license: MIT
+- unist-util-is
+	- version: 6.0.0
+	- license: MIT
+- unist-util-position
+	- version: 5.0.0
+	- license: MIT
+- unist-util-stringify-position
+	- version: 4.0.0
+	- license: MIT
+- unist-util-visit-parents
+	- version: 6.0.1
+	- license: MIT
+- unist-util-visit
+	- version: 5.0.0
+	- license: MIT
+- vfile-message
+	- version: 4.0.2
+	- license: MIT
+- vfile
+	- version: 6.0.2
+	- license: MIT
+- vue-router
+	- version: 3.6.5
+	- license: MIT
+- vue
+	- version: 2.7.16
+	- license: MIT
+- web-namespaces
+	- version: 2.0.1
+	- license: MIT
+- zwitch
+	- version: 2.0.4
+	- license: MIT
--- a/dist/7462-7462.js
+++ b/dist/7462-7462.js
--- a/dist/7462-7462.js.license
+++ b/dist/7462-7462.js.license
@ -362,6 +362,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
--- a/dist/7462-7462.js.map
+++ b/dist/7462-7462.js.map
--- a/dist/8057-8057.js.license
+++ b/dist/8057-8057.js.license
@ -362,6 +362,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
--- a/dist/comments-comments-app.js
+++ b/dist/comments-comments-app.js
--- a/dist/comments-comments-app.js.license
+++ b/dist/comments-comments-app.js.license
@ -362,6 +362,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
--- a/dist/comments-comments-app.js.map
+++ b/dist/comments-comments-app.js.map
--- a/dist/comments-comments-tab.js
+++ b/dist/comments-comments-tab.js
--- a/dist/comments-comments-tab.js.map
+++ b/dist/comments-comments-tab.js.map
--- a/dist/core-common.js
+++ b/dist/core-common.js
--- a/dist/core-common.js.map
+++ b/dist/core-common.js.map
--- a/dist/core-main.js
+++ b/dist/core-main.js
--- a/dist/core-main.js.map
+++ b/dist/core-main.js.map
--- a/dist/files-settings-personal.js
+++ b/dist/files-settings-personal.js
--- a/dist/files-settings-personal.js.map
+++ b/dist/files-settings-personal.js.map
--- a/dist/files_sharing-personal-settings.js
+++ b/dist/files_sharing-personal-settings.js
--- a/dist/files_sharing-personal-settings.js.map
+++ b/dist/files_sharing-personal-settings.js.map
--- a/dist/settings-vue-settings-admin-basic-settings.js
+++ b/dist/settings-vue-settings-admin-basic-settings.js
--- a/dist/settings-vue-settings-admin-basic-settings.js.map
+++ b/dist/settings-vue-settings-admin-basic-settings.js.map
--- a/dist/settings-vue-settings-personal-password.js
+++ b/dist/settings-vue-settings-personal-password.js
--- a/dist/settings-vue-settings-personal-password.js.map
+++ b/dist/settings-vue-settings-personal-password.js.map
				`@ -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(40935),t=i(73933),d=i(34301)}}]);