Skip to content

Commit

Permalink
Fix mention bubbles not rendered in comment editor
Browse files Browse the repository at this point in the history
The NcRichContenteditable requires the "userData" property to be given
to render the mention bubbles. Otherwise after selecting a candidate
mention just "@" followed by the user id is shown in plain text.

To solve that now the data of the candidate mentions is cached whenever
the autocomplete list is shown, and reset once a comment has been sent.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
  • Loading branch information
danxuliu committed Nov 8, 2022
1 parent d65fd72 commit 03b87a3
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
1 change: 1 addition & 0 deletions apps/comments/src/components/Comment.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
<NcRichContenteditable ref="editor"
:auto-complete="autoComplete"
:contenteditable="!loading"
:user-data="userData"
:value="localMessage"
@update:value="updateLocalMessage"
@submit="onSubmit" />
Expand Down
13 changes: 12 additions & 1 deletion apps/comments/src/views/Comments.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
:auto-complete="autoComplete"
:editor="true"
:ressource-id="ressourceId"
:user-data="candidateMentionsData"
class="comments__writer"
@new="onNewComment" />

Expand Down Expand Up @@ -127,6 +128,7 @@ export default {
actorId: getCurrentUser().uid,
key: 'editor',
},
candidateMentionsData: {},
Comment,
}
Expand Down Expand Up @@ -251,7 +253,14 @@ export default {
limit: loadState('comments', 'maxAutoCompleteResults'),
},
})
return callback(results.data.ocs.data)
const candidateMentions = results.data.ocs.data
candidateMentions.forEach(candidateMention => {
this.candidateMentionsData[candidateMention.id] = candidateMention
})
return callback(candidateMentions)
},
/**
Expand All @@ -261,6 +270,8 @@ export default {
*/
onNewComment(comment) {
this.comments.unshift(comment)
// Reset cached candidate mentions
this.candidateMentionsData = {}
},
/**
Expand Down

0 comments on commit 03b87a3

Please sign in to comment.