diff options
author | Julius Härtl <jus@bitgrid.net> | 2022-08-24 12:07:13 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2022-08-25 12:04:53 +0300 |
commit | c7af3297030803cae1a4eb8fadca18fcc937250e (patch) | |
tree | 5f0a55e2c83cf93c0944cda5866d55e1fba80430 | |
parent | e15dc93ec5964c030144dc7b33f48bd8932a9571 (diff) |
Fix parsing of HTML for the mention
Signed-off-by: Julius Härtl <jus@bitgrid.net>
-rw-r--r-- | src/extensions/Mention.js | 12 | ||||
-rw-r--r-- | src/extensions/Mention.vue | 15 |
2 files changed, 12 insertions, 15 deletions
diff --git a/src/extensions/Mention.js b/src/extensions/Mention.js index 408dd6300..39443b1f9 100644 --- a/src/extensions/Mention.js +++ b/src/extensions/Mention.js @@ -3,13 +3,17 @@ import Mention from './Mention.vue' import { VueNodeViewRenderer } from '@tiptap/vue-2' export default TipTapMention.extend({ + parseHTML() { return [ { tag: 'span[data-type="user"]', - getAttrs: element => ((element.getAttribute('data-type') === 'user') - && (element.getAttribute('class') === 'mention') - && null), + getAttrs: element => { + return { + id: element.getAttribute('data-id'), + label: element.innerText ?? element.getAttribute('data-id'), + } + }, priority: 100, }, ] @@ -21,7 +25,7 @@ export default TipTapMention.extend({ toMarkdown(state, node) { state.write(' ') - state.write(`@[${node.attrs.id}](mention://user/${node.attrs.label})`) + state.write(`@[${node.attrs.label}](mention://user/${node.attrs.id})`) state.write(' ') }, }) diff --git a/src/extensions/Mention.vue b/src/extensions/Mention.vue index f6dc57727..bf4370b7e 100644 --- a/src/extensions/Mention.vue +++ b/src/extensions/Mention.vue @@ -1,19 +1,19 @@ <template> <NodeViewWrapper as="span" class="mention" contenteditable="false"> - <UserBubble :user="node.attrs.id" :display-name="username" class="mention-user-bubble"> + <NcUserBubble :user="node.attrs.id" :display-name="username" class="mention-user-bubble"> @{{ username }} - </UserBubble> + </NcUserBubble> </NodeViewWrapper> </template> <script> -import UserBubble from '@nextcloud/vue/dist/Components/UserBubble' +import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble' import { NodeViewWrapper } from '@tiptap/vue-2' export default { name: 'Mention', components: { - UserBubble, + NcUserBubble, NodeViewWrapper, }, props: { @@ -39,11 +39,4 @@ export default { .text-editor__wrapper div.ProseMirror .mention[contenteditable=false] :deep(*) { -webkit-user-modify: read-only !important; } - -.mention-user-bubble /deep/ .user-bubble__content .user-bubble__title { - position: relative !important; - top: -20px !important; - left: -60px !important; - height: 40px; -} </style> |