aboutsummaryrefslogtreecommitdiffstats
path: root/apps/comments/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/comments/src')
-rw-r--r--apps/comments/src/comments-activity-tab.ts6
-rw-r--r--apps/comments/src/components/Comment.vue81
-rw-r--r--apps/comments/src/views/Comments.vue22
3 files changed, 60 insertions, 49 deletions
diff --git a/apps/comments/src/comments-activity-tab.ts b/apps/comments/src/comments-activity-tab.ts
index f092f2b8f5b..77f6c9bca04 100644
--- a/apps/comments/src/comments-activity-tab.ts
+++ b/apps/comments/src/comments-activity-tab.ts
@@ -19,7 +19,7 @@ let ActivityTabPluginInstance
*/
export function registerCommentsPlugins() {
window.OCA.Activity.registerSidebarAction({
- mount: async (el, { context, fileInfo, reload }) => {
+ mount: async (el, { fileInfo, reload }) => {
const pinia = createPinia()
if (!ActivityTabPluginView) {
@@ -29,7 +29,6 @@ export function registerCommentsPlugins() {
}
ActivityTabPluginInstance = new ActivityTabPluginView({
el,
- parent: context,
pinia,
propsData: {
reloadCallback: reload,
@@ -58,10 +57,9 @@ export function registerCommentsPlugins() {
timestamp: moment(comment.props?.creationDateTime).toDate().getTime(),
- mount(element: HTMLElement, { context, reload }) {
+ mount(element: HTMLElement, { reload }) {
this._CommentsViewInstance = new CommentsViewObject({
el: element,
- parent: context,
propsData: {
comment,
resourceId: fileInfo.id,
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index a504f1e4e71..80f035530fb 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -26,7 +26,7 @@
<NcActionButton close-after-click
@click="onEdit">
<template #icon>
- <IconEdit :size="20" />
+ <IconPencilOutline :size="20" />
</template>
{{ t('comments', 'Edit comment') }}
</NcActionButton>
@@ -34,7 +34,7 @@
<NcActionButton close-after-click
@click="onDeleteWithUndo">
<template #icon>
- <IconDelete :size="20" />
+ <IconTrashCanOutline :size="20" />
</template>
{{ t('comments', 'Delete comment') }}
</NcActionButton>
@@ -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>
@@ -106,26 +104,27 @@
import { getCurrentUser } from '@nextcloud/auth'
import { translate as t } from '@nextcloud/l10n'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-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 NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+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 NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import IconClose from 'vue-material-design-icons/Close.vue'
-import IconDelete from 'vue-material-design-icons/Delete.vue'
-import IconEdit from 'vue-material-design-icons/Pencil.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import CommentMixin from '../mixins/CommentMixin.js'
import { mapStores } from 'pinia'
import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
// Dynamic loading
-const NcRichContenteditable = () => import('@nextcloud/vue/dist/Components/NcRichContenteditable.js')
+const NcRichContenteditable = () => import('@nextcloud/vue/components/NcRichContenteditable')
+const NcRichText = () => import('@nextcloud/vue/components/NcRichText')
export default {
name: 'Comment',
@@ -133,8 +132,8 @@ export default {
components: {
IconArrowRight,
IconClose,
- IconDelete,
- IconEdit,
+ IconTrashCanOutline,
+ IconPencilOutline,
NcActionButton,
NcActions,
NcActionSeparator,
@@ -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() {
@@ -351,7 +364,7 @@ $comment-padding: 10px;
&__message {
white-space: pre-wrap;
- word-break: break-word;
+ word-break: normal;
max-height: 70px;
overflow: hidden;
margin-top: -6px;
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 3c30b5af942..657af888a12 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -22,7 +22,7 @@
class="comments__empty"
:name="t('comments', 'No comments yet, start the conversation!')">
<template #icon>
- <MessageReplyTextIcon />
+ <IconMessageReplyTextOutline />
</template>
</NcEmptyContent>
<ul v-else>
@@ -51,12 +51,12 @@
<template v-else-if="error">
<NcEmptyContent class="comments__error" :name="error">
<template #icon>
- <AlertCircleOutlineIcon />
+ <IconAlertCircleOutline />
</template>
</NcEmptyContent>
<NcButton class="comments__retry" @click="getComments">
<template #icon>
- <RefreshIcon />
+ <IconRefresh />
</template>
{{ t('comments', 'Retry') }}
</NcButton>
@@ -70,11 +70,11 @@ import { showError } from '@nextcloud/dialogs'
import { translate as t } from '@nextcloud/l10n'
import { vElementVisibility as elementVisibility } from '@vueuse/components'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
-import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import IconRefresh from 'vue-material-design-icons/Refresh.vue'
+import IconMessageReplyTextOutline from 'vue-material-design-icons/MessageReplyTextOutline.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
import Comment from '../components/Comment.vue'
import CommentView from '../mixins/CommentView'
@@ -89,9 +89,9 @@ export default {
Comment,
NcEmptyContent,
NcButton,
- RefreshIcon,
- MessageReplyTextIcon,
- AlertCircleOutlineIcon,
+ IconRefresh,
+ IconMessageReplyTextOutline,
+ IconAlertCircleOutline,
},
directives: {
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-12 06:35:40 +0000